ES6-3 变量的解构赋值
1.数组的解构赋值
数组的解构赋值其实是=左右进行“模式匹配”。
❗️❗️❗️=右侧是具体的数值,不是变量!,=左侧的是变量!如果右侧是变量形式,需要先计算出具体的数值!!
let [a,[b],c] = [1,[2],3]; // a=1;b=2;c=3
let [a, ...tail] = [1,2,3,4,5]; // a = 1, tail = [2,3,4,5]
let [a,b,c] = [1]; // a=1 b=undefined c=undefined
=有侧不能是非数组,非数组会自动转为包装对象。{}不行,因为对象不含iterator接口。但是Set可以,Set有iterator接口。
let [a,b,c] = new Set([1,2,3]) // a=1, b= 2, c= 3
只要数据结构有iterator接口就可以使用数组结构。用Generator函数生成的iterator对象也可以解构。
function* fibs() {
let a = 0;
let b = 1;
while (true) {
yield a;
[a, b] = [b, a + b]; // ⚠️ 千万不要理解成a=b;b=b+a;
// 解构赋值会先计算=右侧的值。所以会先计算出[b,a+b]的值,然后再进行解构
// 如第一次是[1,1]
}
};
const a = fibs();
a.next();// { value: 0, done: false } // a=1,b=1
a.next();// { value: 1, done: false } // a=1,b=2
a.next();// { value: 1, done: false } // a=2,b=3
a.next();// { value: 2, done: false } // a=3,b=5
a.next();// { value: 3, done: false }
a.next();// { value: 5, done: false }
let [first,second,third,four,five,six] = fibs();
console.log(first,second,third,four,five,six) // 0,1,1,2,3,5
数组解构允许设置默认值,=右侧的值为undefined时,左侧使用默认值
let [a=5,b=6, c=7] = [undefined,null,];
// a = 5, b=null, c=7
2.对象的解构赋值
对象解构的=右侧要求必须是对象,null或者undefined不能被解构,会报错!
对象的解构赋值其实本质上也是“模式匹配”。
let {foo, bar} = { foo: 'aaa', bar: 'bbb' }
因为对象可以简写,其实应该是下面的形式
let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
解构赋值的变量其实是:后面的变量名,:前端的值相当于匹配的模式
let { hello: h, world: w } = { hello: 'hello', world: 'world'}
// h='hello' w = 'world'
对于对象的扩展运算符(ES2018)用于对象解构赋值
let { x, y, ...z } = { x:1, y:2, z:3, k:4}
// x = 1 y=2 z={z:3, k:4}
// ⚠️对于解构赋值来说,扩展运算符位于=左侧的时候只能用于最后一个元算,对于变量扩展来说...是剩余元素运算符。同理,作为函数参数的时候是参数对象的解构赋值,也只能用于最后一个参数
对于嵌套解构,普通属性可以在左侧变量声明中解构;但是扩展运算符...解构,不能用于嵌套解构。
let obj = {
web: {
js: {
nodejs: 'node',
reactjs: 'react'
}
}
}
const { web, web: {js}, web: {js: {nodejs, reactjs}}} = obj;
// web= { js: { nodejs: 'node', reactjs: 'react' } }
// js = { nodejs: 'node', reactjs: 'react' }
// nodejs = 'node'
// reactjs = 'react'
普通解构可以取到继承的原型对象上的属性;但是扩展运算符解构取不到原型对象上的属性。
let obj1 = { a:1, b:2, c:3, d:4 };
let obj2 = Object.create(obj1);
obj2.x = 5; let { a, ...y} = obj2;
// 其中a是正常解构,可以取到原型对象上的属性;y是扩展解构,只能解构自身的属性
// a = 1, y = {x:5}
对象解构允许设置默认值
let { x: y = 1, z = 5, k: m=8} = { x:5, z:6 }
// y=5, z=6, m=8
⚠️1)先声明,再解构的情况
let x;
({x} = {}) // 必须有小括号,否则js引擎将{x}作为代码块处理
// x = undefined
2)数组是特殊对象,允许对数组进行对象解构赋值
const arr = [1,4,2,3];
let {0: first, [arr.length-1]: last, length} = arr;
console.log(first,last,length) // 1,3,4
3. 字符串解构赋值
对字符串使用解构赋值时,js引擎将字符串转为类数组对象String(),类数组都有length属性
let str = 'hello';
let [a,b,c,d,e] = str;// 数组解构 'h' 'e' 'l' 'l' 'o'
let { length } = str; // 对象解构 5
4. 数值和布尔值解构赋值
数值和布尔值进行赋值操作时,右侧的数值和布尔值会自动转为包装对象Number(),Boolean()
let { toString: s } = 124;
//s === Number.prototype.toString
5.函数参数解构赋值
函数参数的解构赋值类似数组,对象的解构赋值
[[1, 2], [3, 4]].map(([a, b]) => a + b);
对于参数的对象解构,注意默认值的赋值位置
function move1({a=0,b=0} = {}) { // 相当于给参数a,b赋初值
return [a,b]
}
function move2({a,b} = {a:0, b:0}) { // 相当于默认传参a = 0, b= 0,即不传参时的默认值
return [a,b]
}
console.log(move1()); // [0,0]
console.log(move2()); // [0,0]
console.log(move1({}));// [0,0]
console.log(move2({}));// [undefined,undefined]
console.log(move1({a: 3})); // [3,0]
console.log(move2({a: 3})); // [3,undefined]
6.小括号的使用
避免使用小括号。(
ES6-3 变量的解构赋值的更多相关文章
- es6之变量的解构赋值
es5中通常我们声明变量都是以下的方式: var a = 10; var b = 20; var c = 30; //或者 var a = 10,b = 20,c = 30; //或者 var arr ...
- es6分享——变量的解构赋值
变量的解构赋值:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前的写法: var a = 1; var b = 2; es6允许的写法 ...
- ES6 继续 变量的解构赋值
春节放假这几天,感觉跟梦一样,瞬间就过去了.现在上班的前几天,都感觉有点不真实,不过看到口袋里的钱,就知道,是真真实实的度过了这个假期. 现在得开始重新工作了: 变量的解构赋值 ES6 允许按照一定模 ...
- ES6入门——变量的解构赋值
1.数组的解构赋值 以前为变量复制,只能直接指定值.现在ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 本质上,这种写法属于模式匹配,只要等 ...
- ES6中变量的解构赋值
1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 输出: 上面代码表示,可以从数组中提取值,按照对应位置,对变 ...
- ES6 中变量的解构赋值
1. 数组的解构赋值 解构: ES6 中允许按照一定的模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构(Destructuring). 1. 基本用法 本质上,这种写法属于"模式匹 ...
- es6系列-变量的解构赋值
git地址: https://github.com/rainnaZR/es6-study/tree/master/src/destructuring 变量的解构赋值 变量的解构赋值: 数组, 对象, ...
- ES6基础-变量的解构赋值
作者 | Jeskson 来源 | 达达前端小酒馆 解构赋值: 数组的解构赋值,对象的解构赋值,字符串的解构赋值,数值与布尔值的解构赋值,函数参数的解构赋值. 开发环境准备: 编辑器,VS Code, ...
- 【ES6】变量的解构赋值
1. 数组 var [a, b, c] = [1, 2, 3]; let [a, [b], d] = [1, [2, 3], 4]; 默认值生效的条件是,对象的属性值严格等于undefined. [x ...
- ES6 变量的解构赋值
数组的解构赋值 var [a,b,c] = [1,2,3]; 左边是变量,右边是值,根据数据结构一一对应 只要等号两边的模式相同,左边的变量就会被赋予右边对应的值,必须模式相同 如果等号 ...
随机推荐
- python学习-46 时间模块
时间模块 ····时间戳 print(time.time()) 运行结果: 1564294158.0389376 Process finished with exit code 0 ·····结构化时 ...
- 怎样理解数组的空元素empty与undefined的区别
数组的空元素empty表示空位, 它不是一种数据类型, 而是由于人为修改arr.length 或者写入时多写了逗号造成的. var arr = [1,2,3,4,,,5]; arr.length; a ...
- Unity性能优化-DrawCall
1. DrawCall是啥?其实就是对底层图形程序(比如:OpenGL ES)接口的调用,以在屏幕上画出东西.所以,是谁去调用这些接口呢?CPU.比如有上千个物体,每一个的渲染都需要去调用一次底层接口 ...
- (十四)Activitivi5之个人任务分配
一.个人任务分配 1.1 方式一:直接流程图配置中写死: 1.2 方式二:使用流程变量 我们在启动流程的时候设置流程变量即可 /** * 启动流程实例 */ @Test public void sta ...
- Python笔记-备忘
一.向列表添加元素 x.append(y) #末尾添加一个元素 x.extend([y,z]) #末尾添加多个元素 x.insert(index,y) 二.向列表获取元素 x[index] 三.从列表 ...
- IDEA安装及默认配置习惯配置(二)
安装完后,接下来配置Idea使用习惯. 一.基本使用 1.字体设置 2.修改编码模式 3.显示行号和方法分割线 4. 格式化代码时候多行空行合并为1行 5.代码提示不区分大小写 6.自动导包设置 7. ...
- 面试题之String s="a"+"b"+"c"+"d";
今天遇到了一个面试题的选择,我当时真的没怎么在意,其实挺好玩的. 1.这条语句String s="a"+"b"+"c"+"d&qu ...
- [Vuex系列] - Mutation的具体用法
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 ...
- 伪元素before和after本质
之所以被称为伪元素,是因为他们不是真正的页面元素,html没有对应的元素,但所有的用法和表现行为和真正的页面元素是一样的,可以对其使用诸如页面元素一样的css样式,表面上看上去貌似页面的谋些元素,实际 ...
- git基本命令总结
介绍 上一篇博客介绍了git的基本使用方式,建议可以去阅读一下廖雪峰关于git的文章写的十分详细,并且通俗易懂,这篇博客主要是总结上一篇博客中用到的git命令,方便使用查询. git常用命令小结 gi ...