ES6入门之变量的解构赋值(二)
前言
在上一章 ES6入门之let和const命令中我们对ES6的相关语法已经有了初步了解，上一章中我们主要学习了三大部分的内容，let命令的使用，块级作用域，const命令的使用，那么从本篇博客将进一步深入了解ES6中的相关语法，毕竟未来ES6是主流。
本章目标
- 学会数组的解构赋值
- 学会对象的解构赋值
- 学会字符串的解构赋值
- 学会数值和布尔值的解构赋值
- 学会函数参数的解构赋值
- 学会解构赋值的用途
本人对解构赋值的理解：模式匹配，匹配成功获取值，匹配不成功则为undefined，好比开心消消乐一样(我没有玩过，但是听过一点点)，开心消消乐中只要有相同的就会消失，然后加分，而模式匹配呢？匹配成功加分，匹配不成功则失败。
数组的解构赋值
数组的解构赋值十分简单，只要等号左右两边模式匹配成功，则获取值，否则为undefined，在讲解数组解构赋值之前，我们先来看下我们以前定义变量的格式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let a=1;
let b=2;
let c=3;
//或者
let a=3,
b=4,
c=5;
//ES6的模式
let [a,b,c]=[4,5,6];//左右两边相等，a=4,b=5,c=6
</script>
</body>
</html>
在这里我们已经使用了数组的解构赋值，即let [a,b,c]=[4,5,6]左右两边进行模式匹配，可得a=4,b=5,c=6
(1)不完全解构
解构除了完全解构之外，还具备不完全解构的特性,即左边的模式只匹配一部分等号右边的数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let [x,y]=[1,2,3];
console.log(x);//1
console.log(y);//2
let [a,[b],d]=[1,[2,3],4];
console.log(a);//1
console.log(b);//2
console.log(d);//4
</script>
</body>
</html>
(2)特殊值
如果等号右边不是数组，那么将会报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
(3)默认值
数组的解构允许有默认值，如果一个数组的成员为null,默认值就不会生效，因为null不严格等于undefined
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let [foo=true]=[];
console.log(foo);//true
let [x,y='b']=['a'];
let [z,w='b']=['a',undefined];
console.log(x);//a
console.log(y);//b
console.log(z);//a
console.log(w);//b
let [a=1]=[undefined];
let [b=2]=[null];
console.log(a);//1
console.log(b);//null
</script>
</body>
</html>
对象的解构赋值
关于对象的解构赋值我总结了如下三点
- 数组的元素是按次序排列的，变量的取值有它的位置决定，而对象的属性是没有次序的，变量必须和属性同名，才能取到正确的值
- 如果解构失败，变量的值等于undefined
- 对象解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量，真正被赋值的是后者，而不是前者
示例1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>对象的解构赋值</title>
</head>
<body>
<script type="text/javascript">
//按顺序排列
// let {foo,bar}={foo:'foo',bar:'bar'};
// console.log(foo);//foo
// console.log(bar);;//bar
//不按顺序排列
// let {bar,foo}={foo:'foo',bar:'bar'};
// console.log(bar);//bar
// console.log(foo);;//foo
//解构不成功，值为undefined
let {baz}={foo:'foo',bar:'bar'};
console.log(baz);//undefined
</script>
</body>
</html>
在这个案例中，我们有按顺序的解构，没有顺序的解构，以及解构不成功的情况
示例二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>对象的解构赋值</title>
</head>
<body>
<script type="text/javascript">
let {foo:baz}={foo:'aaa',bar:'bbb'}
console.log(baz);//aaa
let obj={first:'hello',last:'world'};
let {first:a,last:b}=obj;
console.log(a);//hello
console.log(b);//world
</script>
</body>
</html>
从而可以看出：对象解构赋值的原理是先找到同名属性，然后再赋给对应变量，真正被赋值的是后者而不是前者
字符串的解构赋值
字符串的结构赋值十分简单，和之前的解构赋值一样也是模式匹配，注意：字符串中有length属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字符串解构赋值</title>
</head>
<body>
<script type="text/javascript">
const [a,b,c,d,e]='hello';
console.log(a);;//h
console.log(b);//e
console.log(c);//l
console.log(d);//l
console.log(e);//o
let {length:len}='hello';
console.log(len);//5
</script>
</body>
</html>
数值和布尔值的解构赋值
解构赋值原理：只要等号右边的值不是数组或对象，就先将其转为对象，但是也有特殊情况，如：undefined和null无法转为对象，所以对它们进行解构赋值都会报错。这一点非常重要
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数值和布尔值的解构赋值</title>
</head>
<body>
<script type="text/javascript">
// let {toString:s}=123;
// console.log(s===Number.prototype.toString);
// let {toString:b}=true;
// console.log(b===Boolean.prototype.toString);
let {prototype:x}=undefined;
let {prop:y}=null;
console.log(x);//报错
console.log(y);//报错
</script>
</body>
</html>
函数参数的解构赋值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数参数解构赋值</title>
</head>
<body>
<script type="text/javascript">
function add([x,y]){
return x+y;
}
console.log(add([1,3]));//4
[[1,2],[3,4]].map(([a,b])=>{
console.log(a+b);//4,7
})
//使用默认值
function move({x=0,y=0}){
return [x,y]
}
move({x:3,y:10});//[3,8]
move({x:3})//[3,0]
move({})//[0,0]
move();//[0,0]
function bar({x,y}={x:0,y=0}){
return [x,y]
}
move({x:3,y:8});//[3,8]
move({x:3});//[3,undefined]
move({});//[undefined,undefined]
move();//[0,0]
</script>
</body>
</html>
在move方法中函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值，而函数bar的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果
解构赋值的实际用途
(1)交换变量的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解构赋值的用途</title>
</head>
<body>
<script type="text/javascript">
//(1)交换变量的值
let x=1;
let y=2;
[x,y]=[y,x];
console.log(x);//2
console.log(y);//1
</script>
</body>
</html>
在这里，我们可以看到x和y的值进行了交换，x的值从1变成的2，而y的值从2变成了1
(2)从函数返回多个值
我们知道javascript中中使用return只能返回一个值，如果需要返回多个值的话就需要将数据放在数组或对象中，然后return回去，但是有了解构赋值，你想要取出这些值就非常方便，我们看下下面的示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解构赋值的用途</title>
</head>
<body>
<script type="text/javascript">
//(2)从函数返回多个值
//返回一个数组
function bar(){
return[1,2,3]
}
let[a,b,c]=bar();
console.log(a);//1
console.log(b);//2
console.log(c);//3
//返回一个对象
function baz(){
return{
x:1,
y:2,
}
}
let {x,y}=baz();
console.log(x);//1
console.log(y);//2
</script>
</body>
</html>
在这里我们返回一个数组之后使用a,b,c进行解构赋值，匹配a=1,b=2,c=3,而返回对象之后我们使用对象来接收，注意：返回对象的键名一定要和需要解构的键名一致，否则取到的值为undefined
(3)函数参数定义
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解构赋值的用途</title>
</head>
<body>
<script type="text/javascript">
//(3)函数参数定义
//参数是一组有次序的值
function foo([x,y,z]){
console.log(x);//1
console.log(y);//2
console.log(z);//3
}
foo([1,2,3]);
//参数是一组无序的值
function bar({x,y,z}){
console.log(x);//10
console.log(y);//20
console.log(z);//1
}
bar({z:1,x:10,y:20})
</script>
</body>
</html>
(4)提取JSON数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解构赋值的用途</title>
</head>
<body>
<script type="text/javascript">
//(4)提取JSON数据
let stu={
name:'一只流浪的kk',
age:18,
sex:'male'
}
let {name:name,age:age,sex:sex}=stu;
console.log(name,age,sex);//一只流浪的kk,18,male
</script>
</body>
</html>
使用解构赋值可以很方便的提取JSON中的数据
(5)函数参数默认值
这种方法我们见过很多，再封装ajax的时候经常用到或者是扩张jquery插件的时候，我们都会添加默认值
//(5)函数参数默认值
;
(function(method) {
method(window, window.document, jQuery);
}(function(win, doc, $) {
＄.fn.SuperPlus = function(options) {
//默认参数
var setting={
length:3,
color:"blue"
};
//使用用户的参数覆盖默认参数
$.extend(setting,options); return $.each(this, function(index, obj) {
$("<span/>").html("+").css("cursor", "pointer").css("color",setting.color).click(function() {
$(obj).width($(obj).width() + setting.length);
}).insertAfter(obj);
}); }
}));
在这里我们就是指定了默认值，我们对外开发我们可以让用户进行修改的一些参数，当用户没有传递的时候，我们就使用默认值
(6)遍历Map结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解构赋值的用途</title>
</head>
<body>
<script type="text/javascript">
//(6)遍历Map结构
const map=new Map();
map.set('first','hello');
map.set('last','world');
for(let [key,value] of map){
console.log('键是：'+key,'值是:'+value);//键：first,last,值：hello,world
}
//或者
for(let [key,value] of map.entries()){
console.log('键是：'+key,'值是:'+value);//键：first,last,值：hello,world
}
//如果只想遍历key
for(let [key,] of map){
console.log(key);//first,last
}
//如果只想遍历value
for(let [,value] of map){
console.log(value);//hello,world
}
</script>
</body>
</html>
这里涉及到map的相关知识，关于ES6新增的数据结构，查看博客https://www.cnblogs.com/jjgw/p/11561169.html
(7)输入模块的指定方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解构赋值的用途</title>
</head>
<body>
<script type="text/javascript">
//(7)输入模块的指定方法
const{add,sub}=require('count');
</script>
</body>
</html>
这种方法我们之后会用到，关于ES6中模块的加载，例如：AMD,CMD,UMD等等，现阶段只需要了解一下
ES6入门之变量的解构赋值(二)的更多相关文章
- ES6学习之变量的解构赋值
前言:什么是ES6?ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.其中相比较于ES5新增了诸多的特性,并且ES6可转换为ES5的语法.- ...
- ES6 学习笔记 - 变量的解构赋值
变量的解构赋值 学习资料:ECMAScript 6 入门 数组的解构赋值 基本用法 可以从数组中提取值,按照对应位置,对变量赋值.这种写法属于"模式匹配". let [a, b, ...
- ES6学习历程(变量的解构赋值)
一.数组的解构赋值 1.举几个例子足以理解 let [a, b, c] = [1, 2, 3]; a:1; b:2; c:3; let [x, , y] = [1, 2, 3]; x:1 y ...
- ES6学习4 变量的解构赋值
变量的解构赋值 一.数组结构赋值 1.数组结构赋值 let [a, b, c] = [1, 2, 3]; ES6 可以从数组中提取值,按照对应位置,对变量赋值. 1) 本质上,这种写法属于“模式匹配 ...
- ES6中的变量的解构赋值， 解放我们的双手，实现变量的批量赋值
ES6--变量的解构赋值 引言 正文 一.数组的解构赋值 解构失败 不完全解构 默认值 二.对象的解构赋值 三.字符串的解构赋值 结束语 引言 变量的解构赋值, 听起来很复杂, 简单点说可以理解成批量 ...
- ES6标准入门之变量的解构赋值简单解说
首先我们来看一看解构的概念,在ES6标准下,允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称作解构,简而言之粗糙的理解就是变相赋值. 解构赋值的规则是,只要等号右边的值不是对象或者数组 ...
- JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值
1.解构赋值的定义 在ES6中,允许按照一定模式,从数组和对象中提取值(所谓解构),然后对变量进行赋值. var a = 1; var b = 2; var c = 3; //等价于 var [a, ...
- ECMAScript 6 入门之变量的解构赋值
1.数组 1. var a=1,b=2,c=3; console.log("a:",a) console.log("b:",b) console.log(&qu ...
- ES6入门——变量的解构赋值
1.数组的解构赋值 以前为变量复制,只能直接指定值.现在ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 本质上,这种写法属于模式匹配,只要等 ...
随机推荐
- 我用数据结构花了一夜给女朋友写了个h5走迷宫小游戏
目录 起因 分析 画线(棋盘) 画迷宫 方块移动 结语 @(文章目录) 先看效果图(在线电脑尝试地址http://biggsai.com/maze.html): 起因 又到深夜了,我按照以往在公众号写 ...
- Java位运算符&、|、^、>>、<<、~、>>>
如果要搞懂Java中的位运算符,首先要搞懂二进制的运算,之前一篇有介绍详细请看 二进制运算-十进制与二进制的转换 Java中的位运算符有:&(按位与).|(按位或).^(按位异或).>& ...
- JRebel 破解最简单的使用
### 前提提示 JRebel是一款JVM插件,它使得Java代码修改后不用重启系统,立即生效.IDEA上原生是不支持热部署的,一般更新了 Java 文件后要手动重启 Tomcat 服务器,才能生效, ...
- Linux初识之Centos7中terminal光标位置偏移问题的解决
新安装的centos7打开terminal发现光标位置向右偏移,使用起来影响感官,经查询后找到类似情况并顺利解决问题,特记录解决过程以作参考. 1.未解决时光标向右偏移显示: 2.打开设置(Setti ...
- css/js禁止点击元素
css禁止点击页面元素,只需一句代码即可解决: pointer-events: none; 如果用js来控制的话那就是: $('#test').click(function(){ return fal ...
- 关于webpack
webpack 是一个模块打包器,能够把所有的文件都当做是一个模块 它把所有的文件资源(js,json,css,sass,图片)都看作为模块 将这些文件资源解析处理以后,生成对应的打包文件 使用web ...
- 在Debian上用FVWM做自己的桌面
用FVWM做自己的桌面 Table of Contents 1. 前言 2. 学习步骤 3. 准备 3.1. 软件包 3.2. 字体 3.3. 图片 3.4. 参考资料 4. 环境 5. 布局 6. ...
- Eureka实战-2【构建Multi Zone Eureka Server】
工程pom中公共依赖 <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEnco ...
- 深入Dapper.NET源码 (文长)
目录 前言.目录.安装环境 Dynamic Query 原理 Part1 Dynamic Query 原理 Part2 Strongly Typed Mapping 原理 Part1 : ADO.NE ...
- DevExpress GridControl导出ExportToXls 数字类型显示成货币格式
用Dev开发很习惯直接用自带控件导出Excel,现在很少使用原生的Excel API去操作了.除非需要详细的控制. 但别人家封装好的就得按人家的规则的.在使用GridControl导出Excel时发现 ...