数据的解构赋值

数据的解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

解构数组

数组的解构赋值根据下标来赋值

变量声明并赋值时的解构

let arr=["jack","lily",13,"张三"];
//变量声明并赋值
let [a,b,c,d]=arr;
//jack lily 13 张三
console.log(a,b,c,d); 
//张三 13 lily jack
console.log(d,c,b,a);

变量先声明后赋值时的解构

//先声明
let arr=["jack","lily",13,"张三"];
let a,b,c,d;
//后赋值
[a,b,c,d]=arr;
//jack lily 13 张三
console.log(a,b,c,d); 
//张三 13 lily jack
console.log(d,c,b,a);

取某一项值或者忽略某些值

let arr=["jack","lily",13,"张三"];

//取lily,忽略其他值
let [,name,,,]=arr;    

默认值

为了防止从数组中取出一个值为undefined的对象，可以在表达式左边的数组中为任意对象预设默认值。

let nums=[1,1];
//在表达式左边的数组中预设默认值
let [a=2,b=2,c=2]=nums;
//1 1 2
console.log(a,b,c);

缺省数组解析

当解构一个数组时，可以使用缺省数组解析，将数组剩余部分赋值给一个变量。
缺省数组解析 必须使用 …

let arr=["jack","lily",13,"张三"];

//使用...将数组剩余部分赋值给一个变量
let[a,...d]=arr;

//jack
console.log(a);

//["lily", 13, "张三"]
console.log(d);

用正则表达式匹配提取值

用正则表达式的 exec() 方法匹配字符串会返回一个数组，该数组第一个值是完全匹配正则表达式的字符串，然后的值是匹配正则表达式括号内内容部分。解构赋值允许你轻易地提取出需要的部分，忽略完全匹配的字符串——如果不需要的话。

function parseProtocol(url) { 
  var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
  if (!parsedURL) {
    return false;
  }
  //解构赋值提取出需要的部分
  var [, , fullhost, ] = parsedURL;
  return fullhost;
}
let url='https://developer.mozilla.org/en-US/Web/JavaScript';

//developer.mozilla.org/
console.log(parseProtocol(url)); 

解构对象

无声明赋值

一个变量可以独立于其声明进行解构赋值。

//()表达式之前需要有一个分号，否则它可能会被当成上一行中的函数执行
console.log(123);
//对象字面量无声明解构赋值时是必须使用()
({a, b} = {a: 1, b: 2});
//1 2
console.log(a,b);
//2 1
console.log(b,a);

注意
1.对象字面量无声明解构赋值时是必须使用()
2.()表达式之前需要有一个分号，否则它可能会被当成上一行中的函数执行
3.({a, b} = {a: 1, b: 2}) 是有效的，正如 var {a, b} = {a: 1, b: 2}

声明并赋值

let {a, b} = {a: 1, b: 2};
//1 2
console.log(a,b);
//2 1
console.log(b,a);

新的变量名赋值

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

let {a:num1, b:num2} = {a: 1, b: 2};
//1 2
console.log(num1,num2);

//报出异常: a is not defined
console.log(a);

默认值

为防止值为undefined，变量可以先赋予默认值。当要提取的对象没有对应的属性，变量就被赋予默认值。

let obj={name:"Tom",age:23};
let {name,age,sex}=obj;

//Tom 23 undefined
console.log(name,age,sex); 

let obj={name:"Tom",age:23};

//防止sex为undefined，设置默认值
let {name,age,sex="boy"}=obj;

//Tom 23 boy
console.log(name,age,sex); 

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

let {a:num1=1,b:num2=2,c:num3=3}={a:1,b:1};

//1 1 3	
console.log(num1,num2,num3);

函数参数默认值

function ff({username="Jack",age="18",sex="boy"}={}){
	return {username,age,sex};		
}

//{sername: "Jack", age: 23, sex: "boy"}
let obj={name:"Tom",age:23};
console.log(ff(obj));

//{username: "Jack", age: 18, sex: "boy"}
obj={age:18};
console.log(ff(obj));

//{username: "Jack", age: 14, sex: "girl"}
obj={age:14,sex:"girl"};
console.log(ff(obj));

解构嵌套对象和数组

const metadata = {
  title: 'Scratchpad',
  translations: [
    {
      title: 'JavaScript-Umgebung'
    }
  ],
  url: '/en-US/docs/Tools/Scratchpad'
};

let {
  title: englishTitle,     // 重新命名
  translations: [
    {
       title: localeTitle, // 重新命名
    },
  ],
} = metadata;


// "Scratchpad"
console.log(englishTitle);

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

For of 迭代和解构

let people = [
  {
    name: '张三',
    family: {
      mother: '张妈',
      father: '张爸',
    },
    age: 35
  },
  {
    name: '李四',
    family: {
      mother: '李妈',
      father: '李爸',
    },
    age: 25
  }
];

for(let {name:n,family:{mother:m},age:a} of people){

	//姓名:张三,年纪:35,母亲:张妈
	//姓名:李四,年纪:25,母亲:李妈
	console.log(`姓名:${n},年纪:${a},母亲:${m}`);
	
}

从作为函数实参的对象中提取数据

function userid({id}){
	return id;
}
	
function family({name,family:{father}})
{
	console.log(`${name}的父亲名叫${father}`);
}

let people ={
	id:1001,
    name: '张三',
    family: {
      mother: '戴画',
      father: '张大',
    },
    age: 35
  }
  
  //编号：1001
  console.log("编号："+userid(people));
  //张三的父亲名叫张爸
  family(people);
  

对象属性计算名和解构

let k="name";
let {[k]:userName}={name:"Tom"}

//Tom
console.log(userName);

对象解构中的 Rest

Rest 属性收集那些尚未被解构模式拾取的剩余可枚举属性键

//也可使用其他标识符来收集那些尚未被解构模式拾取的剩余可枚举属性键
let  {a,b,...rest}={a:10,b:20,dd:"a",key:"dsa"};

//10
console.log(a);

//20
console.log(b);

//{dd:"a",key:"dsa"}
console.log(rest);

无效的 JavaScript 标识符作为属性名称

通过提供有效的替代标识符，解构可以与不是有效的JavaScript标识符的属性名称一起使用。

const foo = { 'fizz-buzz': true };
const { 'fizz-buzz': fizzBuzz } = foo;

// "true"
console.log(fizzBuzz); 

解构对象时会查找原型链

var obj = {self: '123'};

// 在原型链中定义一个属性 prot
obj.__proto__.prot = '456';


const {self, prot} = obj;

//123 456
console.log(self,prot);