建站
咨詢
售后
建站咨詢
新聞中心
這篇“es6新增的擴展有哪些”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“es6新增的擴展有哪些”文章吧。
溫宿網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。成都創(chuàng)新互聯(lián)公司成立與2013年到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。
es6新增的擴展：1、允許為函數(shù)的參數(shù)設(shè)置默認值；2、新增箭頭函數(shù)，可使用箭頭“=>”來定義函數(shù)，語法“var 函數(shù)名=(參數(shù))=>{...}”；3、擴展元素符“...”，可將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列，也可將某些數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)為數(shù)組。
本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
es6新增的擴展
一、函數(shù)參數(shù)
ES6允許為函數(shù)的參數(shù)設(shè)置默認值
function log(x, y = 'World') {
console.log(x, y);
}
console.log('Hello') // Hello World
console.log('Hello', 'China') // Hello China
console.log('Hello', '') // Hello函數(shù)的形參是默認聲明的，不能使用let或const再次聲明
function foo(x = 5) {
let x = 1; // error
const x = 2; // error
}參數(shù)默認值可以與解構(gòu)賦值的默認值結(jié)合起來使用
function foo({x, y = 5}) {
console.log(x, y);
}
foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined上面的foo函數(shù)，當參數(shù)為對象的時候才能進行解構(gòu)，如果沒有提供參數(shù)的時候，變量x和y就不會生成，從而報錯，這里設(shè)置默認值避免
function foo({x, y = 5} = {}) {
console.log(x, y);
}
foo() // undefined 5參數(shù)默認值應(yīng)該是函數(shù)的尾參數(shù)，如果不是非尾部的參數(shù)設(shè)置默認值，實際上這個參數(shù)是沒發(fā)省略的
function f(x = 1, y) {
return [x, y];
}
f() // [1, undefined]
f(2) // [2, undefined]
f(, 1) // 報錯
f(undefined, 1) // [1, 1]二、函數(shù)屬性
函數(shù)的length屬性
length將返回沒有指定默認值的參數(shù)個數(shù)
(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2rest 參數(shù)也不會計入length屬性
(function(...args) {}).length // 0如果設(shè)置了默認值的參數(shù)不是尾參數(shù)，那么length屬性也不再計入后面的參數(shù)了
(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1name屬性
返回該函數(shù)的函數(shù)名
var f = function () {};
// ES5
f.name // ""
// ES6
f.name // "f"如果將一個具名函數(shù)賦值給一個變量，則 name屬性都返回這個具名函數(shù)原本的名字
const bar = function baz() {};
bar.name // "baz"Function構(gòu)造函數(shù)返回的函數(shù)實例，name屬性的值為anonymous
(new Function).name // "anonymous"
bind返回的函數(shù)，name屬性值會加上bound前綴
function foo() {};
foo.bind({}).name // "bound foo"
(function(){}).bind({}).name // "bound "三、函數(shù)作用域
一旦設(shè)置了參數(shù)的默認值，函數(shù)進行聲明初始化時，參數(shù)會形成一個單獨的作用域
等到初始化結(jié)束，這個作用域就會消失。這種語法行為，在不設(shè)置參數(shù)默認值時，是不會出現(xiàn)的
下面例子中，y=x會形成一個單獨作用域，x沒有被定義，所以指向全局變量x
let x = 1;
function f(y = x) {
// 等同于 let y = x
let x = 2;
console.log(y);
}
f() // 1四、嚴格模式
只要函數(shù)參數(shù)使用了默認值、解構(gòu)賦值、或者擴展運算符，那么函數(shù)內(nèi)部就不能顯式設(shè)定為嚴格模式，否則會報錯
// 報錯
function doSomething(a, b = a) {
'use strict';
// code
}
// 報錯
const doSomething = function ({a, b}) {
'use strict';
// code
};
// 報錯
const doSomething = (...a) => {
'use strict';
// code
};
const obj = {
// 報錯
doSomething({a, b}) {
'use strict';
// code
}
};五、箭頭函數(shù)
使用“箭頭”（=>）定義函數(shù)
var f = v => v;
// 等同于
var f = function (v) {
return v;
};如果箭頭函數(shù)不需要參數(shù)或需要多個參數(shù)，就使用一個圓括號代表參數(shù)部分
var f = () => 5;
// 等同于
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};如果箭頭函數(shù)的代碼塊部分多于一條語句，就要使用大括號將它們括起來，并且使用return語句返回
var sum = (num1, num2) => { return num1 + num2; }如果返回對象，需要加括號將對象包裹
let getTempItem = id => ({ id: id, name: "Temp" });注意點：
函數(shù)體內(nèi)的
this對象，就是定義時所在的對象，而不是使用時所在的對象不可以當作構(gòu)造函數(shù)，也就是說，不可以使用
new命令，否則會拋出一個錯誤不可以使用
arguments對象，該對象在函數(shù)體內(nèi)不存在。如果要用，可以用rest參數(shù)代替不可以使用
yield命令，因此箭頭函數(shù)不能用作 Generator 函數(shù)
六、擴展運算符
ES6通過擴展元素符...，好比 rest 參數(shù)的逆運算，將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('p')]
// [,
,
]
主要用于函數(shù)調(diào)用的時候，將一個數(shù)組變?yōu)閰?shù)序列
function push(array, ...items) {
array.push(...items);
}
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42可以將某些數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)為數(shù)組
[...document.querySelectorAll('p')]能夠更簡單實現(xiàn)數(shù)組復制
const a1 = [1, 2]; const [...a2] = a1; // [1,2]
數(shù)組的合并也更為簡潔了
const arr1 = ['a', 'b']; const arr2 = ['c']; const arr3 = ['d', 'e']; [...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]
注意：通過擴展運算符實現(xiàn)的是淺拷貝，修改了引用指向的值，會同步反映到新數(shù)組
下面看個例子就清楚多了
const arr1 = ['a', 'b',[1,2]]; const arr2 = ['c']; const arr3 = [...arr1,...arr2] arr1[2][0] = 9999 // 修改arr1里面數(shù)組成員值 console.log(arr3 ) // 影響到arr3,['a','b',[9999,2],'c']
擴展運算符可以與解構(gòu)賦值結(jié)合起來，用于生成數(shù)組
const [first, ...rest] = [1, 2, 3, 4, 5]; first // 1 rest // [2, 3, 4, 5] const [first, ...rest] = []; first // undefined rest // [] const [first, ...rest] = ["foo"]; first // "foo" rest // []
如果將擴展運算符用于數(shù)組賦值，只能放在參數(shù)的最后一位，否則會報錯
const [...butLast, last] = [1, 2, 3, 4, 5]; // 報錯 const [first, ...middle, last] = [1, 2, 3, 4, 5]; // 報錯
可以將字符串轉(zhuǎn)為真正的數(shù)組
[...'hello'] // [ "h", "e", "l", "l", "o" ]
定義了遍歷器（Iterator）接口的對象，都可以用擴展運算符轉(zhuǎn)為真正的數(shù)組
let nodeList = document.querySelectorAll('p');
let array = [...nodeList];
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]如果對沒有 Iterator 接口的對象，使用擴展運算符，將會報錯
const obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object七、構(gòu)造函數(shù)新增的方法
關(guān)于構(gòu)造函數(shù)，數(shù)組新增的方法有如下：
Array.from()
Array.of()
Array.from()
將兩類對象轉(zhuǎn)為真正的數(shù)組：類似數(shù)組的對象和可遍歷（iterable）的對象（包括 ES6 新增的數(shù)據(jù)結(jié)構(gòu) Set 和 Map）
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']還可以接受第二個參數(shù)，用來對每個元素進行處理，將處理后的值放入返回的數(shù)組
Array.from([1, 2, 3], (x) => x * x) // [1, 4, 9]
Array.of()
用于將一組值，轉(zhuǎn)換為數(shù)組
Array.of(3, 11, 8) // [3,11,8]
沒有參數(shù)的時候，返回一個空數(shù)組
當參數(shù)只有一個的時候，實際上是指定數(shù)組的長度
參數(shù)個數(shù)不少于 2 個時，Array()才會返回由參數(shù)組成的新數(shù)組
Array() // [] Array(3) // [, , ,] Array(3, 11, 8) // [3, 11, 8]
八、實例對象新增的方法
關(guān)于數(shù)組實例對象新增的方法有如下：
copyWithin()
find()、findIndex()
fill()
entries()，keys()，values()
includes()
flat()，flatMap()
copyWithin()
將指定位置的成員復制到其他位置（會覆蓋原有成員），然后返回當前數(shù)組
參數(shù)如下：
target（必需）：從該位置開始替換數(shù)據(jù)。如果為負值，表示倒數(shù)。
start（可選）：從該位置開始讀取數(shù)據(jù)，默認為 0。如果為負值，表示從末尾開始計算。
end（可選）：到該位置前停止讀取數(shù)據(jù)，默認等于數(shù)組長度。如果為負值，表示從末尾開始計算。
[1, 2, 3, 4, 5].copyWithin(0, 3) // 將從 3 號位直到數(shù)組結(jié)束的成員（4 和 5），復制到從 0 號位開始的位置，結(jié)果覆蓋了原來的 1 和 2 // [4, 5, 3, 4, 5]
find()、findIndex()
find()用于找出第一個符合條件的數(shù)組成員
參數(shù)是一個回調(diào)函數(shù)，接受三個參數(shù)依次為當前的值、當前的位置和原數(shù)組
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10findIndex返回第一個符合條件的數(shù)組成員的位置，如果所有成員都不符合條件，則返回-1
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2這兩個方法都可以接受第二個參數(shù)，用來綁定回調(diào)函數(shù)的this對象。
function f(v){
return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person); // 26fill()
使用給定值，填充一個數(shù)組
['a', 'b', 'c'].fill(7) // [7, 7, 7] new Array(3).fill(7) // [7, 7, 7]
還可以接受第二個和第三個參數(shù)，用于指定填充的起始位置和結(jié)束位置
['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']
注意，如果填充的類型為對象，則是淺拷貝
entries()，keys()，values()
keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷
or (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"includes()
用于判斷數(shù)組是否包含給定的值
[1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // false [1, 2, NaN].includes(NaN) // true
方法的第二個參數(shù)表示搜索的起始位置，默認為0
參數(shù)為負數(shù)則表示倒數(shù)的位置
[1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true
flat()，flatMap()
將數(shù)組扁平化處理，返回一個新數(shù)組，對原數(shù)據(jù)沒有影響
[1, 2, [3, 4]].flat() // [1, 2, 3, 4]
flat()默認只會“拉平”一層，如果想要“拉平”多層的嵌套數(shù)組，可以將flat()方法的參數(shù)寫成一個整數(shù)，表示想要拉平的層數(shù)，默認為1
[1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]] [1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]
flatMap()方法對原數(shù)組的每個成員執(zhí)行一個函數(shù)相當于執(zhí)行Array.prototype.map()，然后對返回值組成的數(shù)組執(zhí)行flat()方法。該方法返回一個新數(shù)組，不改變原數(shù)組
// 相當于 [[2, 4], [3, 6], [4, 8]].flat() [2, 3, 4].flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8]
flatMap()方法還可以有第二個參數(shù)，用來綁定遍歷函數(shù)里面的this
九、數(shù)組的空位
數(shù)組的空位指，數(shù)組的某一個位置沒有任何值
ES6 則是明確將空位轉(zhuǎn)為undefined，包括Array.from、擴展運算符、copyWithin()、fill()、entries()、keys()、values()、find()和findIndex()
建議大家在日常書寫中，避免出現(xiàn)空位
十、排序穩(wěn)定性
將sort()默認設(shè)置為穩(wěn)定的排序算法
const arr = [
'peach',
'straw',
'apple',
'spork'
];
const stableSorting = (s1, s2) => {
if (s1[0] < s2[0]) return -1;
return 1;
};
arr.sort(stableSorting)
// ["apple", "peach", "straw", "spork"]排序結(jié)果中，straw在spork的前面，跟原始順序一致
以上就是關(guān)于“es6新增的擴展有哪些”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享名稱：es6新增的擴展有哪些
標題來源：http://fisionsoft.com.cn/article/gsodod.html
