JavaScript解构赋值的用途

快乐打工仔 分类:实例代码

JavaScript解构赋值的用途属于前端实例代码,有关更多实例代码大家可以查看

JavaScript解构赋值是ES2015新增,具体可以参阅以下五篇文章:

(1).JavaScript数组解构赋值一章节。

(2).JavaScript对象解构赋值一章节。

(3).JavaScript函数参数解构赋值一章节。

(4).JavaScript字符串解构赋值一章节。

(5).JavaScript解构赋值小括号的应用一章节。

下面分享几个常见的解构赋值的使用:

(1).交换变量的值:

let address = "青岛市南区";
let webName = "前端教程网";
[address, webName] = [webName, address];
console.log(address);
console.log(webName);

上面代码可以将两个变量的值交换。

(2).函数一次返回多个值:

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

函数返回一个数组,然后通过数组解构赋值分别给三个变量赋值。

箭头函数可以参阅箭头函数介绍一章节。

上面是数组的解构赋值,下面再来看一个对象解构赋值代码:

let funcObj =()=>{ 
  return {age: 5,url:"www.pipipi.net"}
}
let {age, url} = funcObj();
console.log(age);
console.log(url);

函数返回一个对象直接量,然后进行对象解构赋值操作。

(3).方便提取json格式数据值:

let jsonData = {
  id: 8,
  status: "ok",
  data: [55, 88]
};
let { id, status, data} = jsonData;
console.log(id)
console.log(status)
console.log(data)

很方便的从json结构对象中提取数据,其实这个就是对象解构赋值。

(4).给函数设定默认值:

这里不举例子了,具体参阅ES2015 函数新增特性一章节。

JavaScript解构赋值的用途,这样的场景在实际项目中还是用的比较多的,关于JavaScript解构赋值的用途就介绍到这了。

回复

我来回复
  • 暂无回复内容