ES6-11最新语法大全

一、ES简介

• ECMAScript，欧洲计算机制造商协会
• ES是一种标准，而JS是ES的一种实现
• 每年的ES版本中都会引入新特性
  
  

二、NRM的安装与使用

• NRM是切换源的工具

2.1安装

• window命令：

 npm install -g nrm

• mac下命令：

sudo npm install -g nrm

2.2 操作指令

• 查看可选源

nrm ls

• 测试源的速度

 nrm test +源名称

• 切换源

nrm use +源名称

• 增加定制源

nrm add 源名  http://ip地址

• 删除源

nrm del+源名

三、let const var

3.1 var 声明

• delete只能删除对象的属性，不能删除变量

• 说明b是属性，不是变量。b是全局变量window的属性

3.2 JS的败笔

• 可以看到 window.a也被打印出来了，如果有很多全局变量，就会造成变量污染
• 为了解决这一败笔，let就诞生了

3.3 let

• 可以看到window.a是undefined,说明let声明的变量不属于顶层对象window
• 不允许重复声明（多次声明同一变量）
• 不存在变量提升
• 暂时性死区（就是防止在声明变量之前去使用变量）
• 具有块级作用域

3.4 const

• 不属于顶层对象window
• 不允许重复命名
• 暂时性死区
• 具有块级作用域
• 不存在变量提升
• 声明常量

四、解构赋值

• 含义：找一定模式，从数组或对象中提取值，对变量进行赋值

4.1 数组结构赋值

4.2 对象解构赋值

• 变量起别名
  

4.3 字符串解构赋值

4.4 应用场景

• 对于有默认值的数组和对象
• 对参数的解构赋值
  
• 对返回值结构赋值
  
• 对json解构
  

五、数组的各种遍历方式

5.1 for

5.2 forEach

• 注意：forEach不支持break和continue关键字
  

5.3 map

• map的返回值是新数组，但不会改变原数组
  

5.4 filter

• 数组过滤 返回符合条件的元素组成新的数组返回
  

5.5 some

• 返回值是布尔值，只要有一个满足要求就返回true
  

5.6 every

5.7 reduce

• 作为一个函数返回的累加器
  
  
  

5.8 for…in

• 一般不用来遍历数组，因为会把原型下的方法也遍历出来

5.9 find

• 返回第一个通过测试的元素
  

5.10 findIndex

• 返回第一个符合条件的元素的下标
  

5.11 for…of

六、数组的扩展

6.1 类数组（伪数组）

• 如下 都是类数组，可以用typeof instanceof Array.isArray来验证

6.2 将伪数组转换成数组

6.2.1 Array.prototype.slice.call()

6.2.2 Array.from()

6.3 构造函数表示数组

• 显然第二种情况和我们想象的不太一样，我们想要的是[3],为了解决这一问题，我们就引入了Array.of

6.4 Array.of()

6.5 copyWithin

6.6 fill

6.7 indexOf和includes

• indexOf不能检测数组中是否有NAN
• NAN==NAN结果是false
  

七、函数的参数

7.1 ES5传参

• 当y有默认值时
  
• 上一步代码有一个问题，当y我们传0时 0===false
• 如果要解决这种问题，需要麻烦的判断
• 所以我们可以用ES6的传参方式来解决这一问题
  

7.2 ES6传参

• ES6解决参数默认值问题
  
• 参数变量是默认声明的
  
  -参数名不允许重复
• 默认值应该放到最后边
• length能获取函数中没有指定默认值的参数的个数
  
• 默认参数作用域问题
  
  
  

八、扩展运算符与rest参数

8.1 扩展运算符

• 把数组或类数组展开成用逗号分隔的值
  
• ES5合并数组
  
• ES6合并数组
  

8.2 rest参数

• 把逗号隔开的值组成一个新的数组
• ES5不定参数求和
  
• ES6不定参数求和
  
  

九、箭头函数

9.1 ES5声明函数

• 第一种会预编译，第二种不会

9.2 ES6箭头函数

• this指向定义时所在的函数的对象，而不是调用时所在的对象
• 不可以当做构造函数
• 不可以使用arguments对象
  

十、对象的的扩展

10.1 属性的简写

• 当属性值与属性相同时，可以这样简写
  

10.2 属性名表达式

10.3 方法的简写形式

• 注意： 对象里定义方法不要写箭头函数，因为this指向问题

10.4 Object.is()

• 判断两个值是否严格相等

与==的区别是：==会进行类型转换，而Object.is不会

与===的区别是：===会认为+0和-0相等，NumberNaN与NaN不相等，而Object.is不会

10.5 Object.assign()

• 对象复制
  
  
• Object.assign()是浅拷贝
• 可以用于对象合并，将源对象的所有可枚举属性复制到对象中（第一个参数是对象，其余都是源对象）

10.6 in

10.6.1 判断对象是否包含某个属性

10.6.2 数组里判断当前下标是否有值

10.7 对象的遍历

十一、深拷贝与浅拷贝

• Object.assign()是浅拷贝，拷贝引用类型时只是把地址指过去而已
• JSON.parse(JSON.stringify(obj))可以实现新拷贝

11.1 手写深拷贝

十二、面向对象与面向过程

• 面向对象就是把物体本身看作是一个对象，再从对象本身具有的功能和方法出发
• 面向过程就是把大象装进冰箱一共分为三步，必须按照这个顺序进行
• JS是基于面向对象的编程语言
• 类（class）是对象（Object）的模板，定义了一组对象共有的方法和属性

十三、ES5中的类与继承

13.1 ES5中的类

• 静态属性直接定义在类上，实例属性定义在构造函数中
  
• 静态方法
• 实例方法都定义在类的原型上
• 静态方法里的this指向的是构造函数
  

13.2 ES5中的继承

13.2.1 构造函数的继承

13.2.2 原型继承

13.2.3 组合继承

十四、ES6的类与继承

14.1 ES6中的类

14.2 ES6的继承

14.3 定义静态属性

• class中目前不支持定义静态属性