ES6之新特性

ES6之新特性

let和const

var let const的异同

• 共同点

  都可以声明局部变量和全局变量

• 不同点

  • 变量提升方面
    • var声明的变量有变量提升
    • let声明的变量没有变量提升
    • const声明的变量没有变量提升
  • 变量重复声明方面
    • var声明的变量可以重复声明
    • let声明的变量无法重复声明
    • const声明的变量也无法重复声明（一经声明，无法修改）
  • 作用域方面
    • 在块级作用域中，let声明的变量是局部变量
    • 在块级作用域中，const声明的变量是局部变量
    • 对var没有影响（在全局作用域就是全局变量，在函数作用域就是局部变量）

---

cosnt 用来声明一个只读的常量（一经声明，无法修改）

const a =100;
a = 200; //报错
console.log(a);

解构赋值（数组和对象快捷取值一种方式）

解构赋值一般用于解构数组（伪数组/类数组）和对象

讲究等号左边两边，模式匹配

• 传统的ES5数组取值

var list = ['a', 'b' ,'c'];
var a = list[0];
var b = list[1]; 
var c = 1ist[2];

解构赋值 ES6提供的一种快捷方式（语法糖）

// var list=["a","b","c"]; 
var [a, b, c] = ["a","b","c"];
console.log(a,b,c);

// 只得到a b
var [a, b] = ["a","b","c"];
console.log(a,b);

// 只得到第一个和最后一个
var [a, ,c] = ["a","b","c"];
console.log(a,c);

var arr = [1, [2, [3]], 4];
var [a, b, d] = arr; // b[2,[3]]
var [a ,[b, [c]], d] = arr;
console.log(arr)

数组解构

数组解构之默认值

= ""

... 扩展运算符(Rest)

... 扩展运算符（展开运算符）=>展开数组（伪数组）和对象

解构可以取到具体的值，而展开是一股脑展开

展开运算符的运用

• 数组的深复制（得刻一个与原数组数值相同的新数组，但开辟的地址不一样）
  • 通过新建数组 for遍历
  • 通过数组的相关方法slice(）concat（)
  • 通过展开运算符

• 伪数组转真数组
  • 新建数组for遍历
  • Array.from()
  • 通过展开运算符

• 展开对象=>有限制 展开之后放到新的对象中

  注意：展开后必须放到新对象里

数组解构配合展开运算符

展开运算符在解构赋值中，使用时，必须放在最后方

注意

只能用来解构数组/伪数组/字符串（可遍历的结构）/ 对象

如果解构true,100,underfined 会报错

不能解构数字

不能解构布尔值

---

对象解构

ES6对象

传统的ES5对象和变量配合

ES6对象简写 (当对象中的属性名和变量名相同可以进行简写，除此之外函数也可以简写）

ES6对象解构

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；

而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

对应属性名解构

解构时用新的变量赋值

解构时自定义变量名

对象解构的默认值

对象解构配合扩展运算符（Reset）

用于排除b

函数的默认值函数的参数解构

es5的函数默认值

es6函数参数的默认值

函数的参数解构 （传入的参数必须是数组/伪数组/字符串 （可以遍历的数据））

数组解构

变量的默认值

参数的默认值

函数的参数解构之对象解构

传入的数据必须是对象

参数的默认值

变量的默认值

函数的参数解构配合扩展运算符

箭头函数（快捷写函数的一种方法）

箭头函数（函数的简写方法用法和普通函数相似this指向有些区别）

普通函数改箭头函数的步骤

• 把普通函数改为匿名函数（所有的箭头函数都是匿名函数）
• 把关键词function去掉，在()后加一个箭头=>

细节

• 如果函数的形式参数，只有一个，包裹形参的()可以省略

  • 如果没有参数，不能省略

    

  • 者要对参数进行函数的参数解构，不能省略

• 关于return值

  如果函数的执行语句只有一条，且该语句为return语句时，{}和return都可以省略

  

箭头函数this指向问题

• 箭头函数的this指向

• 没有自己的this指向，它的this依赖于箭头函数所在的作用域（父作用域）中的this（简单来说，箭头函数中遇到this，向父级跳一层）

数组和字符串的方法

数组的方法

find 遍历数组 返回元素

• 接收一个回调函数，回调函数中返回一个条件，把满足条件的第一个元素返回
• 如果没有满足条件的元素，则返回underfined

findIndex 返回下标

• 接收一个回调函数，回调函数中返回一个条件，把满足条件的第一个元素的下标返回
• 如果没有满足条件的元素，则返回-1

fill 使用给定值，填充一个数组

• 返回修改后的原数组
• 影响原数组

注意

• fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
• [startIndex,endIndex) 包含起始下标，不包含终止下标

flat() “拉平”多维数组

• 用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响
• 默认只展开一层

拉开2层

要想拉平n层，则传入n

flatMap() 返回数组并拉平

• flat和map组合形式
• 先对数组进行map操作，再将返回的新数组拉平

数组实例的entries(），keys()和 values（）

返回的都是一个遍历器对象

keys()是对键名（下标）的遍历

values()是对键值（元素）的遍历

entries()是对键对（包含下标和元素的数组）的遍历

可配合解构

遍历器

遍历器（Iterator)就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制

任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）

Iterator的作用有三个：

• 为各种数据结构，提供一个统一的、简便的访问接口
• 使得数据结构的成员能够按某种次序排列
• ES6创造了一种新的遍历命令for…of循环，Iterator 接口主要供for…of消费

arguments对象有可以使用遍历器

Map和Set

set 结构

注意

在set结构中，认为NaN和NaN相同的，是同一个

在set结构中，两个对象是不相等的，引用不同的空间

Set结构的特征 ：成员都是唯一的

类似数组，但是成员的值都是唯一的

set结构的方法

add() 向set结构中添加一个成员（元素）

size属性 返回set结构中成员的个数

delete() 删除set结构中的成员（元素）

clear() 清空set结构中的成员

has() 判断set结构中，是否含有某个成员

典型运用数组去重

• 方法一 创建一个set结构，遍历数组将每一个元素添加到set中

• 方法2 构造函数Set，可以直接接收一个数组，返回对应的set结构

注意：set不能通过下标取值，必须通过遍历器取值

set转数组

• ... 展开运算符

var arr = [...set];
console.log(arr);

• Array.from()

var arr = Array.from(set);
console.log(arr);

set的遍历操作

由于Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。

• set.keys()

for (var key of set.keys(){
	console.1og(key);   
}

• set.values()

for (var key of set.values(){
	console.1og(key);   
}

• set.entries()

for (var key of set.entries()(){
	console.1og(key);   
}

• forEach()

set.forEach((item,index)=>{ 		  
    console.log(item,index);
})

map结构

传统对象的缺点

传统上，只能用字符串当作键

前面的object是类型，后面是字符串

map结构，类似于对象，也是键值对的集合，键名可以是各种类型

var m = new Map()；
console.log(m);

map结构的方法

set()方法 设置键名key对应的键值为value

m.set("name","honor");
m.set(1,100);
m.set(true,true);
m.set(null,null);
console.log(m);

get方法 根据键名key查找对应的键值

var res = m.get(null);
console.log(res);

size属性 返回map结构成员的个数

delete() 根据键名，删除某个键

clear() 清空map结构的所有成员

has() 判断map结构中是否含有某个键

map配合二维数组快速生成map结构

map转数组

• 展开运算符...

• Array.from()

map的遍历

Map结构原生提供三个遍历器生成函数和一个遍历方法

• keys()：返回键名的遍历器
• values()：返回键值的遍历器
• entries()：返回所有成员的遍历器
• forEach()：遍历Map的所有成员
  • 是反过来的，键值 键名