【ES6复习】解构赋值

栏目: JavaScript · 发布时间: 6年前

内容简介:ES6语法糖:candy:,通过使用数组或者对象字面量的形式从数组和对象中获取属性并赋值给变量。这种方式语言清晰简介,并能够很好的处理默认值。如果解构对象为非可遍历对象,那么将会抛出

ES6语法糖:candy:,通过使用数组或者对象字面量的形式从数组和对象中获取属性并赋值给变量。

这种方式语言清晰简介,并能够很好的处理默认值。

数组的解构赋值

iterable
undefined
undefined
// 传统形式 默认值
let arr = [1, 2, 3];
let a = arr[0];
let b = arr[1];
let c = arr[2];
let d = arr[3] || 4;

// 解构赋值
let [a, b, c] = arr;
// 嵌套操作
let [a, [b], c] = [1, [2], 3];
let [, , c] = [1, 2, 3]; // c=3

// 剩余操作
let [a, ...b] = [1, 2, 3]; // a=1, b=[2,3]

// 解构失败
let [a] = []; // a=undefined

// 默认值 (null !== undefined 所以b未被赋值)
let [a = 4, b = 5, c = 6] = [1, null]; // a=1, b=null, c=6

// 默认值为函数
function foo() {console.log('默认值'); return 100;}
let [a = foo()] = [1]; // a=1 且foo不会被执行

如果解构对象为非可遍历对象,那么将会抛出 TypeError: arr is not iterable 的错误。

注意:warning::非可遍历对象,babel转换时不会报错,但运用时可能会出错。

对象的解构赋值

  • 基本特效和数组相似,但适用于数组和对象。
  • 区别在于数组通过顺序取值,而对象是通过属性名进行取值的。
  • 属性可以重命名。
let { name, age } = { name: "aaa", age: 12 };

// 重命名
let { name:username, age } = { name: "aaa", age: 12 }; // 不会申明name变量

// 嵌套
let person = {
  name: {
        firsetName: '1',
        lastName: '2',
    }
};
let { name: {firsetName} } = person; // 同理不会申明name变量

// 对象解构数据
let {'0':foo} = [22]; // foo=22

对已经申明的变量进行解构赋值:

JavaScript 引擎会将 {x} 理解成一个代码块,从而发生语法错误。数组不存在这种问题

let x;
{x} = {x: 1}; // 语法错误

({x} = {x: 1}); // 使用括号解决这个问题

用途

  • 变量交换

    let a = 1,b = 2;
    [a, b] = [b, a];
    
  • 函数参数对应,并设置默认值

    // 数组
    function f([b, b, c, d = 4]) { ... }
    f([1, 2, 3]);
    
    // 对象
    function f1({a, b, c}) { ... }
    f({a: 1, b: 2, c: 3});
    
  • 问题1

    // ReferenceError: b is not defined
    let [a = b, b = 1] = [];
    
    // 等价于
    let a = [0] || b,
        b = [1] || 1;
    

结合let和const的知识点,由于在使用b时没有申明,所以运行时报错。

如果 [a = 1, b = a] 就不会存在这种问题。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

引爆点

引爆点

[美] 马尔科姆·格拉德威尔 / 钱清、覃爱冬 / 中信出版社 / 2009-8 / 27.00元

我们的世界看上去很坚固,但在《纽约客》怪才格拉德威尔的眼里,只要你找到那个点,轻轻一触,这个世界就会动起来:一位满意而归的顾客能让新开张的餐馆座无虚席,一位涂鸦爱好者能在地铁掀起犯罪浪潮,一位精明小伙传递的信息拉开了美国独立战争的序幕——这个看起来不起眼的点,却是任何人都不能忽视的引爆点。 《引爆点》是一本谈论怎样让产品发起流行潮的专门性著作。书中将产品爆发流行的现象归因为三种模式:个别人物......一起来看看 《引爆点》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换