数组解构

let [变量的集合] = [正常的数组]

举例说明：

let [x, y, z] = [10, 16, 21];

上述代码中 x y z 为 3 个变量，右侧是一个正常的数组，数组的单元会被赋值给变量（按着顺序进行赋值），即 x = 10; y = 16; z = 21;

数组解构的特点：

左边的变量与右边的数组单按着【顺序】对应
如果在边数量多（变量个数多），右边单元值数量少多余的变量值为 undefined
如果在边数量少（变量个数少），右边单元值数量多多出来数组单元“就浪费了”
可以使用 ... 剩余的运算符号，将多出的数组单元来全部获取

let [a, b, ...c] = [3, 9, 11, 24, 26];// console.log(c); // [11, 24, 26]

如果左侧的变量被设置以 undefined 时，可以使用默认值

举例说明:

let [t, j, k, l = 8] = [4, 7, 1];console.log(l); // 8

对象解构

let {变量的集合} = {正常的对象}

举例说明：

let { name, age } = { name: "阿尼亚", age: 6 };

name 和 age 就是变量名了，右侧的 name 属性与 name 变量对应age 属性与 age 变量对应，即属性名和变量名是一致的。

对象解构的特点：

与顺序无关，只能属性名有关系
如果变量名无法找到对应的属性，那么这个变量值为 undefined

举例说明：

let { password, gender, ...other } = {name: "阿尼亚",age: 6,gender: "女",};// 此时 password 值为 undefined

如果对象的属性没有对应的变量名，这个对象属性就是多余的如上代码中的 name 和 age 就是多余的
使用 ... 剩余的运算符可以将多余的对象属性单独获取

console.log(other); // {name: '阿尼亚', age: 6}

如果变量被赋值为 undefined 时，可以使用默认值

JS解构赋值：数组解构和对象解构相关推荐

前端JS：判断list(数组)中的json对象是否重复
前端JS:判断list(数组)中的json对象是否重复 <!DOCTYPE html> <html> <head> <meta charset="u ...
js 根据id获取数组中对应的对象
js 根据id获取数组中对应的对象 const id = xxxlet obj = array.find(function (e) {return e.id=== id})console.log('o ...
js 根据id 取出数组中对应的对象
1.如果就是一个指定的id进行搜索的话,可以用find 的方法 var id=1; var obj=this.studentL.find(function (obj) {return obj.stud ...
【ES6】变量的解构赋值
[ES6]变量的解构赋值一.什么叫解构赋值? 二.解构赋值有哪些分类?写法? 1)对数组的解构赋值 2)对对象的解构赋值 3)对字符串的解构赋值 4)对数值和布尔值的解构赋值 5)对函数参数的解构赋 ...
JS进阶学习(作用域、函数进阶、解构赋值、原型链)
文章目录 1.面相对象编程介绍 2.ES6中的类和对象 3.类的继承 ES6中的类和对象三个注意点作用域局部作用域全局作用域作用域链 JS垃圾回收机制(GC) JS垃圾回收机制-算法说明闭 ...
js进阶--JSON，克隆，解构赋值,class类与箭头函数 06
文章目录 Array.from(类数组) sort中的a,b代表的每一项 JSON 浅克隆深克隆 es6 let const 对于对象中属性名与属性值一样的只写一个就可以解构赋值数组的解构赋值 ...
解构赋值，数组，对象
基本概念:本质上是一种匹配模式,只要等号两边模式相同,那么左边变量可以被赋予对应的值. 解构赋值主要分为:数组的解构赋值 .对象的解构赋值数组的解构赋值案例: 打印出来的结果是1,25,5,52 对 ...
ES6语法~解构赋值、箭头函数、class类继承及属性方法、map、set、symbol、rest、new.target、 Object.entries......
2015年6月17日 ECMAScript 6发布正式版本前面介绍基本语法, 后面为class用法及属性方法.set.symbol.rest等语法. 一.基本语法: 1. 定义变 ...
ES6解构赋值原理详解
ES6解构赋值 ES6变量的解构赋值本质上是"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予匹配的右边的值,如果匹配不成功变量的值就等于undefined 数组的解构赋值 ...
ES6-ES11-第一部分-let、const、解构赋值、模板字符串、简化对象写法、箭头函数、函数参数默认值、rest 参数、扩展运算符、Symbol、迭代器、生成器、Promise、Set、Map
根据视频进行整理 [https://www.bilibili.com/video/BV1uK411H7on?p=1] 视频资源(百度网盘): 链接:[https://pan.baidu.com/s/1 ...

JS解构赋值：数组解构和对象解构

数组解构

数组解构的特点：

对象解构

对象解构的特点：

JS解构赋值：数组解构和对象解构相关推荐

最新文章

热门文章