欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

深入解析ES6之数据解构的用法

程序员文章站 2024-01-20 17:18:10
本文介绍了深入理解ES6之数据解构的用法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 一 对象解构 对象解构语法在赋值语句的左侧使用了对象字面量 type与name标识符既声明了本地变量,也读取了对象的相应属性值。解构赋值表达式的值为表达式右 ......

本文介绍了深入理解es6之数据解构的用法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。

深入解析ES6之数据解构的用法

一 对象解构

对象解构语法在赋值语句的左侧使用了对象字面量

let node = {
  type: true,
  name: false
}
 
//既声明又赋值
let {
  type,
  name
} = node;
 
//或者先声明再赋值
let type, name
({type,name} = node);
console.log(type);//true
console.log(name);//false

type与name标识符既声明了本地变量,也读取了对象的相应属性值。
解构赋值表达式的值为表达式右侧的值。当解构表达式的右侧的计算结果为null或者undefined时,会抛出错误。

默认值

当你使用解构赋值语句时,如果所指定的本地变量在对象中没有找到同名属性,那么该变量会被赋值为undefined

let node = {
  type: true,
  name: false
},
  type, name, value;
({type,value,name} = node);
 
console.log(type);//true
console.log(name);//false
console.log(value);//undefined

你可以选择性地定义一个默认值,以便在指定属性不存在时使用该值。

let node = {
    type: true,
    name: false
  },
  type, name, value;
({
  type,
  value = true,
  name
} = node);
 
console.log(type);//true
console.log(name);//false
console.log(value);//true

赋值给不同的本地变量名

let node = {
  type: true,
  name: false,
  value: "dd"
}
let {
  type: localtype,
  name: localname,
  value: localvalue = "cc"
} = node;
console.log(localtype);
console.log(localname);
console.log(localvalue);

type:localtype这种语法表示要读取名为type的属性,并把它的值存储在变量localtype上。该语法与传统对象字面量的语法相反

嵌套的对象结构

let node = {
type: "identifier",
name: "foo",
loc: {
  start: {
    line: 1,
    column: 1
  },
  end: {
    line: 1,
    column: 4
  }
}
}
 
let {
loc: locall,
loc: {
  start: locals,
  end: locale
}
} = node;
 
console.log(locall);// start: {line: 1,column: 1},end: {line: 1,column: 4}
console.log(locals);//{line: 1,column: 1}
console.log(locale);//{line: 1,column: 4}

当冒号右侧存在花括号时,表示目标被嵌套在对象的更深一层中(loc: {start: locals,end: locale})

二 数据解构

数组解构的语法看起来跟对象解构非常相似,只是将对象字面量换成了数组字面量。

let colors = ["red", "blue", "green"];
let [firstc, secondc, thirdc, thursc = "yellow"] = colors;
console.log(firstc//red
console.log(secondc);//blue
console.log(thirdc);//green
console.log(thursc);//yellow

你也可以在解构模式中忽略一些项,并只给感兴趣的项提供变量名。

let colors = ["red","green","blue"];
 
let [,,thirdc] = colors;
console.log(thirdc);//blue//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860

thirdc之前的逗号是为数组前面的项提供的占位符。使用这种方法,你就可以轻易从数组任意位置取出值,而无需给其他项提供名称。

解构赋值

let colors = ["red","green","blue"],
  firstcolor = "black",
  secondcolor = "purple";
[firstcolor,secondcolor] = colors;
console.log(firstcolor);//red
console.log(secondcolor);//green//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860

数组解构有一个非常独特的用例,能轻易的互换两个变量的值

let a =1,b =2;
[a,b] = [b,a];
console.log(a);//2
console.log(b);//1//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860

嵌套的解构

let colors = ["red", ["green", "blue"], "yellow"];
let [firstc, [, ssc]] = colors;
console.log(ssc);//blue

剩余项

let colors = ["red", "green", "blue"];
let [firstc, ...restc] = colors;
console.log(firstc);
console.log(...restc);
console.log(restc[0]);//green
console.log(restc[1]);//blue

使用剩余项可以进行数组克隆

let colors = ["red", "green", "blue"];
let [...restc] = colors;
console.log(restc);//["red", "green","blue"]

三 混合解构

let node = {
type: "identifier",
name: 'foo',
loc: {
  start: {
    line: 1,
    column: 1
  },
  end: {
    line: 1,
    column: 4
  }//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860
},
range: [0, 3]
}
 
let {
type,
name: localname,
loc: {
  start: {
    line: ll
  },
  end: {
    column: col
  }
},
range: [, second]
} = node;
 
console.log(type);//identifier
console.log(localname);//foo
console.log(ll);//1
console.log(col);//4
console.log(second);//3//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:864305860

结语

感谢您的观看,如有不足之处,欢迎批评指正。