es5和es6的區別

2021-09-02 23:23:31 字數 3903 閱讀 5770

最近在看阮一峰的《ecmascript6入門》，講真，這本書對初學者真的很有幫助，在這裡也推薦給大家。接下來，我要說的一些例子也大多**於這本書，如果對這本書感興趣的小夥伴，也可以戳這裡哦！

1.新增let命令

在es6之前，我們宣告變數都是通過var，es6新增的let命令與var類似，與之不同是，let宣告的變數，只在let命令所在的**塊內有效。



a // referenceerror: a is not defined.


b // 1
上面**在**塊之中，分別用let和var宣告了兩個變數。然後在**塊之外呼叫這兩個變數，結果let宣告的變數報錯，var宣告的變數返回了正確的值。這表明，let宣告的變數只在它所在的**塊有效。

2.const命令

const宣告的是乙個唯讀的常量。一旦宣告，長倆個的值就不能改變。

const pi = 3.1415;


pi // 3.1415


pi = 3;


// typeerror: assignment to constant variable.
上面**報錯的原因很明顯，const宣告的變數不得改變值，這意味著，const一旦宣告變數，就必須立即初始化，不能留到以後賦值。

const foo;


// syntaxerror: missing initializer in const declaration
上面**表示，對於const來說，只宣告不賦值，就會報錯。

值得一提的是，const的作用域與let命令相同：只在宣告所在的塊級作用域內有效。

3.宣告變數的方法

es5 只有兩種宣告變數的方法：var命令和function命令。

es6 除了es5中的兩種方法外，還包括let，const，import命令和class命令。所以，es6 一共有 6 種宣告變數的方法。

4.name屬性

如果將乙個匿名函式賦值給乙個變數，es5 的name屬性，會返回空字串，而 es6 的name屬性會返回實際的函式名。

var f = function () {};


// es5


f.name // ""


// es6


f.name // "f"
上面**中，變數f等於乙個匿名函式，es5 和 es6 的name屬性返回的值不一樣。

當然了，上述的情況前提是匿名函式，如果說將乙個具名函式賦值各乙個變數，那麼es5和es6的name屬性都返回的是這個具名函式原本的名字。

const bar = function baz() {};


// es5


bar.name // "baz"


// es6


bar.name // "baz"
5.箭頭函式

在es6裡允許使用"箭頭"（=>）定義函式。

var f = v => v;


// 等同於


var f = function (v) ;
如果箭頭函式不需要引數或需要多個引數，就使用乙個圓括號代表引數部分。

var f = () => 5;


// 等同於


var f = function () ;


var sum = (num1, num2) => num1 + num2;


// 等同於


var sum = function(num1, num2) ;
如果箭頭函式的**塊部分多於一條語句，就要使用大括號將它們括起來，並且使用return語句返回。

var sum = (num1, num2) =>
由於大括號被解釋為**塊，所以如果箭頭函式直接返回乙個物件，必須在物件外面加上括號，否則會報錯。

// 報錯


let gettempitem = id => ;


// 不報錯


let gettempitem = id => ();
箭頭函式有幾個使用注意點。

（1）函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件。

（2）不可以當作建構函式，也就是說，不可以使用new命令，否則會丟擲乙個錯誤。

（3）不可以使用arguments物件，該物件在函式體內不存在。如果要用，可以用 rest 引數代替。

（4）不可以使用yield命令，因此箭頭函式不能用作 generator 函式。

上面四點中，第一點尤其值得注意。this物件的指向是可變的，但是在箭頭函式中，它是固定的。

function foo() , 100);


}var id = 21;


foo.call();


// id: 42
上面**中，settimeout的引數是乙個箭頭函式，這個箭頭函式的定義生效是在foo函式生成時，而它的真正執行要等到 100 毫秒後。如果是普通函式，執行時this應該指向全域性物件window，這時應該輸出21。但是，箭頭函式導致this總是指向函式定義生效時所在的物件（本例是），所以輸出的是42。

箭頭函式可以讓settimeout裡面的this，繫結定義時所在的作用域，而不是指向執行時所在的作用域。

6.擴充套件運算子

先說一下擴充套件運算子是什麼吧，擴充套件運算子（spread）是三個點（...）。它好比 rest 引數的逆運算，將乙個陣列轉為用逗號分隔的引數序列。

console.log(...[1, 2, 3])


// 1 2 3


console.log(1, ...[2, 3, 4], 5)


// 1 2 3 4 5
知道它是什麼之後，就來看看es5和es6寫法上的區別：

// es5 的寫法


function f(x, y, z) 


var args = [0, 1, 2];


// es6的寫法


function f(x, y, z) 


let args = [0, 1, 2];


f(...args);
es5 只能用變通方法來複製陣列。

const a1 = [1, 2];


const a2 = a1.concat();


a2[0] = 2;


a1 // [1, 2]
上面**中，a1會返回原陣列的轉殖，再修改a2就不會對a1產生影響。

擴充套件運算子提供了複製陣列的簡便寫法。

const a1 = [1, 2];


// 寫法一


const a2 = [...a1];


// 寫法二


const [...a2] = a1;
擴充套件運算子提供了陣列合併的新寫法。

const arr1 = ['a', 'b'];


const arr2 = ['c'];


const arr3 = ['d', 'e'];


// es5 的合併陣列


arr1.concat(arr2, arr3);


// [ 'a', 'b', 'c', 'd', 'e' ]


// es6 的合併陣列


[...arr1, ...arr2, ...arr3]


// [ 'a', 'b', 'c', 'd', 'e' ]
需要注意的是，這兩種方法都是淺拷貝，使用的時候要小心。

今天就先到這裡吧，後續還會持續更新！

ES6和ES5的區別

es6和es5的區別?1 定義變數 es5中用 var function es6中用 let const class import 沒有變數提公升 同乙個作用域中不可重複宣告 不會給window增加全域性屬性 會形成塊級作用域 const設定的變數值是不可修改的 理解為常量 暫時性死區 2 解構賦值...

es6和es5的區別

1 es6新增了let命令，用來宣告變數。它的用法類似於var，但是所宣告的變數，只在let命令所在的 塊內有效。a b let不像var存在變數提公升，即變數一定要宣告之後才能使用 2 塊級作用域 es5只有全域性作用域和函式作用域，沒有塊級作用域 3 變數的結構賦值 var a,b,c 1,2,...

es5與es6的區別

es5和es6對於前端開發來說是經常都會使用的方法，他們為我們開發提供了很多便利的方法和寫法，使我們的 更加的優雅，作為乙個新人就讓我簡單總結一下es5與es6的不同。1.變數 首先在變數方面es6為我們提供了let和const這兩種新的宣告方法，let和const的出現大大的避免了變數汙染的問題，...