持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情

一、解构赋值

解构赋值包含数组的、对象的、字符串的、布尔值的、函数的，它的主要作用就是为了帮助我们简化代码。减少赋值语句的重复使用，提高可阅读性，使代码更加简洁。

1、对象的解构赋值

1. 对象的基本解构，讲究的是key的一一对应 和顺序无关

// 1.普通写法
   const obj = {
       foo: "1",
       hoo: "2"
     }
      const {
        foo: a,
        hoo: b
    } = obj;
    console.log(a, b) //1 2
    
 // 2.简写
   const {
       foo,
       hoo
    } = obj;
    console.log(foo, hoo) //1 2

2. 对象解构赋值设置默认值

  const obj = {
        foo: "1",
        hoo: "2",
        hobby: ["A", "B", "C"]
       }
    const {
        foo,
        hoo,
        aoo = 3,
       hobby: [a, b, c]
    } = obj;
    console.log(foo, hoo, aoo,a,b,c) //1 2 3 A B C

3. 对象解构的时候也可以使用rest参数

         const obj = {
             name: "lucky",
             age: 18,
             sex: "nan"
         }

         const {
             name,
         } = obj;
         console.log(name, rest) //lucky {age:18,sex:nan}

4. 拓展:解构出log方法

     const {
        log
    } = console;
    log("哈哈哈") //哈哈哈

2、数组的解构赋值

1. 基本写法

     ///以前写法
    let arr = [1,2,3]
    arr[0] = 1
    arr[1] = 2
    arr[2] = 3
    
    //解构赋值写法
    let [a,b,c] = arr
    console.log(a,b,c) //1,2,3

2. “模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值

   // 1.嵌套数组匹配
   let [a, [[b], c]] = [1, [[2], 3]]
   console.log(a,b,c) // 1，2,3
   
   // 2.展开运算符匹配
   let [a,...b] = [1,2,3,4,5]
   console.log(a,b) //a:1 b:[2,3,4,5]
   
   // 3.对应匹配,解构不成功返回undefined,...展开运算符返回空数组
   let [a,b,...c] = [1]
   console.log(a,b,c) //1,undefined,[]

3. 携带默认值解构数组

   let [a,b=2] = [1]
   console.log(a,b) //1,2
   
   let [a=true] = []
   console.log(a) //true

4. 运用: 如果想要获取数组的第一个和最后一个值怎么办

    const arr = [1, 2, 3, 4, 5, 6];
    const {
        0: a,
        [arr.length - 1]: b
    } = arr
    console.log(a, b) //1 6

3、函数的结构赋值

1. 基本使用

   function fn() {
            return {
                name: "lucky",
                age: 18
            }
        }
        const {
            name,
            age
        } = fn();
        console.log(name, age) //lucky 18

2. 关于函数的传参时使用

   function fn([x, y, z, w]) {
     console.log(x, y, z, w) //1,2,3,4
     }
    fn([1, 2, 3, 4])

4. 关于字符串的解构赋值

1. 基本使用

   const [a, b, c, d, e] = 'lucky'
   console.log(a,b,c,d,e) //l u c k y

2.拓展: length

   let {length : len} = 'lucky'
   console.log(len) //5
   

5. 关于布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

二、set数据解构

Set类型：成员唯一

• size 返回Set的长度
• add 添加某个值，返回 Set 结构本身。
• delete 删除某个值，返回一个布尔值，表示删除是否成功。
• has 返回一个布尔值，表示该值是否为Set的成员
• clear 清除所有成员，没有返回值。
• forEach()：使用回调函数遍历每个成员

let [x, y, z] = new Set(['a', 'b', 'c']);
console.log(x,y,z) //a,b,c

const set = new Set([1, 2, 1, 2, 3, 3, 2, 3, 4, 5, 4, 3, 1])
console.log(set); //{1, 2, 3, 4, 5}
console.log(set.size) //5
console.log(set.add("a")) //[1,2,3,4,5,a]
console.log(set.delete(3)) //true 里边跟的是值,不是下标,返回值是删除成功或失败 
console.log(set.has(3)) //false

set.forEach((item, index) => {
        console.log(item) //1,2,3,4,5
    })
    console.log(set.clear()) //undefined
    console.log(set) //Set(0)
    
//数组去重
const arr = [1, 2, 1, 2, 3, 3, 2, 3, 4, 5, 4, 3, 1]
const re = [...new Set(arr)]
console.log(re) //[1,2,3,4,5]

//字符串去重
const str = "abcddcasgrer";
console.log([...new Set([...str])].join("")) //abcdsgre

三、扩展运算符

1. 展开数组

     const arr = [1, 2, 3, 4, 5];
     console.log(...arr) //1 2 3 4 5
     const arr2 = [1, ...arr]
     console.log(arr2) //[1, 1, 2, 3, 4, 5]

2. 复制数组 浅复制

    const arr = [1, 2, [3, 4]]
    const arr2 = [...arr]
    console.log(arr, arr2)
    console.log(arr === arr2) //false
    console.log(arr[2] === arr2[2]) //true

3. 合并数组(浅层次的)

   const arr1 = [1, 2, 3]
   const arr2 = [2, 2, 2]
   const arr3 = [...arr1, ...arr2] //[1, 2, 3, 2, 2, 2]
   console.log(arr3)

4. 也可以展开字符串

    console.log([..."abcde"]) //['a', 'b', 'c', 'd', 'e']

好了，以上就是本篇文章的分享，感谢阅读！