ES6新语法

系列文章目录

前端系列文章——传送门
JavaScript系列文章——传送门

---

---

前言

es6是ECMAScript的第6个版本，在2015年发布。也有的人将ECMAScript5之后版本，统称为es6。比起之前的语法，es6有很多新语法，让开发者在操作数据和函数的时候，功能既多，操作又简便。

1、变量

es6中新增了两个类似于var的关键字来定义变量，分别是let和const。

var定义的变量，其实属于window的属性，平常直接输出变量名，是一种简写，完整的写法应该是window.变量名

var a = 10;
console.log(window)

let关键字

测试代码1：

let b = 10;
let b = 20;
console.log(b)

结论：let不允许重复定义变量

测试代码2：

console.log(b)
let b = 3;

结论：let定义的变量没有预解析

测试代码3：

let a = 10;
console.log(window.a)
console.log(window)

测试代码4：

for(let i=0;i<3;i++){
    
}
console.log(i)

结论：let定义的变量会自己创建一个块级作用域，将自己的作用域限制在大括号中。

总结：let是声明变量的关键字
特点：

1. 不允许重复声明
2. 不存在预解析
3. 在大括号中声明的变量只能在大括号中使用，如if、for的大括号中声明的变量

const关键字

• const关键字也是用来定义变量的，具备let的所有特性，另外，const定义的变量的值不能修改。
• 声明的时候必须赋值

2、箭头函数

es6中的箭头函数是用来简写函数的

let fn = function(){
    console.log(111);
}

使用箭头函数简写

let fn = ()=>{console.log(111);}

带参数的写法：

let fn = function(a,b){
    console.log(a+b);
}

使用箭头函数改写

let fn = (a,b)=>{console.log(a+b);}

注意：如果只有一个形参的时候，小括号可以省略：

let fn = function(a){
    console.log(a);
}

使用箭头改写

let fn = a = > {console.log(a);}

注意：如果代码块中只有一行代码，箭头函数可以省略大括号，并将这行代码作为返回值

let fn = function(a){
    return a + 1;
}

箭头函数的写法

let fn = a = > a+1;

例：使用箭头函数定义一个返回m到n范围内的随机数的函数：

let fn = (m,n) => parseInt(Math.random()*(n-m+1))+m;

箭头函数使用注意事项：

1. 箭头函数中的this比较混乱，所以在函数和方法中使用到this的时候，就不要用箭头函数
2. 箭头函数中没有arguments

3、函数默认值

以前的函数不能有默认值，es6的函数中可以定义默认值：

function add(a,b=2){
    return a + b;
}
console.log(add(5));

可以用箭头函数改写：

let add = (a,b=2) => a+b;
console.log(add(5));

4、模板字符串

es6新增了定义字符串的方式，使用反引号

1. 可以换行书写，保持字符串中的换行和空格
2. 模板字符串中可以识别变量，使用美元符大括号：${变量}

5、解构赋值

解析一个数据结构并赋值，可以快速的从对象或数组中取出需要的内容，对象使用大括号，数组使用中括号

5.1、解构对象

之前从对象中取到内容的方式

let obj = {
    name:"张三",
    age:12,
    sex:"男",
}
let name = obj.name;
let age = obj.age;

解构的方式：

let obj = {
    name:"张三",
    age:12,
    sex:"男",
}
let {name} = obj;
/*
表示从obj中获取name属性，并赋值给声明的name变量
*/

使用说明：

1. obj必须是一个对象
2. obj中必须有name属性

还可以一次性解构多个变量：

let obj = {
    name:"张三",
    age:12,
    sex:"男",
}
let {name,age} = obj; // 声明并赋值了两个变量

可以将变量名换成一个别的名字：

let obj = {
    name:"张三",
    age:12,
    sex:"男",
}
let {name:username,age:a} = obj; // 将obj的name属性值赋值给username变量，age属性值赋值给变量a

多级解构：

let obj = {
    name:"张三",
    age:12,
    sex:"男",
    wife:{
        name:"翠花",
        age:11,
    }
}
let {wife} = obj;
let {name} = wife;
// 写为一行
let {wife:{name:wname}} = obj;

5.2、解构数组

let arr = [1,2,3];
let [num1] = arr; // 从数组中拿出第一个元素赋值给num1变量

使用说明：

解构数组的时候是按顺序取出数组中的值，解构一个变量，只能拿到第一个元素

解构多个元素：

let arr = [1,2,3];
let [num1,num2] = arr; // num1 = arr[0]   num2 = arr[1]

多维数组解构：

let arr = [1,2,3,[4,5,6]];
let [a,b,c,[aa,bb]] = arr;
console.log(aa,bb); // 4 5

利用结构交换两个变量的值：

let num1 = 1;
let num2 = 2;
[num2,num1] = [num1,num2]

6、展开运算符

将一个数组展开为多个变量赋值给多个形参

let arr = [1,2,3];
function fn(a,b,c){
    console.log(a,b,c); // 1 2 3
}
fn(...arr);

利用展开运算求数组的最大值

let arr = [5,3,6,9,8,1,7];
let max = Math.max(...arr); 
console.log(max); // 9

利用展开运算合并数组

// 之前的写法
let arr = [1,2,3];
let arr1 = [4,5,6].concat(arr);
// 利用展开运算合并
let arr2 = [4,5,6].concat(...arr);
// 再简化
let arr3 = [4,5,6,...arr]

利用展开运算合并对象：

const obj = {
    name:"Jack",
    age:20,
    sex:"男",
}
const obj1 = {
    ...obj,
    wife:{
        name:"Rose",
        age:18
    }
}
console.log(obj1);

7、合并运算符

将多个实参合并为一个数组

function fn(...arr){
    console.log(arr);
}
fn(1,2,3); // [1,2,3]

箭头函数中没有arguments，可以使用合并运算符来模拟arguments

var fn = (...arr) => {console.log(arr)};
fn(1,2,3); // [1,2,3]

8、对象的简写方式

let name = '张三';
let age = 12;
let obj = {
    name,
    age
}
console.log(obj);

如果对象的属性名和变量名同名，则可以光写属性名

9、Map

map是es6提供的一种对象类型，用于存储键值对。跟object不同的地方在于：

• object键值对：字符串->值
• map键值对：值->值

定义map数据：

var m = new Map()

例：

var obj = {
    sex: '男'
}
var m = new Map([['name', '张三'], [obj, '对象']])
console.log(m);

map的结构使用[]，其中的数据也必须是[]，在里面的[]中第一个为键，第二个为值，如果只有键没有值，默认的值为undefined。

Map的操作方法：

设置键值对：map.set(键, 值)，如果map中已经有了当前指定的键，后面的值会覆盖前面的值。

添加键值对：

var obj = {
    sex: '男'
}
var m = new Map([['name', '张三'], [obj, '对象']])
m.set('age', 12)
console.log(m);

根据键修改值：

var obj = {
    sex: '男'
}
var m = new Map([['name', '张三'], [obj, '对象']])
m.set(obj, '哈哈')
console.log(m);

根据键获取值：map.get(键)。返回获取到的值。如果获取一个map中不存在的键，返回undefined。

var obj = {
    sex: '男'
}
var m = new Map([['name', '张三'], [obj, '对象']])
console.log( m.get(obj) );
console.log( m.get('age') );

删除键值对：map.delete(键)。返回布尔值，代表是否删除成功。删除map中不存在的键，返回false。

var obj = {
    sex: '男'
}
var m = new Map([['name', '张三'], [obj, '对象']])
var bool1 = m.delete('age')
console.log(bool1); // false
var bool2 = m.delete('name')
console.log(bool2); // true
console.log( m );

判断map中是否包含某个键值对：map.has(键)。返回布尔值

var obj = {
    sex: '男'
}
var m = new Map([['name', '张三'], [obj, '对象']])
var bool1 = m.has('name')
console.log(bool1); // true
var bool2 = m.has('age')
console.log(bool2); // false

获取map中键值对的数量：map.size，返回数字，例：

var m = new Map([['name', '张三'], ['sex', '男']])
console.log( m.size ); // 2

清空map中的数据：map.clear()。没有返回值，例：

var m = new Map([['name', '张三'], ['sex', '男']])
m.clear()
console.log(m);

获取所有键的集合：map.keys()，返回一个集合，例：

var m = new Map([['name', '张三'], ['sex', '男']])
console.log( m.keys() );

获取所有值的集合：map.values()，返回一个集合，例：

var m = new Map([['name', '张三'], ['sex', '男']])
console.log(m.values());

遍历map：map.forEach((item, key) => {})，例：

var m = new Map([['name', '张三'], ['sex', '男']])
m.forEach((item, key) => {
    console.log(key, item);
})

10、Set

set是es6新增的一种对象类型，用于存储多个键。也就是说，set数据中不会有重复的数据。

定义语法：new Set([多个数据])。定义语法使用[]，如果[]中重复的数据，会被set去重。

例：

var s = new Set([1,2,3,3])
console.log(s);

数组去重：

var s = new Set([1,1,2,2,2,3,4,2,1])
console.log(s);

操作方法：

给set集合中添加值：set.add(值)。返回添加后的新set。如果添加的数据在set中存在，则添加不进去。例：

var s = new Set([1,2])
var s1 = s.add(3)
console.log(s1, s);

已经存在的元素是添加不进去的：

var s = new Set([1,2])
s.add(2)
console.log(s);

从set中删除元素：set.delete(元素)。返回布尔值，表示是否删除成功。例：

var s = new Set([1,2])
var s1 = s.delete(2)
console.log(s1);
console.log(s);

查看set中数据的长度：set.size，返回数字。例：

var s = new Set([1,2])
console.log(s.size); // 2

判断set中是否有某个数据：set.has(数据)。返回布尔值，例：

var s = new Set([1,2])
var bool = s.has(2)
console.log(bool); // true
var bool1 = s.has(2)
console.log(boo1); // false

清空set中的数据：set.clear()。没有返回值，例：

var s = new Set([1,2])
s.clear()
console.log(s);

遍历set：set.forEach(item => {})。例：

var s = new Set([1,2])
s.forEach(item => {
    console.log(item); // 1 2
})

11、for…of

for in用来遍历键。可以遍历的数据如下：

• 可以遍历object类型，只要类型是object就能遍历，但能遍历的只有可遍历/可枚举的属性，（也就是enumerable属性为true的属性）；
• 可以遍历数组，但遍历出来的下标是字符串，遍历数组的时候会将数组的下标作为键
• 可以遍历字符串，遍历出来的下标也是字符串
• 如果对象的原型中有可遍历的属性，会将原型中的可遍历属性也遍历出来。如果原型中的可遍历属性和对象本身的可遍历属性重名，就只遍历对象本身的属性了。

for of用来遍历值。可以遍历的数据如下：

• 可以遍历数组，遍历出来的是数组中的每个元素
• 可以遍历字符串，遍历出来的是字符串中的每个字符
• 可以遍历set集合。
• 可以遍历Map集合
• 不可以遍历对象