es6——解构
2019-07-17 本文已影响0人
汀上
解构赋值是对赋值运算符的扩展,以下demo:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
<!-- 对数组进行一系列操作 -->
var [a, b, c] = [1, 2, 3];
console.log('基本结构', a, b, c); //1 2 3
var [a, [[b], c]] = [2, [[3], 4]];
console.log('嵌套结构', a, b, c) // 2 3 4
var [a, , c] = [3, 4, 5];
console.log('忽略解构', a, c) //3 5
var [a = 1, b] = []
console.log('不完全解构', a, b) // 1 undefined
var [a, ...b] = [1, 3, 3, 4, 5];
console.log('...(剩余运算符)', a, b) //1 [3,3,4,5]
<!-- 对字符串进行操作 -->
var [a, b, c, d, e] = 'hello'
console.log('字符串', a, b, c, d, e) //'h' 'e' 'l' 'l' 'o'
var [a, b, c, d, e] = 'helloword'
console.log('字符串', a, b, c, d, e) //'h' 'e' 'l' 'l' 'o'
var [a, b, c, d, e] = 'hel'
console.log('字符串', a, b, c, d, e) //'h' 'e' 'l' 'undefined' 'undefined'
<!-- 解构默认值 -->
var [a = 2] = [undefined] //a = 2，有匹配结果，结果是undefined，触发默认值
var [a = 3, b = a] = [] //a = 3 , b = 3
var [a = 3, b = a] = [1] //a = 1,b=1
var [a = 3, b = a] = [1, 2] //a = 1,b =1
<!-- 解构对象 -->
var {foo , bar } = {foo:'aaa',bar:'bbb'}; //foo = aaa,bar = bbb
var {baz = foo} = {baz : 'ddd'}// baz = ddd
var obj = {p:['hello',{y:'world'}]}
var {p:[x,{y}]} = obj //x = 'hello' y = 'world'
var {p :[x,{}]} = obj //x = 'hello'
var {p:[x,{y},z]} = obj //x = 'hello',y = 'world',z = undefined
var {a,b,...c} = {a:1,b:2,c:3,d:4,e:5,f:6,g:7}//a = 1,b = 2,c = {c:3,d:4,e:5,f:6,g:7}
var {a = 10,b = 5} = {a:3}; //a = 3
var {a = 10, b = 5} = {a: 3};// a = 3; b = 5;
var {a: aa = 10, b: bb = 5} = {a: 3};// aa = 3; bb = 5;
// 主要应用 遍历map
var map = new Map() ;
map.set('first','hello');
map.set('second','world');
console.log(map)
for(let [key] of map){
console.log(key)
}
for(let [,value] of map){
console.log(value)
}
</script>
</html>
