变量的解构赋值,数组解构/对象解构/字符串解构/函数解构

目录

• • 1.什么是解构
  • 2.数组解构
  • 3.对象解构赋值
  • 4.字符串解构
  • 5.函数参数的解构赋值
  • 6.用途

1.什么是解构

ES6中，按照一定的模式，从数组或对象中提取值，对变量进行赋值。这个过程叫做解构赋值。

2.数组解构

const arr = ["诺手", "蝎子", "劫", "EZ", "女坦"];
     let nuo = arr[0];
     console.log(nuo);//诺手
    //ES6---------------------------
  /  let [nuo, lailai, jie, ez, f] = arr;或
  let [nuo,lailai,jie,ez,f] = ["诺手","蝎子","劫","EZ","女坦"];
  /  console.log(nuo);诺手

本质上，这种写法属于“模式匹配”。只要赋值号两边的模式相同，左边的变量就会被赋予对应的值。

let [a,[b,c]] = [1,[2,3]];
console.log(b);//2
let [a,,b] = [1,2,3];
console.log(b);//3

不完全解构(赋值号两边不是完全相等的。)

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

解构失败时，变量的值为undefined。

let [a,b] = [1];
console.log(a);//1
console.log(b);//undefined

3.对象解构赋值

const obj = {
    name:"亚索",
    skill:"hasakei"
}
let {name,skill} = obj;
console.log(name);//亚索

变量名与属性名相同，才能取到正确的值。

如果想要自定义变量名，则用：进行修改。

 const obj = {
         name: "亚索",
         skill: "hasakei"
     }
     var { name:yi, skill:er } = obj;
     console.log(yi);//亚索*/

方法解构

 var obj = {
         r: function () {
             console.log("狂风绝息斩");
         },
         e: function () {
             console.log("e去不复返");
         }
     }
     const { r, e } = obj;
     r();//狂风绝息斩
     e();//e去不复返
   /---方法解构自定义名
     var { r: yi, e: er } = obj;
     yi();//狂风绝息斩
     er();//e去不复返*/

注意点:

let x;
{x} = {x:1};

以上代码是错误写法。{x}前面如果没有let const的变量声明的关键字，则js会将其视为代码块。
如果需要提前声明变量，则需要将解构语句用小括号包裹起来；。

let x;
({x} = {x:1});
 console.log(x);//1

数组本质也是特殊的对象，也可以对数组进行对象属性的解构。

 const arr = ["诺手", "蝎子", "劫", "EZ", "女坦"];
     var { length, 0: first, 4: last } = arr;
     console.log(length);//5
     console.log(first);//诺手
     console.log(last);//女坦

数组的本来我们用的方式

 const arr = ["诺手", "蝎子", "劫", "EZ", "女坦"];
    var [yi ,er] = arr;
    console.log(arr.length);//5
    console.log(yi);//诺手

4.字符串解构

const str = 'hello';
let [a, b, c, d, e] = str;
console.log(a);//h
let { length } = str;
console.log(length);//5

类数组的对象都有一个length属性，我们可以对这个属性进行解构赋值。

5.函数参数的解构赋值

  function add([x, y]) {
        return x + y;
    }
    let sum = add([1, 2]);
    console.log(sum);//3

以上案例，函数add的参数表面上一个数组，但是在传入参数的那一刻，数组参数会被解构成变量x和与y.

6.用途

6.1 交换变量的值

let a = 1;
let b = 2;
/*原来写法 let tmp = a;
 a = b;
 b = tmp;8*/
[a,b] = [b,a];
 console.log(a);/2

6.2 从函数中返回多个值

<script>
    //从函数中返回多个值
    function fn() {
        return [1, 2, 3];
    }
    let [a, b, c] = fn();
    console.log(b);//2
   //-----------------------------
    function fn2() {
        return {
            name: "yasuo",
            age: "25"
        }
    }
    let { name:ui, age } = fn2();
    console.log(ui);//yasuo
</script>

6.3 函数参数的定义(也叫传参)

function fn({a,b,c}){
    console.log(a);/1
    console.log(b);/2
    console.log(c);/3
}
fn({c:3,b:2,a:1})