Rumah > hujung hadapan web > tutorial js > ES6的解构赋值详解

ES6的解构赋值详解

php中世界最好的语言
Lepaskan: 2018-05-19 15:40:48
asal
1846 orang telah melayarinya

这次给大家带来ES6的解构赋值详解,使用ES6的解构赋值注意事项有哪些,下面就是实战案例,一起来看一下。

 @1数组的解构赋值;

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
Salin selepas log masuk

其实理解undefined与null的区别很简单:虽然 undefined==null;

但是还是可区分的 参照犀牛书说 null 是一个 空对象指针

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

1.访问数组不存在的项;

2.未定义的变量var 方式;

所以:以下两种等价;

let[a=true]=[undefined];
let[a=true]=[ ];
Salin selepas log masuk

就不难理解为什么了;

@2对象的解构赋值;

与数组不同,对象的解构赋值是根据键而不是根据索引;

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

  @3字符串的解构赋值;

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

  不管哪一种解构赋值,必须左右对应;

<下面是对象/数组的函数解构赋值:再次验证了 ...拓展运算符取的是"值"而已>

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);
Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

webpack3.x的entry,output,module解析

Vue2 tab切换选项卡的方法

基础的JavaScript知识总结(十一)对象,包装类

Atas ialah kandungan terperinci ES6的解构赋值详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan