你或许不知道的ES6解构

相信大家对解构赋值并不陌生: 阮大佬ECMAScript 6 入门里面有讲七种用途,用得最多莫过于json数据处理

json数据处理

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

当然变换变量的值,也是用得较多的。

交换变量的值

let x = 1;
let y = 2;

[x, y] = [y, x];
let x3 = "a";
let y3 = "b";
let z3 = "c";
[x3,y3,z3] = [z3,y3,x3];
console.log(x3,y3,z3);//c,b,a

for..of中使用

const arrC = ["a", "b"];
for(const [index, element] of arrC.entries()){
    console.log(index,element);
}
//0 "a"
//1 "b"

还可以对象解构原始值(字符长度等。。)

const {length: len} = "abc";
console.log(len);//3

对象的剩余属性构造

const objA = {a: 1, b: 2, c: 3};
const {a:propValue, ...remaining}= objA;
console.log(propValue,remaining);//1 {b: 2, c: 3}

remaining被分配一个对象,该对象具有在模式中未提及其键的所有数据属性。

数组的剩余属性构造

const [xx,yy,...rest] = ["a","b","c","d"];
console.log(xx,yy,rest);//a b ["c","d"]

rest被分配一个对象,该数组具有在模式中未提及的所有元素。

数组解构:返回数组的操作

const  [,year,month,day] = /^([0-9]{4})-([0-9]{2})-([0-9]{2})$/.exec('2999-12-31')
console.log(/^([0-9]{4})-([0-9]{2})-([0-9]{2})$/.exec('2999-12-31'));//["2999-12-31", "2999", "12", "31", index: 0, input: "2999-12-31", groups: undefined]
console.log(year,month,day);//2999 12 31

处理函数返回结果

function findElement(arr, predicate) {
   for (let index=0; index < arr.length; index++) {
        const value = arr[index];
        if (predicate(value)) {
            return { value, index };
        }
    }
    return { value: undefined, index: -1 };
}
const arrD = [7, 8, 6];
// const {value, index} = findElement(arrD, x => x % 2 === 0);//可以一起输出,也可以单个解构输出
const {value} = findElement(arrD, x => x % 2 === 0);
const {index} = findElement(arrD, x => x % 2 === 0);
console.log(value,index);

参考文献:JavaScript for impatient programmers

原文链接:segmentfault.com

上一篇:WEB笔记——实现楼梯似列表
下一篇:gitlab遇到的问题之提交代码时失败

相关推荐

  • 领略原生 javascript es6~es10 的魅力

    图片描述(https://img.javascriptcn.com/f3663fe101c5d4062fda74e1ae5e25d6 "图片描述") 作为前端开发工程师,盲目追逐框架似乎有点舍本逐末...

    8 个月前
  • 领略原生 JavaScript ES6~ES10 的魅力

    图片描述(https://img.javascriptcn.com/98bc3ace8fade84c91d94f42b7cc5301 "图片描述") 作为前端开发工程师,盲目追逐框架似乎有点舍本逐末...

    8 个月前
  • 面试题:没有es6老项目,如何用jq解决异步的问题?

    我们都知道es6提供了promise异步写法,但是大部分的公司都是jq写的,那我们如何用Jq来写和promise异步一样的写法呢?这个知道的人不多下面我们就来写写把 注意: 1 JQ 1.5以上 ...

    2 年前
  • 面试题3:ES5、ES6两种方式实现继承

    写一个类Person,拥有属性age和name,拥有方法say(something)再写一个类Superman,继承Person,拥有自己的属性power,拥有自己的方法fly(height) ...

    20 天前
  • 面试深入一、ES6模块化、安装和打包

    开发环境已经普及使用 浏览器环境却支持不好(需要开发环境编译) 内容很多,重点了解常用语法 面试:开发环境的使用 重点语法的掌握 问题 模块化如何使用...

    2 年前
  • 阮一峰ES6全面回顾

    9月抽空重新回顾了下ES6所有知识点,整个回顾过程既惊喜又感慨,感慨开发这么久好像真的没有好好的静下心去读一本好的书,大多情况下只是在使用的时候用到了,不熟悉或者感兴趣再去走马观花一通,感慨之余也发...

    7 个月前
  • 通过选择进口ES6模块

    通过选择进口ES6模块...

    2 年前
  • 通过 20 个棘手的ES6面试问题来提高咱们的 JS 技能

    作者:Alex 译者:前端小智 来源:dev.to 今天最后一天了,上个月自己花了 1300 买了阿(a)里(li)的 服 务 器来学习 node 及对应的框架,在 号之前它们有做活...

    7 个月前
  • 通俗易懂理解ES6 - 变量的解构赋值

    引言 万丈高楼平地起,欲练此功,必先打好基本功: ) 编程语言总少不了变量赋值;ES6中引入了新的赋值形式:解构赋值;解构赋值大大的简化了变量赋值的代码,解构赋值仅能对具有迭代器(Iterator...

    9 个月前
  • 进口使用ES6语法和动态路径[复制]模块

    Félix Sanz(https://stackoverflow.com/users/3181234/f%c3%a9lixsanz)提出了一个问题:Importing modules using ES...

    2 年前

官方社区

扫码加入 JavaScript 社区