美文网首页
ES6入门之变量的解构赋值

ES6入门之变量的解构赋值

作者: yu580 | 来源:发表于2017-07-10 15:35 被阅读0次

基本概念

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

那么根据 javascript 的数据类型可分为:
1.数组的解构赋值。
2.对象的解构赋值。
3.基本类型的解构赋值。


首先我们来看看数组的解构赋值。
例1:
let [a,b,c] = [1,2,3]; //实际上和我们平时常用的let a=1,b=2,c=3;是一个意思。
例2:

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

以上例子我们不难看出数组的赋值就是要找准=号两边对应的位置。ps:[y=1]这种写法是默认值,如果没找到对应的值就取默认值。

对象的解构赋值。
例1:
let {a,b} = {a: 1,b: 2} //a=1,b=2
例2:
let {a: b} = {a:1} //console.log(a)会报错,console.log(b)//1
以上例子可以看出对象的解构赋值是根据key值来的。只要找到相对应的key就可以赋值成功。

基本类型的解构赋值。
例1:

let [a,b,c,d] = '1234' ;
console.log(a,b,c,d)  //1,2,3,4
let {length:len} = 'java' ;
console.log(len) // 4
let {toString: ts} = 1,{toString: bs} = true;
console.log(ts,bs) // function toString() { [native code] } function toString() { [native code] }
console.log(ts === Number.prototype.toString)  // true
console.log(bs === Boolean.prototype.toString) //true
ts.call(1) // 字符串'1'  ps:不能直接调用ts().需要指定this对象(number类型的)。直接调用this是指向window的。

以上例子可以看出基本类型的赋值数组的赋值就是index对应赋值,对象的赋值就是属性调用后赋值。

注意: null和undefind不能被解构赋值!

以上都是个人理解如有不对之处还望指正交流!

相关文章

  • 解构赋值

    解构赋值:ES6 中新增了变量赋值的方式,从数组和对象中提取值,对变量进行赋值。 单独赋值给变量,解构赋值。 解构...

  • ES6

    ES6: ES6 新语法 1.变量 解构赋值 (解构赋值对应的python里的序列解包) 解构赋值方式一: 解构赋...

  • ES6笔记(解构赋值)

    ES6笔记(解构赋值) 解构赋值 变量的解构: 解构赋值允许指定默认值。 解构赋值必须保证赋值方 被赋值方类型一...

  • 变量的解构赋值

    es6-2 (变量的解构赋值) 本文以及之后的文章都是参考阮一峰ES6入门,记录下作为笔记。 数组的解构赋值对象的...

  • 『ES6脚丫系列』变量的解构赋值

    『ES6脚丫系列』变量的解构赋值 第一章:变量的解构赋值的概念 【01】Q:什么是变量的解构赋值?有哪些方式? 吃...

  • ES6知识点复习(二)

    变量的解构赋值 解构赋值允许指定默认值,es6内部使用严格相等运算符 === 默认值可以引用解构赋值的其他变量,但...

  • es6中的解构赋值

    es6中的对象解构赋值 对象的解构赋值,新变量名字要和对象中的变量名一致 数组中的解构赋值,数组是依次赋值的 字符...

  • ES6入门笔记

    变量的解构赋值 数组的解构赋值ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Dest...

  • ES6学习笔记——解构赋值

    变量的结构赋值 数组的解构赋值 ES6允许从数组中提取值,按照对应的位置,对变量赋值。 如果解构不成功,变量的值就...

  • 杂货小铺之ES6+ 🍳 解构赋值

    解构赋值 ? 在 ES6 中新增了变量赋值的方式:解构赋值。允许按照一定模式,从数组和对象中提取值,对变量进行赋值...

网友评论

      本文标题:ES6入门之变量的解构赋值

      本文链接:https://www.haomeiwen.com/subject/brkshxtx.html