ES6 介紹 及 變數的宣告 解構賦值

2022-07-29 00:09:22 字數 4032 閱讀 5840

babel轉碼:一些js執行執行環境(runtime),可能不完全支援es6新語法,需要進行 babel 轉碼,將es6語法 轉為 es5語法,從而在現有環境執行 babel 轉碼器 參考

塊級作用域的出現,實際上使得獲得廣泛應用的立即執行函式表示式(iife)不再必要了

// iife 寫法

(function () ());

// 塊級作用域寫法

1. let 、const 宣告的變數 是區域性變數

var a = 1;

console.log(window.a); // 1

let b = 1;

console.log(window.b); // undefined

2. let 、const 宣告變數不存在變數提公升
// var 的情況

console.log(foo); // 輸出undefined

var foo = 2;

// let 的情況

console.log(bar); // 報錯referenceerror

let bar = 2;

3. let 、const 宣告變數不允許重複宣告

// 報錯

if (true)

function func(arg)
function func(arg) 

}

4. let 、const 宣告變數存在暫時性死區(tdz)

var tmp = 123;

if (true)

// 上面**中,在let命令宣告變數tmp之前,都屬於變數tmp的「死區」

function bar(x = y, y = 2) 

console.log(bar()); // 報錯

5.letconst區別

let f1;     // 不報錯

const f2; // syntaxerror: missing initializer in const declaration

複雜資料型別:const宣告的變數 可以改變指標中的 的資料結構

// 所以:const 宣告複雜資料型別,其資料結構是可變的

const foo = {};

// 為 foo 新增乙個屬性,可以成功

foo.prop = 123;

ondole.log(foo.prop); // 123

1. 解構賦值 --- 陣列

分為:完全解構賦值、不完全解構賦值

// 完全結構賦值

let [foo, [[bar], baz]] = [1, [[2], 3]];

console.log(foo); // 1

console.log(bar); // 2

console.log(baz); // 3

// 不完全結構賦值

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

console.log(x); // 1

console.log(y); // 2

// `...a` 代表定義陣列

let arr = [1, 2, 3, 4];

let [a, b, ...c] = arr;

console.log(c); // [3, 4]

2. 解構賦值 --- 物件

// 定義的變數名 與 屬性名一致

let = ;

foo // "aaa"

bar // "bbb"

const node = 

}};let , loc: } } = node;

line // 1

loc // object

start // object

let  = ;

console.log(baz); // "aaa"

3. 解構賦值 --- 陣列、物件 指定預設值
let [x = 1] = [undefined];

console.log(x); // 1

let [y = 1] = [null];

console.log(y); // null

function f() 

let [x = f()] = [1]; // 無輸出

let [x = f()] = ; // aaa

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

3. 解構賦值 --- 字串、數值、布林值、null、undefined

const [a, b, c, d, e] = 'hello';

a // "h"

b // "e"

c // "l"

d // "l"

e // "o"

let  = 123;

s === number.prototype.tostring // true

let = true;

s === boolean.prototype.tostring // true

let  = undefined; // typeerror

let = null; // typeerror

4. 解構賦值 --- 函式的引數
function fn()
function fn()
function fn( = )
function move( = {}) 

move(); // [3, 8]

move(); // [3, 0]

move({}); // [0, 0]

move(); // [0, 0]

function foo() 

foo({}) // 10 5

foo() // 1 5

foo() // typeerror: cannot read property 'x' of undefined

function foo( = {}) 

foo({}) // 10 5

foo() // 1 5

foo() // 10 5

5. 解構賦值 --- 用途
let x = 1;

let y = 2;

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

function(n = 1)
let jsondata = ;

let = jsondata;

console.log(id, status, number);

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

es6變數解構賦值

es6允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構。解構賦值在實際開發中可以大量減少我們的 量,並且讓我們的程式結構更清晰。陣列的解構賦值 let a,b 1 2 console.log a 1 console.log b 2 上面的 表示,可以從陣列中提取值,按照位置的物件...

ES6變數解構賦值

es6 允許按照一定模式,從陣列和物件中提取值,對變數進行賦值,這被稱為解構 es6之前我們申明多個變數需要按照下面的方法 let l 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 ...

es6 變數解構賦值

1.陣列的解構賦值 等號兩邊的模式相同,左邊的變數就會被賦予對應的值 預設值 undefined型別只有乙個值,即undefined。當宣告的變數還未被初始化時,變數的預設值為undefined。null型別也只有乙個值,即null。null用來表示尚未存在的物件,常用來表示函式企圖返回乙個不存在的...