欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS ES新特性 擴(kuò)展運(yùn)算符介紹

 更新時(shí)間:2021年12月02日 11:09:52   作者:一碗周  
這篇文章主要介紹了JS ES新特性 擴(kuò)展運(yùn)算符,下面文章圍繞ES新特性 擴(kuò)展運(yùn)算符的相關(guān)資料展開(kāi)詳細(xì)內(nèi)容,需要的朋友可以參考一下,希望對(duì)大家有所幫助

一、擴(kuò)展運(yùn)算符

擴(kuò)展運(yùn)算符是三個(gè)點(diǎn)... , 允許將一個(gè)表達(dá)式原地展開(kāi),當(dāng)需要多個(gè)參數(shù)(比如函數(shù)的調(diào)用時(shí)) 或者多個(gè)值(比如數(shù)組)它會(huì)將其轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列。

示例代碼如下所示:

// 定義一個(gè)數(shù)組
let arr = [1, 2, 3, 4, 5, 6]
// 使用 ... 擴(kuò)展運(yùn)算符展開(kāi)
console.log(...arr); // 1 2 3 4 5 6

// 定義一個(gè)函數(shù)
function fun(...item) {
  console.log(...item);
}
// 調(diào)用函數(shù)
fun(1, 2, 3, 4, 5, 6) // 1 2 3 4 5 6

// 與表達(dá)式配合使用
let x = 10
arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];
console.log(...arr); //a b

二、替代apply()方法

由于擴(kuò)展運(yùn)算符可以展開(kāi)數(shù)組,所以不再需要apply方法,將數(shù)組轉(zhuǎn)為函數(shù)的參數(shù)了。

示例代碼如下所示:

// 定義一個(gè)函數(shù)
function fun(a, b, c, d, e) {
  console.log(a, b, c, d, e);
}
// 定義一個(gè)數(shù)組
let arr = [1, 2, 3, 4, 5]
// ES5 調(diào)用方式
fun.apply(null, arr) //1 2 3 4 5
// ES6 調(diào)用方式
fun(...arr) // 1 2 3 4 5

假如我們?cè)趯?shí)際開(kāi)發(fā)中取出數(shù)組中的最大值,采用的方式如下所示:

let arr = [1, 20, 30, 50, 3, 88, ]
// ES5的寫法
let max = Math.max.apply(null, arr)
console.log(max); // 88

E的寫法如下所示:

let arr = [1, 20, 30, 50, 3, 88, ]
// ES6 的寫法
let max = Math.max(...arr)
console.log(max); // 88


三、擴(kuò)展運(yùn)算符的應(yīng)用

擴(kuò)展數(shù)組的應(yīng)用主要表現(xiàn)在以下幾個(gè)方面

1、復(fù)制數(shù)組

ECMAScript 2015之前中如果僅僅是簡(jiǎn)單的將arr1賦值給arr2,修改arr2時(shí),arr1也會(huì)進(jìn)行變化,這就是所謂的淺復(fù)制 ,

示例代碼如下所示:

先來(lái)理解一下深淺復(fù)制的概念:

  • 深復(fù)制:復(fù)制數(shù)組中的元素內(nèi)容
  • 淺復(fù)制:復(fù)制數(shù)組元素內(nèi)容的內(nèi)存地址
let arr1 = [1, 2, 3, 4, 5]
let arr2 = arr1
console.log(arr2); // [ 1, 2, 3, 4, 5 ]
// 修改 arr2 的數(shù)據(jù)內(nèi)容
arr2[2] = 6;
// 兩者都會(huì)發(fā)生改變
console.log(arr1, arr2); // [ 1, 2, 6, 4, 5 ] [ 1, 2, 6, 4, 5 ]

如果想要完成深復(fù)制,示例代碼如下所示:

let arr1 = [1, 2, 3, 4, 5]
let arr2 = []
// ES5 寫法
for (let i = 0; i < arr1.length; i++) {
  arr2[i] = arr1[i];
}
arr2[2] = 6;
// 僅僅 arr2 改變
console.log(arr1, arr2); // [ 1, 2, 3, 4, 5 ] [ 1, 2, 6, 4, 5 ]

// ES6 寫法
arr2 = [...arr1]
arr2[2] = 6;
// 僅僅 arr2 改變
console.log(arr1, arr2); // [ 1, 2, 3, 4, 5 ] [ 1, 2, 6, 4, 5 ]

2、合并數(shù)組

擴(kuò)展運(yùn)算符提供了數(shù)組合并的新寫法。示例代碼如下所示:

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并數(shù)組
console.log(arr1.concat(arr2, arr3)); // [ 'a', 'b', 'c', 'd', 'e' ]


// ES6 的合并數(shù)組
console.log([...arr1, ...arr2, ...arr3]); // [ 'a', 'b', 'c', 'd', 'e' ]

值得注意的是,這兩種方式都是淺復(fù)制

3、與解耦賦值結(jié)合使用

擴(kuò)展運(yùn)算符可以與解構(gòu)賦值結(jié)合起來(lái),用于生成數(shù)組(用于取剩余數(shù)據(jù))。

注意 :只能將擴(kuò)展運(yùn)算符放置最后。

示例代碼如下所示:

// 場(chǎng)景分析:取數(shù)組中的第一個(gè)值和最后一個(gè)值
let arr = [1, 2, 3, 4, 5]
let first, rest;
// ES5 的寫法:借用 Array.slice() 函數(shù)
first = arr[0]
rest = arr.slice(1)
console.log(first, rest); // 1 [ 2, 3, 4, 5 ]
// ES6 的寫法
[first, ...rest] = arr
console.log(first, rest); // 1 [ 2, 3, 4, 5 ]

4、將字符串拆分為數(shù)組

擴(kuò)展運(yùn)算符還可以將字符串轉(zhuǎn)為真正的數(shù)組。示例代碼如下所示:

let str = '狐妖小紅娘'
console.log([...str]); // [ '狐', '妖', '小', '紅', '娘' ]

到此這篇關(guān)于JS ES新特性 擴(kuò)展運(yùn)算符介紹的文章就介紹到這了,更多相關(guān)ES? 擴(kuò)展運(yùn)算符介紹內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論