JavaScript ES6解构运算符的理解和运用

 更新时间:2021年10月05日 11:06:18   作者:Wangez-Blog  
在ES6属性中新增了两个属性,分别是解构和…运算符,下面这篇文章主要给大家介绍了关于JavaScript ES6解构运算符的理解和运用,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

前言

最近一直在学JavaScript,看到了ES6中的解构符号,觉得这个给我们的代码简洁性带来了一个飞跃式的提升,而且它已经运用在了企业开发中,假如未来你工作中,别人在用,你却读不懂别人的代码,这造成的影响还是很大的。因此,好好学习一下吧。

你可以不用,但是你不能不懂✔

JavaScript ES6中,有很多特性都是为了简化代码,方便程序员去书写的。解构运算符就是其中很好的特性,它可以通过减少赋值语句的使用,或者减少访问数据下标、对象属性的方式,使得代码更加简洁,增强了代码的可读性。

解构符号的作用

解构赋值是对赋值运算符的扩展,他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构

使用方法

基本使用

let [a,b,c] = [1,2,3];
// let a = 1, b = 2, c = 3;

嵌套使用

// 数组
 let [a, [[b], c]] = [1, [[2], 3]];
	console.log(a); // 1
	console.log(b); // 2
	console.log(c); // 3
// 对象
 let obj = { x: ['hello', {y: 'world'}] };
 let { x: [x,{ y }] } = obj;
	console.log(x); // hello
	console.log(y); // world

忽略

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

// 对象
 let obj = { x: ['hello', { y: 'world' }] };
 let { x: [x, { }] } = obj;
	console.log(x); // hello

不完全解构

// 数组
 let [a = 1, b] = [];
	console.log(a); // 1
	console.log(b); // undefined

// 对象
 let obj = { x: [{ y: 'world' }] };
 let { x: [{ y }, x] } = obj;
	console.log(x); // undefined
	console.log(y); // world

剩余运算符

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

// 对象
 let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
	console.log(a); // 10
	console.log(b); // 20
	console.log(rest); // { c: 30, d: 40 }

字符串

let [a, b, c, d, e] = 'hello';
console.log(a); // h
console.log(b); // e
console.log(c); // l
console.log(d); // l
console.log(e); // o

解构默认值

// 当解构模式有匹配结果,且匹配结果是 undefined 时,会触发默认值作为返回结果。
 let [a = 2] = [undefined]; 
	console.log(a); // 2
// 对象
let {a = 10, b = 5} = {a: 3};
 	console.log(a); // 3
 	console.log(b); // 5

交换变量的值.

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

解构赋值的应用

// 1. 浅克隆与合并
let name = { name: "aaa" }
let age = { age: 'bbb' }
let person = { ...name, ...age }
console.log(person) // { name: "aaa", age: 'bbb' }

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

// 2. 提取JSON数据
let JsonData = { id: 10, status: "OK", data: [111, 222] } 
let { id, status, data: numbers } = JsonData; 
console.log(id, status, numbers); //10 "OK" [111, 222]

// 3. 函数参数的定义
// 参数有序
function fun1([a, b, c]) { console.log(a, b, c) } 
fun1([1, 2, 3]); // 1 2 3

// 参数无序
function fun2({ x, y, z }) { console.log(x, y, z) } 
fun2({ z: 3, x: 2, y: 1 }); // 2 1 3

// 参数有默认值
function fun3 ([a=1,b]) {
console.log(a,b);
}
fun3([,3]) // 1 3

浅谈应用

提取json数据

上面列出了几种解构赋值的应用,其中我们最常用的应该是第二种,提取json数据,后端传给前端的数据就是json数据,前端通常要将数据赋值给一个对象,就是使用的这种方法。

可扩展运算符...

我在leetcode上刷题的时候使用过,我是用arr.push(...arr1)来合并两个数组的,有点像上面的浅克隆与合并。比起以往我们合并数组的操作,这个简直不要太简单。

第88题,合并两个有序数组。

var merge = function(nums1, m, nums2, n) {
    nums1.length=m;
    nums2.length=n;
    nums1.push(...nums2);
    let arr=nums1.sort((a,b)=>{
        return a-b;
    })
    return arr;
};

...这个运算符是将数组中的数据遍历出来,并拷贝到当前对象当中。

arr.push(...arr1)这个方法会将arr1的数组元素全部解析出来,然后依次添加到arr中去,完成两个数组的合并。

交换变量值

再来看看交换变量值这个应用,我依稀记得一位学长的面试题:不占用额外内存空间的情况下,交换a与b的值。当时有两种解法,一是使用异或,二是用数学方法,将ab相加,再分别减之,(a=a+b,b=a-b,a=a-b),现在使用解构符号的这个方法[a,b] = [b,a],是不是也可以呢?

总结

到此这篇关于JavaScript ES6解构运算符的理解和运用的文章就介绍到这了,更多相关ES6解构运算符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • npm后面的-S和-D参数举例详解

    npm后面的-S和-D参数举例详解

    这篇文章主要给大家介绍了关于npm后面的-S和-D参数举例详解的相关资料,文中还介绍了npm -s和-d的一些区别,对大家的学习或者工作具有一定的参考阶级价值,需要的朋友可以参考下
    2024-01-01
  • 图片自动缩小的js代码,用以防止图片撑破页面

    图片自动缩小的js代码,用以防止图片撑破页面

    图片自动缩小的js代码,用以防止图片撑破页面...
    2007-03-03
  • js切换光标示例代码

    js切换光标示例代码

    切换光标的方法有很多,在本文为大家详细介绍下在js中时如何实现的,感兴趣的朋友不要错过
    2013-10-10
  • JS版微信6.0分享接口用法分析

    JS版微信6.0分享接口用法分析

    这篇文章主要介绍了JS版微信6.0分享接口用法,结合实例形式分析了JS版微信6.0分享功能原理、接口调用方法与相关使用注意事项,需要的朋友可以参考下
    2016-10-10
  • Nuxt3 布局layouts和NuxtLayout的使用详解

    Nuxt3 布局layouts和NuxtLayout的使用详解

    layouts是Nuxt3提供的一种方便开发者快速实现自定义布局的约定,是基于Vue3的一个开发框架,基于服务器端渲染SSR,可以更加方便的用于Vue的SEO优化,这篇文章主要介绍了Nuxt3 布局layouts和NuxtLayout的使用,需要的朋友可以参考下
    2023-04-04
  • JS时间戳与日期格式的转换小结

    JS时间戳与日期格式的转换小结

    这篇文章主要介绍了JS时间戳与日期格式的转换小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • JavaScript作用域与作用域链深入解析

    JavaScript作用域与作用域链深入解析

    这篇文章主要是对JavaScript作用域和作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript
    2013-12-12
  • Javascript 检测、添加、移除样式(className)函数代码

    Javascript 检测、添加、移除样式(className)函数代码

    在前台脚本中,我们经常要操作页面元素的样式,比如标签页切换时,将当前标签加上一个样式,当切换到其他标签时,再将样式还原,本文介绍的是直接添加和移除 className 的方法。
    2009-09-09
  • javascript中callee与caller的区别分析

    javascript中callee与caller的区别分析

    有些小伙伴可能会问caller,callee 是什么?在javascript 中有什么样的作用?那么本篇会对于此做一些基本介绍。希望能够对大家理解javascript中的callee与caller有所帮助。
    2015-04-04
  • 微信小程序倒计时功能实例代码

    微信小程序倒计时功能实例代码

    这篇文章主要介绍了微信小程序倒计时功能实例代码,当单击按钮弹出一个半透明的弹出层,在规定时间内激活关闭按钮,关闭弹出层。需要的朋友可以参考下
    2018-07-07

最新评论