ES6新特性总结-白红宇

ECMAScript6 又叫ES2015,简称ES6

一. let和const

let
- let定义变量不可以再次定义,可以从新赋值
- 具有块级作用域
- 没有变量提升,必须先定义在使用
- let声明的变量不能被window调用,是独立的

const
- const定义常量,是不可变的,一旦定义,不能修改其值
- 初始化常量时,必须给初始值
- 具有块级作用域
- 没有变量提升,必须先定义在使用
- const声明的常量也是独立的,不能被window调用

关键字	变量提升	块级作用域	初始值	更改值	通过window调用
var	√	x	-	Yes	Yes
let	x	√	-	Yes	No
const	x	√	Yes	No	No

二. 解构赋值

数组的解构

从数组中提取值,对变量进行赋值,方便获取数组中的某些项

// 1.变量和值一一对应let arr = [1, 2, 3];let [a, b, c] = arr;console.log(a,b,c);   // 1 2 3复制代码

// 2. 变量多,值少let arr = [1, 5, 8];let [a, b, c, d] = arr;console.log(a, b, c, d); // 1 5 8 undefined复制代码

// 3. 变量少,值多let arr = [5, 9, 10, 8, 3, 2];let [a, b] = arr;console.log(a, b);  // 5, 9复制代码

// 4.按需取值let arr = [5, 9, 10, 8, 3, 2];let [, , a, , b] = arr; // 不需要用变量接收的值，用空位占位console.log(a, b); // 10, 3 复制代码

// 5.剩余值let arr = [5, 9, 10, 8, 3, 2];let [a, b, ...c] = arr; // ...c 接收剩余的其他值，得到的c是一个数组console.log(a, b, c); // 结果：// a = 5, // b = 9, // c = [10, 8, 3, 2]复制代码

// 6.复杂的情况,只要符合模式.即可解构let arr = ['zhangsan', 18, ['175cm', '65kg']];let [, , [a, b]] = arr;console.log(a, b); // 175cm 65kg复制代码

对象的解构

从对象中提取值,对变量进行赋值,方便解析对象中的某些属性的值

// 1. 变量名和属性名一样let { foo, bar } = {foo: 'aaa', bar: 'bbb'};console.log(foo, bar); // aaa, bbblet {a, c} = {a: 'hello', b: 'world'};console.log(a, c); // hello, undefined复制代码

// 2. 通过 :来更改变量名let {a, b:c} = {a: 'hello', b: 'world'};console.log(a, c); // hello, world复制代码

// 3. 变量名和属性名一致即可获取到值,不需要一一对应let {b} = {a: 'hello', b: 'world'};console.log(b); // world复制代码

// 4. 剩余值let obj = {name:'橘右京', age:20, gender:'男'};let {name, ...a} = obj;console.log(name, a);  // name = zs   a = {age: 20, gender: "男"};复制代码

// 5. 复杂情况,只要符合模式,即可解构let obj = {name: '不知火舞',age: 22,dog: {    name: '娜可露露',    age: 13    }};let {dog: {name, age}} = obj;console.log(name, age); // 娜可露露 13复制代码

实际开发应用中

// 假设服务器上的获取的数据如下let res = {    data: ['a', 'b', 'c'],    meta: {        code: 200,        msg: '获取数据成功'    }}// 如何获取到 code 和 msglet { meta: { code, msg } } = res;console.log(code, msg); // 200, 获取数据成功复制代码

三. 函数

箭头函数的特点:
- 箭头函数内部的this指向外部作用域中的this,箭头函数没有自己的this
- 箭头函数中内部没有arguments
- 箭头函数不能作为构造函数

函数参数的默认值

// ES5 中给参数设置默认值的变通做法function fn(x, y) {    y = y || 'world';    console.log(x, y);}fn(1)// ES6 中给函数设置默认值function fn(x, y = 'world') {    console.log(x, y);}fn(2)fn(2,3)复制代码

rest参数

剩余参数,以...修饰最后一个参数,把多余的参数放到一个数组中

// 参数很多，不确定多少个，可以使用剩余参数function fn(...values) {    console.log(values); // [6, 1, 100, 9, 10]}// 调用console.log(fn(6, 1, 100, 9, 10));复制代码

rest参数只能是最后一个参数

四. 内置对象的扩展

Array的扩展
- 扩展运算符(...可以把数组中的每一项展开)
```
// 合并两个数组let arr1 = [1, 2];let arr2 = [3, 4];let arr3 = [...arr1, ...arr2];console.log(arr3); // [1, 2, 3, 4]复制代码
```
- Array.from()
  - 把伪数组转换成数组
  - 伪数组必须有length属性,没有length得到一个空数组
  - 转换后的数组长度根据伪数组的length决定的
```
let fakeArr = {    0: 'a',    1: 'b',    2: 'c',    length: 3};let arr = Array.from(fakeArr);console.log(arr); // ['a', 'b', 'c']复制代码
```
- 数组实例find() findIndex():
  - find和findIndex方法,会遍历传递进来的数组
  - 回调函数有三个参数,分别表示数组的值,索引及整个数组
  - 回调函数中return的是一个条件，find和findIndex方法的返回值就是满足这个条件的第一个元素或索引
  - find 找到数组中第一个满足条件的成员并返回该成员，如果找不到返回undefined
  - findIndex 找到数组中第一个满足条件的成员并返回该成员的索引，如果找不到返回 -1
- 数组实例includes()
  - 判断数组是否包含某个值,返回true/false
  - 参数1为查找的内容
  - 参数2表示开始查找的位置

String的扩展
- 模板字符串
  - 使用反引号``
  - 变量在模板字符串中使用${name}来表示
- includes(str, [position]) 返回布尔值,是否找到参数字符串
- startsWidth(str, [position]) 返回布尔值,表示参数字符串是否在原字符串的头部或指定位置
- endsWith(str, [position]) 表示参数字符串是否在原字符串的尾部或指定位置
- repeat() 返回一个新字符串,表示将原字符串重复n次

Set
- ES6中新增的内置对象.类似于数组,但成员的值都是唯一的没有重复的值(可以用来去重): 方式一:[...new Set(arr)] 方式二: Array.from(new Set(arr))

五. class类

class之间可以通过extends关键字实现继承,

class和传统构造函数有什么区别
- 在语法上更加贴合面向对象的写法
- class实现继承更加易读,易理解

六. Promise

Promise解决了回调地狱的问题,回调地狱指一个函数中有太多的异步操作,会产生大量的嵌套,难以阅读和维护.

Promise会让代码变得更容易维护,像写同步代码一样,业务逻辑性更易懂

七. 数组foreach和map的区别?

foreach直接修改原数组,map是修改之后返回一个新修改过的数组,原数组不变.