ES6 小记

Posted 2020-10-05 刘家三胖

1.let & const

let：相当于var,不同的是没有变量提升，且只在声明的作用域内有效（新增了块级作用域）。

Const: 声明一个静态场量，一旦声明，常量的值就不能改变。

2.String 方法

CodePointAt():  识别字符串，返回十进制码点。

 

String.fromCharCode():  识别并返回16位的UTF-16字符

 

String.fromCharPoint():  识别并返回16/32位的UTF-16字符,与CodePointAt()相反

字符串遍历器接口：for..of..(能识别32位的字符，而传统for 循环不能)

                  Eg: for(let  codePoint  of  “foo”){

                         Console.Log(codePoint)

                      }

                      //”f”

                      //”o”

                      //”o”

 

at():  返回字符串给定位置的字符(能识别32位的字符，而传统charAt()不能)

 

normalize():  Unicode正规化, 将字符的不同表示方法统一为同样的形式

includes()：  返回布尔值，表示是否找到了参数字符串。

startsWith()：  返回布尔值，表示参数字符串是否在源字符串的头部。

endsWith()：  返回布尔值，表示参数字符串是否在源字符串的尾部。

Repeat():  返回一个新字符串，表示将原字符串重复n次,参数为负时报错，为小数是自动取整，所以0~-0.9为0，NaN为0，

3.面向对象

3.1      Class（类）类似于java 通过extends实现继承

Class  A{

  Constructor(){     //构造函数，this指向实例本身

  This.a = “dog”

}

Say(){…}

}

Class  B extends A{

  Constructor(){     //构造函数，this指向实例本身

//super继承父类的this对象，子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象

super()

This.a = “cat”

}

}

ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。

React中用的很多，创建的每个component都是一个继承React.Component的类

4.Arrow function

Class  A{

  Constructor(){

 This.a = “cat”

}

Say(){

    //如果不用箭头函数，settimeout中的this本应该绑在全局变量

    setTimeout( () => {   

    console.log(this.a)

 }, 1000)

}

}

 

自带this,函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象,可以解决很多this指向带来的问题。

实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

 

5.Destructuring(解构)

 let cat = ‘ken‘

let dog = ‘lili‘

let zoo = {cat: cat, dog: dog} //ES5

let zoo = {cat, dog}  //ES6

反过来可以这么写：

let dog = {type: ‘animal‘, many: 2}

let { type, many} = dog

   console.log(type, many)

1. Default  rest

function animal(type = ‘cat‘){

   console.log(type)

}

animal(); //cat

rest:

function animals(...types){

   console.log(types)

}

animals(‘cat‘, ‘dog‘, ‘fish‘) //["cat", "dog", "fish"]

6.import export(es6 module功能)

传统的写法

首先我们回顾下require.js的写法。假设我们有两个js文件: index.js和content.js,现在我们想要在index.js中使用content.js返回的结果，我们要怎么做呢？

首先定义：

//content.js

define(‘content.js‘, function(){

   return ‘A cat‘;

})

然后require：

//index.js

require([‘./content.js‘], function(animal){

   console.log(animal);   //A cat

})

那CommonJS是怎么写的呢？

//index.js

var animal = require(‘./content.js‘)

 

//content.js

module.exports = ‘A cat‘

ES6的写法

//index.js

import animal from ‘./content‘

 

//content.js

export default ‘A cat‘

export命令除了输出变量，还可以输出函数，甚至是类（有没有很眼熟 react的模块基本都是输出类）