JavaScript ES6 解构赋值
JavaScript 大约 1890 字含义
通过解构赋值,可以将属性/值从对象/数组中取出,赋值给其他变量。
解构是一种打破数据结构,将其拆分为更小部分的过程。
解构数组
var foo = ["one", "two", "three"];
var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"
变量先声明后赋值时的解构
var a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
默认值
var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
交换变量
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
解析一个从函数返回的数组
function f() {
return [1, 2];
}
var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2
忽略某些返回值:使用空格隔开,[,,] = f()
全部忽略返回值
function f() {
return [1, 2, 3];
}
var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3
// 全部忽略返回值
[,,] = f();
将剩余数组赋值给一个变量
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
解构对象
基本赋值
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true
给新的变量名赋值
var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true
// p 已经赋值给了 foo,不可以使用 p 变量
p // error: p is not defined
默认值
var {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5
给新的变量命名并提供默认值
var {a:aa = 10, b:bb = 5} = {a: 3};
console.log(aa); // 3
console.log(bb); // 5
对象属性计算名和解构
let key = "z";
let { [key]: foo } = { z: "bar" };
console.log(foo); // "bar"
对象解构中的Rest
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
a; // 10
b; // 20
rest; // { c: 30, d: 40 }
无效的 JavaScript 标识符作为属性名称
const foo = { 'fizz-buzz': true };
const { 'fizz-buzz': fizzBuzz } = foo;
console.log(fizzBuzz); // true
解构对象时会查找原型链(如果属性不在对象自身,将从原型链中查找)
// 声明对象 和 自身 self 属性
var obj = {self: '123'};
// 在原型链中定义一个属性 prot
obj.__proto__.prot = '456';
// test
const {self, prot} = obj;
// self "123"
// prot "456"(访问到了原型链)
参考
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
阅读 655 · 发布于 2022-07-02
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb扫描下方二维码关注公众号和小程序↓↓↓

昵称:
随便看看
换一批
-
Spring Boot JPA 开启审计字段自动注入阅读 210
-
PostgreSQL 修改字段属性阅读 2247
-
Java 并发编程之 AQS ReentrantLock await signal 源码解析阅读 1436
-
Nginx 开启 HTTP2.0阅读 2162
-
JMeter 提取 JSON 字段用于下一个请求阅读 1329
-
Spring Boot 使用 Session 管理登录状态和拦截请求阅读 9085
-
面试题:HTTP2.0 与 HTTP1.1 的区别阅读 3415
-
IDEA 一直卡在 Reopening files 对话框解决方法阅读 2359
-
Linux 安装运行 Keepalived阅读 1996
-
MySQL 全文检索设置停止词阅读 2237