当前位置: 首页 > news >正文

ES6 混合 ES5学习记录

基础

数组

let arr = [数据1,数据2,...数组n]

使用数组

数组名[索引]

数组长度

arr.length

操作数组

在这里插入图片描述
arr.push() 尾部添加一个,返回新长度
arr.unshift() 头部添加一个,返回新长度

arr.pop() 删除最后一个,并返回该元素的值
shift 删除第一个单元

数组的尾部有点像栈顶,头部像栈底
所以,push的时候,在尾部添加,pop的时候再尾部删除
shift,unshift操作的就是栈底的东西,也就是头部

数组进阶用法

map() 遍历

    <script>const arr = ['red', 'blue', 'pink']const newArr = arr.map((ele,index) => {console.log(ele);console.log(index);return ele;})console.log(newArr);</script>

map有返回值,forEach没有返回值
map里边的函数,ele,index不是必须要写的
但是只有一个参数的话,看作是element

join()
有点像java中的合并数组

    <script>const arr = ['red', 'blue', 'pink']let a = arr.join();console.log(a);let a1 = arr.join("");console.log(a1);let a2 = arr.join("|");console.log(a2);</script>

在这里插入图片描述
空则就是逗号分隔

forEach
加强版for

被遍历的数组.forEach(function(当前数组元素,当前元素索引号){//函数体
}

element必须写,index可选

filter
array.filter(function(element, index, arr), thisValue)
除了element是必须,其他都是可选

  1. index索引
  2. arr当前数组
  3. thisValue 传this给回调函数,因为作用域不同

filter函数就是遍历加筛选,然后返回一个数组

reduce
累加
数组名.reduce(function(上一次值,当前值){ },起始值)
有初始值,就加上初始值

from
Array().from()
把伪数组转成真数组

块级作用域和函数作用域

{} 花括号里边就是块级作用域
一般为了块级作用域里边的数据不和外边的干扰,里边的变量用let

函数作用域
函数里边的作用域

let const var

前两个是ES6
const 是常量,必须初始化,不能再被赋值
但是引用变量里的值可以修改,毕竟引用变量实际上是地址

let 声明于块级作用域的变量,和var相比有更小的的作用域范围,只在块级作用域里边有效,不会提升到函数作用域

    <script>if(true) {let i = 0;}console.log(i);    </script>

在这里插入图片描述

var是ES5
var 现在一般不使用,毛病多
可以先使用再声明,且可以重复声明

    <script>var i;console.log(i);i = 10;var j = 1;var j = 2;console.log(j);</script>

var声明的变量有点像全局变量,所以在块级作用域里边的时候,会被提升到外部函数作用域

    <script>if(true) {var i = 0;}console.log(i);    </script>

在这里插入图片描述

模版字符串

``
有点类似于php中的字符串,可以写变量,写表达式,写多行字符串

        const name = 'jjking';const msg = `Hello,${name}`;const a = 10;const b = 5;const msg1 = `${a + b}`;const msg2 = `hhellddd`console.log(msg);console.log(msg1);console.log(msg2);

在这里插入图片描述

注意事项

  1. 要输出 `反引号 得用 \
  2. 换行会被保留 直接写 \n
  3. 可以嵌套模版字符串
  4. 兼容性可能不好,要兼容低版本浏览器,用插件

箭头函数

ES6引入

(argument1, argument2, ...) => {// 函数体
}

有点像java里边的lambda

返回的如果是一个对象,得加一个括号

    <script>const fun = () => ({name:'jjking'});console.log(fun());</script>

特点

  1. 没有this,继承父级作用域的this
  2. 没有arguments对象
  3. 没有Constructor,无法new fun()
  4. 没有prototype

箭头函数和普通函数的转换

  • 只有一个参数,可以省略括号
  • 只有一行的话,可以省略return,和{}

类似于java中的lambda

this指向

全局作用域的this
严格模式下,this是undefined
非严格,浏览器是window,node.js是global对象

一般函数this
指向的是自己

箭头函数的this
指向的父类的作用域

不适合箭头函数的场景

  • 构造函数
  • 需要this获取自身对象
  • 需要使用arguments

解构赋值

数组的解构赋值

按照索引位置进行赋值

// 基本用法
const [a, b, c] = [1, 2, 3];
console.log(a); // 输出: 1
console.log(b); // 输出: 2
console.log(c); // 输出: 3// 使用默认值
const [x, y, z = 0] = [4, 5];
console.log(x); // 输出: 4
console.log(y); // 输出: 5
console.log(z); // 输出: 0(默认值)

把右边的值,一个一个赋值给左边,左边的可以有默认值

函数的解构赋值

按照属性名字进行赋值

// 基本用法
const {name, age} = {name: "Alice", age: 20};
console.log(name); // 输出: "Alice"
console.log(age); // 输出: 20// 使用别名
const {name: personName, age: personAge} = {name: "Bob", age: 25};
console.log(personName); // 输出: "Bob"
console.log(personAge); // 输出: 25// 使用默认值
const {firstName = "Unknown", lastName = "Unknown"} = {firstName: "Charlie"};
console.log(firstName); // 输出: "Charlie"
console.log(lastName); // 输出: "Unknown"(默认值)

注意

  • 对于已经声明的变量进行解构赋值,必须在圆括号里边进行
let x, y;// 错误的写法:解析为代码块
{x, y} = {x: 1, y: 2};// 正确的写法:圆括号中进行解构赋值
({x, y} = {x: 1, y: 2});console.log(x,y); // 输出: 1 2

js会把{} 看做是代码块,所以会有歧义

其他的解构赋值

字符串

const [a, b, c] = 'abc';
console.log(a); // 输出: 'a'
console.log(b); // 输出: 'b'
console.log(c); // 输出: 'c'

数值和布尔值的解构赋值:会先将数值和布尔值转换为对应的包装对象类型(Number、Boolean),然后再进行解构赋值。

const {toString: numToString} = 123;
console.log(numToString === Number.prototype.toString); // 输出: trueconst {valueOf: boolValueOf} = true;
console.log(boolValueOf === Boolean.prototype.valueOf); // 输出: true

undefined 和 null 的解构赋值:在解构赋值时,如果源值是 undefined 或者 null,则会使用默认值

const [x = 0, y] = [undefined, 2];
console.log(x); // 输出: 0(默认值)
console.log(y); // 输出: 2const {z = 'default'} = {z: null};
console.log(z); // 输出: null(原始值)

相关文章:

ES6 混合 ES5学习记录

基础 数组 let arr [数据1&#xff0c;数据2&#xff0c;...数组n] 使用数组 数组名[索引] 数组长度 arr.length 操作数组 arr.push() 尾部添加一个,返回新长度 arr.unshift() 头部添加一个,返回新长度 arr.pop() 删除最后一个,并返回该元素的值 shift 删除第一个单元…...

HTTP 状态码大全

常见状态码 200 OK # 客户端请求成功 400 Bad Request # 客户端请求有语法错误 不能被服务器所理解 401 Unauthorized # 请求未经授权 这个状态代码必须和WWW- Authenticate 报头域一起使用 403 Forbidden # 服务器收到请求但是拒绝提供服务 404 Not Found # 请求资源不存…...

Redis学习(13)| Redisson 看门狗机制深度解析

文章目录 摘要1. 引言2. 看门狗的工作原理2.1 自动续期2.2 防止意外释放2.3 合理配置 3. 应用场景4. 最佳实践4.1 设置合理的lockWatchdogTimeout4.2 避免死锁4.3 监控和日志 5. 实现方式6. 使用示例7. 结论 摘要 Redisson 是一个用于 Redis 的 Java 客户端&#xff0c;它提供…...

【开源大屏】玩转开源积木BI,从0到1设计一个大屏

积木 BI 重磅推出免费大屏设计器&#xff01;功能超强大&#xff0c;操作超流畅&#xff0c;体验超酷炫。快来体验一下吧。 让我们一起来看一下如何从0到1设计一个大屏。 一、积木BI大屏介绍 积木BI可视化数据大屏 是一站式数据可视化展示平台&#xff0c;旨在帮助用户快速通…...

基于PCRLB的CMIMO雷达资源调度方法(MATLAB实现)

集中式多输入多输出CMIMO雷达作为一种新体制雷达&#xff0c;能够实现对多个目标的同时多波束探测&#xff0c;在多目标跟踪领域得到了广泛运用。自从2006年学者Haykin提出认知雷达理论&#xff0c;雷达资源分配问题就成为一个有实际应用价值的热点研究内容。本文基于目标跟踪的…...

PAT--1035 插入与归并

题目描述 根据维基百科的定义&#xff1a; 插入排序是迭代算法&#xff0c;逐一获得输入数据&#xff0c;逐步产生有序的输出序列。每步迭代中&#xff0c;算法从输入序列中取出一元素&#xff0c;将之插入有序序列中正确的位置。如此迭代直到全部元素有序。 归并排序进行如…...

Ubuntu20.04.6编译OpenWRT23.05.5错误

在Ubuntu20.04.6编译OpenWRT23.05.5时&#xff0c;会出现如下提示&#xff1a; fatal error: asm/types.h: No such file or directory 如果我们执行如下命令&#xff1a; sudo ln -s /usr/include/asm-generic /usr/include/asm 此时再次编译&#xff0c;会有如下提示&…...

一文说清flink从编码到部署上线

引言:目前flink的文章比较多,但一般都关注某一特定方面,很少有一个文章,从一个简单的例子入手,说清楚从编码、构建、部署全流程是怎么样的。所以编写本文,自己做个记录备查同时跟大家分享一下。本文以简单的mysql cdc为例展开说明。 环境说明:MySQL:5.7;flink:1.14.0…...

【5G】5G Physical Layer物理层(一)

5G多址接入和物理层与长期演进&#xff08;LTE&#xff09;存在一些差异。在下行方向&#xff0c;5G与LTE相似&#xff0c;依旧采用正交频分多址&#xff08;OFDMA&#xff09;。而在上行方向&#xff0c;5G采用了OFDMA和单载波频分多址&#xff08;SC-FDMA&#xff09;&#x…...

GauHuman阅读笔记【3D Human Modelling】

笔记目录 1. 基本信息2. 理解(个人初步理解,随时更改)3. 精读SummaryResearch Objective(s)Background / Problem StatementMethod(s)EvaluationConclusionReferences1. 基本信息 题目:GauHuman: Articulated Gaussian Splatting from Monocular Human Videos时间:2023.12…...

qemu安装arm64架构银河麒麟

qemu虚拟化软件&#xff0c;可以在一个平台上模拟另一个硬件平台&#xff0c;可以支持多种处理器架构。 一、安装 安装教程&#xff1a;https://blog.csdn.net/qq_36035382/article/details/125308044 下载链接&#xff1a;https://qemu.weilnetz.de/w64/2024/ 我下载的是 …...

在Elasticsearch (ES) 中,integer 和 integer_range的区别

在Elasticsearch (ES) 中,integer 和 integer_range 是两种不同的字段类型,它们用于存储和查询不同类型的数据。 Integer: integer 类型是用于存储32位整数值的简单数据类型。这个类型的字段适合用来表示单一的整数数值,例如用户的年龄、商品的数量等。支持标准的数值操作,…...

Playwright中Page类的方法

导航和页面操作 goto(url: str, **kwargs: Any): 导航到一个URL。 reload(**kwargs: Any): 重新加载当前页面。 go_back(**kwargs: Any): 导航到会话历史记录中的前一个页面。 go_forward(**kwargs: Any): 导航到会话历史记录中的下一个页面。 set_default_navigation_tim…...

硬链接方式重建mysql大表

硬链接方式重建mysql大表 操作步骤 选择数据库 select datadir; 进入数据文件目录 cd /data/mysql/mydata/testdb 创建硬连接 ln test_trans_msg_xx.ibd test_service_trans_msg_xx.ibd.bak ll test_trans_msg_xx* 进库删除表 DROP TABLE test_trans_msg_xx; 重建表 CREATE T…...

GPIO在ZYNQ7000中的结构和相关寄存器解析

GPIO MASK DATA LSW和 MASK DATA MSW LSW和MSW分别是LSW (Least Significant Word)和MSW (Most Significant Word)。 因为DATA是u32,所以如果寄存器的基址是XGPIOPS_DATA_LSW_OFFSET&#xff0c;那么32位就能同时让高16位的MASK DATA MSW]31:16和 MASK DATA LSW的bit7同时为…...

Qt Xlsx安装教程

Qt Xlsx安装教程 安装perl 如果没有安装perl&#xff0c;请参考perl Window安装教程 下载QtXlsxWriter源码 下载地址 ming32-make编译32 lib库 C:\Qt\Qt5.12.12\5.12.12\mingw73_32>d: D:\>cd D:\Code\QtXlsxWriter-master\QtXlsxWriter-master D:\Code\QtXlsxWrit…...

Certimate自动化SSL证书部署至IIS服务器

前言&#xff1a;笔者上一篇内容已经部署好了Certimate开源系统&#xff0c;于是开始搭建部署至Linux和Windows服务器&#xff0c;Linux服务器十分的顺利&#xff0c;申请证书-部署证书很快的完成了&#xff0c;但是部署至Windows Server的IIS服务时&#xff0c;遇到一些阻碍&a…...

【中工开发者】鸿蒙商城实战项目(启动页和引导页)

创建一个空项目 先创建一个新的项目选择第一个&#xff0c;然后点击finish 接下来为项目写一个名字&#xff0c;然后点击finish。 把index页面的代码改成下面代码块的代码&#xff0c;就能产生下面的效果 Entry Component struct Index {build() {Column(){Blank()Column(){…...

跟李笑来学美式俚语(Most Common American Idioms): Part 63

Most Common American Idioms: Part 63 前言 本文是学习李笑来的Most Common American Idioms这本书的学习笔记&#xff0c;自用。 Github仓库链接&#xff1a;https://github.com/xiaolai/most-common-american-idioms 使用方法: 直接下载下来&#xff08;或者clone到本地…...

scala中如何解决乘机排名相关的问题

任务目标&#xff1a; 1.计算每个同学的总分和平均分 2.按总分排名&#xff0c;取前三名 3.按单科排名&#xff0c;取前三名 好的&#xff0c;我们可以用Scala来完成这个任务。下面是一个简单的示例代码&#xff0c;它将演示如何实现这些功能&#xff1a; // 假设我们有一个…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...