iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript ES6解构运算符的理解和运用
  • 209
分享到

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

2024-04-02 19:04:59 209人浏览 八月长安
摘要

目录前言解构符号的作用使用方法解构赋值的应用浅谈应用提取JSON数据可扩展运算符...交换变量值总结前言 最近一直在学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解构运算符内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript ES6解构运算符的理解和运用

本文链接: https://www.lsjlt.com/news/137393.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript ES6解构运算符的理解和运用
    目录前言解构符号的作用使用方法解构赋值的应用浅谈应用提取json数据可扩展运算符...交换变量值总结前言 最近一直在学JavaScript,看到了ES6中的解构符号,觉得这个给我们...
    99+
    2024-04-02
  • 如何理解JavaScript运算符
    这篇文章主要介绍“如何理解JavaScript运算符”,在日常操作中,相信很多人在如何理解JavaScript运算符问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何理解Ja...
    99+
    2024-04-02
  • JavaScript展开运算符和剩余运算符的区别详解
    目录什么是剩余运算符?剩余运算符在JavaScript函数中是如何工作的?注意!不能在包含剩余参数的函数体中使用"use strict"剩余运算符在参数解构中是如...
    99+
    2024-04-02
  • ES6扩展运算符的理解与使用场景
    目录1、替代apply方法,一般在函数调用时处理参数2、剩余参数(rest运算符),主要针对函数形参3、数据连接、合并4、数组和对象的拷贝5、字符串转数组6、在函数调用时使用拓展运算...
    99+
    2024-04-02
  • JavaScript中的运算符讲解
    一、JavaScript 算术运算符 算数运算符用于对数字执行算数运算: +:加法-:减法*:乘法/:除法%:系数++:递加--:递减 加法运算符(+)对数字相加: var x = ...
    99+
    2024-04-02
  • ES6 解构赋值的原理及运用
    目录数组的解构赋值对象的解构赋值解构赋值的运用交换变量的值从函数返回多个值遍历Map结构函数参数的解构赋值数组的解构赋值 let [a, b, c] = [1, 2, 3] ...
    99+
    2024-04-02
  • 如何理解javascript三目运算符
    这篇文章主要介绍“如何理解javascript三目运算符”,在日常操作中,相信很多人在如何理解javascript三目运算符问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何...
    99+
    2024-04-02
  • 深入解析Python运算符:比较运算符、逻辑运算符、位运算符的用途和含义
    Python运算符解析:比较运算符、逻辑运算符、位运算符的用法和意义 一、比较运算符比较运算符用于比较两个值之间的关系,并返回一个布尔值(True或False)。下面是常见的比较运算符: 等于(==): 判断两个值是否相等,如...
    99+
    2024-01-20
    逻辑 运算符 比较
  • JavaScript运算符、 算数运算符、赋值运算符怎么用
    这篇文章主要介绍“JavaScript运算符、 算数运算符、赋值运算符怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript运算符、 算数运算符、...
    99+
    2024-04-02
  • 深入理解Python运算符:位移运算符、逻辑运算符和运算符优先级的实践手册
    进阶Python运算符的应用:位移运算符、逻辑运算符、运算符优先级的实践指南 Python是一门广泛应用于各个领域的高级编程语言,而掌握其中的运算符的使用是非常重要的。除了基本的算术运算符,Python还提供了许多其他类型的运算...
    99+
    2024-01-20
    优先级 逻辑运算符 位移运算符
  • javascript中instanceof运算符的用法详解
    概述 instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上 语法 obj instanceof Object;//t...
    99+
    2024-04-02
  • 详解TS对象扩展运算符和rest运算符
    目录概述对象 rest 属性对象扩展属性制作对象的浅拷贝keyof 和查找类型keyof 操作符号索引类型查询概述 TypeScript 2.1 增加了对 对象扩展运算和 rest ...
    99+
    2024-04-02
  • JavaScript位运算符怎么运算的
    JavaScript中的位运算符用于对数字的二进制表示进行操作。下面是常见的位运算符及其运算方式:1. 按位与(&):对两个数字的每...
    99+
    2023-10-11
    JavaScript
  • JavaScript算数运算符、运算符和操作数是什么
    今天小编给大家分享一下JavaScript算数运算符、运算符和操作数是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收...
    99+
    2024-04-02
  • 如何理解JavaScript原型链和instanceof运算符的关系
    如何理解JavaScript原型链和instanceof运算符的暧昧关系,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。时间回到两个月前,简单地理了理原型链、prototype以...
    99+
    2023-06-17
  • ES6管道运算符怎么用
    这篇文章主要介绍“ES6管道运算符怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“ES6管道运算符怎么用”文章能帮助大家解决问题。 JS中得管道运算符。 U...
    99+
    2024-04-02
  • JavaScript扩展运算符的学习及应用详情(ES6)
    目录学习应用函数参数数组合并解构赋值字符串转换转换数组前言: 扩展运算符是ES6新增的一种运算符,他可以帮助我们简化代码,简化操作,所以在开发中是非常常用的,下面我将从学习与应用两个...
    99+
    2022-11-13
    JavaScript扩展运算符应用 JavaScript扩展运算符
  • Python运算符探秘:深入解析赋值运算符、身份运算符、成员运算符
    掌握Python运算符的奥秘:赋值运算符、身份运算符、成员运算符详解 在Python编程中,运算符是非常重要的概念。除了常见的算术运算符和逻辑运算符外,还有一些特殊的运算符需要我们掌握。本文将详细介绍三种特殊的运算符:赋值运算符...
    99+
    2024-01-20
    赋值 身份 成员详解
  • JavaScript中运算符的用法
    本篇内容介绍了“JavaScript中运算符的用法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!JavaS...
    99+
    2024-04-02
  • javascript中&&运算符与||运算符的使用方法
    本篇文章为大家展示了javascript中&&运算符与||运算符的使用方法,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。前言在前端开发领域中,&&运算符和||运算符是...
    99+
    2023-06-25
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作