ES6学习笔记

ES2015/ES6特性

历史：

• 如何更好的了解ECMAScript
• 从2015年的ES6开始，ECMA开始使用年份来命名，所以ES2015===ES6
• ES6(ES2015)之后，是ES2016(没大变化)，ES2017（async await）

新特性

let（1.0）⭐️习惯用

• 作用域更严谨
• 绝不会跳出作用域（if/函数/闭包）
• 不允许在同个闭包内重复定义同一个变量
• 尽量代替var

const（定义常量）（2.0）⭐️习惯用

• 无法改变常量本身，但可以改变常量内容

如定义数组后，可以改变数组内内容:(array[0]=x)但是无法改变数组本身:array=[1,2,3]

• 尽量代替var

Symbol新类型（4.0）

• es6全新的原始类型，与String(“hello”)类似（字符串）
• 每个symbol内部有唯一的id，所以使用symbol定义的值就算内容一样，实际也不相等。
• 用法：（4.1）

解构赋值（变量赋值新方式）

• 给数组、对象赋值，都可以多重同时赋值(5.0)
• 可以使用函数结果来赋值。**let**[num1,num2] = fun1()
• 综合用法都汇总在（5.0）

数组循环for-of

• 使用for-of来更简洁高效的使用循环（ES6.for-of直接针对数组，ES5.for-in针对对象）如果不关心循环对象的其他属性，则使用for-of更加直接。

var list=[1,2,3];
for(let n of list){
	console.log(n)//1,2,3
}

函数的参数默认值⭐️常用

• 在定义参数时就设置好默认值（如果后面没有传参，则引用默认值）function test2(name=‘xyf’){}

可变 长参数（8.0）

• 定义函数式，可以将参数指定为可变数组
• ...agrs表示不定长的参数在传参时会根据给的长度自由变化。

箭头函数⭐️⭐️习惯用

• 基本上是省略了function、return这些词
• 例子1：var f = () => 5;等同于：

var f = function(){
rentun 5;
}

---

• 例子2：var sum = (sum1,sum2)=>num1+num2等同于：

var sum = function(sum1,sum2){
	return sum1+sum2;
}

---

• 例子3：var array = [1, 2, 3];
  • 传统写法：

array.forEach(function(v) {
    console.log(v);
});

- ES6箭头函数：

array.forEach(v => console.log(v))

---

• 注意点：函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。（this在箭头函数中是静态的）
• 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

基本对象定义

• 简易的js脚本对象使用方式（10.0）⭐️好用

类定义class⭐️⭐️⭐️重要（11.0）

• 类是什么？就是我们通常new出来的东西(对象)，比如new Vue、new Date等等。在es6中，我们可以自己创建类。详见实例。
• ⭐️⭐️constructorjs自带构造器，用于构造需要的类的属性。
• static类(class)通过 static 关键字定义静态方法，静态方法调用直接在类上进行，不能在类的实例上调用。

setter/getter(11.1)

• get something(){ return this._something }//获取对象属性，然后进行操作
• set something(val){ this._something = val }//将something的值传给自定义属性

类的继承（11.2）⭐️

• 使用class son extends father来让son继承father所有的方法；
• 使用super(属性名)来让子类继承父类的构造器中相应的属性

对象的循环（迭代）(11.3)

• 使用for of循环一切类型:)
• 熟悉了map()

制作一个可循环（迭代）的对象（11.4）下接11.6⭐️

• 使用Symbol.iterator方法在class中创建迭代器
• 迭代器可以让对象中一个属性的所有值实现for of循环

简单迭代生成器

• 使用function* {}制作迭代器，使用yield '数据'来返回数据。

yield与return区别：

• yield是迭代器专用，循环到的时候，会依次返回一个value
• return是直接全部返回，无视循环

简单迭代生成类（11.6）⭐️

• 将简单迭代生成器与迭代类中的Symbol.iterator结合。

模块化设计(11.7)

• 建立模块、调用模块功能
• 在es6原生的语言中使用export和import进行输出和引入。但是按照规范来写了之后，在node中却跑不起来。总体来说这里的模块化设计与node的模块是一个道理。

类模块设计(11.8)

• 将自定义的类class传出，用法与平时的模块化相同。

---

新方法

• 筛选：todos.filter(todo=>todo>10)在todos数组中筛选出大于10的值。
• 进制转换：num.toString(x)：将数字num转换成x进制
• ⭐️嵌入字符串：使用返单引号（数字1左边的键）包裹，可以通过${变量}来直接引用变量的值（3.0、3.1）
• startsWith
• endsWith

---

完结！

重点：

• 自定义类CLASS
• let、const
• 箭头函数
• 嵌入字符串