JavaScript解构赋值

最新推荐文章于 2023-04-05 22:49:33 发布

莉莉今天要做题

最新推荐文章于 2023-04-05 22:49:33 发布

阅读量182

点赞数

文章标签： javascript es6

本文链接：https://blog.csdn.net/qq_43779703/article/details/107076993

版权

JavaScript解构赋值

解构数组
解构对象

解构赋值是一种JavaScript表达式。通过解构赋值，可以把属性/值从对象/数组中取出来并付给其他变量。

例如：

var a, b ;
[a, b] = [10, 20];//解构赋值表达式
console.log(a); // 10
console.log(b); // 20

解构数组

变量声明并赋值的解构

var assignment = [1,2,3,4,5];
var [one, two] = assignment;
console.log(one);  //1
console.log(two);  //2

变量先声明后赋值的解构

var one, two;
[one, two] = [1,2];
console.log(one);  //1
console.log(two);  //2

默认值
为了防止从数组中取出undefined的值，可以在解构赋值表达式左边的数组中给变量预设一个值。

var one, two;
[one=1, two=2] = [0];
console.log(one);  //0
console.log(two);  //2

交换变量
通常情况下，交换两个变量的值需要创建一个临时变量，有了解构赋值表达式，可以直接交换两个变量的值，不必创建临时变量。

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

解析从函数返回的数组

var a, b;
function foo(){
	return [1,2];
}
[a, b] = foo();
console.log(a);     //1
console.log(b);     //2

忽略某些返回值
可以忽略某些返回值

function foo(){
	return [1,2,3];
}
var [a, , b] = foo();
console.log(a);     //1
console.log(b);     //3

也可以忽略全部的返回值

[,,] = f();

将剩余数组赋给一个变量
当一个数组长度较大时，可以把剩余的值都赋给一个变量。

var arr = [1,2,3,4,5,6,7];
var a, b;
[a, ...b] = arr;
console.log(a);    //1
console.log(b);    //[2,3,4,5,6,7]

用正则表达式匹配提取值
用正则表达式的exec()方法匹配字符串会返回一个数组，该数组第一值是完全匹配正则表达式的字符串，其余的值是匹配正则表达式括号内的内容。使用解构赋值表达式可以提取到想要的内容，忽略不需要的。

function foo(url){
	var parseURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
	if(!parseURL){
		return false;
	}
	var [, second, third, fourth,fifth] = parseURL;
	return second;
}
console.log(foo("https://www.baidu.com/test"))

解构对象

基本赋值

var obj = {p:42,q:true};
var {p, q} = obj;
console.log(p);    //42
console.log(q);    //true

无声明赋值

var a, b;
({a, b} = {a: 1, b: 2});

console.log(a);    //1
console.log(b);    //2

注意：

1、赋值表达式周围的圆括号（）在使用对象字面量无声明解构赋值时是必须的。
2、{a, b} = {a: 1, b:2}不是有效的独立语法，因为左边的{a, b}被认为是一个块而不是对象字面量。
({a, b} = {a: 1, b: 2}) 是有效的，正如 var {a, b} = {a: 1, b: 2}
3、( … ) 表达式之前需要有一个分号，否则它可能会被当成上一行中的函数执行，代码执行后得不到预料结果。

给新的变量名赋值
可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名。

var obj = {p:42,q:true};
var {p:age,q:flag} = obj;

console.log(age);    //42
console.log(flag);    //true

预设默认值
变量可以先赋予默认值。当解构的对象没有对应属性时，变量被赋予默认值。

var {a = 10, b = 5} = {a: 3};
console.log(a);    //3，解构对象的值
console.log(b);    //5，预设值

给新的变量命名并提供默认值

一个属性可以同时 :
1）从一个对象解构，并分配给一个不同名称的变量
2）分配一个默认值，以防未解构的值是 undefined。

var {a:aa = 10, b:bb = 5} = {a: 3};

console.log(aa);    //3，解构对象的值
console.log(bb);    //5，预设值

函数参数默认值

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

drawES2015Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});
//big {x: 18, y: 30} 30

在drawES2015Chart函数签名中，结构的左手边被分配给右手边的空对象字面值：{size = ‘big’, cords = {x: 0, y: 0}, radius = 25} = {}。

在上面的 drawES2015Chart 的函数签名中，解构的左手边被分配给右手边的空对象字面值：{size = ‘big’, cords = {x: 0, y: 0}, radius = 25} = {}。你也可以在没有右侧分配的情况下编写函数。但是，如果你忽略了右边的赋值，那么函数会在被调用的时候查找至少一个被提供的参数，而在当前的形式下，你可以直接调用 drawES2015Chart() 而不提供任何参数。如果你希望能够在不提供任何参数的情况下调用该函数，则当前的设计非常有用，而另一种方法在您确保将对象传递给函数时非常有用。
7. 解构嵌套对象和数组

const metadata = {
  title: 'Scratchpad',
  translations: [
    {
      locale: 'de',
      localization_tags: [],
      last_edit: '2014-04-14T08:43:37',
      url: '/de/docs/Tools/Scratchpad',
      title: 'JavaScript-Umgebung'
    }
  ],
  url: '/en-US/docs/Tools/Scratchpad'
};

let {
  title: englishTitle, // rename
  translations: [
    {
       title: localeTitle, // rename
    },
  ],
} = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle);  // "JavaScript-Umgebung"