JavaScript系列之解构赋值
文章の目录
- 一、解构赋值概述
- 二、解构赋值语法
- 三、描述
- 四、示例【解构数组】
- 1、变量声明并赋值时的解构
- 2、如果解构不成功，变量的值为undefined。
- 3、变量先声明后赋值时的解构
- 4、默认值
- 5、交换变量
- 6、忽略某些返回值
- 7、将剩余数组赋值给一个变量
- 8、用正则表达式匹配提取值
- 五、示例【解构对象】
- 1、基本赋值
- 2、无声明赋值
- 3、给新的变量名赋值
- 4、默认值
- 5、给新的变量命名并提供默认值
- 6、函数参数默认值
- 7、解构嵌套对象和数组
- 8、For of 迭代和解构
- 9、从作为函数实参的对象中提取数据
- 10、对象属性计算名和解构
- 11、对象解构中的 Rest
- 12、无效的 JavaScript 标识符作为属性名称
- 13、解构对象时会查找原型链（如果属性不在对象自身，将从原型链中查找）
- 写在最后
一、解构赋值概述
解构赋值语法是一种 Javascript 表达式。通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。
二、解构赋值语法
var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20// Stage 4（已完成）提案中的特性
({ a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 });
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}
三、描述
对象和数组逐个对应表达式，或称对象字面量和数组字面量，提供了一种简单的定义一个特定的数据组的方法。
var x = [1, 2, 3, 4, 5];
解构赋值使用了相同的语法，不同的是在表达式左边定义了要从原变量中取出什么变量。
var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2
四、示例【解构数组】
1、变量声明并赋值时的解构
var foo = ["one", "two", "three"];var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"
2、如果解构不成功，变量的值为undefined。
let [foo] = [];
let [bar, foo] = [1];
3、变量先声明后赋值时的解构
通过解构分离变量的声明，可以为一个变量赋值。
var a, b;[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
4、默认值
为了防止从数组中取出一个值为undefined的对象，可以在表达式左边的数组中为任意对象预设默认值。
var a, b;[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7
5、交换变量
在一个解构表达式中可以交换两个变量的值。
没有解构赋值的情况下，交换两个变量需要一个临时变量。
var a = 1;
var b = 3;[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
6、忽略某些返回值
你也可以忽略你不感兴趣的返回值：
function f() {return [1, 2, 3];
}var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3
你也可以忽略全部返回值：
[, ,] = f();
7、将剩余数组赋值给一个变量
当解构一个数组时，可以使用剩余模式，将数组剩余部分赋值给一个变量。
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
8、用正则表达式匹配提取值
用正则表达式的 exec() 方法匹配字符串会返回一个数组，该数组第一个值是完全匹配正则表达式的字符串，然后的值是匹配正则表达式括号内内容部分。解构赋值允许你轻易地提取出需要的部分，忽略完全匹配的字符串——如果不需要的话。
function parseProtocol(url) {var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);if (!parsedURL) {return false;}console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]var [, protocol, fullhost, fullpath] = parsedURL;return protocol;
}console.log(parseProtocol("https://developer.mozilla.org/en-US/Web/JavaScript")); // "https"
五、示例【解构对象】
1、基本赋值
var o = { p: 42, q: true };
var { p, q } = o;console.log(p); // 42
console.log(q); // true
2、无声明赋值
一个变量可以独立于其声明进行解构赋值。
var a, b;({ a, b } = { a: 1, b: 2 });
3、给新的变量名赋值
可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名。
var o = { p: 42, q: true };
var { p: foo, q: bar } = o;console.log(foo); // 42
console.log(bar); // true
4、默认值
变量可以先赋予默认值。当要提取的对象对应属性解析为 undefined，变量就被赋予默认值。
var { a = 10, b = 5 } = { a: 3 };console.log(a); // 3
console.log(b); // 5
5、给新的变量命名并提供默认值
一个属性可以同时 1）从一个对象解构，并分配给一个不同名称的变量 2）分配一个默认值，以防未解构的值是 undefined。
var { a: aa = 10, b: bb = 5 } = { a: 3 };console.log(aa); // 3
console.log(bb); // 5
6、函数参数默认值
ES5 版本
function drawES5Chart(options) {options = options === undefined ? {} : options;var size = options.size === undefined ? "big" : options.size;var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;var radius = options.radius === undefined ? 25 : options.radius;console.log(size, cords, radius);// now finally do some chart drawing
}drawES5Chart({cords: { x: 18, y: 30 },radius: 30
});
ES2015 版本
function drawES2015Chart({ size = "big", cords = { x: 0, y: 0 }, radius = 25 } = {}) {console.log(size, cords, radius);// do some chart drawing
}drawES2015Chart({cords: { x: 18, y: 30 },radius: 30
});
7、解构嵌套对象和数组
const metadata = {title: "Scratchpad",translations: [{locale: "de",localization_tags: [],last_edit: "2014-04-14T08:43:37",url: "/de/docs/Tools/Scratchpad",title: "JavaScript-Umgebung"}],url: "/en-US/docs/Tools/Scratchpad"
};let {title: englishTitle, // renametranslations: [{title: localeTitle // rename}]
} = metadata;console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"
8、For of 迭代和解构
var people = [{name: "Mike Smith",family: {mother: "Jane Smith",father: "Harry Smith",sister: "Samantha Smith"},age: 35},{name: "Tom Jones",family: {mother: "Norah Jones",father: "Richard Jones",brother: "Howard Jones"},age: 25}
];for (var {name: n,family: { father: f }
} of people) {console.log("Name: " + n + ", Father: " + f);
}// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"
9、从作为函数实参的对象中提取数据
function userId({ id }) {return id;
}function whois({ displayName: displayName, fullName: { firstName: name } }) {console.log(displayName + " is " + name);
}var user = {id: 42,displayName: "jdoe",fullName: {firstName: "John",lastName: "Doe"}
};console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"
10、对象属性计算名和解构
计算属性名，如 object literals，可以被解构。
let key = "z";
let { [key]: foo } = { z: "bar" };console.log(foo); // "bar"
11、对象解构中的 Rest
let { a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 };
a; // 10
b; // 20
rest; // { c: 30, d: 40 }
12、无效的 JavaScript 标识符作为属性名称
通过提供有效的替代标识符，解构可以与不是有效的 JavaScript 标识符的属性名称一起使用。
const foo = { "fizz-buzz": true };
const { "fizz-buzz": fizzBuzz } = foo;console.log(fizzBuzz); // true
13、解构对象时会查找原型链（如果属性不在对象自身，将从原型链中查找）
// 声明对象 和 自身 self 属性
var obj = { self: "123" };
// 在原型链中定义一个属性 prot
obj.__proto__.prot = "456";
// test
const { self, prot } = obj;
// self "123"
// prot "456"（访问到了原型链）
写在最后
如果你感觉文章不咋地
//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！
JavaScript系列之解构赋值相关推荐
- JavaScript中的解构赋值(详细)
解构赋值,就是快速的从对象或者数组中取出成员的一个语法方式 1.解构:将对象或者数组中的某个成员取出来 2.赋值:取出来的成员赋值给某一个变量 1.数组的解构 使用 [ ] ...
- 【javascript】js解构赋值中使用别名
let person = {name:"沉默小管",age:18 } //js的解构,把name别名成myName,之后就可以使用myName替换name let {name:my ...
- 【JavaScript 笔记】— 函数高级（变量作用域、解构赋值、方法、高阶函数、闭包、箭头函数、generator）
JavaScript个人笔记 变量作用域 变量提升 全局对象 windows 命名空间 局部作用域 常量 解构赋值 使用场景 方法 apply 装饰器 高阶函数(Array) map reduce m ...
- 从Vuex的Actions中理解JavaScript的解构赋值
导言: 本菜鸡在学习大佬的代码的时候看到有大佬在Vuex中的Actions用到了解构赋值.我对Actions和解构赋值都不算太了解.这篇文章就记录一下我对这两点的一个理解. Actions背景介绍 背 ...
- exec 直接赋值_了解 JavaScript 解构赋值
引言 数组和对象就像一个 "压缩包". 在需要单独引用数组中的某一个元素时,解构赋值可以很方便的完成这个任务,它可以将数组和对象整体 "解压缩" 到一堆变量上, ...
- [JavaScript]解构赋值详解
文章目录 概念 数组解构 声明分别赋值 解构默认值 交换变量值 解构函数返回的数组 忽略返回值(或跳过某一项) 赋值数组剩余值给一个变量 嵌套数组解构 字符串解构 对象解构 基础对象解构 赋值给新变量 ...
- JavaScript 解构赋值
文章目录 JavaScript 解构 数组解构 分配默认值 交换变量 跳过项 将剩余元素分配给单个变量 嵌套解构赋值 参考文档 在本教程中,您将借助示例了解 JavaScript 解构赋值. ...
- JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值
1.解构赋值的定义 在ES6中,允许按照一定模式,从数组和对象中提取值(所谓解构),然后对变量进行赋值. var a = 1; var b = 2; var c = 3;//等价于var [a, b, ...
- JavaScript解构赋值
JS解构赋值 1. 什么是解构赋值 ? 2. 数组的解构赋值 2.1) 数组解构赋值的默认值 2.2) 数组解构赋值的应用 类数组中的应用 交换变量的值 3. 对象的解构赋值 3.1) 对象解构赋值的 ...
最新文章
- task一个任务结束后执行另一个操作
- memcache mysql 同步_memcache与mysql数据库同步
- 429. N-ary Tree Level Order Traversal - LeetCode
- flask静态html
- Android热修复技术原理详解（最新最全版本）
- 远程连接mysql库问题
- Android开发——RecyclerView特性以及基本使用方法（二）
- Linux下最快速共享目录的方法
- Developer's Guide to Microsoft Enterprise Library, C# Edition
- Mac如何制作分屏视频
- Android Multimedia框架总结（十六）Camera2框架之openCamera及session过程
- 信息化和信息系统-PMP
- APP中如何判断手机类型
- 如何使用Mixins？mixins混入使用方法
- 【语篇标记练习题】What are we doing?
- xp远程登录linux,Linux操作系统下如何远程登录XP桌面
- 拼多多商品详情，产品竞价，关键词搜索接口
- 怎么把dell 灵越2020一体机的win8系统改成win7？
- ip国家 数据库下载
- Java中List集合的addAll方法的小坑