（34）2021-02-24（ES6变量的解构赋值）

2021-02-24 20:32:13 阅读：102 来源： 互联网

标签：02 24 arr console log 解构 ------------------------------------------- let

ES6变量的解构赋值

一、变量的解构赋值

1.什么是解构

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

2.数组解构赋值

//ES6之前
const arr = ["诺手","蝎子","劫","EZ","女坦"];
let nuo = arr[0];
let lailai = arr[1];
let jie = arr[2];
let ez = arr[3];
let f = arr[4];
//ES6
let [nuo,lailai,jie,ez,f] = ["诺手","蝎子","劫","EZ","女坦"];

let [a,[b,c]] = [1,[2,3]];
let [a,,b] = [1,2,3];

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

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

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

不完全解构

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

赋值号两边不是完全相等的。

3.对象解构赋值

const obj = {
    name:"亚索",
    skill:"hasakei"
}
let {name,skill} = obj;

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

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

let {name:n,skill} = obj;
console.log(n);

方法解构

var obj = {
    r:function(){
    	console.log("狂风绝息斩");
    },
    e:function(){
    	console.log("e去不复返");
    }
}
const {r,e} = obj;
r();//狂风绝息斩
e();//e去不复返

注意点

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

以上代码是错误写法。{x}前面如果没有let const的变量声明的关键字，则js会将其视为代码块。

如果需要提前声明变量，则需要将解构语句用小括号包裹起来；。

let x;
({x} = {x:1});//1

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

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

4.字符串解构

const str = 'hello';
let [a,b,c,d,e] = 'hello';
let {length} = 'hello';//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;

//ES6
[a,b] = [b,a];

6.2 从函数中返回多个值

function fn(){
	return [1,2,3];
}
let [a,b,c] = fn();
function fn2(){
    return {
        name:"yasuo",
        age:"25"
    }
}
let {name,age} = fn2();

6.3 函数参数的定义

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

二、例子

        // 1-------------------------------------------
        // const arr = ["诺手", "蝎子", "劫", "EZ", "女坦"];
        // let nuo = arr[0];
        // let lailai = arr[1];
        // let jie = arr[2];
        // let ez = arr[3];
        // let f = arr[4];

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

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

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

        //4 -------------------------------------------
        // let [a] = 1; //报错。1 is not iterable

        //5 -------------------------------------------
        // let [a] = [1];

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

        //7 -------------------------------------------
        // var obj = {
        //     r: function() {
        //         console.log("狂风绝息斩");
        //     },
        //     e: function() {
        //         console.log("e去不复返");
        //     }
        // }
        // const {
        //     r,
        //     e
        // } = obj;
        // r();//狂风绝息斩
        // e();//e去不复返
        // const {
        //     log
        // } = console;
        // log(log);// ƒ log() { [native code] },即log方法

        //8 -------------------------------------------
        // const obj = {
        //     p: [
        //         "hello", {
        //             y: "world"
        //         }
        //     ]
        // }
        // let {
        //     p: [a, {
        //         y: b
        //     }]
        // } = obj;
        // console.log(a); //hello
        // console.log(b); //world

        //8 -------------------------------------------
        // const obj = {
        //     a: {
        //         b: {
        //             c: 1,
        //             d: 2
        //         }
        //     }
        // }
        // let {
        //     a: {
        //         b: {
        //             c,
        //             d
        //         }
        //     }
        // } = obj;
        // console.log(c); //1
        // console.log(d); //2

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

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

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

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

        //13 -------------------------------------------
        // let a = 1;
        // let b = 2;
        // 之前
        // //let tmp = a;
        // //a = b;
        // //b = tmp;

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

        //14 -------------------------------------------
        // function fn() {
        //     return [1, 2, 3];
        // }
        // let [a, b, c] = fn();
        // console.log(a);//1
        // console.log(b);//2
        // console.log(c);//3

        // function fn2() {
        //     return {
        //         name: "yasuo",
        //         age: "25"
        //     }
        // }
        // let {
        //     name,
        //     age
        // } = fn2();
        // console.log(name);//yasuo
        // console.log(age);//25

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

        //16 -------------------------------------------
        // let jsonData = {
        //     id: 10,
        //     name: "蓝牙耳机",
        //     price: "100"
        // };
        // let {
        //     id,
        //     name,
        //     price
        // } = jsonData;
        // console.log(id, name, price); //10 "蓝牙耳机" "100"

        //-------------------------------------------

标签：02,24,arr,console,log,解构,-------------------------------------------,let
来源： https://blog.csdn.net/weixin_53125613/article/details/114035766

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9