變量的解構賦值

Elle 發布于2019-08-20 14:51 / 2310人閱讀

摘要：變量的解構賦值的用途交換變量的值從函數中返回多個值返回一個數組返回一個對象函數參數的賦值提取數據函數參數的默認值。

解構賦值

解構賦值是ES6允許按照一定模式，從數組和對象中提取值，對變量進行賦值；

解構賦值主要有一下幾種

數組的解構賦值

let [a,b,c] = [1,2,3];

允許有默認值

let [foo = true] = [];
foo//true

let [x,y="b"] = ["a"]; //x="a";y="b";

對象的解構賦值

對象的解構和數組不同的地方是，數組的元素必須是按次序排列的，變量的值由它的位置決定；對象的屬性是無序的，變量名與屬性名相同就可以了。

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

如果變量名和屬性名不一致，或者想要給這個變量名和屬性名不一樣，可以這樣使用。

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

這相當于給給變量賦值，而且變量名不需要和屬性名一樣。

如果對一個已經聲明的變量，需要謹慎

let x;
{x} = {x: 1};//SyntaxError

因為Javascript引擎會將{x}理解成一個代碼塊，從而發生語法錯誤。

({x} = {x:1})

字符串解構賦值

let [a,b,c,d,e] = "hello";
a//"h"
b//"e"

類似數組的對象都有一個length屬性，因此可以對這個屬性解構賦值

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

數值和布爾值的解構賦值

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

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

函數參數的解構賦值

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

ES6內部使用的是嚴格相等運算符（===），判斷一個位置是否有值。如果一個組員不嚴格等于undefined,默認值是不會生效的。

let [x=1] = [undefined];
x//1

let [x=1] = [null];
x//null

let {x=3} = {x: undefined};
x//3

let {x=3} = {x:null};
x//null;

變量的解構賦值的用途

交換變量的值

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

從函數中返回多個值

// 返回一個數組

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一個對象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

函數參數的賦值

提取JSON數據

函數參數的默認值。

   指定了默認值，就可以避免在函數體內寫var foo = foo || "init".

遍歷Map結構。

   任何部署了Iterator接口的對象，都可以用for...of循環遍歷。

GPU云服務器云服務器解構賦值 php的變量賦值 php 賦值類的變量外部變量賦值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81971.html

ES6學習第二章變量的解構賦值

摘要：前言前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接變量的解構賦值解構賦值解構賦值允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。對象的解構賦值是根據對象值進行匹配。前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接：變量的解構賦值解構賦值ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。解構賦值是對賦值運...

番茄西紅柿 2021-11-24 09:38 評論0 收藏2637
ES6學習第二章變量的解構賦值

摘要：前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接變量的解構賦值解構賦值允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。對象的解構賦值是根據對象值進行匹配。前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接：變量的解構賦值解構賦值ES6 允許按照一定模式，從數組和對象中提取值，對...

番茄西紅柿 2021-11-24 09:38 評論0 收藏2637
es6 - 解構賦值

摘要：比如上面展示的情況都是可以聯合使用的比如對象的解構賦值對象的解構賦值是基于屬性的。當給已存在的變量解構賦值時，注意加這是由于如果不加會把左邊看成一個代碼塊，會報錯。注意事項數組的解構賦值中，使用的變量必須放在最后。解構賦值解構賦值是一個聽起來比較高大上的特性，但按我的理解，它就是一種語法糖。它并沒有賦予js更強大的能力，只是讓賦值操作更加的靈活，效率。在es6之前，賦值操作需要=...

DirtyMind 2019-08-26 11:45 評論0 收藏0
ES6 學習筆記（一）let，const和解構賦值

摘要：另外對于已經聲明的變量進行解構賦值時，要非常小心。因此在行首加，將其強制轉化為表達式執行。由于和無法轉為對象，所以對它們進行解構賦值，都會報錯。 let和const let和const是es6新增的兩個變量聲明關鍵字，與var的不同點在于：（1）let和const都是塊級作用域，在{}內有效，這點在for循環中非常有用，只在循環體內有效。var為函數作用域。（2）使用let和con...

iOS122 2019-08-23 15:29 評論0 收藏0
ES6-變量的解構賦值(3)

摘要：數組的解構賦值特點根據數據的下標來賦值的，有次序。模式能夠匹配起來，如長度為數值和布爾值的解構賦值解構賦值的規則是只要等號右邊的值不是對象或數組，就先將其轉為對象。布爾值解構賦值為字符串的一種。在很多獨立細小的方面，解構賦值都非常有用。 1、解構賦值簡介官方解釋：按照一定的模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。舉個例子，想獲取數組中...

Jason_Geng 2019-08-23 16:46 評論0 收藏0
《ES6學習2》變量的解構賦值

摘要：解構賦值的分類數組解構賦值對象解構賦值字符串解構賦值數值解構賦值布爾值解構賦值函數參數解構賦值。嵌套情況默認值解構賦值允許設置默認值，當數組成員嚴格等于，默認值將生效。報錯報錯函數參數的解構賦值函數的參數也可以使用解構賦值和指定默認值 ES6可以從數組和對象中提取值，然后對變量進行賦值。解構賦值的分類：數組解構賦值、對象解構賦值、字符串解構賦值、數值解構賦值、布爾值解構賦值、函數參...

mist14 2019-08-26 13:52 評論0 收藏0