es6学习笔记--解构赋值
昨天学习了es6语法中解构赋值,解构赋值在声明中和函数传参提高了灵活性和便捷性,值得掌握该语法。
let [a,b,c] = [1,2,3];
console.log(a); //
console.log(b); //
console.log(typeof c); // number
console.log(a === 1); // true
let [arr,foo] = [1];
console.log(foo); // undefined
let [x, y] = [1, 2, 3];
console.log(x); //
console.log(y); //
let [x,[a],y] = [1,[2,3],4];
console.log(a) //
let [a,b=2] = [1];
console.log(a) //
console.log(b) //
let [a,b=2] = [1,3];
console.log(`a的值是${a} b的值是${b}` ) // 1 3
let [a,b=2] = [1,undefined];
console.log(`a的值是${a} b的值是${b}` ) // 1 2
let [a,b=2] = [1,null];
console.log(a) //
console.log(null === undefined) // false 严格模式下,null和undefined不等
console.log(b) // null
let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(`x:${x} y:${y}`) // x:2 y:1
let {b, a, c} = {a: 'peter', b: 'Bob'};
console.log(`a:${a} b:${b} c:${c}`) // peter Bob undefined
const obj = {
foo: 'peter',
bar: 25
};
let {foo: name, bar: age} = obj;
console.log(`name:${name} age:${age}`) // name:peter age:25
{obj} = {obj: 10} // Uncaught SyntaxError: Unexpected token =
({obj} = {obj: 10})
在对象解构赋值中,最常用的就是,函数返回值,有多个时,可以按照返回对象的形式返回。
function foo() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = foo();
let json = {
id: 1,
status: 200,
data: [123, 456]
};
let { id, status, data: number } = json;
console.log(id, status, number); // 1, 200, [123, 456]
let [a,b,c,d,e,f] = 'hello';
console.log(`a:${a} b:${b} c:${c} d:${d} e:${e} f:${f}`) // a:h b:e c:l d:l e:o f:undefined
console.log(typeof a) // string let [m,n,q,p] = 'w ord';
console.log(`m:${m} n:${n} q:${q} p:${p}`) // m:w n: q:o p:r let {length:len} = 'hello world';
console.log(len) // let [a='H',b,c,d,e,f='W'] = 'hello';
console.log(`a:${a} b:${b} c:${c} d:${d} e:${e} f:${f}`) // a:h b:e c:l d:l e:o f:W
function add([x, y]){
return x + y;
}
console.log(add([1,2])); // 3
function move({x = 0, y = 0} = {}) {
return [x, y];
}
console.log(move({x: 1, y: 2})); // [1, 2]
console.log(move({x: 1})); // [1, 0]
console.log(move({})); // [0, 0]
console.log(move()); // [0, 0]
对应的笔记和实例,我放到了GitHub,https://github.com/sqh17/notes
有什么问题请私信或留下评论,一起加油。
参考资料:
阮一峰大大的es6标准入门:http://es6.ruanyifeng.com/
es6学习笔记--解构赋值的更多相关文章
- ES6学习之 解构赋值
最近看了一个vue的项目,发现作者大量使用了ES6的语法,包括async, Promise, Set, Map还有一些解构赋值, 才发现自己对于ES6的语法缺乏了总结和运用,看得有点艰难,所以重新学习 ...
- ES6学习-4 解构赋值(1)数组的解构赋值
解构赋值是ES6很大的一个提升,为我们带来了很多方便,但用不好,会使程序的可读性变差,所以用时要注意,尽量保持程序的易读性. 数组解构赋值 在JS没有支持解构赋值之前,我们声明几个变量并赋值通常都是像 ...
- es6学习笔记2-解构赋值
解构赋值基本概论就按照一定的模式通过数组或者对象对一组变量进行赋值的过程. 1.通过数组对变量进行赋值: /*通过这种方式赋值要注意左右两边的结构模式要一样,在赋值的时候,根据位置进行赋值对应模式.* ...
- ES6学习-5 解构赋值(2)对象的解构赋值
啥也不说,先举个栗子: 1 let { myname, myage } = { myage: 18, myname: "郭郭" }; 2 console.log(myname) / ...
- ES6-11学习笔记--解构赋值
解构赋值:按照一定模式,从数组和对象中提取值,对变量进行赋值. 数组解构 对象解构 字符串解构 应用场景 曾经的赋值噩梦,非解构赋值数组: let arr = [1, 2, 3]; let ...
- ES6 - 变量的解构赋值学习笔记
变量的解析赋值 数组的解析赋值 es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这就称为解构. var a = 1; var b = 2; var c = 3; //在es6中允许写成 ...
- es6变量的解构赋值学习笔记
1. 解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象.由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错. let { prop: x } = undefin ...
- 【JS】325- 深度理解ES6中的解构赋值
点击上方"前端自习课"关注,学习起来~ 对象和数组时 Javascript 中最常用的两种数据结构,由于 JSON 数据格式的普及,二者已经成为 Javascript 语言中特别重 ...
- ES6基础与解构赋值(高颜值弹框小案例!)
let只作用在当前块级作用域内使用let或者const声明的变量,不能再被重新声明let不存在`变量提升` console.log(dad); var dad = '我是爸爸!';//预定义undef ...
随机推荐
- C++ 内存分配(new,operator new)面面观 (转)
本文主要讲述C++ new运算符和operator new, placement new之间的种种关联,new的底层实现,以及operator new的重载和一些在内存池,STL中的应用. 一 new ...
- Python数据结构之三——dict(字典)
Python版本:3.6.2 操作系统:Windows 作者:SmallWZQ 知识源于生活.Python也是如此. 提到字典,我首先想到的是数学大师--高斯. 为何想起他呢?这主要是因为高斯算法 ...
- Ubuntu下Nginx启动、停止等常用命令
本文详细介绍Ubuntu下Nginx启动.停止等常用命令.在开发过程中,我们会经常的修改Nginx的配置文件,每次修改配置文件都可以先测试下本次修改的配置文件是否正确,可以利用以下命令: servic ...
- 【笔记】h5 页面唤起电话呼叫
参考文章:https://www.cnblogs.com/lilin1995/p/5640684.html 最近完成一个公司的官网移动端页面,涉及到了唤起电话这个功能,说实在js 并没有为此提供 ap ...
- ubuntu14.04上实现faster rcnn_TF的demo程序及训练过程
安装环境:Ubuntu14.04.显卡Tesla K40C+GeForce GT 705.tensorflow1.0.0.pycharm5.0 说明:原文见博客园,有问题原文下留言,不定期回复.本文作 ...
- 一个.net专业户转Spring Boot V2.0开发的体会
java web的idea开发工具总体用起来还是比vs差很多,但是在使用Hibernate跟MyBatis的感触,Hibernate有着.net core ef没有的细腻,Hibernate在细节上完 ...
- maven排除jar包冲突
首先查看mvn中冲突的包 使用命令:mvn dependency:tree -Dverbose | grep "omitted for conflict with" windows ...
- 在gitlab上面创建私有库
一.创建私有库1.使用xcode建立新的工程,选择Cocoa Touch Static Library,取名为podTest WechatIMG1172.jpeg 2.创建一个类PodTest,给 ...
- tensorflow_mnist数据集一直加载错误的解决办法
tensorflow数据集一直加载错误的解决办法: from tensorflow.examples.tutorials.mnist import input_data mnist = input_d ...
- LNMP Yii2 验证码不显示问题最终解决方案
首先,本地使用OK! 然后,新配置的LNMP环境,验证码一直显示不出来,看了Yii2的验证码存在session里,怀疑是session有问题. 在测试其他页面的时候,发现:session_start( ...