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解构运算符运用的方法是什么”有了更深的了解，不妨来实际操作一番吧！这里是***网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
