上一章请见:

1. ES6 随记(1)-- let 与 const

3. 解构赋值

a. 数组的解构赋值

let [a1, b1, c1] = [1, 2, 3];
console.log(a1, b1, c1); // 1 2 3 let [a2, , c2] = [1, 2, 3];
console.log(a2, c2); // 1 3 let [a3, b3, c3] = [1, 2];
console.log(a3, b3, c3); // 1 2 undefined let [a4, b4, ...c4] = [1, 2]; // 只有最后一位可以用 ...
console.log(a4, b4, c4); // 1 2 [] let [a5, b5, c5, ...d5] = [1, 2];
console.log(a5, b5, c5, d5); // 1 2 undefined [] let [a6, [b6], c6] = [1, [2, 3], 3];
console.log(a6, b6, c6); // 1 2 3

另一个是默认值的概念

let [a1 = 1] = [];
console.log(a1); // 1
let [a2 = 1] = [2];
console.log(a2); // 2 let [a3 = 1, b3 = 1, c3 = 1, d3 = 1] = [undefined, null, [], 0];
console.log(a3, b3, c3, d3); // 1 null [] 0 function f() {
console.log('aaa');
return 'a';
}
// 被赋值时不执行 fn
let [a4 = f()] = ['x'];
console.log(a4); // x
let [b4 = f()] = [];
console.log(b4); // aaa a let [a51 = 1, b51 = a51] = [];
console.log(a51, b51); // 1 1
let [a52 = 3, b52 = a52] = [1, 2];
console.log(a52, b52); // 1, 2
let [a53 = b53, b53 = 1] = [];
console.log(a53, b53); // 报错,因为 b53 还未定义不能赋给 a53

  

b. 对象的解构赋值

当变量只有键时,选择赋值方相同键对应的值给该键;当变量为键值对时,选择赋值方相同键对应的值给该值。

let { a1, b1 } = { a1: "aaa", b1: "bbb" };
console.log(a1, b1); // aaa bbb
let { c1 } = { x: "aaa", y: "bbb" };
console.log(c1); // undefined let { x: a2, y: b2 } = { x: "aaa", y: "bbb" };
console.log(a2, b2); // aaa bbb
let c2; ({c2} = {c2: 'aaa'}); // 必须加括号
console.log(c2); // aaa let obj = {
p: [
'Hello',
{ b3: 'World' }
]
};
let { p: [a3, { b3 }] } = obj;
console.log(a3, b3); // Hello World let obj2 = {}; let arr = [];
({ x: obj2.xx, y: arr[0]} = { x: 123, y: true });
console.log(obj2, arr); // {xx: 123} [true] let { PI, sin, cos } = Math;
console.log(PI, sin, cos); // 3.141592653589793 function sin() { [native code] } function cos() { [native code] } let arr2 = [1, 2, 3];
let {0 : first, [arr2.length - 1] : last} = arr2;
console.log(first, last); // 1 3

对象的解构赋值也可以设置默认值,与数组的解构赋值基本类似

c. 其他解构赋值

let [a, b, c, d, e] = 'hello';
console.log(a, b, c); // h e l let {length : len} = 'hello';
console.log(len); // 5 let {toString: s} = true;
console.log(s === Boolean.prototype.toString) // true

d. 函数参数关于解构赋值的运用

function add([x, y]){
// 即 let [x, y] = [1, 2]
return x + y;
}
add([1, 2]); // 3 let x = [[1, 2], [3, 4]].map(([a, b]) => a + b);
console.log(x); // [3, 7] function xx(...values) {
console.log(values);
}
xx(1, 2, 3); // [1, 2, 3] // 对比下面两段代码,请注意参数的默认值问题
// -------------
function fn1({x = 0, y = 0} = {}) {
// 即:先合并 {x=0, y=0} 与 {x: 3, y: 8} 再看是否需要默认值
return [x, y];
}
fn1({x: 3, y: 8}); // [3, 8]
fn1({x: 3}); // [3, 0]
fn1({}); // [0, 0]
fn1(); // [0, 0] function fn2({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
fn2({x: 3, y: 8}); // [3, 8]
fn2({x: 3}); // [3, undefined]
fn2({}); // [undefined, undefined]
fn2(); // [0, 0]

  

e. 解构赋值的其他应用

// 交换变量的值
let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2 1 // 无序对应
function f({x, y, z}) {
console.log(x, y, z); // 1 2 3
}
f({z: 3, y: 2, x: 1}); // 拿到 json 对应的值
let jsonData = {
id: 42,
status: "OK",
data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number); // 42 OK [867, 5309] // 设置参数的默认值
function guid(len=5) {
return Math.random().toString(36).substring(2, len+2);
} // 与 for-of 愉快地玩耍
let data = [
{Id: 1, Name: 'zyh', Flag: false},
{Id: 2, Name: 'zp'},
]
for (let {Name: name} of data) {
console.log(name); // 分别打印 zyh, zp
} // 与模块愉快地玩耍
const { fn1, fn2 } = require("utils");

本文部分转载自 阮一峰 的 ECMAScript 6 入门

ES6 随记(2)-- 解构赋值的更多相关文章

  1. 石川es6课程---6、解构赋值

    石川es6课程---6.解构赋值 一.总结 一句话总结: 结构相同一一对应的方式赋值:let [json, arr, num, str] = [{ a: 1, b: 2 }, [1, 2, 3], 8 ...

  2. es6之变量的解构赋值

    es5中通常我们声明变量都是以下的方式: var a = 10; var b = 20; var c = 30; //或者 var a = 10,b = 20,c = 30; //或者 var arr ...

  3. es6分享——变量的解构赋值

    变量的解构赋值:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前的写法: var a = 1; var b = 2; es6允许的写法 ...

  4. ES6 继续 变量的解构赋值

    春节放假这几天,感觉跟梦一样,瞬间就过去了.现在上班的前几天,都感觉有点不真实,不过看到口袋里的钱,就知道,是真真实实的度过了这个假期. 现在得开始重新工作了: 变量的解构赋值 ES6 允许按照一定模 ...

  5. es6入门2--对象解构赋值

    解构赋值:ES6允许按照一定规则从数组或对象中提取值,并对变量进行赋值.说直白点,等号两边的结构相同,右边的值会赋给左边的变量. 一.数组的解构赋值: 1.基本用法 let [a, b, c] = [ ...

  6. ES6入门——变量的解构赋值

    1.数组的解构赋值 以前为变量复制,只能直接指定值.现在ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 本质上,这种写法属于模式匹配,只要等 ...

  7. ES6基础-变量的解构赋值

    作者 | Jeskson 来源 | 达达前端小酒馆 解构赋值: 数组的解构赋值,对象的解构赋值,字符串的解构赋值,数值与布尔值的解构赋值,函数参数的解构赋值. 开发环境准备: 编辑器,VS Code, ...

  8. ES6中变量的解构赋值

    1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 输出: 上面代码表示,可以从数组中提取值,按照对应位置,对变 ...

  9. ES6学习笔记之解构赋值

    1.数组的解构赋值 简单用法 { // 旧 let a=1,b=3; //新 let [a,b]=[1,3]; console.log(a,b);// 1 3 } 只要等号两边的模式相同,左边的变量就 ...

  10. ES6 中变量的解构赋值

    1. 数组的解构赋值 解构: ES6 中允许按照一定的模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构(Destructuring). 1. 基本用法 本质上,这种写法属于"模式匹 ...

随机推荐

  1. 解决easyui tabs中href无法跨域跳转

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content ...

  2. To Be a Dog Man

    作为一个多年的篮球爱好者,多年保持者对于足球的偏见. 也许不了解也是偏见開始的地方. 直到我最终看到了那个男人---梅西 梅西:一个犬人,一个病人 视频作者是阿根廷专栏作家Hernam Casciar ...

  3. TBSchedule源码阅读2-TBScheduleManagerFactory 定时任务ManagerFactoryTimerTask

    定时任务 : 主要功能:监听zookeeper状态,正常则this.factory.refresh(),异常则this.factory.reStart(); 1 正常情况this.factory.re ...

  4. libsvm以概率输出单个test样例的判别结果

    在函数svmtrain和svmpredict的输入参数部分加入'-b 1'比如原先是 svmtrain -c 8.0 -g 0.0078125 a1a.scale 修改过后就是 svmtrain -b ...

  5. QQ宠物怀念版H5

    <QQ宠物>相伴十三载 哇!明信片邮到了!!开心ヽ(○^㉨^)ノ♪ 大乐斗Ⅱ 怀念一波...

  6. ManicTime软件破解版自用

    ManicTime(时间管理软件)专业版 附破解教程 By tchivs - 『脱壳破解区』 - 吾爱破解 - LCG - LSG |安卓破解|病毒分析|破解软件|www.52pojie.cn htt ...

  7. ios -完全实现代码设置 Could not find a storyboard named 'Main' in bundle NSBundle

    UIWindow *windows = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds]; windows.background ...

  8. PowerDesigner之设置(1)

    这里用到的数据库为SQL2000. PowerDesigner 16. 原始格式: (个人认为的缺点) 创建表前先将原来的表删除(创建表逻辑,假如存在则drop.假如原来有数据,用drop就有问题.新 ...

  9. 三维空间直线最近点对hdu4741

    //求两条直线之间的关系(三维) //输入:两条不为点的直线 //输出:相交返回XIANGJIAO和交点p,平行返回PINGXING,共线返回GONGXIAN int LineAndLine(Line ...

  10. Android———最详细的系统对话框(AlertDialog)详解

    在实际应用开发中,用到系统对话框中的情况几乎是没有的.按开发流程来说,UI工程师都会给出每一个弹窗的样式,故而在实际开发中都是自定义弹窗的. 即使用到的地方不多,但是我们也是需要了解并且能熟练的运用它 ...