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中,我们可以自己创建类。详见实例。
- ⭐️⭐️
constructor
js自带构造器,用于构造需要的类的属性。 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
是迭代器专用,循环到的时候,会依次返回一个valuereturn
是直接全部返回,无视循环
简单迭代生成类(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
- 箭头函数
- 嵌入字符串