抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

Mr.wang

Time flies and people come and go

博客

归档

Es6解构赋值

Mr.wang
javascript

发布于：2019年5月11日
次浏览

阅读阮大大的Es6，获得的变量的结构方法

地址：阮一峰的ES6

变量的解构赋值

  1. 数组的解构赋值
  2. 对象的解构赋值
  3. 字符串的解构赋值
  4. 数值和布尔值的解构赋值
  5. 函数参数的解构赋值

1数组的解构赋值

1
2
3
4
5
let [a,b,c] = [1,2,3] // 为abc各自an规律赋值
let [a,[b,[c]]] = [1,[2,[3]]]  //如果为嵌套数组，可以用一样的嵌套数组赋值
let [x,y] = [1,2,3] //如果赋值两边长度不一，，则部分赋值 部分未赋值为uddefined
let [...arr] = [1,2,3] //扩展运算符可以直接把所有的数字赋值给arr arr=[1,2,3]
let [first,...arrAll]=[1,2,3,4] //当第一个first赋值以后，其他的数字都会给arrAll包含  first =1 arrAll=[2,3,4]

结构赋值为何左右两边为数组？

正常的赋值是一个一个赋值，解构赋值是吧需要赋值的解析重构，循环赋值 通过数组可遍历的特性就可以解构

解构赋值的默认值

1
2
3
let [a=11] = [] //a输出为11 在赋值之前就已经赋值 解构只是再次赋值 不会冲突 注意点 [] 数组里面无任何值，但是有undefined 所以才会解构成功 ，否则部分赋值也不会实现，以下情况请注意 null与undefined有本质的区别，两者不等，所以赋值时可以成功为null，解构赋值也严格遵守严格运算符（===）
let [x = 1] = [undefined];//x = 1
let [x = 1] = [null]; //x = null

2对象的解构赋值

1
2
3
4
5
6
7
8
9
10
11
12
let {a}={a:'good',b:'nice'} //a = good 对象里不同于数组，它是无序的集合 所以赋值要用见来赋值 两者的键要相同
//如果没有对应的键则会返回undefined
//对象的解构赋值可以对内置对象进行赋值
let{log,sin,cos} = Math
let {log} = console
//当取得所对应的对象的方法时，可以直接调用
log('hello word') //控制台输出hello word
sin(90)  //输出为 1
let {a，{b}} = {a:11,{b:22}} //对象一样支持嵌套赋值
var {x = 3} = {}; //也支持默认值
var {x: y = 3} = {x: 5}; //x与x之间键名对应但不会创建变量 实际变量为y 默认值为3 解构后赋值为5
let {a,...aa} = {a:{},b:{a:2},c:{d:4}} //剩余分配会在...的变量中 aa:{b:{a:2},c:{d:4}}

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

注意点

1
2
3
4
5
6
7
8
let x;
{x} = {x: 1}; //已经声明的变量再解构赋值会报错 ，{x} 会被解析为代码块
//解决方法
({x}={x:1}); //括号包裹
//解构赋值允许等号左边的模式之中，不放置任何变量名。因此，可以写出非常古怪的赋值表达式。
({}={a:dd}) //语法可行但毫无意义
//数组也是一种特殊的对象 他是用索引值当键
let {0:first} = [1,2,3]

3字符串的解构赋值

1
2
let [a,b,c,d,e] = 'hello' // a=h,b=e,c=l,d=l,e=o  //这是将字符串转化为数组遍历在赋值
let {length : len} = 'hello'; //len = 5 // 数组都有length这个键 表示长度

4数值和布尔值的解构赋值

1
2
3
4
5
6
7
8
let {toString: s} = 123;
s === Number.prototype.toString // true
//数字和布尔类型会转化为对象 所以在s的原型链与赋值的原型链相等 前面的键 toString 是转化为字符串的方法
let {toString: s} = true;
s === Boolean.prototype.toString // true
// 由于ndefined和null无法转为对象 所以不能进行赋值
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

5函数参数的解构赋值

函数的解构赋值我们经常使用 当我们进行传参时 就会进行解构赋值

1
2
3
4
function fn(a,b){
  return a+b
}
fn(2,3) //a和b都会在函数调用时传参解构赋值

函数参数的默认值

1
2
3
4
5
6
7
8
function fn({x = 0, y = 0} = {}) {
  return [x, y];
}
fn({x: 3, y: 8}); // [3, 8] 
fn({x: 3}); // [3, 0]
fn({}); // [0, 0]
fn(); // [0, 0]
//如果有默认值,参数没有就使用默认值

另一种函数的默认值

1
2
3
4
5
6
7
8
9
function fn({x, y} = {x:0,y:0}) {
  return [x, y];
}
fn({x: 3, y: 8}); // [3, 8] 
fn({x: 3}); // [3, undefined]
fn({}); // [undefined, undefined]
fn(); // [0, 0]
//如果有默认值,参数没有就使用默认值
//这种写法使用了对象的键值对赋值，不是之前的值传递，所以 当参数为{}时 传递的是undefined

圆括号

圆括号是为了解决赋值时解析的无法辨别，但是要注意使用时机，否则会报错

6遍历 Map 结构

任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。

1
2
3
4
5
6
7
8
9
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

如果只想获取键名，或者只想获取键值，可以写成下面这样。

1
2
3
4
5
6
7
8
9
// 获取键名
for (let [key] of map) {
  // ...
}

// 获取键值
for (let [,value] of map) {
  // ...
}

7输入模块的指定方法

加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

1
const { SourceMapConsumer, SourceNode } = require("source-map");

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：http://wang-z.gitee.io/2019/05/11/js-Es6%E5%8F%98%E9%87%8F%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC/

本页文档最后更新于：2021年4月13日

javascript

Es6

评论