数组的解构赋值

 /* 1、变量的解构赋值:
* 数组的元素是按次序排列的,变量的取值由它的位置决定;
* 从数组和对象中提取值,对变量进行赋值,这被称为解构;
* 属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值
* */
let [a, b, c] = [1, 2, 3];
let [x, [v], [y]] = [1, [2], []];//就算是赋了空值,方括号也不能少,否则报错
console.log("y:" + y);//结果是undefined即解构不成功
console.log("x:" + x);//1
let [m, [n], w] = [1, [2, 3], 4];
console.log(m);//1
console.log(n);//2 等号左右两边的模式不尽相同,但是也解构成功,称之为不完全解构
console.log(w);//4 /*2、数组默认值问题*/
let [foo = true] = [];//判断位置是否有值,没有值或者为undefined,即可赋值成功
console.log(foo);//true let [foo1 = true] = [undefined];//判断位置是否有值,没有值或者为undefined,即可赋值成功
console.log(foo1);//true
/*以上两个例子可看出,只有数组成员严格等于undefined时默认值才生效,但是null不等于undefined*/ let [foo2 = true] = [null];
console.log(foo2);//null let [foo4 = true] = [false];
console.log(foo4);//false let [x1 = 1, y1 = x1] = [];
console.log(x1, y1);//x1=1,y1=1 let [x2 = 1, y2 = x2] = [2];
console.log(x2, y2);//x2=2,y2=2 let [x3 = 1, y3 = x3] = [1, 2];
console.log(x3, y3);//x3=1,y3=2 let [x4 = y4, y4 = 1] = [];
console.log(x4, y4);//x4=undefined,y4=1(x4用y4做默认值时,y4还没有声明。解构失败)
},
clickObj: function () {
/*3、变量的解构赋值:
* 对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
* */
let {foo, bar} = {bar: 'a', foo: 'v'};//只要
console.log(foo);//v
console.log(bar);//a let {baz} = {foo: 'aaa', bar: 'bbb'};
console.log(baz);//undefined.解析的对象中没有对应的属性名,即解析失败 const {log} = console;//将console.log赋值到log变量
log('hello') // hello let {foo1: ba} = {foo1: 'aaa', bar: 'bbb'};
console.log(ba);// "aaa"
//console.log(foo1) // error: foo1 is not defined
/*说明:foo1是匹配的模式,ba才是变量。真正被赋值的是变量ba,而不是模式foo1。*/ /*模式与变量*/
let obj = {
p: [
'Hello',
{y: 'World'}
]
};
//let { p: [x, { y }] } = obj;//p作为模式时本身不赋值
let {p, p: [x, {y}]} = obj;//p作为变量时也将参与赋值
console.log(x); // "Hello"
console.log(y); // "World"
console.log(p);//["Hello",{y: "World"}] 不完全解构,hello相当于逗号前面的p,x没有解构出来 /*多重解构赋值*/
const node = {
loc: {
start: {
line: 1,
column: 5
}
}
};
let {loc, loc: {start}, loc: {start: {line}}, loc: {start: {column}}} = node;
/*说明:一个逗号表示本次赋值结束,loc即该输出start包含start开始的内全部内容;
* loc: { start }:表示loc为模式,start为变量,输出的就是start中 line和column的值
* loc: { start: { line }}:表示loc和start都是模式不是变量,不会赋值,输出line的值
* loc: { start: { column }}:道理同上
* */
console.log(line); // 1
console.log(loc); // Object {start: Object} 即:{start:{line: 1, column: 5}}
console.log(start);// Object {line: 1, column: 5} 即:{line: 1, column: 5}
console.log(column);// 5 /*对象默认值(对比以下三个例子)*/
var {message: msg = 'Something went wrong'} = {message: 12};
console.log(msg);//Something went wrong
//console.log(message);//error: message is not undefined var {v2: v1 = 15} = {v1: 10};
//console.log(v2);//error: v2 is not undefined
console.log(v1);//15 var {w2: w1 = 15} = {};
//console.log(w2);//error: v2 is not undefined
console.log(w1);//15 /*语法注意点:*/
let b;
//{b} = {b: 1};//报错,大括号开头的话变量 b 将被解析为大代码块
({b} = {b: 1});//正确,小括号开头就行 /*数组中对象属性的解构*/
let arr = [6, 66, 666];
let {0: first, [arr.length - 1]: last} = arr;//此处是把数组中数据的下标赋值给 first 和 last
console.log(first);// 6 下标为,0
console.log(last);// 666 解释:arr.length=3,3-1=2,下标为2
},
clickStr: function () {
const [a, b, c, d, e] = 'hello';
/*
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
*/
let {length: len} = 'hello';
/*
len // 5
*/
},
clickBool: function () {
/*数值或布尔类型解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。undefined 和 null 除外*/
let {toString: str} = 123;
str === Number.prototype.toString; let {toString: str1} = true;
str1 === Boolean.prototype.toString // true
},
clickParame: function () {
function move({m1 = 0, m2 = 0} = {}) {//m1,m2在此为变量,且指定默认值,若是解构失败,也可得到默认值
return [m1, m2];
} console.log(move({m1: 10}));//10,0
console.log(move({m1: 10, m2: 20}));//10,20
console.log(move());//0,0
console.log(move({}));//0,0 function move1({n1, n2} = {n1: 0, n2: 0}) {//m1,m2在此为参数,且指定默认值,若是解构失败,则结果不一样
return [n1, n2];
} console.log(move1({n1: 10}));//10,undefined
console.log(move1({n1: 10, n2: 20}));//10,20
console.log(move1());//0,0
console.log(move1({}));//undefined,undefined [1, undefined, 3].map((p = 'yes') => p);//若是传参数传递的undefined则可取到默认值
// 1,yes,3 },
attention:function () {
//let [(a)] = [1];
//let {x: (c)} = {};
//let ({x: c}) = {};
//let {(x: c)} = {};
//let {(x): c} = {};
//let { o: ({ p: p }) } = { o: { p: 2 } };
/*以上六个语句都报错,都是变量声明语句,模式不能使用圆括号*/ //function f([(z)]) { return z; }
//function f([z,(x)]) { return x; }
/*以上两个语句属于函数参数变量声明,不能带圆括号*/ //({ p: a }) = { p: 42 };
//([a]) = [5];
/*整个模式都放在圆括号更加错得离谱*/
//[({ p: a }), { x: c }] = [{p:2}, {c:5}];//模式部分也不能有部分圆括号包裹
//console.log(a)//a id not undefined /*正确使用圆括号的情况*/
[(b)] = [3]; // 正确,模式是数组的第一个成员,与模式无关
({ p: (d) } = {}); // 正确,p属于模式
[(parseInt.prop)] = [3]; // 正确,与圆括号,没有模式之说
},
doing:function () {
/*1、交换变量的值*/
let x = 1;
let y = 2;
[x, y] = [y, x];//交换变量的值 /*2、从函数返回多个值或对象*/
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [u, i, o] = example();
console.log(u);
console.log(i);
console.log(o);
// 返回一个对象
function example() {
return {
fo: 1,
br: 2
};
}
let { fo, br } = 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: [200, 401]
}; let { id, status, data: number } = jsonData;
console.log(id, status, number);// 42, "OK", [200, 401] /*5、指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。*/
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
} = {}) {
// ... do stuff
}; /*6、遍历map结构*/
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world'); /*Map 结构原生支持 Iterator 接口*/
for (let [key, value] of map) {//获取键值对,包括添加进来的str
console.log(key + " is " + value);//first is hello second is world
} // 获取键名
for (let [key] of map) {
// ...
} // 获取键值
for (let [,value] of map) {
// ...
} /*7、输入模块的指定方法*/
const { SourceMapConsumer, SourceNode } = require("source-map");
}
}

对象的解构赋值

/*3、变量的解构赋值:
* 对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
* */
let {foo, bar} = {bar: 'a', foo: 'v'};//只要
console.log(foo);//v
console.log(bar);//a let {baz} = {foo: 'aaa', bar: 'bbb'};
console.log(baz);//undefined.解析的对象中没有对应的属性名,即解析失败 const {log} = console;//将console.log赋值到log变量
log('hello') // hello let {foo1: ba} = {foo1: 'aaa', bar: 'bbb'};
console.log(ba);// "aaa"
//console.log(foo1) // error: foo1 is not defined
/*说明:foo1是匹配的模式,ba才是变量。真正被赋值的是变量ba,而不是模式foo1。*/ /*模式与变量*/
let obj = {
p: [
'Hello',
{y: 'World'}
]
};
//let { p: [x, { y }] } = obj;//p作为模式时本身不赋值
let {p, p: [x, {y}]} = obj;//p作为变量时也将参与赋值
console.log(x); // "Hello"
console.log(y); // "World"
console.log(p);//["Hello",{y: "World"}] 不完全解构,hello相当于逗号前面的p,x没有解构出来 /*多重解构赋值*/
const node = {
loc: {
start: {
line: 1,
column: 5
}
}
};
let {loc, loc: {start}, loc: {start: {line}}, loc: {start: {column}}} = node;
/*说明:一个逗号表示本次赋值结束,loc即该输出start包含start开始的内全部内容;
* loc: { start }:表示loc为模式,start为变量,输出的就是start中 line和column的值
* loc: { start: { line }}:表示loc和start都是模式不是变量,不会赋值,输出line的值
* loc: { start: { column }}:道理同上
* */
console.log(line); // 1
console.log(loc); // Object {start: Object} 即:{start:{line: 1, column: 5}}
console.log(start);// Object {line: 1, column: 5} 即:{line: 1, column: 5}
console.log(column);// 5 /*对象默认值(对比以下三个例子)*/
var {message: msg = 'Something went wrong'} = {message: 12};
console.log(msg);//Something went wrong
//console.log(message);//error: message is not undefined var {v2: v1 = 15} = {v1: 10};
//console.log(v2);//error: v2 is not undefined
console.log(v1);//15 var {w2: w1 = 15} = {};
//console.log(w2);//error: v2 is not undefined
console.log(w1);//15 /*语法注意点:*/
let b;
//{b} = {b: 1};//报错,大括号开头的话变量 b 将被解析为大代码块
({b} = {b: 1});//正确,小括号开头就行 /*数组中对象属性的解构*/
let arr = [6, 66, 666];
let {0: first, [arr.length - 1]: last} = arr;//此处是把数组中数据的下标赋值给 first 和 last
console.log(first);// 6 下标为,0
console.log(last);// 666 解释:arr.length=3,3-1=2,下标为2

字符串的解构赋值

/*
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
*/
let {length: len} = 'hello';
/*
len // 5
*/

布尔数值类型的解构赋值

/*数值或布尔类型解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。undefined 和 null 除外*/
let {toString: str} = 123;
str === Number.prototype.toString; let {toString: str1} = true;
str1 === Boolean.prototype.toString // true

参数的解构赋值

function move({m1 = 0, m2 = 0} = {}) {//m1,m2在此为变量,且指定默认值,若是解构失败,也可得到默认值
return [m1, m2];
} console.log(move({m1: 10}));//10,0
console.log(move({m1: 10, m2: 20}));//10,20
console.log(move());//0,0
console.log(move({}));//0,0 function move1({n1, n2} = {n1: 0, n2: 0}) {//m1,m2在此为参数,且指定默认值,若是解构失败,则结果不一样
return [n1, n2];
} console.log(move1({n1: 10}));//10,undefined
console.log(move1({n1: 10, n2: 20}));//10,20
console.log(move1());//0,0
console.log(move1({}));//undefined,undefined [1, undefined, 3].map((p = 'yes') => p);//若是传参数传递的undefined则可取到默认值
// 1,yes,3

写法格式注意点

//let [(a)] = [1];
//let {x: (c)} = {};
//let ({x: c}) = {};
//let {(x: c)} = {};
//let {(x): c} = {};
//let { o: ({ p: p }) } = { o: { p: 2 } };
/*以上六个语句都报错,都是变量声明语句,模式不能使用圆括号*/ //function f([(z)]) { return z; }
//function f([z,(x)]) { return x; }
/*以上两个语句属于函数参数变量声明,不能带圆括号*/ //({ p: a }) = { p: 42 };
//([a]) = [5];
/*整个模式都放在圆括号更加错得离谱*/
//[({ p: a }), { x: c }] = [{p:2}, {c:5}];//模式部分也不能有部分圆括号包裹
//console.log(a)//a id not undefined /*正确使用圆括号的情况*/
[(b)] = [3]; // 正确,模式是数组的第一个成员,与模式无关
({ p: (d) } = {}); // 正确,p属于模式
[(parseInt.prop)] = [3]; // 正确,与圆括号,没有模式之说

用途:

pasting

/*1、交换变量的值*/
let x = 1;
let y = 2;
[x, y] = [y, x];//交换变量的值 /*2、从函数返回多个值或对象*/
// 返回一个数组
function example() {
return [1, 2, 3];
}
let [u, i, o] = example();
console.log(u);
console.log(i);
console.log(o);
// 返回一个对象
function example() {
return {
fo: 1,
br: 2
};
}
let { fo, br } = 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: [200, 401]
}; let { id, status, data: number } = jsonData;
console.log(id, status, number);// 42, "OK", [200, 401] /*5、指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。*/
jQuery.ajax = function (url, {
async = true,
beforeSend = function () {},
cache = true,
complete = function () {},
crossDomain = false,
global = true,
// ... more config
} = {}) {
// ... do stuff
}; /*6、遍历map结构*/
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world'); /*Map 结构原生支持 Iterator 接口*/
for (let [key, value] of map) {//获取键值对,包括添加进来的str
console.log(key + " is " + value);//first is hello second is world
} // 获取键名
for (let [key] of map) {
// ...
} // 获取键值
for (let [,value] of map) {
// ...
} /*7、输入模块的指定方法*/
const { SourceMapConsumer, SourceNode } = require("source-map");

es6—变量的解构赋值的更多相关文章

  1. ES6 变量的解构赋值

    数组的解构赋值     var [a,b,c] = [1,2,3];    左边是变量,右边是值,根据数据结构一一对应 只要等号两边的模式相同,左边的变量就会被赋予右边对应的值,必须模式相同 如果等号 ...

  2. ES6 - 变量的解构赋值学习笔记

    变量的解析赋值 数组的解析赋值 es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这就称为解构. var a = 1; var b = 2; var c = 3; //在es6中允许写成 ...

  3. es6变量的解构赋值学习笔记

    1. 解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象.由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错. let { prop: x } = undefin ...

  4. ES6变量的解构赋值

    变量的解构赋值 1.数组的解构赋值 2.对象的解构赋值 3.字符串的解构赋值 4.数值和布尔值的解构赋值 5.函数参数的解构赋值 6.圆括号问题 7.用途 1.数组的解构赋值 ES6 允许写成下面这样 ...

  5. ES6变量的解构赋值(一)数组的解构赋值

    let[a,...arr]=[1,2,3,4];//a==>1 arr==>[2,3,4] let [x, y, ...z] = ['a'];//a==>'a' y==>und ...

  6. ES6变量的解构赋值(二)对象的解构赋值

    前面我们知道,数组的结构赋值需要按顺序进行赋值, let [a,,c] = [,,] console.log(a); console.log(c);//3 let [a,b] = [1];consol ...

  7. ES6中的变量的解构赋值, 解放我们的双手,实现变量的批量赋值

    ES6--变量的解构赋值 引言 正文 一.数组的解构赋值 解构失败 不完全解构 默认值 二.对象的解构赋值 三.字符串的解构赋值 结束语 引言 变量的解构赋值, 听起来很复杂, 简单点说可以理解成批量 ...

  8. es6之变量的解构赋值

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

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

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

随机推荐

  1. phpcms 允许英文目录有空格

    大家都用过phpcm添加栏目吧,在添加栏目里面,有个选项是 英文目录,这里目录可以用作伪静态功能.这么英文不能有空格等特殊字符.但是如果页面中需要引用包含空格的字符呢,例如,关于我们页面,我要显示英文 ...

  2. addEventListener-第三个参数 useCapture

    转载自:http://www.cftea.com/c/2008/10/MQ0U26KP565GNM5Q.aspaddEventListener-开始 addEventListener-事件流 addE ...

  3. 跟我一起认识axure(一)

    第一步下载:https://www.axure.com.cn/ 第二步点击安装,一路next 第三步:认识Axure RP工作界面

  4. 容器云平台使用体验:DaoCloud

    容器技术风起云涌,在国内也涌现出了很多容器技术创业公司,本文介绍容器厂商DaoCloud提供的容器云平台,通过使用容器云平台,可以让大家更加了解容器,并可以学习不同容器云平台的优势. 1.       ...

  5. 快速启动Oracle服务

    快速启动Oracle服务的批处理命令步骤 新建记事本 粘贴如下内容: @echo off echo 确定要启动Oracle 11g服务吗? pause net start OracleOraDb11g ...

  6. KiCad EDA 5.1.4 发布了

    KiCad EDA 5.1.4 发布了 KiCad EDA 自豪地宣布 KiCad 5 系列最新稳定版发布.5.1.4 稳定版修复了来自 5.1.2 和 5.1.3 版本的关键错误修复和其他一些小改进 ...

  7. UVA_458:The Decoder

    Language:C++ 4.8.3  PS:ASCII值减去七 #include<stdio.h> #include<string.h> int main(void) { c ...

  8. dva与create-react-app的结合使用

    dva与我们的create-react-app创建的两款脚手架是我们写react项目的两款优秀框架,之前一种使用create-react-app这款脚手架进行开发.然后这个框架美中不足的是redux方 ...

  9. 一维数组的初始化及遍历 Day06

    package com.sxt.arraytest1; import java.util.Arrays; /* * 一维数组 */ public class ArrayTest2 { public s ...

  10. SDUT-2449_数据结构实验之栈与队列十:走迷宫

    数据结构实验之栈与队列十:走迷宫 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 一个由n * m 个格子组成的迷宫,起 ...