ES6學習筆記 變數宣告和解構賦值

2022-10-10 07:36:07 字數 3356 閱讀 2210

一、let、var和const的區別

let:用法類似於var,但所宣告的變數,只在let所在的**塊內有效,不存在變數提公升,存在塊級作用域,存在暫時性死區,變數一定要在宣告後使用。

var:用於宣告變數,用var宣告的變數既是全域性變數,也是頂層變數,在**塊之外呼叫亦生效,存在變數提公升,不存在塊級作用域,變數在宣告之前可使用。

const:宣告乙個唯讀的常量。一旦宣告,常量的值就不能改變。const一旦宣告變數,就必須立即初始化,不能留到以後賦值。不存在變數提公升,存在塊級作用域,存在暫時性死區,變數一定要在宣告後使用。

二、陣列擴充套件

1.array.from方法用於將兩類物件轉為真正的陣列:類似陣列的物件(array-like object)和可遍歷(iterable)的物件(包括es6新增的資料結構set和map),可以接受第二個引數,用來對每個元素進行處理,將處理後的值放入返回的陣列。

2.array.of方法用於將一組值,轉換為陣列,彌補陣列建構函式array()的不足。

3.array方法沒有引數、乙個引數、三個引數時,返回結果都不一樣。只有當引數個數不少於2個時,array()才會返回由引數組成的新陣列。引數個數只有乙個時,實際上是指定陣列的長度

array.from([1, 2, 3])

等同於array.of(1, 2, 3)

三、解構賦值

解構賦值:針對陣列或者物件進行模式匹配,然後對其中的變數進行賦值,簡潔且易讀,語義更加清晰明了;也方便了複雜物件中資料字段獲取。

1. 陣列解構:陣列中提取值,按照對應位置,對變數賦值

//*****== 基本解構

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

//*****== 巢狀解構

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

//*****== 預設值解構

let [value=1]= [undefined]

//*****== 不完全解構

let [value=1]= [undefined]

//*****== 剩餘運算子

let [a, ...b] = [1, 2, 3]

2. 物件解構:物件的解構與陣列有乙個重要的不同。陣列的元素是按次序排列的,變數的取值由它的位置決定;而物件的屬性沒有次序,變數必須與屬性同名,才能取到正確的值

//*****== 基本

let = ;

//*****== 巢狀

let ] } = ] }

//*****== 忽略

let ] }= ] }

//*****== 剩餘運算子

let =

//*****== 預設值

let =

//*****== 不完全解構

let , x ] } = ] }

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

(1)交換變數的值

let x = 1;

let y = 2;

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

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

(2)從函式返回多個值

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

// 返回乙個陣列

function example()

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

// 返回乙個物件

function example() ;

}var = example();

(3)函式引數的定義

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

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

function f([x, y, z])

f([1, 2, 3]);

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

function f()

f();

(4)提取json資料

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

var 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");

ES6 變數解構

es6允許按照一定的模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構 destructuring 語法 let a,b,c 1,2,3 console.log a,b,c 1 2 3 順序 從陣列中取值,按照對應位置,對變數取值,這種寫法屬於 匹配模式 只要等號兩邊模式相同,左邊的變數就會被...

ES6學習筆記 變數的解構賦值

let foo,bar baz 1,2 3 foo 1 bar 2 baz 3本質上,這種寫法屬於 模式匹配 只要等號兩邊的模式相同,左邊的變數就會被賦予對應的值 let x,y,z a x a y undefined z var foo foo undefined var bar,foo 1 ba...

ES6 變數的解構賦值學習筆記

陣列的解析賦值 本質為 模式匹配 如果解構不成功,變數的值就等於undefined var foo var bar,foo 1 foo的值為undefined let x,y,z a x a y undefined z let a,b d 1,2,3 4 上面的例子為不完全解構,但是可以成功。如果等...