您的位置：首页 > 其它

2、变量的解构赋值 —ES6学习笔记

2017-09-02 11:16 344 查看
基本概念

本质上是一种匹配模式，只要等号两边的模式相同，那么左边的变量就可以被赋予对应的值。

解构赋值主要分为：

1 数组的解构赋值

2 对象的解构赋值

3 基本类型的解构赋值

举个例子，比如我们要声明

let a = 1;
let b = 2;
let c = 3;


现在有了解构赋值以后，我们完全可以这样写

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


上面两种声明方式完全是等价的，控制台可以正常的打印出a,b,c的值

1 数组的解构赋值

let [a,[,c]] = [1,[[2],3]];
console.log(a,b,c); //1,2,3
//只要等号两边的模式相同，那么左边的变量就可以被赋予对应的值。


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


let [x] = [];
console.log(x); //let x; 解构不成功，那么它的值默认就是undefind
//就是说声明了一个变量，并没有赋值


在解构赋值的时候，还允许指定默认值，

let [y = 1] = [];
console.log(y); //1


[b]2 对象的解构赋值

let {a,b} = {b:'bbb',a:'aaa'}; //顺序无影响
console.log(a,b); // aaa bbb


let {a : b} = {a : 1};
console.log(b); //1
console.log(a); //未定义
//所以这种形式定义的是b的变量，和a没有任何关系


3 基本类型的解构赋值

首先我们来看一看字符串的解构赋值

let [a,b,c,d] = '1234';
console.log(a,b,c,d);//这也就证明的咱们声明了四个变量，分别是1,2,3,4


我们都知道字符串是可以被转化为数组的,那么字符串length属性

因此我们还可以为这种length属性进行解构赋值

let {length: len} = 'zhang';
console.log(len); //5 这个5刚好是字符串的长度


除了字符串以外，我们还可以对数值和布尔值进行解构赋值

let {toString:ts} = 1;
let {toString:bs} = true;

console.log(ts === Number.prototype.toString);//true
console.log(bs === Boolean.prototype.toString);//true


除了以上基本类型还有null和undefind

null和undefind是不能进行解构赋值的,使用null和undefind解构赋值的时候都会报错

如：

let [a] = null;//报错
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航