发布作者: JavaScript大王
百度收录: 正在检测是否收录...
最后更新: 2022年 12月 15日 13:45
作品采用: 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权
数组解构赋值本质上是一种模式匹配,只要等号两边的模式相同,左边的变量就会被赋予对应的值;
<script>
let [a,b,c] = [1,2,3];
console.log(a,b,c); // 1 2 3
// 只要等号两边的模式匹配,就能完成解构赋值
let [, , third] = ["aa","bb","cc"];
console.log(third);// cc
let [one,[two,[three]]] = [1,[2,[3]]];
console.log(one,two,three);
</script>
// 不完全解构
let [aaa,bbb] = [111,222,333];
console.log(aaa,bbb); // 111 222
解构赋值允许设置默认值:在等号右边能匹配到值的前提下,默认值无效;
// 解构赋值的默认值设置
let [d = 1] = [];
console.log(d);// 1
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];// null 不全等与undefined
x // null
如果一个==默认值是一个表达式==,==那么该表达式是惰性求值的,即只有在用到默认值时才会求值==;
//默认值为表达式时,表达式只有在用到时才会求值
let [a = fn()] = [];
let [b = fn()] = [222];
function fn(){
return 1;
}
console.log(a,b); // 1 222
// 默认值也可以是其他变量(该变量需要已经被声明)
let [x = 1 , y = x] = [];
console.log(x,y);// 1 1
let [w = z , z = 1] = []
console.log(w); // 报错,z还未声明
常见的两种情况:
// 1.变量名等于属性名:
let { a , b } = {a :1 , b : 2};
console.log(a,b); // 1 2
// 2.变量名 !== 属性名
let{first : f , last : l} = {first : 3 , last : 4};
console.log(f,l); // 3 4
// 可以嵌套使用
let obj = {
p : [
"hello",
{ y : "world"}
]
}
let { p : [x,{y}]} = obj;
console.log(x + y); // helloworld
// 可以使用默认值,默认值生效的前提是对象的属性全等于undefined
let {q,w = 1} = {q : 11 , w : undefined};
console.log(q,w); // 11 1 w严格等于undefined,因此默认值等于1
// 对象解构可以很方便的将现有对象的某个方法赋值给变量
let {random,floor} = Math;
console.log(random);// ƒ random() { [native code] }
// 数组本质是特殊的对象,因此可以对数组进行对象属性的解构
const arr = [1,2,3,4,5,6];
let {0 : first , [arr.length - 1] : last} = arr;
console.log(first,last);// 1 6
const str = "hello";
let [a,b,c,d,e] = str; // 此时该字符串被转化成一个伪数组,具有length属性但是没有数组的方法
console.log(a,b,c,d,e); // h e l l o
// 数值和布尔值,会先被转换成对象再进行赋值
let {toString : s} = 1;
let {toString : b} = true;
// 判断s和b的toString的值是否等于对象的toString方法
console.log(s === Number.prototype.toString); // true
console.log(b === Boolean.prototype.toString); // true
// 函数参数使用解构赋值
function add([x,y]) {
console.log(x + y);
}
add([1,2]); // 3
let res = [[1,2],[3,4]].map(([a,b]) => a + b); // map遍历数组,并返回回调函数处理结果组成的新数组
console.log(res);//[3,7]
// 可以使用默认值
function move({x = 0,y = 0}) {
return [x,y];
}
let res1 = move({x : 1 , y : 2});
let res2 = move({x : 1 });
let res3 = move({});
console.log(res1); // [1, 2]
console.log(res2); // [1, 0]
console.log(res3); // [0,0]
// 1.变量声明语句不能使用圆括号
let [(a)] = 1;
let {(a) : 1} = {};
// 2.函数参数
function test([(a)]) {
// 哈哈哈哈哈
}
// 3.赋值语句中的模式
({ p : a })= { p :44};
// 赋值语句的非模式部分可以使用圆括号
[(a)] = [3];
console.log(a); // 3
({p : (b)} = {p : 4});
console.log(b);// 4
// 1. 交换变量值
let a = 1;
let b = 2;
[a,b] = [b,a];
console.log(a,b); // 2 1
// 2. 从函数返回多个值,以数组为例(对象也同理)
function test() {
return [1,2,3];
}
let [c,d,e] = test();
console.log(c,d,e); // 1 2 3
// 3.定义函数参数
// 3.1 函数参数为有次序的值时,使用数组解构赋值
function fn1([g,h]) {
console.log(g,h);
}
fn1([1,2]); // 1 2
// 3.1 函数参数为无次序的值时,使用对象解构赋值
function fn2({one : name , two : age}) {
console.log(name,age);
}
fn2({one : "peanut",two : 88}); // peanut 88
// 4. 提取json数据
let jsonData = {
name : "peanut",
age : 33,
learning : ['javascript','less']
}
// 数组解构赋值
let {name,age,learning : subject} = jsonData;
console.log(name,age,subject);
// 5.遍历Map结构
// 5.1 获取对象的键 值
let map = new Map();
// 设置map对象的属性
map.set("first","peanut");
map.set("second","test");
for(let [key,value] of map) {
console.log(key + " " + value);
}
// first peanut
// second test
// 只获取键
for(let [key] of map){
console.log(key);
}
// first
// second
// 只获取值
for(let [,value] of map){
console.log(value);
}
// peanut
// test
// 输入模块的指定方法
const { SourceMapConsumer, SourceNode } = require("source-map");
—— 评论区 ——