ES6入门之变量的解构赋值(二)
<h1>前言</h1><p>在上一章 ES6入门之let和const下令中我们对ES6的相干语法已经有了初步了解，上一章中我们主要学习了三大部门的内容，let下令的使用，块级作用域，const下令的使用，那么从本篇博客将进一步深入了解ES6中的相干语法，毕竟未来ES6是主流。</p>
<h1>本章目的</h1>
<ul>
<li> 学会数组的解构赋值</li>
<li> 学会对象的解构赋值</li>
<li> 学会字符串的解构赋值</li>
<li> 学会数值和布尔值的解构赋值</li>
<li> 学会函数参数的解构赋值</li>
<li> 学会解构赋值的用途</li>
</ul>
<p>本人对解构赋值的理解：模式匹配，匹配乐成获取值，匹配不乐成则为undefined，好比开心消消乐一样(我没有玩过，但是听过一点点)，开心消消乐中只要有雷同的就会消散，然后加分，而模式匹配呢？匹配乐成加分，匹配不乐成则失败。</p>
<h1>数组的解构赋值</h1>
<p> 数组的解构赋值非常简朴，只要等号左右两边模式匹配乐成，则获取值，否则为undefined，在解说数组解构赋值之前，我们先来看下我们从前界说变量的格式</p>
<!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=4,b=5,c=6
</script>
</body>
</html>
<p>在这里我们已经使用了数组的解构赋值，即let =左右两边举行模式匹配，可得a=4,b=5,c=6</p>
<p>(1)不完全解构</p>
<p>解构除了完全解构之外，还具备不完全解构的特性,即左边的模式只匹配一部门等号右边的数组</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let =;
console.log(x);//1
console.log(y);//2
let ,d]=,4];
console.log(a);//1
console.log(b);//2
console.log(d);//4
</script>
</body>
</html>
<p>(2)特殊值</p>
<p>如果等号右边不是数组，那么将会报错</p>
let = 1;
let = false;
let = NaN;
let = undefined;
let = null;<br />
<p>(3)默认值</p>
<p>数组的解构允许有默认值，如果一个数组的成员为null,默认值就不会生效，因为null不严格即是undefined</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let =[];
console.log(foo);//true
let =['a'];
let =['a',undefined];
console.log(x);//a
console.log(y);//b
console.log(z);//a
console.log(w);//b
let =;
let =;
console.log(a);//1
console.log(b);//null
</script>
</body>
</html>
<h1>对象的解构赋值</h1>
<p>关于对象的解构赋值我总结了如下三点</p>
<ul>
<li>数组的元素是按次序分列的，变量的取值有它的位置决定，而对象的属性是没有次序的，变量必须和属性同名，才气取到精确的值</li>
<li>如果解构失败，变量的值即是undefined</li>
<li>对象解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量，真正被赋值的是后者，而不是前者</li>
</ul>
<p>示例1</p>
<!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>
<p>在这个案例中，我们有按次序的解构，没有次序的解构，以及解构不乐成的环境</p>
<p>示例二</p>
<!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>
<p>从而可以看出：对象解构赋值的原理是先找到同名属性，然后再赋给对应变量，真正被赋值的是后者而不是前者</p>
<h1>字符串的解构赋值</h1>
<p>字符串的结构赋值非常简朴，和之前的解构赋值一样也是模式匹配，留意：字符串中有length属性</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字符串解构赋值</title>
</head>
<body>
<script type="text/javascript">
const ='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>
<h1>数值和布尔值的解构赋值</h1>
<p>解构赋值原理：只要等号右边的值不是数组或对象，就先将其转为对象，但是也有特殊环境，如：undefined和null无法转为对象，所以对它们举行解构赋值都会报错。这一点非常重要</p>
<!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>
<h1>函数参数的解构赋值</h1>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数参数解构赋值</title>
</head>
<body>
<script type="text/javascript">
function add(){
return x+y;
}
console.log(add());//4
[,].map(()=>{
console.log(a+b);//4,7
})
//使用默认值
function move({x=0,y=0}){
return
}
move({x:3,y:10});//
move({x:3})//
move({})//
move();//
function bar({x,y}={x:0,y=0}){
return
}
move({x:3,y:8});//
move({x:3});//
move({});//
move();//
</script>
</body>
</html>
<p>在move方法中函数<code>move</code>的参数是一个对象，通过对这个对象举行解构，得到变量<code>x</code>和<code>y</code>的值。如果解构失败，<code>x</code>和<code>y</code>即是默认值，而函数bar的参数指定默认值，而不是为变量<code>x</code>和<code>y</code>指定默认值，所以会得到与前一种写法不同的结果</p>
<h1>解构赋值的现实用途</h1>
<h4>(1)交换变量的值</h4>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解构赋值的用途</title>
</head>
<body>
<script type="text/javascript">
//(1)交换变量的值
let x=1;
let y=2;
=;
console.log(x);//2
console.log(y);//1
</script>
</body>
</html>
<p>在这里，我们可以看到x和y的值举行了交换，x的值从1变成的2，而y的值从2变成了1</p>
<h4>(2)从函数返回多个值</h4>
<p> 我们知道javascript中中使用return只能返回一个值，如果需要返回多个值的话就需要将数据放在数组或对象中，然后return归去，但是有了解构赋值，你想要取出这些值就非常方便，我们看下下面的示例。</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解构赋值的用途</title>
</head>
<body>
<script type="text/javascript">
//(2)从函数返回多个值
//返回一个数组
function bar(){
return
}
let=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>
<p>在这里我们返回一个数组之后使用a,b,c举行解构赋值，匹配a=1,b=2,c=3,而返回对象之后我们使用对象来吸收，留意：返回对象的键名肯定要和需要解构的键名同等，否则取到的值为undefined</p>
<h4>(3)函数参数界说</h4>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>解构赋值的用途</title>
</head>
<body>
<script type="text/javascript">
//(3)函数参数界说
//参数是一组有次序的值
function foo(){
console.log(x);//1
console.log(y);//2
console.log(z);//3
}
foo();
//参数是一组无序的值
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>
<h4>(4)提取JSON数据</h4>
<!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>
<p>使用解构赋值可以很方便的提取JSON中的数据</p>
<h4>(5)函数参数默认值</h4>
<p> 这种方法我们见过很多，再封装ajax的时候经常用到大概是扩张jquery插件的时候，我们都会添加默认值</p>
//(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) {
$("").html("+").css("cursor", "pointer").css("color",setting.color).click(function() {
$(obj).width($(obj).width() + setting.length);
}).insertAfter(obj);
});
}
}));
<p>在这里我们就是指定了默认值，我们对外开发我们可以让用户举行修改的一些参数，当用户没有通报的时候，我们就使用默认值</p>
<h4>(6)遍历Map结构</h4>
<!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 of map){
console.log('键是：'+key,'值是:'+value);//键：first,last,值：hello,world
}
//大概
for(let of map.entries()){
console.log('键是：'+key,'值是:'+value);//键：first,last,值：hello,world
}
//如果只想遍历key
for(let of map){
console.log(key);//first,last
}
//如果只想遍历value
for(let [,value] of map){
console.log(value);//hello,world
}
</script>
</body>
</html>
<p>这里涉及到map的相干知识，关于ES6新增的数据结构，查看博客 https://www.cnblogs.com/jjgw/p/11561169.html</p>
<h4>(7)输入模块的指定方法</h4>
<!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>
<p>这种方法我们之后会用到，关于ES6中模块的加载，比方：AMD,CMD,UMD等等，现阶段只需要了解一下</p>
<p> </p><br><br/><br/><br/><br/><br/>来源：<a href="https://www.cnblogs.com/jjgw/p/11717379.html" target="_blank">https://www.cnblogs.com/jjgw/p/11717379.html</a>
页:
[1]