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 '数据'来返回数据。
yieldreturn区别:
  • yield是迭代器专用,循环到的时候,会依次返回一个value
  • return是直接全部返回,无视循环

简单迭代生成类(11.6)⭐️

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

模块化设计(11.7)

  • 建立模块、调用模块功能
  • 在es6原生的语言中使用exportimport进行输出和引入。但是按照规范来写了之后,在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
  • 箭头函数
  • 嵌入字符串

你可能感兴趣的:(前端开发)