ES6特性之:解构

简介: 解构(destructuring assignment), 也称解构赋值,这种语法可以方便的将数组元素或对象属性赋成新的变量。我们假设一个代码场景,我们用一个数组或对象包含2个元素,来代表一个坐标轴的坐标值://使用数组var coords1 =...

解构(destructuring assignment), 也称解构赋值,这种语法可以方便的将数组元素或对象属性赋成新的变量。

我们假设一个代码场景,我们用一个数组或对象包含2个元素,来代表一个坐标轴的坐标值:

//使用数组
var coords1 = [10, 20]; // x轴10, y轴20

//使用对象
var coords2 = {x: 50, y: 100}; // x轴50, y轴100

然后,我们要将这两个坐标值单独拿出来赋值成2个变量,通常会这么做:

var x1 = coords1[0];
var y1 = coords2[1];

var x2 = coords2.x;
var y2 = coords2.y;

是的,以前我们就是这么做的!而现在有了解构赋值语法,我们可以更加简单一些了,下面的示例代码和上面的效果是完全等价的:

var [x1, y1] = coords1;
var {x2, y2} = coords2;

在解构赋值的时候,也可以给变量设置默认值

var [x=100, y=100] = [10];
//x=10, y=100

在解构数组的时候,有些值不想要,可以这样做:

var [x,,y]=[10, "hello", 20];

也可以在解构赋值的时候,使用Rest语法:

var [a, ...b] = [1, 2, 3, 4, 5];
//a=1
//b=[2, 3, 4, 5]

在解构对象的时候,你想赋成和对象属性名不一样的变量名,你可以这么做:

var {a:x, b:y} = { a: 1, b: 2 }
//x=1
//y=2

解构赋值也可以用在函数参数列表上:

function test({x, y}) {
  return x + y;
}

var obj = {x: 1, y: 5};
test(obj)
目录
相关文章
|
4月前
ES6新增语法 对象解构
ECMAScript6引入的对象解构语法允许在一行代码中完成多个赋值操作。例如,从一个包含姓名和年龄的对象中提取属性,传统方法需分别获取,而使用解构赋值可简洁实现相同功能。此外,它支持为未定义的属性设置默认值、对已声明变量的解构赋值(需加括号)、嵌套解构以及在函数参数中直接解构等特性,极大提升了代码的可读性和编写效率。
34 1
ES6新增语法 对象解构
|
2月前
|
缓存 前端开发 JavaScript
ES6 全部特性详解
ES6 是 JavaScript 语言的一个重要升级,它引入了大量新的功能,极大地增强了 JavaScript 的表达力和可读性。通过了解和掌握这些特性,开发者可以编写出更加简洁、高效、优雅的代码,并轻松应对大型项目的复杂性。
61 7
ES6学习(2)解构赋值
ES6学习(2)解构赋值
|
7月前
|
JavaScript 前端开发
JavaScript高级主题:什么是 ES6 的解构赋值?
【4月更文挑战第13天】ES6的解构赋值语法简化了从数组和对象中提取值的过程,提高代码可读性。例如,可以从数组`[1, 2, 3]`中分别赋值给`a`, `b`, `c`,或者从对象`{x: 1, y: 2, z: 3}`中提取属性值给同名变量。
36 6
|
7月前
|
小程序
es6学习笔记(二)解构赋值
es6学习笔记(二)解构赋值
|
7月前
|
JavaScript 前端开发
JavaScript开发中ES6+新特性:使用解构赋值的好处是什么?
JavaScript开发中ES6+新特性:使用解构赋值的好处是什么?
99 2
|
7月前
|
Web App开发 JavaScript 前端开发
【ES6系列第一篇】ES6简介与特性、let、const、解构赋值
【ES6系列第一篇】ES6简介与特性、let、const、解构赋值
60 0
|
JSON 数据格式
ES6系列笔记-解构赋值
ES6系列笔记-解构赋值
67 1
|
JSON JavaScript 前端开发
ES6解构赋值有这一篇就够了
ES6解构赋值有这一篇就够了
ES6语法: 解构赋值
ES6语法: 解构赋值
52 0