目录
es6的解构是什么意思
对象解构" >对象解构
数组解构" >数组解构
混合解构" >混合解构
首页 web前端 前端问答 es6的解构是什么意思

es6的解构是什么意思

Apr 25, 2022 pm 03:45 PM
es6

在es6中,解构指的是按照一定的模式从数组和对象中提取值,对变量进行赋值的行为;常见的有对象结构、数组解构和混合解构,是一种将数据结构分解成更小的部分的过程,从而达到简化提取信息的目的。

es6的解构是什么意思

本教程操作环境:windows10系统、ECMAScript 6.0版、Dell G3电脑。

es6的解构是什么意思

destructuring:百度百科的意思是结构分解,ES6 中允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

开发中比较常见的有对象解构、 数组解构、混合解构。这是一种将数据结构分解为更小的部分的过程,从而达到简化提取信息的目的。

对象解构

传统方法获取对象中的值

let node = {
    type: 'Identifier',
    name: 'foo'
}
console.log(node.type) // Identifier
console.log(node.foo) // foo
登录后复制

使用解构

let node = {
    type: 'Identifier',
    name: 'foo'
}
let { type, name } = node
console.log(type) // Identifier
console.log(name) // foo
登录后复制

如果指定的局部变量名称在对象中不存在,那么这个局部变量会被赋值为undefined

let { type, name, value } = node
console.log(type) // Identifier
console.log(name) // foo
console.log(value) // undefined
登录后复制

当指定的属性不存在时,可以给不存在的属性定义任意的默认值

let { type, name, value = true } = node
console.log(type) // Identifier
console.log(name) // foo
console.log(value) // true
登录后复制

指定新的变量名进行解构赋值

let arr = {
  six: '男',
  age: 19
}
let {six:newSix, age:newAge} = arr
console.log(six, age) // six is not defined
console.log(newSix, newAge) // 男 19
登录后复制

看上面是不是觉得很奇怪,传统对象赋值都是左边四属性,右边是值。但是在解构写法中右边是属性,左边是值,所以新的变量名在右边。

如果使用let、var、const对对象进行解构时,被解构对象的值不能不存在。

不使用var、let、const赋值时,需要将解构语句使用()进行包裹

({type,name} = node);//{}在js中作为代码块,单独使用加等号会报错会报错

嵌套对象解构

在对象嵌套对象中解构,我们会在第一层解构中继续使用花括号来深入下一层进行查找;我们先来看一个栗子:

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
}
登录后复制

上面是一个嵌套对象node,我们先解构第一层

let { loc, type, name } = node // {} Identifier foo
登录后复制

可以看到我们特意打乱了{}中属性的顺序,结果仍然正确输出,所以可以猜到具体的对应方式应该是根据名字来对应的,和顺序无关。

继续解构第二层

let { loc: { start }} = node;
console.log(start.line); // 1
console.log(start.column); // 4
登录后复制

此处我们也可以将start赋值给一个新的自定义的局部变量,假设我们赋值给newStart

let { loc: { start: newStart }} = node
console.log(newStart.line) // 1
console.log(newStart.column) // 4
登录后复制

总结如下:

所有冒号前的标识符都代表在对象中的检索位置,其右侧为被赋值的变量名;如果冒号后是花括号,则意味着要赋予的最终值嵌套在对象内部更深的层级中。

数组解构

数组解构使用的是数组字面量,且解构操作全部在数组内完成,并且数组解构不需要像对象字面量语法一样使用对象的命名属性。

let colors = [ 'red', 'green', 'blue' ]
let [ firstColor, secondColor ] = colors
console.log(firstColor) // 'red'
console.log(secondColor) // 'green'
登录后复制

数组解构语法中,我们主要是通过值在数组中的位置进行选取,且可以将其存储在任意变量中,未显示声明的元素会被直接忽略。

let [ , , thirdColor ] = colors
console.log(thirdColor) // 'blue'
登录后复制

数组解构之变量交换

传统ES5中互换值一般需要引入第三个临时变量作为中转,但如果使用数组解构赋值语法,就不需要在增加额外变量了。

// ES5中互换值:
 let a = 1, b = 2, tmp;
 tmp = a
 a = b
 b = tmp
 console.log(a, b) // 2, 1
 // ES6中互换值
 let a = 1, b = 2;
 [ a, b ] = [b, a]
 console.log(a, b) // 2, 1
登录后复制

嵌套数据解构

 let colors = [ 'red', [ 'green', 'lightgreen'], 'blue' ]
 let [ firstColor, [ secondColor, thirdColor ], fourthColor ] = colors
 console.log(firstColor) // red
console.log(secondColor) // green
console.log(thirdColor) // lightgreen
console.log(fourthColor) // blue
登录后复制

默认值

也可以在数组解构赋值表达式中为数组中的任意位置添加默认值,当指定位置的属性不存在或其值为undefined时使用默认值

let colors = [ 'red' ]
let [ firstColor, secondColor = 'green' ] = colors
console.log(firstColor) // red
console.log(secondColor) // green
登录后复制

不定元素

...为展开运算符我们应该都知道它的用途,操作数组时可以用来把数组展开成字符串。在数组解构中,可以通过...语法将数组中的其余元素赋值给一个特定的变量。

let colors = [ 'red', 'green', 'blue' ]
let [ firstColor, ...restColors ] = colors
console.log(firstColosr) // 'red'
console.log(restColors.length); // 2
console.log(restColors[0]); // "green"
console.log(restColors[1]); // "blue"
登录后复制

数组复制

在ES5中,开发者们经常使用concat()方法来克隆数组

var colors = [ "red", "green", "blue" ];
var clonedColors = colors.concat();
console.log(clonedColors); //"[red,green,blue]"
登录后复制

concat()方法的设计初衷是连接两个数组,如果调用时不传递参数就会返回当前函数的副本

在ES6中,可以通过不定元素的语法来实现相同的目标

let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
console.log(clonedColors); //"[red,green,blue]"
登录后复制

在被解构的数组中,不定元素必须为最后一个条目,在后面继续添加逗号会导致程序抛出语法错误。

混合解构

let err = {
    errors: [
        {
            msg: 'this is a message'
        },
        {
            title: 'this is a title'
        }
    ]
}
登录后复制

上面的代码中,err对象中包含errors,errors又是一个数组又包含新的对象,提取对象中的msg。我们可以将上述栗子一步一步拆开进行解构:

let { errors } = err
let [ firstArr ] = errors
let { msg } = firstArr
console.log(msg) // 'this is a message'
也可以这样解构
let [ , { title }] = err.errors
console.log(title) // 'this is a title'
let [{ msg }] = err.errors
console.log(msg) // 'this is a message'
登录后复制

来看一个更复杂一点的,其实只要会找顺序,这个理解起来还是很简单的。

let node = {
    type: "Identifier",
    loc: {
      start: {
      line: 1,
      column: 1
       }
    },
    range: [0, 3]
};
let {
    loc: { start },
    range: [ startIndex ]
  } = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0
登录后复制

实际使用- 参数解构

一般用在封装函数参数的情况,如下栗子:

// options 上的属性表示附加参数
function setCookie(name, value, options) {
       options = options || {};
       let secure = options.secure,
       path = options.path,
       domain = options.domain,
       expires = options.expires;
       // 设置 cookie 的代码
}
//可以改写为:对options进行解构并赋予默认值
function setCookie(name, value, { secure, path, domain, expires } = {}) {
// ...
}
登录后复制

【相关推荐:javascript视频教程web前端

以上是es6的解构是什么意思的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1664
14
CakePHP 教程
1422
52
Laravel 教程
1316
25
PHP教程
1267
29
C# 教程
1239
24
ES6怎么求数组反转 ES6怎么求数组反转 Oct 26, 2022 pm 06:19 PM

在ES6中,可以利用数组对象的reverse()方法来实现数组反转,该方法用于颠倒数组中元素的顺序,将最后一个元素放在第一位,而第一个元素放在最后,语法“array.reverse()”。reverse()方法会修改原始数组,如果不想修改需要配合扩展运算符“...”使用,语法“[...array].reverse()”。

async是es6还是es7的 async是es6还是es7的 Jan 29, 2023 pm 05:36 PM

async是es7的。async和await是ES7中新增内容,是对于异步操作的解决方案;async/await可以说是co模块和生成器函数的语法糖,用更加清晰的语义解决js异步代码。async顾名思义是“异步”的意思,async用于声明一个函数是异步的;async和await有一个严格规定,两者都离不开对方,且await只能写在async函数中。

小程序为什么要将es6转es5 小程序为什么要将es6转es5 Nov 21, 2022 pm 06:15 PM

为了浏览器兼容。ES6作为JS的新规范,加入了很多新的语法和API,但现代浏览器对ES6新特性支持度不高,所以需将ES6代码转为ES5代码。在微信web开发者工具中,会默认使用babel将开发者ES6语法代码转换为三端都能很好支持的ES5的代码,帮助开发者解决环境不同所带来的开发问题;只需要在项目中配置勾选好“ES6转ES5”选项即可。

es6怎么找出2个数组中不同项 es6怎么找出2个数组中不同项 Nov 01, 2022 pm 06:07 PM

步骤:1、将两个数组分别转为set类型,语法“newA=new Set(a);newB=new Set(b);”;2、利用has()和filter()求差集,语法“new Set([...newA].filter(x =>!newB.has(x)))”,差集元素会被包含在一个set集合中返回;3、利用Array.from将集合转为数组类型,语法“Array.from(集合)”。

es5和es6怎么实现数组去重 es5和es6怎么实现数组去重 Jan 16, 2023 pm 05:09 PM

es5中可以利用for语句和indexOf()函数来实现数组去重,语法“for(i=0;i

es6暂时性死区是什么意思 es6暂时性死区是什么意思 Jan 03, 2023 pm 03:56 PM

在es6中,暂时性死区是一个语法错误,是指let和const命令使区块形成封闭的作用域。在代码块内,使用let/const命令声明变量之前,该变量都是不可用的,在变量声明之前属于该变量的“死区”;这在语法上,称为“暂时性死区”。ES6规定暂时性死区和let、const语句不出现变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。

require是es6语法吗 require是es6语法吗 Oct 21, 2022 pm 04:09 PM

不是,require是CommonJS规范的模块化语法;而es6规范的模块化语法是import。require是运行时加载,import是编译时加载;require可以写在代码的任意位置,import只能写在文件的最顶端且不可在条件语句或函数作用域中使用;require运行时才引入模块的属性所以性能相对较低,import编译时引入模块的属性所所以性能稍高。

es6怎么判断数组里总共有多少项 es6怎么判断数组里总共有多少项 Jan 18, 2023 pm 07:22 PM

在es6中,可以利用array对象的length属性来判断数组里总共有多少项,即获取数组中元素的个数;该属性可返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。

See all articles