ES6的解构赋值

news/2024/7/11 0:45:12 标签: 解构赋值, ES6

文章目录


所谓的解构赋值,就是 按照一定的模式,从 数组或者对象等可遍历的对象中提取出值,然后对变量进行赋值。 For example

数组的解构赋值

let [x,y,z] = [1,2,3];
console.log(x); //1
console.log(y); //2
console.log(z); //3

上面的代码就是一个典型的解构赋值的应用,从数组中提取值,并把值赋给对应位置的变量。这种写法就是模式匹配,不单只可以这样简单的匹配,多维数组也可以被识别解构。

let [x,[[y],z]] = [1,[[2],3]];
console.log(x); //1
console.log(y); //2
console.log(z); //3

上面写的都是等号左边的每个位置都有对应的变量,其实也不一定要这样写,例如下面

let [, , x] = [1,2,3];
console.log(x); //3

还可以使用...修饰符来将数组中未被,后面也不会被分配的值赋给变量(以数组的形式),若没有未被分配的值则赋为空数组。

let [x,...y] = [1,2,3,4,5,6];
console.log(x); //1
console.log(y); //[2,3,4,5,6]

let [a,...b] = [1];
console.log(a); //1
console.log(b); //[]

还有一种情况称为不完全解构,就是说等号的左边变量的个数与右边数组的长度不一致。在这种情况下,解构依然是可以正确完成的。

let [x,y] = [1,2,3];
console.log(x); //1
console.log(y); //2

let [a,[b],c] = [1,[2,3],4];
console.log(a); //1
console.log(b); //2
console.log(c); //4

解构赋值还可以指定默认值,不过默认值仅当数组对应位置的值使用严格相等运算符判断为undefined之后才会生效。

let [x='a'] = ['b'];
console.log(x); //'b'

let [y='b'] = [undefined];
console.log(y); //'b'

这个默认值还可以是一个函数

function foo(){
    console.log('hello world');
    return 'c';
}

let [z=foo()] = [undefined];    //'hello world'
console.log(z); //'c'

对象的解构赋值

与数组类似,对象的解构赋值就是把对象中的属性赋给具有与属性名相同变量名的变量。例如:

let {x, y} = {x: 1, y: 2};
console.log(x); //1
console.log(y); //2

let {z} = {a: 3};
console.log(z); //undefined

上面代码中具有与对象属性名一致变量名的变量x,y被成功赋值,而za显然不同,所以z是undefined。

那如果我的变量名就是想与属性名不同怎么办呢?可以像下面这样写

let {a: z} = {a: 3};
console.log(z); //3

实际上这说明了,解构的时候是先找同名的属性,然后再赋给对应的变量,也就是说真正被赋值的是属性对应的变量,而不是属性本身。之前上面的解构过程可以写成下面的样子

let {x: x, y: y} = {x: 1, y: 2};
console.log(x); //1
console.log(y); //2

与数组解构赋值类似,对象的解构赋值也是可以指定默认值的。

let {x = 3} = {}
console.log(x); //3

同样的,对象解构赋值也可使用函数。

function foo(){
    return 'a';
}
let {x = foo()} = {};
console.log(x); //a

字符串的解构赋值

是的,字符串也是可以结构赋值的,因为这个时候,字符串被转换成了类似数组的结构。

let [x,y,z] = 'abc';
console.log(x); //a
console.log(y); //b
console.log(z); //c

字符串本身也可看作是一个对象,可以对它进行解构。

let {length} = 'abc';
console.log(length);    //3

函数参数的解构赋值

函数参数的解构赋值与前面数组或对象的解构赋值相似。例如:

function multiply([x, y]){
    return x * y;
}
console.log(multiply([2, 4]));  //8

上面代码中,我给multiply函数传入的参数是[2, 4],但是进入函数内就被解构成x=2, y=4

同样的,对象解构赋值也可以使用。


http://www.niftyadmin.cn/n/1700994.html

相关文章

python matplotlib画饼形图

我写的这个函数是画饼形图的,有两个参数,一个是字典,字典的内容例如’a’7,就是前面是字符串后面是数字,运行完后会在当前路径下输入运行的结果图。 def Plo2class(Dir,title):New_DirDir.copy()Null_List[]for k in …

JS中函数缺少参数的报错

稍微有过一点JS编程经历的人都知道,JS中的函数,即便是缺少了参数也不会报错,例如 function add(x, y){return x y; } console.log(add()); //NaNadd函数中并没有传参数,但是可以正常运行不会报错。那如果想要像C/C或其他一些语言…

Python flask传递照片

服务器端: 这里的操作就是当客户端运行程序提交照片后,将客户端的照片保存在工程目录下,保存名称为01.png from flask import request, Flask import base64 import cv2 import numpy as npapp Flask(__name__) app.route("/", m…

Python PIL获取图像

from PIL import Image im Image.open(F:\\ReMark\\7.jpg)#返回一个Image对象 widthim.size[0] heightim.size[1]

Linux DD命令

dd if/dev/zero of/tmp/test bs1M count2048dd使用dd这个linux命令可以创建一定大小文件。linux创建文件命令:dd命令把指定的输入文件拷贝到指定的输出文件中,并且在拷贝的过程中可以进行格式转换。语法:CODE:[Copy to clipboard]dd 〔选项〕…

android object转实体类_Android 热修复 AndFix 原理,看这篇就够了

点击 紫雾凌寒 关注,星标或置顶我们一起成长前言之前写过一篇热修复的文章,那时候刚开始接触,照猫画虎画的还算比较成功。但是那种修复需要重新启动APP,也就是在JAVA层实现的热修复。我们知道目前Android主流的修复还有在Native层…

Java运行Python程序

原理:Java运行cmd窗口,使用python 运行py程序。 bat文件(最好放在Python工程路径下)代码: echo off F: cd F:\IDE\Anaconda\envs\torch start python F:\Python\yolo5-Person\detectUI.py exitjava调用程序&#xf…