ES6 物件的解構賦值

2021-08-21 03:00:53 字數 2198 閱讀 8601

es6的解構賦值,在我看來是提供了乙個整體賦值的方案。

包括陣列和物件的整體賦值。

基本原則如下:

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

// x = 1

// y = 2

let = ;

// foo = "aaa"

// bar = "bbb"

但是物件的解構賦值,允許給賦值的變數重新命名。

物件的重新命名解構 (我自己去的名字,便於理解)

其實在給物件進行解構賦值的時候,有一種需求就是給物件的變數重新命名。

let = ;

解析:1、 foo 是用來做匹配的,用來去解構物件裡面尋找值的

2、 baz 才是變數名, baz = 'abc'

阮一峰es6鏈結

變數的解構賦值用途很多。

(1)交換變數的值

let x = 1;

let y = 2;

[x, y] = [y, x];

上面**交換變數x和y的值,這樣的寫法不僅簡潔,而且易讀,語義非常清晰。

(2)從函式返回多個值

函式只能返回乙個值,如果要返回多個值,只能將它們放在陣列或物件裡返回。有了解構賦值,取出這些值就非常方便。

// 返回乙個陣列

function

example()

let [a, b, c] = example();

// 返回乙個物件

function

example() ;

}let = example();

(3)函式引數的定義

解構賦值可以方便地將一組引數與變數名對應起來。

// 引數是一組有次序的值

function

f([x, y, z])

f([1, 2, 3]);

// 引數是一組無次序的值

function

f()

f();

(4)提取json資料

解構賦值對提取json物件中的資料,尤其有用。

let jsondata = ;

let = jsondata;

console.log(id, status, number);

// 42, "ok", [867, 5309]

上面**可以快速提取 json 資料的值。

(5)函式引數的預設值

jquery.ajax = function (url, ,

cache = true,

complete = function () {},

crossdomain = false,

global = true,

// ... more config

}) ;

指定引數的預設值,就避免了在函式體內部再寫var foo = config.foo || 'default foo';這樣的語句。

(6)遍歷map結構

任何部署了iterator介面的物件,都可以用for...of迴圈遍歷。map結構原生支援iterator介面,配合變數的解構賦值,獲取鍵名和鍵值就非常方便。

var map = new

map();

map.set('first', 'hello');

map.set('second', 'world');

for (let [key, value] of map)

// first is hello

// second is world

如果只想獲取鍵名,或者只想獲取鍵值,可以寫成下面這樣。

// 獲取鍵名

for (let [key] of map)

// 獲取鍵值

for (let [,value] of map)

(7)輸入模組的指定方法

載入模組時,往往需要指定輸入那些方法。解構賦值使得輸入語句非常清晰。

const  = require("source-map");

// 匯入react元件

import from

'./***component.jsx';

ES6 物件的解構賦值

物件的解構賦值 解構不僅可以用於陣列,還可以用於物件。let console.log foo aaa console.log bar bbb這裡的foo,bar一定要對應。物件的解構與陣列有乙個重要的不同。陣列的元素是按次序排列的,變數的取值由它的位置決定 而物件的屬性沒有次序,變數必須與屬性同名,...

ES6 物件的解構賦值

解構不僅可以用於陣列,還可以用於物件。let foo aaa bar bbb 物件的解構與陣列有乙個重要的不同。陣列的元素是按次序排列的,變數的取值由它的位置決定 而物件的屬性沒有次序,變數必須與屬性同名,才能取到正確的值。let foo aaa bar bbb let baz undefined ...

ES6 物件解構

當從乙個物件中獲取屬性時,會進行這樣操作 const p1 const name p1.name tom shmith const age p1.age 20 const father p1.familly.father jack shmith const mother p1.familly.mot...