03【解构赋值】

最新推荐文章于 2024-05-25 13:46:03 发布

VIP文章 DSelegent

最新推荐文章于 2024-05-25 13:46:03 发布

阅读量379

点赞数

分类专栏： ES6学习笔记文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/DSelegent/article/details/126558537

版权

解构赋值

1.数组的解构赋值

1.1 原理

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

以前，为变量赋值，只能直接指定值。

let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

模式（结构）匹配 [] = [1, 2, 3];
索引值相同的完成赋值 const [a, b, c] = [1, 2, 3];

举例

const [a, [, , b], c] = [1, [2, 3, 4], 5];
console.log(a, b, c);	// 1 4 5

1.2 数组解构赋值的默认值

（1）默认值的基本用法

const [a, b] = [];
console.log(a, b);	// undefined undefined

// ---------------------------------------
const [a = 1, b = 2] = [];
console.log(a, b);	// 1 2

（2）默认值的生效条件

只有当一个数组成员严格等于 (===) undefined 时，对应的默认值才会生效。

const [a = 1, b = 2] = [3, 0];		// 3 0
const [a = 1, b = 2] = [3, null];	// 3 null
const [a = 1, b = 2] = [3];		    // 3 2

（3）默认值表达式

如果默认值是表达式，默认值表达式是惰性求值的（即：当无需用到默认值时，表达式是不会求值的）

const func = () => {
   
    return 24;
};

const [a = func()] = [1];	// 1
const [b = func()] = [];	// 24

1.3 数组解构赋值的应用

（1）arguments

function func() {
   
    const [a, b] = arguments;
    console.log(a, b);	// 1 2
}
func(1, 2);

（2）NodeList

<!DOCTYPE html>
<html lang=

最低0.47元/天解锁文章

DSelegent

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
03【解构赋值】

03【解构赋值】
复制链接

扫一扫

专栏目录