ES6常用的语法总结

青旅半醒 2022-05-13 05:14 410阅读 0赞

**1、let 和 const**  
相同点：不存在变量提升，不能重复声明，在当前块内有效 。  
不同点：let可以重复赋值，const不能再赋值。  
(关于const：const声明时必须初始化赋值，不能重复赋值的意思是声明变量指向的那个内存地址所保存的数据不得改动。简单数据类型(数字、字符串、布尔值)的值就保存在变量指向的那个内存地址，因此值不可改变，而复杂数据类型(主要是对象和数组)保存的只是一个指向实际数据的指针，因此对象的内容可以改变)

--------------------

**2、字符串新增的方法**

(1) 字符串模版：

// 支持字符串换行
    let str1 = `<div> <span></span> <span>`
    // 支持字符串插入变量值
    let str2 = `aaa ${str1} bbb`

(2) includes(str, index)  
检测字符串中是否含有指定文本，返回true或false

const str1 = 'a1b2c3d4'
    str1.includes('c3') // true
    str1.includes('e')  // false

(3) startsWith(str, index)/endsWith(str, index)  
检测是否以指定字符串开始/结束，返回true或false

const str1 = 'a1b2c3d4'
    str1.startsWith('c3')     // true
    str1.startsWith('c3', 6)  // false

--------------------

**3、函数**  
(1) 默认参数  
定义函数时给参数设置默认值，如果调用函数时没有传参数，则用默认值

function fun1 (a=12, b='ssa') { 
        return a + b
    }
    fun1()       // '12ssa'
    fun1(3, 10)  // 13

(2)箭头函数  
普通函数的简写模式(与普通函数有一定的差异)

fun1 (a, b) => {
        return  a + b
    } // 当只有1个参数，并且返回值只有一行时，可以省略括号和return
    fun1 a => a+5

箭头函数与普通函数的区别：  
\-> 普通函数：  
函数内部this指向调用者

*  当作为全局函数被调用时，this指向全局对象
 *  当作为对象中的方法被调用时，this指向该对象
 *  当作为构造函数时，this指向构造函数new出来的对象

同时还可以通过call，apply，bind的调用方式改变this的指向

\-> 箭头函数  
箭头函数没有this (箭头函数中，this属于词法作用域，直接由上下文确定，对于普通函数中指向不定的this，箭头函数中处理this无疑更加简单)，因此：

*  箭头函数没有arguments (可以用rest参数替代)
 *  箭头函数没有super
 *  箭头函数不能改变this的指向
 *  箭头函数没有new.target绑定
 *  箭头函数没有原型，不能使用new
 *  不支持重复的命名参数

// 数组排序
    const arr = [4, 15, 5, 7, 24]
    const s = arr.sort((a, b) => a - b)

(3)尾调的用优化  
尾调用是指在函数return的时候调用一个新的函数，由于尾调用的实现需要存储到内存中，在一个循环体中，如果存在函数的尾调用，可能会导致内存爆满或溢出。  
ES6中，引擎会帮你做好尾调用的优化工作，你不需要自己优化，但需要满足下面3个要求：

1)、函数不是闭包  
2)、尾调用是函数最后一条语句  
3)、尾调用结果作为函数返回

尾调用实际用途——*递归函数优化*  
在ES5时代，我们不推荐使用递归，因为递归会影响性能。  
但是有了尾调用优化之后，递归函数的性能有了提升。

//新型尾优化写法
    "use strict"
    function a(n, p = 1) { 
      if(n <= 1) {
        return 1 * p
      }
      let s = n * p
      return a(n - 1, s)
    }
    //求 1 x 2 x 3的阶乘
    let sum = a(3)
    console.log(sum) // 6

--------------------

**4、数组**  
ES6数组新增的方法: find()、findIndex()、fill()、copyWithin()  
(1) find()：传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索。

const arr = [1, "2", 3, 3, "2"]
    arr.find(n => typeof n === "number") // 1

(2) findIndex()：传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它的下标，终止搜索。

const arr = [1, "2", 3, 3, "2"]
    arr.findIndex(n => typeof n === "number") // 0

(3) fill()：用新元素替换掉数组内的元素，可以指定替换下标范围。（对原数组修改）

arr.fill(value, start, end)

let a = [1,2,3,4,5]
    a.fill('a', 2)   // a = [1,2,'a','a','a']
    let b = [1,2,3,4,5]
    b.fill('x', 1,3)  // b = [1,'x','x',4, 5]

(4) copyWithin()：选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制。也可以指定要复制的元素范围。

arr.copyWithin(target, start, end)

const arr = [1, 2, 3, 4, 5]
    console.log(arr.copyWithin(3)) // [1,2,3,1,2] 从下标为3的元素开始，复制数组，所以4, 5被替换成1, 2
    
    const arr1 = [1, 2, 3, 4, 5]
    console.log(arr1.copyWithin(3, 1)) // [1,2,3,2,3] 从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，所以4, 5被替换成2, 3
    
    const arr2 = [1, 2, 3, 4, 5]
    console.log(arr2.copyWithin(3, 1, 2)) // [1,2,3,2,5] 从下标为3的元素开始，复制数组，指定复制的第一个元素下标为1，结束位置为2，所以4被替换成2

--------------------

**5、对象方法Object.assign()**  
方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。  
(如果对象有存在同样的属性，后面对象的属性覆盖前面的)

Object.assign(target, ...sources)

const obj1 = {a: 1 ,b: 1 ,c: 1}
    const obj2 = {c: 2 ,d: 2}
    const obj3 = {c: 3 ,e: 3}
    objRe1 = Object.assign(o1, o2) // => {a: 1, b: 1, c: 2, d: 2}
    objRe2 = Object.assign(o2, o1) // => {c: 1, d: 2, a: 1, b: 1}
    objRe3 = Object.assign(o1, o2, o3) // => {a: 1, b: 1, c: 3, d: 2, e:3}

--------------------

**6、 Map 和 Set**  
Set：  
Set与Arrar一样都是存储多值的容器，两者可以互相转换，但是在使用场景上有区别：  
\- Set是有序列表，值不可重复（可以利用这个特性实现对一个数组的去重）；  
\- Set的has比Array的IndexOf方法效率更好；  
\- Set通过delete方法删除某个值，而Array只能通过splice(Set删除方法更好)；  
***Set的操作方法：***

let set1 = new Set()            // 创建一个Set
        // Set => Array
    let arr1 = Array.from(set1)     // Set => Array
    let arr2 = [...set1]            // Set => Array
        // Array => Set
    let set1 = new Set(arr1)
        // 先将Set转为数组，用数组的方法操作完成后，再转回为Set
    let set1 = new Set([...set1].map((x) => x = x * 2)) let set1 = new Set([...set1].filter((x) => x > 2)) set1.constructor === Set // 实例属性（继承自Set） // 操作方法 set1.size() // 获取长度 set1.add(1) // 添加 set1.delete(1) // 删除 set1.has(1) // 判断是否包含这个值 set1.clear() // 清空所有值 // 获取用于遍历的成员方法(Set的遍历顺序就是插入顺序) set.keys() // 返回键名的遍历器 set.values() // 返回键值得遍历器 set.entries() // 返回键值对的遍历器 set.forEach() // 循环遍历每个值(和Array的方法一致) for (let key of set.keys()) { } for (let val of set.values()) {} for (let entry of set.entries()) {}

Map：  
Map集合常被用来获取已存的信息，与Object类似：  
\- Map是值-值 ; Object是字符串  
\- Map的键是任意类型 ; Object键为string类型  
\- Map.size可以获取尺寸 ; 手动计算Object尺寸  
\- Map的排序是插入顺序 ; Object不是  
\- Object有原型，所以映射中有一些缺省的键。可以理解为Map=Object.create(null)  
***Map的操作方法：***

let map1 = new Map()
        // 实例属性(继承自Map)
    map1.constructor === Map
    map1.size
    // 操作方法
    map1.set(1,2)
    map1.get(1)
    map1.delete(1)
    map1.has(1)
    map1.clear()
    // 遍历方法
    map1.keys()
    map1.values()
    map1.entries()
    map1.forEach()
    // Map和数组的转换
    map1 = new Map([['key','val'],[2,1]]) // 要求双成员数组
    let arr1 = [...map1]
    // 值得注意的是Map的键是跟内存绑定的
    map1.set([1], 's')
    map1.get([1])
    let arr1 = [1]
    let arr2 = [1]
    map1.set(arr1, 's')
    map1.get(arr1)
    map1.set(arr2, 's')
    map1.get(arr2)

--------------------

**7、迭代器**  
(1) entries() 返回迭代器：返回键值对

//数组
    const arr = ['a', 'b', 'c'];
    for(let v of arr.entries()) {
      console.log(v)
    }
    // [0, 'a'] [1, 'b'] [2, 'c']
    
    //Set
    const arr = new Set(['a', 'b', 'c']);
    for(let v of arr.entries()) {
      console.log(v)
    }
    // ['a', 'a'] ['b', 'b'] ['c', 'c']
    
    //Map
    const arr = new Map();
    arr.set('a', 'a1');
    arr.set('b', 'b1');
    for(let v of arr.entries()) {
      console.log(v)
    }
    // ['a', 'a1'] ['b', 'b1']

(2) values() 返回迭代器：返回键值对的value

//数组
    const arr = ['a', 'b', 'c'];
    for(let v of arr.values()) {
      console.log(v)
    }
    //'a' 'b' 'c'
    
    //Set
    const arr = new Set(['a', 'b', 'c']);
    for(let v of arr.values()) {
      console.log(v)
    }
    // 'a' 'b' 'c'
    
    //Map
    const arr = new Map();
    arr.set('a', 'a1');
    arr.set('b', 'b1');
    for(let v of arr.values()) {
      console.log(v)
    }
    // 'a1' 'b1'

(3) keys() 返回迭代器：返回键值对的key

//数组
    const arr = ['a', 'b', 'c'];
    for(let v of arr.keys()) {
      console.log(v)
    }
    // 0 1 2
    
    //Set
    const arr = new Set(['a', 'b', 'c']);
    for(let v of arr.keys()) {
      console.log(v)
    }
    // 'a' 'b' 'c'
    
    //Map
    const arr = new Map();
    arr.set('a', 'a1');
    arr.set('b', 'b1');
    for(let v of arr.keys()) {
      console.log(v)
    }
    // 'a' 'b'

虽然上面列举了3种内建的迭代器方法，但是不同集合的类型还有自己默认的迭代器，在for of中，数组和Set的默认迭代器是values()，Map的默认迭代器是entries()。  
for of循环解构

对象本身不支持迭代，但是我们可以自己添加一个生成器，返回一个key，value的迭代器，然后使用for of循环解构key和value。

const obj = {
      a: 1,
      b: 2,
      *[Symbol.iterator]() {
        for(let i in obj) {
          yield [i, obj[i]]
        }
      }
    }
    for(let [key, value] of obj) {
      console.log(key, value)
    }
    // 'a' 1, 'b' 2

字符串迭代器

const str = 'abc';
    for(let v of str) {
      console.log(v)
    }
    // 'a' 'b' 'c'

来自：沉静地闪光  
链接：[https://segmentfault.com/a/1190000016068235][https_segmentfault.com_a_1190000016068235]

[https_segmentfault.com_a_1190000016068235]: https://segmentfault.com/a/1190000016068235