ES6语法

1 let const

let与var 的区别

1. let 允许声明在块级作用域中{ 这里面的let不会受到外部环境污染 }
   只有let声明在循环内（块级作用域）时，每一块对应一个i，不会像var一样全为3
   

2. var 声明的变量只能是全局或者整个函数块的

3. let 不能重复声明，只能被重复赋值

   var a = 1;
   var a = 2;
   
   let a = 1;
   	a = 2;
   

4. let 不会被预解析，也就是说不会像var一样前置声明
   

const 常量

1. 声明时必须赋值
2. 不可重新声明和赋值
3. 块级作用域
4. 不会被预解析

2 解构赋值

1. 对象解构
   

let obj = {
	a:1,
    b:2,
    c:{
        d:{
            e:1,
        }
    }
}

let {a, b, c} = obj
console.log(a, b, c);
let {d} = c;
let {e} = d;
console.log(e);

2. 数组

3. 字符串解构

3 展开运算符...

对象展开

let obj = {
    a:1,
    b:2
}
let obj2 ={
    c:3,
    d:4
}
let obj3 = {...obj};
let obj4 = {...obj, ...obj2};
console.log(obj3, obj4);

数组展开

4 新增 set 与 map对象

set集合 元素不可重复

let arr = [1, 2, 3, 3, 2, 1];
let setA = new Set(arr);
console.log(setA)
console.log(setA.add(4)) // 增加，返回增加后的set
console.log(setA.delete(2))	// 删除
console.log(setA.has(2)) // 判断是否有
console.log(setA.size) // 长度

map 可重复的字典键值对

let arr = [["a", 1], ["b", 2]]

let mapA = new Map(arr);
console.log(mapA)
console.log(mapA.set("c", 3)) // 设置新键值对，返回增加后的map
console.log(mapA.delete("a")) // 删除成功返回true
console.log(mapA.get("b"))	// 通过键拿到值
console.log(mapA.has("c"))	// 
mapA.clear() // 清空
console.log(mapA)

keys values的迭代

5 箭头函数

写法

不写{}默认返回=>后面的内容

let fn = () => 1;
let fn2 = (n) => n+1;
let fn3 = (n) => {
    n+= 2;
    return n;
}
console.log(fn(), fn2(1), fn3(2))

this的指向

普通函数的指向，指向的是绑定事件的元素

箭头函数的指向，指向的是当前块级作用域下的对象

    let fa = document.querySelector('.father');
    let son = document.querySelector('.son');

    son.addEventListener('click', function() {
        console.log("普通函数", this)
    })

    son.addEventListener('click', () => {
        console.log('箭头函数', this)
    })

函数参数

箭头函数没有arguments这个伪数组参数接收复数个参数
而是通过展开运算符接收复数个参数

这里面的args是一个真数组

默认参数设置

直接给形参设置属性，函数内可直接调用

6 数组扩展

元素查找

1. arr.find((item) => { }) 返回数组中第一个满足条件的元素

   let arr = [1,2,3]
   
   arr.find((item) => {
     return item > 1
   })
   2
   

2. findIndex() 用法同上，返回下标
3. includes() 判断数组是否包含某个元素，返回bool值

数组展开

1. arr.flat(level) 展开数组，参数为展开数组中的多少层数组，默认一层，返回一个新数组

   let arr = [
     1,
     2,
     [3,
      4,
      [5, 6]]
     ]
   
   arr.flat()
   

   

   let arr = [
     1,
     2,
     [3,
      4,
      [5, 6]]
     ]
   
   arr.flat(2)
   
   Array(6) [ 1, 2, 3, 4, 5, 6 ]
   

   参数也可以无限大arr.flat(Infinity)，即为展开所有层数组

2. arr.flatMap(function(item){}) 用于遍历二维数组，返回二维数组中的每个元素

   let arr = [
     1,
     2,
     [3,
      4,
      [5, 6]]
     ]
   
   arr.flatMap(function(item) {
       return item;
   })
   

7 新增字符串方法

字符串模板

反斜杠，可换行，可通过${}插入变量

let n = 123;
let str = `
	<div>${n}</div>
`

查找

1. str.includes()

2. str.startsWidth(char, start); 以start下标开始的单词，判断首字母
   str.endtsWidth(char, end); 以end下标为止的单词（不包括end）判断结尾字母

   let str = '123abc';
   
   console.log(str.startsWith('1')) true
   console.log(str.startsWith('2')) false
   console.log(str.startsWith('1', 2)) false
   console.log(str.startsWith('a', 3)) true
   console.log('---------------------------')
   console.log(str.endsWith('c')) true
   console.log(str.endsWith('c', 3)) false
   console.log(str.endsWith('a', 3)) false
   console.log(str.endsWith('a', 4)) true
   

重复

str.repeat(n)
将str重复n次 返回一个新字符串

8 新增对象方法

属性与方法的简洁表示法

1. 可在对象外部赋予对象内部元素属性
2. 直接放函数体到对象内部

let a = 1;
let b = 2;

let obj = {
  a,
  b,
  fn() {
    console.log('对象内方法')
  }
}

console.log(obj.a)
obj.fn();

属性名表达式

给对象内元素命名字符串，通过这个字符串调用对象内部元素，对象内部元素需要加[]

let a = 'attr'
let obj = {
  [a]: 5,
}
console.log(obj.attr);

对象合并

Object.assign({}, obj1, obj2, …)

• 实际上是把第一个参数后面所有的对象加到第一个参数中并返回
• 所以第一个参数最好是个{}空对象用于接收组合的参数集

let obj1 = {
  a:1,
}

let obj2 = {
  b:2,
}

let obj3 = Object.assign({}, obj1, obj2, {c:3})

console.log(obj3)

对象比较

let obj1 = {
  a:1,
}

let obj2 = obj1;

let obj3 = {
  b:2,
}

console.log(Object.is(obj1, obj2)) true 赋址
console.log(Object.is(obj2, obj3)) false，两个地址不同的对象
console.log(Object.is(0, 0))	true
console.log(Object.is(0, -0))	false 相当于 true，-true
console.log(0 === -0) true