解构赋值的多种Func(remake)

解构赋值的多种Func

好处：

1. 不需要使用临时变量，非常方便

对于数组

1. 数组排序

   let num1 = 30;
   let num2 = 10;
   let num3 = 40;
   let num4 = 20;
   
   [num1, num2, num3, num4] = [num2, num4, num1, num3];
   
   console.log(`第一：${num1}, 第二：${num2}, 第三：${num3}, 第四：${num4}`);
   

2. 取数组中指定位置的值

const arr = ['hi', '你好', '我叫佐伊','你呢','我的新朋友'];

const [,, num3,,num5] = arr;

console.log(`第三：${num3}, 第五名: ${num5}`);

3. 修改值

   const arr = ['hi', '你好', '我叫佐伊','你呢','我的新朋友','你好啊'];
   
   let num3 = '我叫拉克丝';
   let num5 = '我的朋友';
   
   [, , num3, , num5, , num7= ''] = arr;
   
   console.log(`第三名：${num3}, 第五名：${num5}, 第七名：${num7}`);
   

4. 优化

   const arr = ['hi', '你好', '我叫佐伊','你呢','我的新朋友','你好啊'];
   
   const { 2: num3, 4: num5} = arr;
   
   console.log(`第三名：${num3}，第五名：${num5}`);
   

5. 判断

   // 如果数组为空，返回数组为空，如果不为空，返回默认值
   const arr = ['hi', '你好', '我叫佐伊', '你呢', '我的新朋友', '你好啊'];
   
   const [notExist = '数组为空'] = arr;
   
   console.log(notExist)
   

6. 保留剩余

   ！注意：不能先把不定元素放前面，又在后面逐个赋值

   const arr = ['hi', '你好', '我叫佐伊', '你呢', '我的新朋友', '你好啊'];
   
   const [num1, num2, num3, ...restNum] = arr;
   
   console.log(`前三名是：${num1}, ${num2}, ${num3}，不及格的是: ${restNum}`)
   

对象

1. 解构取值

   const obj = {
       id: '1',
       name: 'Coderlan',
       age: 19,
       gender: '男',
       email: '123@qq.com'
   }
   
   const { name: lanName, email: lanEmail } = obj;
   
   console.log(lanName, lanEmail)
   

2. 保留其他剩余。

   const obj = {
       id: '1',
       name: 'Coderlan',
       age: 19,
       gender: '男',
       email: '123@qq.com'
   }
   
   const { id, age, ...restObj} = obj;
   
   console.log(restObj);
   // 类似操作不要id, age 保留其他的
   {name: '', gender: '', email}
   

3. 优雅的foreach

   const arr = [
       { name: '', age: },
       { name: '', age: },
       { name: '', age: },
       { name: '', age: }
   ];
   
   arr.forEach(({name, age}, index)=>{
       console.log(`姓名：${name}, 年龄：${age}`)
   });
   

函数

1. 简单运用

   function getAPI(data) {
   	return [data.name. data.age]
   }
   
   const { lanName. lanAge} = getAPI({name:"Coder"， age: 19})
   
   console.log(lanName, lanAge)
   

2. 字符串

   const str = '你好啊';
   
   const [first, second. third ] = str;
   
   console.log(first, second. third);
   

3. string和foreach

   const arr = ['你好啊', '我的朋友', '我叫佐伊', '昨晚睡得好吗', '你呢'];
   
   arr.forEach(([item], index)=>{
   	console.log(item)
   })
   // 获取每个元素以后在获取字符串的第一个字符
   

4. Map

   let map = new Map();
   
   map.set('name1`, 'nihao');
   map.set('name2', 'hah');
   map.set('name3', 'asd');
   
   for(let [,value] of map) {
   	console.log(value);
   }
   

5. 正则表达式

   const str = '再见了886爱你20'
   
   const arrReg = /(\D+)(\d+)(\D+)(\d+)/.exec(str);
   
   const { 1: bye, 3: loveYou } = arrReg;
   
   console.log(bye, loveYou)