JS解构赋值

EastWoodYang 发布于2019-08-23 14:20 / 1932人阅读

摘要：从开始，引入了解构赋值，可以同时对一组变量进行赋值。。基本类型结果注意，对数组元素进行解构赋值时，多个变量要用括起来。

从ES6开始，JavaScript引入了解构赋值，可以同时对一组变量进行赋值。。

1. 基本类型

let [lString, lBoolean, lNumber] = ["ES6", true, 20181227];
// 结果：lString = ES6, lBoolean = true, lNumber = 20181227

/**
 * 注意，对数组元素进行解构赋值时，多个变量要用[...]括起来。
 * 如果数组本身还有嵌套，也可以通过下面的形式进行解构赋值，注意嵌套层次和位置要保持一致：
 */
let [lString, lBoolean, lNumber] = ["ES6", [true, 20181227]];
// 结果：lString = ES6, lBoolean = true,20181227, lNumber = undefined
// 正确的做法
let [lString, [lBoolean, lNumber]] = ["ES6", [true, 20181227]];
// 结果：lString = ES6, lBoolean = true, lNumber = 20181227

// 解构赋值还可以忽略某些元素：
let [, , lNumber] = ["ES6", [true, 20181227]];
// 结果：lNumber = 20181227

2. 数组类型

let [clubs, players] = [
    ["Lakers", "Magic"], 
    ["Lonzo Ball", "Anthony Davis", "Kawhi Leonard", "Donovan Mitchell", "达龙 福克斯"]
];
// 结果：clubs = [ "Lakers", "Magic" ]
// 结果：players = [ "Lonzo Ball", "Anthony Davis", "Kawhi Leonard", "Donovan Mitchell", "达龙 福克斯" ]

3. 对象类型

let person = {
    name: "达龙 福克斯",
    age: 20,
    gender: "male",
    passport: "G-12345678",
    school: "Kentucky",
    address: {
        city: "重庆",
        street: "龙湖时代天街",
        zipcode: "400002"
    }
};
let { name, address: { city, zip } } = person;
/**
 * name = "达龙 福克斯"
 * city = "重庆"
 * zip  = undefined #因为属性名是zipcode而不是zip
 * 注意: address不是变量，而是为了让city和zip获得嵌套的address对象的属性:
 * address; #ReferenceError: address is not defined
 */
 
/**
 * >> 使用解构赋值对对象属性进行赋值时，如果对应的属性不存在，变量将被赋值为undefined，
 *    这和引用一个不存在的属性获得undefined是一致的。
 * >> 如果要使用的变量名和属性名不一致，可以用下面的语法获取：
 */
let { name, address: { city, zipcode:code } } = person;
// code = "400002"

// 解构赋值还可以使用默认值，这样就避免了不存在的属性返回undefined的问题：
let { name, address: { city, zipcode:code }, club="kings" } = person;
// club = "kings"

4. 使用场景

// 快速获取当前页面的域名和路径：
let {hostname:domain, pathname:path} = location;

/**
 * 如果一个函数接收一个对象作为参数，那么，可以使用解构直接把对象的属性绑定到变量中。
 * 例如，下面的函数可以快速创建一个Date对象：
 */
function buildDate({year, month, day, hour=0, minute=0, second=0}) {
    return new Date(year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second);
}
buildDate({ year: 2018, month: 12, day: 27 });
// Thu Dec 27 2018 00:00:00 GMT+0800 (中国标准时间)
// 传入hour、minute和second属性：
buildDate({ year: 2018, month: 12, day: 27, hour: 20, minute: 15 });
// Thu Dec 27 2018 20:15:00 GMT+0800 (中国标准时间)

云服务器 GPU云服务器解构赋值 js 数据赋值 js 拖动赋值 js中赋值

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

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

ECMASCRIPT 6 实战之解构赋值

摘要：相信解构赋值自以下简称面世以来被大家快速地熟悉并运用到实际开发中了这是一种能有效减少代码量，使代码逻辑更简单优雅的技术下面我们就再来回顾总结一下解构赋值的种种用法吧基本用法从对象解构假设有一个对象，它的结构为以对称的形式从从边的对象中匹配与相信解构赋值(Destructuring)自 ECMASCRIPT 6(以下简称 ES 6) 面世以来被大家快速地熟悉并运用到实际开发中了, 这是...

yangrd 2019-08-26 13:54 评论0 收藏0
es6 - 解构赋值

摘要：比如上面展示的情况都是可以联合使用的比如对象的解构赋值对象的解构赋值是基于属性的。当给已存在的变量解构赋值时，注意加这是由于如果不加会把左边看成一个代码块，会报错。注意事项数组的解构赋值中，使用的变量必须放在最后。解构赋值解构赋值是一个听起来比较高大上的特性，但按我的理解，它就是一种语法糖。它并没有赋予js更强大的能力，只是让赋值操作更加的灵活，效率。在es6之前，赋值操作需要=...

DirtyMind 2019-08-26 11:45 评论0 收藏0
ES6解构赋值原理详解

摘要：中还存在字符串数组布尔值等各种解构赋值，基本概念和原理都和对象的解构赋值类似，这里就不在全部列举了。 ES6解构赋值 ES6变量的解构赋值本质上是模式匹配,只要等号两边的模式相同，左边的变量就会被赋予匹配的右边的值，如果匹配不成功变量的值就等于undefined 数组的解构赋值 ES6中只要某种数据有Iterator接口（也就是可以循环迭代），都可以进行数组的解构赋值。Example1...

wing324 2019-08-20 17:59 评论0 收藏0
ES6系列---解构

摘要：的解构特性，可以简化这项工作。必须传值的解构参数如果调用函数时不提供被解构的参数会导致程序抛出错误程序报错缺失的第三个参数，其值为。在编码过程中，我们经常定义许多对象和数组，然后有组织地从中提取相关的信息片段。ES6的解构特性，可以简化这项工作。解构是一种打破数据结构，将其拆分为更小部分的过程。未使用解构的做法 let options = { repeat: true, ...

baoxl 2019-08-20 18:52 评论0 收藏0