es6（二）——常用es6说明

ES6的系列文章目录

文章目录

ES6的系列文章目录
一、变量的结构赋值
- 1.数组的结构赋值
- 2.对象的结构赋值
二、模板字符串
三、扩展运算符
- 1.字符串的使用
- 2.数组的使用
四、箭头函数
总结

一、变量的结构赋值

1.数组的结构赋值

const listArr = ['张三', 18, '男', '地球人'];
const [name, age, sex, address] = listArr
console.log(name); // 张三
console.log(age); // 18
console.log(sex); // 男
console.log(address); // 地球人
1
2
3
4
5
6

在这里插入图片描述

2.对象的结构赋值

// 2：对象的解构赋值
const listobj = {
    name: '张三', 
    age: 18, 
    sex: '男', 
    address: '地球人'
 };
 const {name, age, sex, address} = listobj
 console.log(name); // 张三
 console.log(age); // 18
 console.log(sex); // 男
 console.log(address); // 地球人
1
2
3
4
5
6
7
8
9
10
11
12

在这里插入图片描述

二、模板字符串

const userName = '张三';
const age = 18;
 console.log('我是'+ userName + '，我今年' + age + '岁了。'); // es5
 console.log(`我是${userName}，我今年${age}岁了。`); // es6的模板字符串
1
2
3
4

在这里插入图片描述

三、扩展运算符

1.字符串的使用

const userName = 'zhagnsan';
console.log(...userName); // z h a g n s a n
1
2

在这里插入图片描述

2.数组的使用

<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        const userName = ['张三', '李四', '王五'];
        const userName2 = ['赵六', '沈七'];
        
        // 1： 数组的合并
        const hebing = [...userName, ...userName2];
        console.log(hebing);

        // 2: 数组的克隆
        const kelong = [...hebing];
        console.log(kelong);

        // 3: 将伪数组 (arguments) 转成真数组
        const getDivList = document.querySelectorAll('div');
        const divList = [...getDivList];
        console.log(divList);
    </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

四、箭头函数

1.普通函数的定义

（1）有关键字function，必须小写。
（2）有函数名：一遍由用户自定义，最好见名知意。
（3）函数的参数：'()'不能省略，'参数'是可选的（函数可以有参数，也可以没有参数）。
（4）'{}'：不能省略，表示函数的控制范围。
（5）有return ，默认可以不写。
1
2
3
4
5

2.箭头函数的定义

在普通函数的基础上，省去了关键字function、采用箭头=>来定义函数、同时箭头在括号前面的函数叫做箭头函数。

3.箭头函数的注意点

(1) this指向：是静态的，始终指向函数声明的作用域this的值

可以通过bing、call、apple等方法来改变this指向。（也可以简单理解为箭头函数的上一级作用域，最高为windows）

(2) 箭头函数不能作为构造函数实例化对象

 // 注意：构造函数大写
let User = (name, age)=>{
     this.name = name;
     this.age = age;
 }

 let u1 = new User();
 console.log(u1)
1
2
3
4
5
6
7
8

在这里插入图片描述

(3) 不能使用arguments变量

const fn = () =>{
 console.log(arguments); // 报错
}
fn();
1
2
3
4

在这里插入图片描述

(4) 箭头函数的简写

当有且只有一个函数的时候，可以省略括号()；
当有且只有一行代码体的时候，可以省略大括号{}；如下所示：

let u1 = (name) => {
   console.log(name);
}
u1('张三'); 

let u2 = name => console.log(name);
u2('李四');
1
2
3
4
5
6
7

在这里插入图片描述

总结

结合es6（一）和es6（二）我们可以知道，常用的es6有const和let、解构赋值、模板字符串、扩展运算符、箭头函数。

相关阅读:
2020，XLNet: Generalized Autoregressive Pretraining for Language Understanding
基于SpringBoot的飘香水果购物网站
13.从架构设计角度分析AAC源码-Room源码解析第2篇：RoomCompilerProcessing源码解析
华为机试_HJ81 字符串字符匹配【简单】【收藏！】
函数指针和回调函数的简单应用
华清 c++ day7 9月14
[ flex ] -- 父盒子ul为flex布局时宽度不够，子盒子li无法被撑开的问题(li的宽度被压缩)
【无标题】计算机程序设计艺术习题解答（Excercise 1.2.2-25题）
Parallel 与 ConcurrentBag<T> 这对儿黄金搭档（C#）【并发编程系列_2】
某省大学排名网络爬虫应该怎么做

原文地址：https://blog.csdn.net/weixin_44784401/article/details/133713871