ECMAScript 6 es6 必知知识

• let和const一样，定义的变量在本区域内有效，无法变量提升，同一作用域内不能定义相同的变量名
  不同的是，const定义的时候必须马上赋值
• var声明的变量有提升能力，不管在哪里声明都视为顶部声明，所以如下的’ma’会被’linshu’覆盖,全局变量就是window的属性，window.name

{
  {
    var name = "ma";
    {
      var name = "linshu";
    }
  }
  console.log(name);//linshu
}
console.log(name);//linshu

• 变量会提升，但是函数外部不能访问函数内部的局部变量

function test(){
      var name = 'malinshu'
    }
    console.log('name:'+name)//name:

• let 只在它所在的代码块有效

{
  let a = 10;// 只在它所在的代码块有效
  var b = 1;
}
a // ReferenceError: a is not defined.
b // 1

for (let i = 0; i < 10; i++) {
}
console.log(i);//ReferenceError: i is not defined 计数器i只在for循环体内有效

• 不能重复命名

let name
let name//报错，同作用域内不用有相同let变量

let name
var name//报错，同作用域内不用有与相同let相同的var变量

var name
var name//不报错，后者覆盖前者

• 函数会保留其作用域内的值

let list = []
for(let i=0;i<5;i++){//用let定义
  list[i] = function(){
    console.log(i)
  }
}
list[4]()//4
list[3]()//3

let list = []
for(var i=0;i<5;i++){//用var定义
  list[i] = function(){
    console.log(i)
  }
}
list[4]()//5
list[3]()//5

let [name,age] = ['malinshu',32]
 let [name,[age,tall]] = ['malinshu',[32,43]]//格式一定要一样

let [,,tall] = ['malinshu',,43]
console.log(tall)//43

let [name,age,tall=100] = ['malinshu',32]//默认值

let [name,...other] = ['malinshu',32,4,234,2,23]
console.log(name,other)// malinshu (5) [32, 4, 234, 2, 23]//数组中的其他元素被合并为一个数组后赋值给other变量

let {name,age} = {age:23,name:'lin'}
let {name,age,tall=12} = {age:23,name:'lin'}
console.log(tall)//12,默认值

let obj = {age:23,name:'lin'}
    let {age:myage,name:myname} = obj
    console.log(myname)//别名

let obj = {age:23,name:{firstname:'linshu',lastname:'ma'}}
    let {age,name:{firstname,lastname}} = obj
    console.log(lastname)//注意是lastname ，而不是name.lastname

• 值的交换

let num1 = 14
let num2 = 13
console.log(num1,num2);
[num1,num2] = [num2,num1]//注意这行代码的前一行需要加分号
console.log(num1,num2)//不用像以前那样需要第三个变量

• 参数为数组，可以传入字符串，也可以传入数组

function test([x,y,z]){
      console.log(x,y,z);
    }
    test('abc')//a b c
    test(['ma','lin','shu'])//ma lin shu

• 参数为对象

function test({name,age}){
      console.log(age,name)
    }
    test({age:24,name:'malinshu'})

• 解构出字符串的length属性

let [x,y,z] = 'ABC'
    console.log(x,y,z);//A B C
    let {length:len} = 'ABC'
  console.log(len)//3

• 默认值如果在前面的话，要用undefined来占位

function test(name='malinshu',age){
      console.log(age)
    }
    test(undefined,23)

• 传入不确定多个参数,其他传入的参数被组成数组

function test(name,...other){
      console.log(other)//[23, 232, 23]
    }
    test(undefined,23,232,23)

• 箭头函数返回对象，要用括号包起来

let test = (name,...other)=>({
      name,other
    })
    console.log(test(undefined,23,232,23))//{name: undefined, other: Array(3)}

• 箭头函数传对象，要用括号包起来

let test = ({name,age})=>({
      name,age
    })
    console.log(test({name:'malishu',age:32}))

• 排序

console.log([23,1,54,5,56].sort((a,b)=> a-b));//[1, 5, 23, 54, 56]
    console.log([23,34,1,5,56].sort((a,b)=> b-a));// [56, 34, 23, 5, 1]

• 字符串的方法

let str = 'malinshu'
    console.log(str.includes('ma'));//true
    console.log(str.includes('ma',1));//false ,//从索引1开始查找
    console.log(str.startsWith('ma'));//true
    console.log(str.endsWith('shu'));//true

• 模板字符串,原样输出（包括换行空格等）

let name = 'malinshu'
    let str = `hello,everyone
          myname is 
        ${name}`//变量用${}接收，${1+9}花括号中也接收表达式
    console.log(str)

let flag = false
    let res = `结果：${flag?'是':`${flag?'是不是':'否'}`}`
    console.log(res);//结果：否（花括号中接收变量，如果是字符串要用引号，嵌套模板字符串，内层字符串要用``包起来）

• 原样输出模板字符串中的转义字符

 let str = String.raw `ma\nlinshu`;//注意raw后面不能是一个变量
    console.log(str)//ma\nlinshu

• 再次执行exec方法，就是从上次匹配结束的地方接着匹配

let text = 'ma_lin_shu';
    let pattern = /[a-z]+_/y;
    console.log(pattern.exec(text));
    console.log(JSON.parse(JSON.stringify(pattern.exec(text))));
    console.log(pattern.exec(text));
    console.log(pattern.flags)//y，修饰符

从上面结果可知，exec()的返回结果是个数组，这个数组包含一个元素

• .不能匹配转义字符，加上s修饰符就可以

let text = 'x\nyz';
    let pattern = /x.+yz/;
    console.log(pattern.test(text));//false
    pattern = /x.+yz/s;
    console.log(pattern.test(text));//true

let newpat = new RegExp('x.+yz','g');
    console.log(newpat)///x.+yz/g
    console.log(2**3)//8,2的3次方

• 解构运算符将数组元素拆开

console.log(...[1,2])//1 2
    function test(a,b){
      console.log(a,b)//3 4
    }
    test(...[3,4])

• 特殊对象转为数组

let obj = {
      0:'ma',
      1:'linshu',
      length:2//这个属性是必须的
    }
    console.log(Array.from(obj));//["ma", "linshu"]

• find查找数组中的元素，找到一个即停止查找

let arr = [12,3,4,345,675,67]
    console.log(arr.find((item)=>{
      return item>20
    }));//345

• 替换数组中的元素

let arr = [12,3,4,345,675,67]
    console.log(arr.fill('l',2,3));//[12, 3, "l", 345, 675, 67]
    //fill(替换的目标元素，start，end)包含start，不包含end

• 数组的复制粘贴替换

let arr = [12,3,4,345,675,67]
    console.log(arr.copyWithin(3,4));// [12, 3, 4, 675, 67, 67]
    //copyWithin(开始粘贴位置,开始赋值位置)
    //复制675,67粘贴到345,675的位置

• 键的拼接

let obj = {
      ['user'+'name']:'malinshu',
      ['user'+' Age']:'18',
      's ex':'male'
    }
    console.log(obj.username);
    console.log(obj['username']);
    console.log(obj['user Age']);
    console.log(obj['s ex']);

• 变量键

let username = 'name'
    let obj = {
      [username]:'malinshu',
    }
    console.log(obj[username]);

• 函数名也可以拼接

let obj = {
      ['fun'+'ct'](){
        console.log('function');
      }
    }
    obj.funct()

• 恒等的判断
  
• 合并对象

let obj = {
      name:'ma',
      age:18
    }
    let obj2= {
      name:'linshu'
    }
    console.log(Object.assign(obj,obj2));
    console.log(obj);
    console.log(obj2);

• 设置原型对象（h继承了f，f继承了obj，所以h继承了obj）

let obj = {
      name:'ma',
      age:18
    }
    let obj2 = {}
    Object.setPrototypeOf(obj2,obj);
    console.log(obj2);

将obj设置为obj2的原型

• symbol是独一无二的

let obj = {
      name:'ma',
      name:'linshu'
    }
    console.log(obj);//{name: "linshu"}

let x = Symbol()
    let y = Symbol()
    console.log(x,y)
    let obj = {
      [x]:'ma',
      [y]:'linshu'
    }
    console.log(obj);//{Symbol(): "ma", Symbol(): "linshu"}

• promise

let promise = new Promise((resolve,reject)=>{
      resolve('success')
      // reject('error')
    })
    promise.then((res)=>{
      console.log(res)//success
    },(err)=>{
      console.log(err);//error
      
    })

promise中的resolve和reject就是修改promise状态的作用，一旦执行了resolve()状态即为成功，就会执行then里的成功回调，并将resolve中的参数传递给成功回调的形参；相同地，执行了reject()，状态即被修改为失败，就会执行then中的失败回调，并将reject中的参数传递给失败回调的形参

• 原生ajax
  onreadystatechange会执行4遍，因为状态有5种（01234），改变了4次
  promise的作用就是保存ajax的请求结果，然后在then函数里获取结果
• promise的嵌套，防止回调地狱

new Promise((resolve, reject) => {
      resolve("success");
    })
      .then(res => {
        console.log(res);
        return new Promise(res => {
          console.log("success again");
        });
      })
      .then(res => {//在返回promise后继续在then中获取结果，避免回调地狱
        console.log(res);
      });

1如果没有执行到，那么2自然就是没用的代码（不被执行）

• arguments

function test(){
      for(let i of arguments){
        console.log(i)
      }
    }
    test(1,2,3,'malinshu')

argument是伪数组，因为没有数组的一般方法

• generator可暂停函数，function后面加星号（*）
  

test()创建一个generator对象
每执行一次next，就会执行代码到下一个yield处的代码，然后停止执行，想要继续执行就再次调用next()

• generator的next还可以传参

function* test(){
      console.log('start...')
      let arg = yield 'hello'
      console.log('这是下一个next传的参数值：'+arg)
      console.log('while...');
      yield 'world'
    }
    let generator = test()
    console.log(generator.next());//这个步骤执行到hello的位置
    console.log(generator.next('传参数给上一个yield，作为上一个yield的返回值，并赋值给arg'));//这个步骤执行到world的位置

• 同步请求async await(await后面如果是一个函数，那么这个函数必须返回promise对象，然后result接收到promise对象的resolve()或者reject()函数的参数，一般地，成功调用resolve，失败调用reject，但由开发者决定，成功也可调用resolve)

async function test() {
      let res = await new Promise(resolve => {
        setTimeout(() => {
          resolve("success");
        }, 1000);
      });
      console.log(res, "testing...");//1秒后才执行此代码
    }
    test();

• 类

class Person {
      constructor(name) {
        this.name = name;
      }
    }
    let man = new Person("malinshu");
    console.log(man.name);
    class SingleDog extends Person {
      constructor(name,age) {
        super(name);//调用这个才能继承父类的属性
        this.age = age
      }
    }
    console.log(new SingleDog("单身狗",18));

• 字符串方法

let str = "malinshu";
    console.log(str.includes("in"));
    console.log(str.startsWith("ma"));
    console.log(str.endsWith("shu"));
    console.log(str.repeat(2));

• 数字方法

console.log(Number.isNaN(18));//false 是否数字
    console.log(Number.isInteger('18.0'));//false 是否整数
    console.log(Number.isInteger(18.0));//true 是否整数
    console.log(Number.isInteger(18));//true  是否整数
    console.log(Number.parseInt('18.0'));//18 转为整数
    console.log(Number.parseInt(18.0));//18  转为整数
    console.log(Math.trunc(19.01));//19  去除小数部分

• Array.from将伪数组转为真数组

function test(){
      console.log(arguments);
      let arg = Array.from(arguments)
      console.log(arg)
    }
    test(1,2,3,'malinshu')

• Array.of将多个元素组成数组

let arr = Array.of(1,2,3,'malinshu')
    console.log(arr);
    console.log(Array.of(...[1,2,3]));

• array.find（findIndex与find用法一样）

let arr = Array.of(1,2,3,34)
    let res = arr.find((item,index,arr)=>{
        return item>2
    })
    console.log(res);//3找到匹配的结果后就返回

• 改变原型(将obj1作为obj的原型)

let obj = {}
    let obj1 = {name:'malinshu'}
    obj.__proto__ = obj1
    console.log(obj);

• 深拷贝

let fisrtname = 'linshu'
    let lastname = fisrtname
    lastname = 'ma'
    console.log(fisrtname,lastname)//linshu ma
    let statusone = false
    let statustwo = statusone
    statustwo = true
    console.log(statusone,statustwo);//false true

• 浅拷贝

let fisrtname = {name:'malinshu'}
    let lastname = fisrtname
    lastname.name = 'shu'
    console.log(fisrtname,lastname)//{name: "shu"} {name: "shu"}
    let statusone = [1,2,3]
    let statustwo = statusone
    statustwo[1] = 4
    console.log(statusone,statustwo);//[1, 4, 3] (3) [1, 4, 3]

总结：基本数据类型为深拷贝，对象和数组为浅拷贝

• 对象的深浅拷贝

let firstname = {name:'malinshu'}
    let lastname = Object.assign(firstname)//浅拷贝
    lastname.name = 'shu'
    console.log(firstname,lastname);//{name: "shu"} {name: "shu"}
    
    let name = JSON.parse(JSON.stringify(firstname))//深拷贝
    name.name = '深'
    console.log(firstname,name);//{name: "shu"} {name: "深"}

• 数组的深拷贝(想要浅拷贝就直接赋值)

let arrone = [1,2,3]
    let arrtwo = arrone.concat([4,5])//深拷贝
    arrtwo[1] = 10
    console.log(arrone,arrtwo);//[1, 2, 3] (5) [1, 10, 3, 4, 5]
    
    let arrthree = arrone.slice()//深拷贝
    arrthree[1]='three'
    console.log(arrone,arrthree);//[1, 2, 3] (3) [1, "three", 3]

• slice深拷贝

let strone = 'malinshu'
    let strtwo = strone.slice(2,-3)//slice(start,end)包含start,不包含end
    console.log(strone,strtwo);//malinshu lin
    
    let arrone = [1,2,3]
    let arrtwo = arrone.slice(1,2)
    console.log(arrone,arrtwo);//[1, 2, 3] [2]

    let arrthree = [1,2,3]
    let arrfour = arrthree.slice()//深拷贝
    console.log(arrthree,arrfour);//[1, 2, 3] [1, 2, 3]
    arrfour[1] = 10
    console.log(arrthree,arrfour);//[1, 2, 3] (3) [1, 10, 3]

• set对象（不重复的value集合）

let arr = [1,2,3,4]
    let set = new Set(arr)
    console.log(set);//{1, 2, 3, 4}
    console.log(set.add(5));//{1, 2, 3, 4, 5}
    console.log(set.delete(5));//true
    console.log(set.has(5));//false
    console.log(set.size);//4
    console.log(set.clear());//undefined
    console.log(set);// {}

• map(键不重复key-value集合)

let arr = [['name','malinshu'],[36,'age']]//二维数组，键的数据类型没有做要求
    let map = new Map(arr)
    console.log(map);//{"name" => "malinshu", 36 => "age"}
    console.log(map.set('tall',5));// {"name" => "malinshu", 36 => "age", "tall" => 5}
    console.log(map.get('tall'));//5
    console.log(map.delete('tall'));//true
    console.log(map.has('tall'));//false
    console.log(map.clear());//undefined
    console.log(map);// {}

• 万能遍历器for of，可遍历数组、set、map、字符串、伪数组（map的每个item就是一个键值对组成的数组）