前端學習筆記 ES6

2021-08-24 23:13:42 字數 3595 閱讀 4837

1、塊級作用域

任何一對花括號({})中的語句集都屬於乙個塊,在塊中宣告的變數在**塊外都是不可訪問的,稱之為塊級作用域,es5以前沒有塊級作用域

2、let 關鍵字

let用於宣告變數(類似於var),其宣告的變數只在當前**塊內有效,實際上是建立了塊級作用域

1、建立塊級作用域

if(true)

console.log(str);

2、沒有變數提公升

console.log(typeof str);

var str = 10;

console.log(typeof abc);

let abc = 10;

3、不能重複定義

let a = 16;

let b = 18;

b = 20;

console.log(b);

4、暫時性死區

在塊級作用域中使用 let 宣告變數時 塊級作用域會形成乙個封閉的環境 不能訪問外部宣告的變數

var c = 19;

if(true)

3、const 關鍵字

const 用於宣告常量,常量於變數不同,變數宣告後其值可以任意更改,而常量一旦賦值就不允許被更改

1、常量必須要賦值

// const d; // 錯

const d = 20;

2、也會建立塊級作用域

if(true)

3、不能重複宣告

const d = 15;

4、暫時性死區

var e = 14;

if(true)

4、變數結構賦值

按照某種模式,從陣列和物件中提取值,對變數進行賦值這被稱為解構

a) 陣列解構賦值

1、將變數放到乙個陣列中

其值也是乙個陣列,並且「左右」陣列結構一致 這樣就可將「右側陣列」中值,按著順序,賦值給「左側陣列」中的變數

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

console.log(a, b, c, d);//1 2 3 4

2、如果 左側陣列中變數,不能與右側陣列中值作對應 則為 undefined

var [a, b, c, d] = [1, 2, 3];

console.log(a, b, c, d);//1 2 3 undefined

var [a, b, c, d] = [1, , 3, 4];

console.log(a, b, c, d);//1 undefined 3 4

3、可以為變數初始化值(預設值)

var [a = 10, b, c, d] = [5];

console.log(a, b, c, d);//5 undefined undefined undefined

var [a, b = 12, c, d] = [6, null, 18, 24];

使用預設值的前提是值為 undefined

var [a, b = 12, c, d] = [6, , 18, 24];

console.log(a, b, c, d);//6 12 18 24

b) 物件解構賦值

1、物件的解構賦值

左側物件裡放的是變數的名字 右側物件裡放的是變數的值 左右根據屬性名來做對應關係

標準形式

var = ;

簡寫形式

var = ;

var = ;

name = '莉莎' age = 18;

2、支援巢狀

var } = }

name = '莎莎' age1 = 16 age2 = 18

3、也支援預設值

var = ;

var = ;

使用 預設值的前提是右側值為 undefined

var = ;

5、字串擴充套件

a) 物件方法,新增一些用於處理字串的便捷方法

let str = 'my name is itcas!';

1、includes 檢測是否包含某一字元

let res = str.includes('s', 7);

2、startswith 可以判斷是否以某個字元開始

let res1 = str.startswith('my', 2);

let res1 = str.startswith(' name', 2);

3、endswith 可以判斷是否以某個字元結尾

let res2 = str.endswith('cas!');

let res2 = str.endswith('name', 7);

4、repeat 可以重複某個字元

console.log('哈'.repeat(10));

5、padstart padend 可以字串補全

console.log('*********'.padstart(10, '0'));

console.log('*********'.padend(10, '0'));

b) 模板字串,可以使用反引號(`)定義字串

let html = ``;

let [name, age] = ['莉莉', 18];

let p = `我叫$,$歲。

`;function say()

let r = `$莉莉!`;

6、陣列擴充套件

阮一峰老師《ecmascript 6 入門》

7、函式擴充套件

a)預設引數,允許為函式指定預設引數

定義預設引數

在定義函式時,可以為引數設定預設值格式 arg = val

當在呼叫函式時可以不傳實參,這時以引數預設為準備

當傳遞了實參以實參為準

function bar(a, b)

bar(2);// 2 undefined

function fn(a, b=10)

console.log(fn(20, 5));//25

b)reset引數,使用者多餘的引數,將多餘的引數裝到乙個陣列中

function fn(a, b, ...c)

fn(1, 2, 3, 4, 5);//1 2 [3,4,5]

c)擴充套件運算子,它好比 rest 引數的逆運算,將乙個陣列轉為逗號分隔的引數序列

function fn(a, b, c, d)

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

fn(...arr);//1 2 3 4

d)箭頭函式,使用「箭頭」(=>)定義函式

es6 提供了新的定義函式的方式 =>

let foo = () => console.log('你好');

foo();//你好

函式組成部分 a 函式名 b 引數 c 返回值 函式體

() 引數部分 => 返回值 {} 函式體

let foo = (v) =>

function foo(v)

foo(123)

ES6學習筆記

let 塊變數 作用域為塊 const 常亮 作用域為當前塊 解構賦值 例 var x,y 1,2 字元擴充套件 at includes startswith endswith repeat codepointat 模板字串 例 正則的uiy 數值擴充套件 number.isfinite numbe...

ES6學習筆記

常用語法 1 let 與var類似,不同的是let定義的變數有塊級作用域,比如 var a 1 while true alert a 2 用let let a 1 while true alert a 12 const用來定義變數,但是定義之後的值不能再次更改了。乙個實際的用途是用來定義引入的模組,...

ES6學習筆記

var 有變數提公升 let 是塊級作用域,沒有變數提公升 模板語言 還原百分百定義的格式 const 定義常量,特殊情況可以改變值 const b 1 b 2 error const b b.a 2 ok b.c 10 ok object是記憶體位址,位址不變就沒問題 預設值 在不知道接收到個什麼...