es6 的解构赋值

简介: 【8月更文挑战第22天】

1.数组的结构赋值
以前,为变量赋值,只能直接指定值。

let a = 1;
let b = 2;
let c = 3;
ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];
console.log(a);//1
console.log(b);//2
console.log(c);//3
上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。

本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。

2.对象的解构赋值
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

let { bar1, foo } = { foo: 'aaa', bar1: 'bbb' };
console.log(
foo, // "aaa"
bar1 // "bbb"
);
let { baz } = { foo: 'aaa', bar: 'bbb' };
console.log(baz);// undefined
如果解构失败,变量的值等于undefined。

3.字符串的解构赋值
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';
console.log(a, b, c, d, e); // "h e l l o"

相关文章
|
7月前
|
JavaScript
ES6之变量的解构赋值
ES6之变量的解构赋值
|
7月前
|
JSON JavaScript 前端开发
ES6 变量的解构赋值
ES6 变量的解构赋值
ES6学习(2)解构赋值
ES6学习(2)解构赋值
|
3月前
ES6解构赋值
本文介绍了ES6中解构赋值的用法,包括对象和数组的解构,展示了如何从复杂数据结构中提取需要的变量,以及使用重命名和嵌套解构来简化代码。
40 0
ES6解构赋值
|
6月前
|
JSON JavaScript 前端开发
ES6 解构赋值详解
ES6是JavaScript语言的一次重大更新,引入了许多新特性和语法改进,其中解构赋值是一个非常实用和灵活的语法特性。它可以让我们从数组或对象中提取值,并赋给对应的变量,让代码变得更加简洁和易读。本文将深入探讨ES6解构赋值的语法、用法及其在实际开发中的应用。
196 58
ES6 解构赋值详解
|
5月前
ES6 解构赋值【详解】
ES6 解构赋值【详解】
30 0
|
JavaScript 前端开发 网络架构
ES6 解构赋值
ES6 解构赋值
88 0
|
7月前
|
小程序
es6学习笔记(二)解构赋值
es6学习笔记(二)解构赋值
ES6语法: 解构赋值
ES6语法: 解构赋值
61 0