自学内容网 自学内容网

07 ES6的解构赋值

ES6(ECMAScript 2015)引入了解构赋值(Destructuring assignment)的概念,它允许我们以一种简洁的方式从数组或对象中提取值,并赋值给变量。下面是对ES6解构赋值的介绍:

解构赋值数组

解构赋值允许我们快速从数组中提取元素,并将其赋值给定义好的变量。基本语法是使用方括号[]包围变量名。

var arr = ['海绵宝宝', '天线宝宝', '花园宝宝'];
var [a, b, c] = arr;
console.log(c); // 输出 '花园宝宝'
console.log(arr[2]); // 输出 '花园宝宝',与上面的输出相同

解构赋值对象

与数组类似,对象也可以使用解构赋值。这里使用大括号{}包围变量名,并使用对象的键来指定变量名。

var obj = { a: 1, b: 2 };
var { a, b } = obj;
console.log(a, 'a'); // 输出 1 'a'

更复杂的数组解构

如果数组中包含更深层次的嵌套结构,解构赋值同样适用。

var arr = [1, 2, [3, 4, [5, [7]]]];
var [a1, b1, c1] = arr; // 只解构到第一层
console.log(a1, b1, c1); // 输出 1 2 [3, 4, [5, [7]]]

var [a, b, [c, d, [e, [f]]]] = arr; // 深层解构
console.log(d); // 输出 4

变量重命名

在解构赋值时,可以给变量指定新的名字,使用冒号:来指定变量的新名称。

var o = { a: 1, b: 2 };
var { a: hehe, b } = o;
console.log(hehe); // 输出 1

复杂对象的解构

对象的解构可以嵌套,允许从嵌套的对象中提取值。

var info = {
    userName: '张三',
    love: { boyfriend: '李四', boyfriend2: '王二' }
};

var { userName, love: { boyfriend2 } } = info;
console.log(boyfriend2); // 输出 '王二'

ES5中的属性访问

在ES5中,没有解构赋值,我们只能通过点符号(.)来访问对象的属性。

var boyfriend2 = info.love.boyfriend2;
console.log(boyfriend2); // 输出 '王二'

解构赋值提供了一种更加简洁和直观的方式来处理数据,使得代码更加易读和易写。


原文地址:https://blog.csdn.net/gt8011/article/details/140587639

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!