ES6学习笔记（二）--------------------------------------变量

silencezwm 发布于2019-08-29 13:23 / 3404人阅读

摘要：如果变量名与属性名不一致，必须写成下面这样。这是因为此时，字符串被转换成了一个类似数组的对象。数字和布尔的解构赋值，解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。参数也可以是无序的解构赋值对提取对象中的数据，可以快速提取

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
ES6之前我们申明多个变量需要按照下面的方法：

let a=1;
let b=2;
let c=3;
let d=4;
//或者
let a=1,b=2,c=3,d=4;

现在我们可以更加简便

let[a,b,c,d]=[1,2,3,4]

这种方法需要连边结构完全对上，左边有多余变量，会给多余变量赋值undefined，右边有多余的值，多余的自动会被忽略

let[a,[b,c,d],[e,[f,g]]]=[1,[2,3,4],[5,[6,7]]]
console.log(a,b,c,d,e,f,g)//1 2 3 4 5 6 7

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

如果等号右边的对象不是数组，就会无法解析，报错

//下面的全部报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

解构赋值允许给变量默认值,如果后面给变量赋值undefined，系统会自动采用默认值

let[a=1,b,c,d]=["abort","bar","cancle","dance"]
console.log(a,b,c,d)//abort bar cancle dance

let[a=1,b,c,d]=[undefined,"bar","cancle","dance"]
console.log(a,b,c,d)//1 "bar" "cancle" "dance"

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

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

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

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError

解构赋值还可以用于对象的属性赋值

let{a,b}={a:1,b:2}
a//1
b//2
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

我们从上面的例子可以看出对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

如果变量名与属性名不一致，必须写成下面这样。

var { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"

let obj = { first: "hello", last: "world" };
let { first: f, last: l } = obj;
f // "hello"
l // "world"

上面的例子等价于下面,其实就是个左右一一对应的意思

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
foo//"aaa"
bar//"bbb"

与数组一样，解构也可以用于嵌套结构的对象。

let obj = {
  p: [
    "Hello",
    { y: "World" }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

一定要看清楚他的左右对应关系

var node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};

var { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}

对象解构赋值也可以设置默认值

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: msg = "Something went wrong" } = {};
msg // "Something went wrong"

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = "hello";
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length : len} = "hello";
len // 5

数字和布尔的解构赋值，解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。(这个给我搞的有点懵逼，数字与布尔的这个例子大家可以看这个网址大家的讨论：https://segmentfault.com/q/10...

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

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

let { toString : s } = 123; 
// 可以换成两步
let temp = new Number(123);
let { toString : s } = temp;

// temp对象因为有toString属性，所以解构成功，然后将toStirng变量用新的变量s代替

let { a : s } = 123 是因为解构失败，所以是undefined

变量解构赋值的用途
一.交换变量的值

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

二.从函数返回多个值，用来接收返回值

function f(a,b){
var num=a+b;
var aver=(a+b)/arguments.length;
return[num,aver,a*b,a*a+b*b]
}
let[x,y,z,p]=f(2,3)
console.log(x,y,z,p)//5 2.5 6 13

function f1(){
return {a:1,b:2}}
let {a,b}=f1()
console.log(a,b)//1 2

解构赋值可以方便地将一组参数与变量名对应起来。

function f1([x,y,z]){
return x+y+z}
f1([1,2,3])//6

参数也可以是无序的
function f2({a,c,d,f,b}){
return a+c+d+f+b}
f2({a:1,b:2,c:3,d:4,f:5})//15

解构赋值对提取JSON对象中的数据，可以快速提取

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

....

私有云服务器托管学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112564.html

ES6学习笔记（二）--------------------------------------变量

摘要：如果变量名与属性名不一致，必须写成下面这样。这是因为此时，字符串被转换成了一个类似数组的对象。数字和布尔的解构赋值，解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。参数也可以是无序的解构赋值对提取对象中的数据，可以快速提取 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构ES6之前我们申明多个变量需要按照下面的方法： let a=1; let b=2...

王笑朝 2019-08-01 17:34 评论0 收藏0
ES6学习笔记（二）--------------------------------------变量

摘要：如果变量名与属性名不一致，必须写成下面这样。这是因为此时，字符串被转换成了一个类似数组的对象。数字和布尔的解构赋值，解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。参数也可以是无序的解构赋值对提取对象中的数据，可以快速提取 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构ES6之前我们申明多个变量需要按照下面的方法： let a=1; let b=2...

geekidentity 2019-08-21 16:18 评论0 收藏0
es6学习笔记-顶层对象_v1.0_byKL

摘要：学习笔记顶层对象虽然是笔记但是基本是抄了一次大师的文章了顶层对象顶层对象，在浏览器环境指的是对象，在指的是对象。之中，顶层对象的属性与全局变量是等价的。的写法模块的写法上面代码将顶层对象放入变量。参考引用顶层对象实战 es6学习笔记-顶层对象_v1.0 (虽然是笔记,但是基本是抄了一次ruan大师的文章了) 顶层对象顶层对象，在浏览器环境指的是window对象，在Node指的是gl...

Meils 2019-08-21 11:31 评论0 收藏0
ES6学习笔记一：let、const、块级作用域

摘要：一新增了命令和一样都是用来声明标量，但所声明的变量只在声明的代码块内及声明之后有效命令适合在循环中使用在循环内有效在全局内有效命令暂时性死区大括号中的使用了声明，所以在大括号中暂时只能在声明之后有效不允许在同一作用域内重复声明变量，因此不能一、ES6新增了let命令 let 和 var 一样都是用来声明标量，但let所声明的变量只在【声明的代码块内】及【声明之后】有效 { c...

YuboonaZhang 2019-08-20 12:08 评论0 收藏0
ES6学习笔记

摘要：所以，如果一个数组成员不严格等于，默认值是不会生效的因为不严格等于对象解构对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。 http://es6.ruanyifeng.com/?se... 一、作用域 let //i作用域在全局，每次循环i都被重新赋值了而覆盖了之前的值 var a = []...

Gu_Yan 2019-08-20 14:34 评论0 收藏0