es6学习之解构时应该注意的点

 更新时间:2017年08月29日 08:58:39   作者:Funwt  
解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。这种赋值语法极度简洁,同时还比传统的属性访问方法更为清晰,下面这篇文章主要给大家介绍了关于在es6解构时应该注意的点,需要的朋友可以参考下。

前言

本文主要给大家介绍了关于在es6解构时需要注意的一些事项,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

如果要将一个已经声明的变量用于解构赋值,必须非常小心。

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

上面代码的写法会报错,因为 JavaScript 引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免 JavaScript 将其解释为代码块,才能解决这个问题。

// 正确的写法
let x;
({x} = {x: 1});

如果变量名与属性名不一致,必须写成下面这样。

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'
//这实际上说明,对象的解构赋值是下面形式的简写
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

也就是说,对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined
let obj = {
 p: [
 'Hello',
 { y: 'World' }
 ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

注意:这时p是模式,不是变量,因此不会被赋值。如果p也要作为变量赋值,可以写成下面这样。

let obj = {
 p: [
 'Hello',
 { y: 'World' }
 ]
};

let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

解构赋值时,如果等号右边是数值和布尔值,则会先转为对象

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

函数的参数也可以使用解构赋值。

function add([x, y]){
 return x + y;
}

add([1, 2]); // 3

上面代码中,函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y。对于函数内部的代码来说,它们能感受到的参数就是x和y

undefined就会触发函数参数的默认值。

[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • JavaScript Class的正确使用方法详解

    JavaScript Class的正确使用方法详解

    在JavaScript中,类是通过class关键字来定义的,它的本质是一种语法糖,仍然是基于原型链的,class 内部的属性和方法最终都会添加到构造函数的 prototype 属性上,本文给大家介绍了JavaScript Class的正确打开方式,需要的朋友可以参考下
    2025-03-03
  • uni-file-picker文件选择上传功能实现

    uni-file-picker文件选择上传功能实现

    这篇文章主要介绍了uni-file-picker文件选择上传,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • js中匿名函数的N种写法

    js中匿名函数的N种写法

    在java中有private属性,强大的功能js不能实现就矮人一截,匿名函数,发扬广大
    2010-09-09
  • 微信小程序实现下拉刷新和轮播图效果

    微信小程序实现下拉刷新和轮播图效果

    这篇文章主要为大家详细介绍了微信小程序实现下拉刷新和轮播图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 详解JavaScript的Symbol类型、隐藏属性、全局注册表

    详解JavaScript的Symbol类型、隐藏属性、全局注册表

    这篇文章主要介绍了JavaScript的Symbol类型、隐藏属性、全局注册表,本文主要对其使用方法和使用场景做个简单的介绍,需要的朋友可以参考下
    2022-05-05
  • javascript 动态table添加colspan\rowspan 参数的方法

    javascript 动态table添加colspan\rowspan 参数的方法

    动态的给某个表对象添加列属性和行属性,采用obj.setAttribute("rowspan",n)(即rowspan=n)不能生效。
    2009-07-07
  • JavaScript贪吃蛇小组件实例代码

    JavaScript贪吃蛇小组件实例代码

    本文通过实例代码给大家分享了JavaScript贪吃蛇小组件功能 ,需要的朋友可以参考下
    2017-08-08
  • JavaScript手机振动API

    JavaScript手机振动API

    现代浏览器里提供的新的API越来越倾向于移动手机应用,这篇文章主要为大家详细介绍了JavaScript手机振动API的相关资料,需要的朋友可以参考下
    2016-06-06
  • 简单谈谈javascript Date类型

    简单谈谈javascript Date类型

    Date对象,是操作日期和时间的对象。Date对象对日期和时间的操作只能通过方法。本文就给大家简单讲述一下DATE类型的使用。
    2015-09-09
  • mock.js模拟数据的实现

    mock.js模拟数据的实现

    在没有后端提供数据的情况下,前端人员在自己写demo或者练手项目的时候可以使用mock.js来模拟数据,本文主要介绍了mock.js模拟数据的实现,感兴趣的可以了解一下
    2023-11-11

最新评论