ES6常用知识点笔记

 ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。

因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015(简称ES2015）。虽然浏览器在不断更新，但并不是所有用户的电脑浏览器都支持ES6，所以在使用的过程中建议还是转成es5，保证代码的可执行性。至于转换的方式大家可以用Babel或者Traceur转码器。

1、变量声明
var，let，const
2、字符串拼接
`我说${s2}有丝`
3、解构赋值
主要用于数组、对象的赋值的过程中

function foo() {
  return [1,2,3];
}
let [a, b, c] = foo();
console.log(a, b, c); // 1 2 3
 
function bar() {
  return {
    x: 4,
    y: 5,
    z: 6
  };
}
let {x: x, y: y, z: z} = bar();
console.log(x, y, z); // 4 5 6

4、数组扩展运算符...

...是扩展运算符（spread）。将一个数组转为用逗号分隔的参数序列。（可用于数组和对象）

数组赋值

var arr1 = [1,2,3];
var arr2 = arr1 //不行，浅拷贝,数组是引用数据类型
var arr2 = [...arr1];//深拷贝
const [first, ...rest] = [1, 2, 3, 4, 5];//如果将扩展运算符用于数组解构赋值，只能放在参数的最后一位，否则会报错。

对象赋值

let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}}; // {a: 2, b: 4}后面的属性会覆盖前面的属性

 

5、Map对象
var o = new Map();//键值对的集合
map.set('a','apple');
map.get('a');
map.delete('a');
// 注意for..in是不能循环map对象的，用for..of
for(var name of map){
//循环出来的结果就是:a,apple b,banana 循环key,value
console.log(name);
}
//循环出来的结果就是: a,apple b,banana 循环key,value
for(var [key,value] of map.entries()){
console.log(key,value);
}
//只循环key
for(var key of map.keys()){
console.log(key);
}
//只循环value
for(var val of map.values()){
console.log(val);
}
6、箭头函数

箭头函数是普通函数的简化写法，可以避免this的指向问题。

原来：function(params){ 语句; } 

新写法：(params)=>{语句;}

7、类和继承（class和extends）
8、模块化 export 和 import
9、对象合并
Object.assign(target,sourcel,sourde2);
10、异步同步：async和await promice和then
默认axios是异步请求，使用async和await可以将请求转换成同步模式
then中遇到reject，下面代码不会执行，如果想下面的代码执行，必须用try cache包住。
11、Object.is() 、==、===
==：等同，比较运算符，两边值类型不同的时候，先进行类型转换，再比较；
===：恒等，严格比较运算符，不做类型转换，类型不同就是不等；
Object.is()：是ES6新增的相等的方法，与===的行为基本一致。改进了2处：+0不等于-0，NaN等于自身。
12、set是没有重复值的数组
var oSet = new Set([1,3,7]);
13、for-of和for-in
两种遍历的方式，
for-in遍历获得的是键（数组：序号下标，对象和Map：键名）
for-of 遍历获得的的是值（数组：值，对象和map：键值对）

 

javascript的this问题

长期以来，JavaScript语言的this对象一直是一个令人头痛的问题，在对象方法中使用this，必须非常小心。

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout(function(){
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
 
 var animal = new Animal()
animal.says('hi') //undefined says hi

运行上面的代码会报错，这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行，传统的解决方法有两种：

1、第一种是将this传给self,再用self来指代this

says(say){
      var self = this;
      setTimeout(function(){
          console.log(self.type + ' says ' + say)
      }, 1000)

2、第二种方法是用bind(this),即

says(say){
      setTimeout(function(){
          console.log(this.type + ' says ' + say)
      }.bind(this), 1000)

但现在我们有了箭头函数，就不需要这么麻烦了：

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
 var animal = new Animal()
 animal.says('hi')  //animal says hi

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