资讯专栏INFORMATION COLUMN

初入ES6-解构

FullStackDeveloper / 1191人阅读

摘要:允许按照一定的模式,从数组或者对象中取值,对变量进行赋值数组解构的对象要具有接口也就是可以遍历按照对应的关系进行取值如果解构不成功变量的值就是如果右侧的数值不是数组,就会报错注意字符串是可以遍历的也可以有默认值只要被赋值的变量不是严格就是默

ES6允许按照一定的模式,从数组或者对象中取值,对变量进行赋值

数组

var a = 2;
var b = [1,2];
var c = "thisi";
//ES6 解构的对象要具有Iterator接口也就是可以遍历
var [a,b,c] = [1,2,3]        //按照对应的关系进行取值
var [a,...b] = [1,2,3,4];
a = 1;
b = [2,3,4];
//如果解构不成功变量的值就是undefind;
var [a ] = [];
a = undefind;
//如果右侧的数值不是数组,就会报错
var [a] = 1;    //Uncaught TypeError: false is not iterable,注意字符串是可以遍历的
            =Nan;
            =fasle;
            =null;
            ={}
`
//也可以有默认值
var  [a,b = 3] = [5];//只要被赋值的变量不是严格===undefined;就是默认值,不包括 null 
a = 5;
b = 3;
//惰性求值
function fn(){return 1};
var[a =fn() ] = [2];
a //2
//变量的值可以是其他的变量,但是要已经声明过的
var [x = 1,y =x] = [];
x//1
y//1
let [x= y,y] = []    //Uncaught ReferenceError: y is not defined

对象

//使用var const let解构赋值,右侧必须有值进进行初始化,如果不是解构赋值,就正常使用
var obj = {
    a:1,
    b:3
}
var a = obj.a;
var b = obj.b;
var {a,b} = obj;        //更加的直接
a//1
b//3
var {a,b} = {a:1,b:2};       //属性的名称要一样,位置可以不一样没有的话就undefined
a//1
b//2
//也可以给已经存在的变量赋值
var a = 1;
var b = 2;
var obj = {
    a:11,
    b:22
}
({a,b} = obj)    //外侧有小括号,ES6大括号是代码块,不允许出现在赋值的左侧
//也可以有默认值,只有解构的值===undefined的时候有效
var {a,b,c=23} = {a:2,b:2}        //c =23

//不同名的属性变量
var obj = {
    a : 1,
    b:2
};
var {a:x,b:y} = obj
a//Uncaught ReferenceError: a is not defined
x//1
//嵌套的对象
var obj = {
    a:1,
    b:{
    x:{num:1}
    }
}
var {b:{x}} = obj;
x= {num:1}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/88937.html

相关文章

  • 初入typescript笔记

    摘要:注意变量声明没有指定类型。因此,程序使用类型推断来确定变量的数据类型,第一次赋值为,设置为类型。 typescript 的基本类型1.number 数字类型 example: let val: Number = 22.string 字符串 example: let val: String = 23.Boolean 布尔类型 example: let val: Boolean = fal...

    fsmStudy 评论0 收藏0
  • 初入ES6-let和const以及代码块

    摘要:变量和常量的声明一般的声明,不在函数内就是全局变量,值可以是基本和引用值,可以随时修改和删除语法同一个作用域的声明,只要有同样的声明都会报错,只能修改值语法,和一样,但是不能更改值以上两个语法都不存在变量提升的效果直接使用的话,直接引用错误 变量和常量的声明 var a = 34; //一般的声明,不在函数内就是全局变量,值可以是基本和引用值,可以随时修改和删除 ...

    wwolf 评论0 收藏0
  • 初入ES6-Moudule

    摘要:所有代码共享一个全局作用域,而模块则是自动运行在严格模式下的代码,其创建的代码不会添加到全局作用域中,仅存在模块的顶级作用域中,使用的话必须导出部分的代码供访问,也可以从其他的模块引入模块标识符以开始表示从根目录开始以开始从当前目录以开始表 JS所有代码共享一个全局作用域,而模块则是自动运行在严格模式下的代码,其创建的代码不会添加到全局作用域中,仅存在模块的顶级作用域中,使用的话必须导...

    Baaaan 评论0 收藏0
  • 初入ES6-Array

    摘要:用于将对象转为数组可遍历和类数组对象部署属性的对象和扩展运算符的区别是任何具有属性的都可以使用的方法是用原型该方法还有一个参数类似的新方法将字符串转化为数组,特别是大于的单个字符,避免分割成多个用来弥补构造函数的歧义三个空值只有一个参数其实 1,Array.from用于将对象转为数组(可遍历和类数组对象部署Iterator 属性的对象)和扩展运算符的区别是任何具有Length属性的都可...

    马永翠 评论0 收藏0
  • 初入ES6-Generator和Iterator

    摘要:根据百度百科的说法迭代器模式,又叫做游标模式。给出的定义为提供一种方法访问一个容器对象中各个元素,而又不需暴露该对象的内部细节。从定义可见,迭代器模式是为容器而生。很明显,对容器对象的访问必然涉及到遍历算法。这两种情况好像都能够解决问题。 Iterator根据百度百科的说法: 迭代器(Iterator)模式,又叫做游标(Cursor)模式。GOF给出的定义为:提供一种方法访问一个容器(...

    waltr 评论0 收藏0

发表评论

0条评论

FullStackDeveloper

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<