ES6之解构赋值

何为解构赋值?

解构赋值语法是一个 Javascript 表达式,这使得可以将值从数组属性从对象提取到不同的变量中。

如果理解起来感觉抽象,直接看下面例子:

数组解构:

我们在以前要给变量赋值需要像下面这样写:

var arr=[1,2.3];
var a = arr[0];
var b = arr[1];
var c = arr[2];

是不是感觉略繁琐了点?而如果我们用解构赋值的话,可以怎么写呢?看下面代码:

let [a,b,c] = [1,2,3];
console.log(a,b,c);

此时我们可以看出返回结果如下图:

是不是感觉用起来爽多了?

为了防止从数组中取出一个值为undefined的对象,可以为这个对象设置默认值。如以下代码:

let [a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

解构函数中,我们可以直接交换变量。以前的话,还需要一个中间值。我们现在就可以直接写成下面这样子了:

let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

如果你想忽略某些值,可以像下面这样子写:

function f() {
  return [1, 2, 3];
}

var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

当解构一个数组时,可以使用剩余模式,将数组剩余部分赋值给一个变量。

var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]

剩余元素必须是数组的最后一个元素,所以剩余元素后面不能放其他东西了。

解构对象:

基本赋值:

let {name, pass} = {name: ‘Maria‘,pass: 123456}
console.log(name, pass)

返回结果如下图:

对象同样可以赋默认值

var {x = 10, y = 5} = {x: 3};

console.log(x); // 3
console.log(y); // 5

函数参数赋默认值如下:

function drawChart({size = ‘big‘, cords = { x: 0, y: 0 }, radius = 25}) {
    console.log(size, cords, radius);
}

drawChart({
    cords: { x: 18, y: 30 },
    radius: 30
});

原文地址:https://www.cnblogs.com/sese/p/9502026.html

时间: 2024-10-08 02:04:26

ES6之解构赋值的相关文章

ES6 的解构赋值前每次都创建一个对象吗?会加重 GC 的负担吗?

本文来源于知乎上的一个提问. 为了程序的易读性,我们会使用 ES6 的解构赋值: function f({a,b}){} f({a:1,b:2}); 这个例子的函数调用中,会真的产生一个对象吗?如果会,那大量的函数调用会白白生成很多有待 GC 释放的临时对象,那么就意味着在函数参数少时,还是需要尽量避免采用解构传参,而使用传统的: function f(a,b){} f(1,2); 上面的描述其实同时提了好几个问题: 会不会产生一个对象? 参数少时,是否需要尽量避免采用解构传参? 对性能(CPU

es6学习 -- 解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c = 3; ES6 允许写成下面这样. let [a, b, c] = [1, 2, 3]; 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 本质上,这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值.下面是一些使用嵌套数组进行解构的例子. 我认为

Es6 新增解构赋值

1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 要想实现解构,就必须是容器,或者具有可遍历的接口. 以前,为变量赋值,只能直接指定值. let a = 1; let b = 2; let c = 3; ES6 允许写成下面这样. let [a, b, c] = [1, 2, 3]; 上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 本质上,这种写法属于模式匹配:只要等号两边的模式相同,左边的变

es6变量解构赋值的用途

这里是我觉得es6解构赋值,在平时我们写js的时候非常有用,而且经常用到的地方,能简化我们的代码,让写代码简介优雅易读; 用途 1.交换变量的值,太方便了这逼,写法不仅简介而且一看就明白 let [x,y]=[1,2]; [x,y]=[y,x]; console.log(x);//输出2 console.log(y);//输出1 2.从函数返回多个值 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或者对象里面返回.有了解构赋值,取出这些值那是非常的方便,最关键是易读 function

ES6 之 解构赋值

本博文配合 阮一峰 <ES6 标准入门(第3版)>一书进行简要概述 ES6 中变量的解构赋值. 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. ES6 以前,为变量赋值,只能直接指定值. let a = 1 let b = 2 let c = 3 ES6 允许写成下面的样式. let [a, b, c] = [1, 2, 3] 该代码表示,可以从数组中提取值,按照对应位置,对变量赋值. 相关示例 本质上来说,这种写法属于“模式匹配”.即

es6(es2015)解构赋值

?es6新增结构赋值,结构赋值分为两种 数组解构赋值,对象解构赋值. 数组解构赋值: 分别按顺序给数组中的每一项赋值.  如上所示如果c未给赋值,c为undefind. a==1,b==2 那么3并没有被保存到变量中,这时如果想要将剩余值进行保存,可以只用“...” ...c 这样的形式,可以将剩余值以数组的形式将其保存到变量c中. 另外...可用于复制数组 实际项目中有时候我们需要将函数中的实际参数放到一个数组中, es5:Array.prototype.slice.call(argument

ES6语法~解构赋值、箭头函数

2015年6月17日 ECMAScript 6发布正式版本 打开VSCode终端powershell:ctrl+` 1.         定义变量:let 使用var 定义的变量没有{ }限制,在条件中定义的i,全局中都可以使用,造成变量污染,有变量提升预解析作用,只提升变量名,不提升值!降低js代码的可阅读性 相同作用域内,let不允许重复声明变量!!否则报错!!但可以更改变量值 使用let定义的变量:不会有变量提升,必须先定义后使用,否则先使用会报错: ReferenceError 在for

ES6 对象解构赋值(浅拷贝 VS 深拷贝)

对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中. 拷贝对象 let aa = { age: 18, name: 'aaa' } let bb = {...aa}; console.log(bb); // {age: 18, name: "aaa"} 合并对象 扩展运算符(...)可以用于合并两个对象 let aa = { age: 18, name: 'aaa' } let bb = { sex: '男' } let cc = {...aa, ...bb

es6的解构赋值

let {name,age}={name:'asa',age:134}; console.log(name)==>'asa' console.log(age)==>134 let [x,y]=[1,2,3] console.log(x)===>1 console.log(y)===>2