Detailed explanation of destructuring assignment in ES6-JS Tutorial-php.cn

Detailed explanation of destructuring assignment in ES6

php中世界最好的语言

Release： 2018-05-19 15:40:48

Original

1853 people have browsed it

This time I will bring you a detailed explanation of the destructuring assignment of ES6. What are the precautions for using the destructuring assignment of ES6?The following is a practical case, let's take a look.

@1 Destructuring assignment of array;

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

Copy after login

In fact, it is very simple to understand the difference between undefined and null: although undefined==null;

, it is still distinguishable. Please refer to the Rhinoceros book Say null is an empty

ObjectPointer

typeof null  ==>object;而undefined可以认为在下面两种情况会出现;

Copy after login

1. Access an item that does not exist in the array;

2.Undefined variable var method;

So: the following two are equivalent;

let[a=true]=[undefined];
let[a=true]=[ ];

Copy after login

It’s not difficult to understand why;

@2 Destructuring assignment of objects;

Unlike arrays, destructuring assignment of objects is According to the key instead of the index;

let {foo,bar}={bar:"liuhf",foo:true};　　　　//跟键的顺序没有关系;

Copy after login

Destructuring assignment of string;

const [a,b,c,d,e,f]="liuhee";
console.log(a,b,c,d,e,f);        // l i u h e e

Copy after login

Regardless of which kind of destructuring assignment, the left and right must correspond;

Operator only takes the "value">

let json = {
        a: &#39;对&#39;,
        b: &#39;象&#39;
    }
    //对象的函数解构;
function fun({ a, b = &#39;jspang&#39; }) {
    console.log(a, b);
}
fun(json);
//数组的函数解构;
let arr = ["liu", "hai"]
function fun1([a, b]) {
    console.log(a, b);
}
fun1(arr);
console.log("------------");
//或者;
function fun2(a, b) {
    console.log(a, b);
}
fun2(...arr);

Copy after login

Believe it or not After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!