ES6之主要知识点(二) 变量的解构赋值。默认值

引自http://es6.ruanyifeng.com/#docs/destructuring

数组解构赋值
默认值
对象解构赋值
用途

1.数组的解构赋值

let [a, b, c] = [1, 2, 3];
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

因为等号右边的值，要么转为对象以后不具备 Iterator 接口（前五个表达式），要么本身就不具备 Iterator 接口（最后一个表达式）。

2.默认值

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
let [x = 1] = [null];
x // null

let [x = 1, y = x] = [2];    // x=2; y=2

3.对象的解释构

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
obj // {prop:123}
arr // [true]

4.用途

（1）变换变量的值

let x = 1;
let y = 2;[x, y] = [y, x];

（2）从函数返回多个值

// 返回一个数组
function example() {return [1, 2, 3];
}
let [a, b, c] = example();// 返回一个对象
function example() {return {foo: 1,bar: 2};
}
let { foo, bar } = example();

（3）函数参数的定义

// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

（4）提取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]

（5）函数参数的默认值

jQuery.ajax = function (url, {async = true,beforeSend = function () {},cache = true,complete = function () {},crossDomain = false,global = true,// ... more config
}) {// ... do stuff
};

（6）遍历Map结构

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');for (let [key, value] of map) {console.log(key + " is " + value);
}
// first is hello
// second is world

转载于:https://www.cnblogs.com/myzy/p/7520794.html

ES6之主要知识点(二) 变量的解构赋值。默认值相关推荐

ES6学习笔记03：变量的解构赋值
ES6学习笔记03:变量的解构赋值如果想从复杂数据结构(数组.对象)中获取某一个数据,可能需要大量的遍历操作才能完成.通过解构赋值,这一过程可以得到简化. 1.字符串的解构赋值其实,Python也 ...
解构给默认值_解构赋值默认值误区
问题还原这是最近 CR 的时候在业务代码中发现了一个问题,先来看一下问题代码: // data 为接口返回的数据 const { bizObject = {}, total = 0 } = data ...
ES6新特性2：变量的解构赋值
本文摘自ECMAScript6入门,转载请注明出处. ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring).不仅适用于var命令,也适用于let和c ...
ES6学习（二）—变量的解构赋值
ES6学习(二)-变量的解构赋值文章只列举了一部分完整版请看阮一峰ES6入门教程点我查看阮一峰ES6入门教程一.数组的解构赋值二.对象解构赋值三.函数参数的解构赋值
ES6学习笔记二新的声明方式和变量的解构赋值！
新的声明方式在ES5的时候,我们只有一个声明方式,var!但是在es6中,声明进行了扩展,我们加上ES5的var的申明方式,我们有了三种声明方式: var:它是variable的简写,可以理解成变量 ...
【ES6】变量的解构赋值
[ES6]变量的解构赋值一.什么叫解构赋值? 二.解构赋值有哪些分类?写法? 1)对数组的解构赋值 2)对对象的解构赋值 3)对字符串的解构赋值 4)对数值和布尔值的解构赋值 5)对函数参数的解构赋 ...
ES6 | let 关键字 + const关键字 + 箭头函数 + rest参数 + 扩展运算符 ... + Symbol + 迭代器 + 生成器 + 变量的解构赋值 + 模板字符串
目录 ECMASript 相关介绍 ECMASript 6 新特性 let 关键字 const关键字变量的解构赋值模板字符串简化对象写法箭头函数 => 参数默认值 rest参数扩展运算 ...
ES6学习之 - 变量的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring) 1. 数组的解构赋值以前,为变量赋值,只能直接指定值. let a = 1; let b ...
最详细ES6教程_变量的解构赋值
最详细ES6教程_变量的解构赋值数组的解构赋值基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定 ...