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

目录
  • 前言
  • 解构符号的作用
  • 使用方法
  • 解构赋值的应用
  • 浅谈应用
    • 提取json数据
    • 可扩展运算符...
    • 交换变量值
  • 总结

前言

最近一直在学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解构运算符内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • es6中的解构赋值、扩展运算符和rest参数使用详解

    前言 本文主要给大家介绍了关于es6中解构赋值.扩展运算符和rest参数使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. es6中较为常用的书写风格 为了书写的方便,es6中提出了很多比较友好的书写方式,其中最为常见的属于以下几个: 字符串模板 `abcdef${test}` 解构赋值 let [a, b, c] = [1, 2, 3] 扩展运算符 rest参数 ... 本文希望能够学习其中的主要的用法,方便书写和简洁性. 字符串模板 在以前的日子,我们经常捡到各

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

    目录 前言 解构符号的作用 使用方法 解构赋值的应用 浅谈应用 提取json数据 可扩展运算符... 交换变量值 总结 前言 最近一直在学JavaScript,看到了ES6中的解构符号,觉得这个给我们的代码简洁性带来了一个飞跃式的提升,而且它已经运用在了企业开发中,假如未来你工作中,别人在用,你却读不懂别人的代码,这造成的影响还是很大的.因此,好好学习一下吧. 你可以不用,但是你不能不懂✔ JavaScript ES6中,有很多特性都是为了简化代码,方便程序员去书写的.解构运算符就是其中很好的特

  • JavaScript之解构赋值的理解

    1. ES6的新特性 允许将对象或者数组'分解'成多个单独的值, 以对象的解构开始. 代码示例 2. 说明 1).  定义一个对象 const obj={b:2,c:3,d:4}; 此时系统中没有变量b, 变量c与变量d 2). 开始解构该对象, const {a,b,c} = obj 这句话的意思是, 定义a,b,c三个变量, 然后在obj对象中寻找a,b,c变量, 如果找到, 则赋值给对应的变量 所以, a, 已定义, 但是未赋值. 定义是在const{a,b,c}中定义的, 而没有在obj

  • ES6解构赋值实例详解

    本文实例讲述了ES6解构赋值.分享给大家供大家参考,具体如下: 基本用法 let [x, y, ...z] = ['a'] //"a", undefined, [] 1.等号右边如果不是数组,将会报错(不是可遍历结构) 2.解构赋值 var, let, const命令声明均适用 3.set结构也可解构赋值(具有Iterator接口,可采用数组形式结构赋值) set解构:任何类型的单个值的集合 let [x, y, z] = new Set(["a", "b

  • ES6解构赋值的功能与用途实例分析

    本文实例讲述了ES6解构赋值的功能与用途.分享给大家供大家参考,具体如下: (1)交换变量的值 [x, y] = [y, x]; 上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰. (2)从函数返回多个值 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回.有了解构赋值,取出这些值就非常方便. // 返回一个数组 function example() { return [1, 2, 3]; } var [a, b, c] = example(); // 返

  • ES6 解构赋值的原理及运用

    数组的解构赋值 let [a, b, c] = [1, 2, 3] 同时定义多个变量,a匹配1.b匹配2.c匹配3 解构赋值允许指定默认值,即左边变量指定默认值,右边没有对应的值,会优先输出默认值. let [x, y = 'b'] = ['a'] // x = 'a', y = 'b' x匹配字符a,y默认值为字符b,若右边没有对应的,默认输出字符b. 对象的解构赋值 解构不仅可以用于数组,还可以用于对象,对象的解构与数组有一个重要的不同,数组的元素是按照次序排列的,变量的取值由它的位置决定的

  • JavaScript对象解构的用法实例解析

    目录 前言 使用解构从对象中获取值 使用解构从嵌套对象中获取值 使用对象解构定义一个新变量以及默认值 默认值 新变量 使用 JavaScript 对象解构别名 使用对象解构处理动态名称属性 在函数参数和返回值中解构对象 解构赋值传参 解构函数对象返回值 在循环中使用对象解构 总结 前言 ES6(ES2015)的发布,给JavaScript 提供了一种更方便快捷的方式来处理对象的属性.该机制称为Destructuring(也称为解构赋值).但是你真的会用吗?你真的了解各种场景下,解构赋值的用法吗?

  • 一篇文章带你了解JavaScript的解构赋值

    目录 1. 什么是解构赋值 ? 2. 数组的解构赋值 2.1) 数组解构赋值的默认值 2.2) 数组解构赋值的应用 类数组中的应用 交换变量的值 3. 对象的解构赋值 3.1) 对象解构赋值的默认值 3.2)对一个已声明的变量解构赋值 4. 字符串的解构赋值 总结 1. 什么是解构赋值 ? 将属性/值从对象/数组中取出,赋值给其他变量 通俗来说,即解析某一数据的结构,将我们想要的东西提取出来,赋值给变量或常量. 让我们通过一个例子看看: const [a, b, c] = [1, 2, 3];

  • 深入理解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标识符既声明了本地变量,也读取了对象的相应属性值. 解构赋值表达式的值为表

  • ES6中的Javascript解构的实现

    ES6中的解构特性能让我们从对象(Object)或者是数组(Array)中取值的时候更方便,同时写出来的代码在可读性方面也更强.之前接触过python语言的小伙伴应该对这个不会陌生,这个特性早已在python中实现了.在python中,我们可以通过下面的代码来取值 lst = [3, 5] first, second = lst print(first, second) first和second两个变量,分别被赋值上了数组中的3和5,是不是很简单很清晰? 那在有这个特性之前,我们一般怎么从对象或

  • ES6下javascript解构赋值常见用法总结

    Javascript解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b Javascript解构赋值问题核心: 每次取值既要确定对象属性名,还得重新定义一个变量占用多一行,代码行数和重复的声明a,使得代码不够简洁,能否通过左边变量名,匹配到右边的属性名从而取得对应的值,ES6解构语法核心就基于这样的模式匹配思想 上面的问题解构方案: let obj = { a: 1, b: 2 } // 取值 let {a,

随机推荐