ES6中的新特性

2022-07-20 05:30:12 字數 3584 閱讀 2615

本人最近學習es6一些方法,難免有些手癢,想著能不能將這些方法總結下,如下

1、陣列的擴充套件

1)首先什麼是偽陣列

無法直接呼叫陣列方法或期望length屬性有什麼特殊的行為,但仍可以對真正陣列遍歷方法來遍歷它們,例如:函式的argument引數,呼叫getelementsbytagname,

document.childnodes等等

2、函式擴充套件

document.queryselectorall('元素') 相當於 document.getelementsbytagname('元素') 一樣 

合併陣列

// es5

[1, 2].concat(more)

// es6

[1, 2, ...more]

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

var arr2 = ['c'];

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

// es5的合併陣列

arr1.concat(arr2, arr3);

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

// es6的合併陣列

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

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

字串

es6預設都是屬於嚴格模式下,「...」為擴充套件運算子

let str = 'x\ud83d\ude80y';

str.split('').reverse().join('')

//'y\ude80\ud83dx'

[...str].reverse().join('')

//'y\ud83d\ude80x'

name屬性

函式的name屬性,返回該函式的函式名。

function fn() {}

fn.name // "fn"

箭頭函式

// 巢狀的箭頭函式

function insert(value) };

}};}insert(2).into([1, 3]).after(1); //[1, 2, 3]

// 使用箭頭函式

let insert = (value) => (})});

insert(2).into([1, 3]).after(1); //[1, 2, 3]

現在問題來了,什麼是鏈式呼叫?

解答:其實,上面的**可以說是一種鏈式呼叫,使用物件導向寫,裡面寫幾個方法,就像如下**一樣,jquery中ajax使用promise一樣,將非同步用同步流程表達出來。

var lianshi = function()

lianshi.prototype = ,

show:function(),

hide:function()

};var lianshi = new lianshi();

lianshi.css().css().show().hide();

箭頭函式注意的四點:

(1)函式體內的this物件,就是定義時所在的物件,而不是使用時所在的物件。

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

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

(4)不可以使用yield命令,因此箭頭函式不能用作generator函式。

繫結this

遞迴函式

//

斐波拉切數列 也是遞迴的一種 傳的值過大,容易造成堆疊溢位 記憶體洩漏

function

fibonacci (n) ;

return fibonacci(n - 1) + fibonacci(n - 2);

}fibonacci(10); //

89

// 尾調遞迴  

function factorial(n, total = 1)

factorial(5) //

120

只要在嚴格模式下,才能使尾調遞迴函式優化,(由於遞迴就是使用棧太多,造成溢位,想要優化,就只能減少棧的使用,故使用迴圈來進行遞迴)

額外說點:造成記憶體洩漏的原因:1)使用了遞迴; 2)使用了小數點,如:0.0000000001;3)settimeout第乙個引數是字串

//

優化尾調遞迴函式

function

trampoline(f)

returnf;}

function

sum(x, y)

else

}trampoline(sum(1, 100000))

//100001

//

使用蹦床函式也可以優化尾調函式

function

tco(f)

active = false

;

return

value;}};

}var sum = tco(function

(x, y)

else

});sum(1, 100000)

//100001

原理:tco函式是尾遞迴優化的實現,它的奧妙就在於狀態變數active。預設情況下,這個變數是不啟用的。一旦進入尾遞迴優化的過程,這個變數就啟用了。然後,每一輪遞迴sum返回的都是undefined,所以就避免了遞迴執行;而accumulated陣列存放每一輪sum執行的引數,總是有值的,這就保證了accumulator函式內部的while迴圈總是會執行。這樣就很巧妙地將「遞迴」改成了「迴圈」,而後一輪的引數會取代前一輪的引數,保證了呼叫棧只有一層。

額外說點:

es6 模組之中,頂層的this指向undefined,即不應該在頂層**使用this

import是靜態執行,所以不能使用表示式和變數,這些只有在執行時才能得到結果的語法結構。

require是執行時載入模組,import命令無法取代require的動態載入功能。

importexport命令只能在模組的頂層,不能在**塊之中(比如,在if**塊之中,或在函式之中)。

es6新特性 ES6新特性(一)

var 1 var宣告的是函式作用域 區域性 但在if for等定義的變數是全域性的 2 var 具有變數提公升,預解析 3 在同乙個作用域下,var可以宣告多次 4 var 宣告的變數會掛載到window上 let1 let不存在變數提公升,在變數使用之前,必須要先宣告 2 let在同一作用域下,...

ES6的新特性

一 let,const與var的區別 1 let,const 不存在變數提公升。2 let,const 在同乙個作用域下不能重複定義相同的變數名稱。3 let,const 有嚴格的作用域,塊級作用域。var 則是函式作用域。4 const 宣告乙個唯讀的常量,一旦定義,常量的值不能改變。5 cons...

ES6新特性須知

1.1es5之前函式想要賦預設值var funes5 function a,b,c 1.2es6開始函式想要賦預設值var funes6 function a 50,b 60,c 70 2.1es5之前字串拼接或者拼接屬性值只能如下var a lbj var b 50 var c name a ye...