解构

逆熵派生
• 阅读 1345
  • 数组解构

根据数组下标提取


const arr = [1,2,3]
const [foo,bar,baz] = arr                 //等值
const [,,baz] = arr                       //选值
const [foo,...rest] = arr                 // 剩余值,...最后一个成员使用,是个新数组
const [foo] = arr                         //不完全解构
const [foo,bar,baz,more,...bao] = arr     //more为undefined,bao=[]
const [foo,bar,baz,more="10",] = arr      //默认值 more取不到取默认值
const [foo] = []                          //foo=undefined

如果右侧不是可遍历的结构(Iterator)会报错

let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
  • 数组解构默认值
    当一个数组成员严格等于undefined,默认值会生效

    let [x = 1] = [undefined];         x // 1
    
    let [x = 1] = [null];              x // null
  • 对象解构
    数组解构根据下标顺序解构,对象解构根据属性名匹配提取,它没有次序

    const obj = {name:'mcgee',age:18}
    const { age,name,baz } = obj
    console.log(name); //'mcgee'
    console.log(baz);  //undefined

    对象的解构赋值,可以很方便地将现有对象的方法,赋值到某个变量

    const {log} = console  //log是console的属性
    log("foo")
    
    let {floor,ceil} = Math

    同名成员产生命名冲突

    const name = "jack"
    const {name} = obj
    console.log(name);
    
    const name = "jack"
    const { name:objName } = obj //重命名对象name属性
    console.log(name,objName);

    设置默认值

    const { name:objName="rose" } = obj //给name属性设置默认值
    console.log(objName)

    注意

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

let x;
{x} = {x: 1}; // SyntaxError: syntax error

let x;
({x} = {x: 1});

表达式虽然毫无意义,但是语法是合法的,可以执行

({} = [true, false]);
({} = 'abc');
({} = []);

其他解构

字符串

字符串被转换成了一个类似数组的对象

const [a, b, , , e] = 'hello';
a // "h"
b // "e"
e//  "o"

let {length : len} = 'hello'; //类数组对象都有length属性
len // 5

number和boolean

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

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

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

null和undefined

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

函数参数解构

解构用途

变量交换

函数返回多个值

函数参数

函数参数默认值

遍历Map结构(Map是键值对数据结构)

输入模块指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");
点赞
收藏
评论区
推荐文章
翼
4年前
ES6的解构赋值是深拷贝or浅拷贝?
面试时候有面试官问到ES6的解构赋值是深拷贝还是浅拷贝?,这里做一个总结.ES6的解构赋值,大家应该都清楚,就是可以快速取出数组或者对象中的值;我们先来看一个使用案例:更多的解构赋值知识可以查看:https://es6.ruanyifeng.com/docs/destructuring那么,ES6的解构赋值到底是深拷贝还是浅拷贝呢?我们先来看一下深拷贝和浅
翼
5年前
js 数组 转为树形结构
需要转换为树形的数组vardata{"orderById":null,"platformCommissionProportion":1,"name":"添加剂","pid":13,"id":26
Karen110 Karen110
4年前
盘点JavaScript中解构赋值,数组解构常用的数组操作
大家好,我是进阶学习者。前言解构赋值:是一种特殊的语法,它使可以将数组或对象“拆包”为到一系列变量中,因为有时候使用变量更加方便。解构操作对那些具有很多参数和默认值等的函数也很奏效。一、数组解构下面是一个将数组解构到变量中的。例://有一个存放了名字和姓氏的数组letarr现在就可以针对这些变量
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
4年前
PTA1
11数组定义中,数组名后是用方括号括起来的常量表达式,不能用圆括号。(1分)\T\F12在C语言中能逐个地使用下标变量,也能一次引用整个数组。(1分)T\F\因为它有首地址13同一个数组中的每个元素都具有相同的数据类型,有统一的标识符即数组名,用不同的序号即下标来区分数组中的各元素。(1分)\T\F14数
Jacquelyn38 Jacquelyn38
4年前
这些JS工具函数够你用到2020年底了
前言活不多说,自己平时搜集的干货函数奉上。干货函数找出数字在数组中下一个相邻的元素let i  "";let rr  ;const name  (n, arr1)    let num  Number(n);    for (let i  0; i < arr1.length; i)         const elemen
Stella981 Stella981
4年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Wesley13 Wesley13
4年前
ES6编程风格
1、块级作用域使用let和const2、解构赋值letarr\1,2,3,4,5,6,7,8,9\;let\a,b,c\arr;letobj{foo:'aaa',bar:'bbb'};let{bar,foo}obj;//bar等于'bbb',foo等于'aaa'(
Wesley13 Wesley13
4年前
ES6新语法(二)
1.解构在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量,即将数组或对象中的值,拆成一个一个变量。解构:自动解析数组或对象中的值,并赋值给指定的变量。、1.1数组解构vararr3,4,5;vara,b,carr;
Wesley13 Wesley13
4年前
ES6——对象解构和数组解构
为何使用解构功能  在ES5及早期版本中,开发者们为了从对象和数组中获取特定数据并赋值给变量,编写了许多看起来同质化的代码,如下:letoptions{repeat:true,save:false};//从对象中取数据letrepeatoptions.repeat,saveoptions
Stella981 Stella981
4年前
Angular中数组与字典循环写法
数组1、for(constiindeclareItems){  if(declareItems.hasOwnProperty(i)){    constindexi;    const declareItem declareItems\i\;  }}数组2、for(constitemofd
逆熵派生
逆熵派生
Lv1
愿你历遍山河,觉得人间值得。
文章
4
粉丝
0
获赞
0