es6中三個(gè)點(diǎn)指的是什么意思

這篇文章給大家分享的是有關(guān)es6中三個(gè)點(diǎn)指的是什么意思的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

萬(wàn)山網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),萬(wàn)山網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為萬(wàn)山1000多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的萬(wàn)山做網(wǎng)站的公司定做！

在es6中，三個(gè)點(diǎn)“...”指的是“擴(kuò)展運(yùn)算符”，可以在函數(shù)調(diào)用或數(shù)組構(gòu)造時(shí)，將數(shù)組表達(dá)式或者string在語(yǔ)法層面展開(kāi)；也可以在構(gòu)造字面量對(duì)象時(shí)將對(duì)象表達(dá)式按照“key-value”的方式展開(kāi)。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

es6中三個(gè)點(diǎn)是什么意思

三個(gè)點(diǎn)（...）真名叫擴(kuò)展運(yùn)算符，是在ES6中新增加的內(nèi)容，它可以在函數(shù)調(diào)用/數(shù)組構(gòu)造時(shí)，將數(shù)組表達(dá)式或者string在語(yǔ)法層面展開(kāi)；還可以在構(gòu)造字面量對(duì)象時(shí)將對(duì)象表達(dá)式按照key-value的方式展開(kāi)

字面量一般指[1,2,3]或者{name:'chuichui'}這種簡(jiǎn)潔的構(gòu)造方式,多層嵌套的數(shù)組和對(duì)象三個(gè)點(diǎn)就無(wú)能為力了

說(shuō)白了就是把衣服脫了，不管是大括號(hào)（[]）、花括號(hào)（{}），統(tǒng)統(tǒng)不在話(huà)下，全部脫掉脫掉！

// 數(shù)組
var number = [1,2,3,4,5,6]
console.log(...number) //1 2 3 4 5 6
//對(duì)象
var man = {name:'chuichui',height:176}
console.log({...man}) / {name:'chuichui',height:176}

擴(kuò)展運(yùn)算符的8種用法

1. 拷貝數(shù)組對(duì)象

使用擴(kuò)展符拷貝數(shù)組是ES6中常用的操作：

const years = [2018, 2019, 2020, 2021];
const copyYears = [...years];

console.log(copyYears); // [ 2018, 2019, 2020, 2021 ]

擴(kuò)展運(yùn)算符拷貝數(shù)組，只有第一層是深拷貝，即對(duì)一維數(shù)組使用擴(kuò)展運(yùn)算符拷貝就屬于深拷貝，看下面的代碼：

const miniCalendar = [2021, [1, 2, 3, 4, 5, 6, 7], 1];

const copyArray = [...miniCalendar];
console.log(copyArray); // [ 2021, [ 1, 2, 3, 4, 5, 6, 7 ], 1 ]

copyArray[1][0] = 0;
copyArray[1].push(8);
copyArray[2] = 2;
console.log(copyArray); // [ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 2 ]
console.log(miniCalendar); // [ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 1 ]

把打印的結(jié)果放在一起便于更加清楚進(jìn)行對(duì)比，如下：

變量說(shuō)明	結(jié)果	操作
copyArray	[ 2021, [ 1, 2, 3, 4, 5, 6, 7 ], 1 ]	復(fù)制數(shù)組 miniCalendar
copyArray	[ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 2 ]	1. 將數(shù)組第二個(gè)元素的第一個(gè)元素重新賦值為 0 ；2. 往數(shù)組的第二個(gè)元素增加一個(gè)元素 8 ；3. 將數(shù)組第三個(gè)元素重新賦值為2
miniCalendar	[ 2021, [ 0, 2, 3, 4, 5, 6, 7, 8 ], 1 ]	從結(jié)果來(lái)看，數(shù)組的第二個(gè)元素為數(shù)組，大于1維了，里面的元素的變更將導(dǎo)致原變量的值隨之改變

拷貝對(duì)象，代碼如下：

const time = {
    year: 2021,
    month: 7,
    day: {
        value: 1,
    },
};
const copyTime = { ...time };
console.log(copyTime); // { year: 2021, month: 7, day: { value: 1 } }

擴(kuò)展運(yùn)算符拷貝對(duì)象只會(huì)在一層進(jìn)行深拷貝，從下面代碼是基于上面代碼：

copyTime.day.value = 2;
copyTime.month = 6;
console.log(copyTime); // { year: 2021, month: 6, day: { value: 2 } }
console.log(time); // { year: 2021, month: 7, day: { value: 2 } }

從打印的結(jié)果看，擴(kuò)展運(yùn)算符只對(duì)對(duì)象第一層進(jìn)行了深拷貝。

嚴(yán)格來(lái)講，擴(kuò)展運(yùn)算符不執(zhí)行深拷貝

2. 合并操作

先來(lái)看數(shù)組的合并，如下：

const halfMonths1 = [1, 2, 3, 4, 5, 6];
const halfMonths2 = [7, 8, 9, 10, 11, 12];

const allMonths = [...halfMonths1, ...halfMonths2];
console.log(allMonths); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]

合并對(duì)象，在合并對(duì)象時(shí)，如果一個(gè)鍵已經(jīng)存在，它會(huì)被具有相同鍵的最后一個(gè)對(duì)象給替換。

const time1 = {
    month: 7,
    day: {
        value: 1,
    },
};
const time2 = {
    year: 2021,
    month: 8,
    day: {
        value: 10,
    },
};
const time = { ...time1, ...time2 };
console.log(time); // { month: 8, day: { value: 10 }, year: 2021 }

3. 參數(shù)傳遞

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

console.log(sum(...[6, 7])); // 13
console.log(sum(...[6, 7, 8])); // 13

從上面的代碼看，函數(shù)定義了多少個(gè)參數(shù)，擴(kuò)展運(yùn)算符傳入的值就是多少個(gè)。

和 math 函數(shù)一起使用，如下：

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10];
const min = Math.min(...arrayNumbers);
const max = Math.max(...arrayNumbers);
console.log(min); // 1
console.log(max); // 10

4. 數(shù)組去重

與 Set 一起使用消除數(shù)組的重復(fù)項(xiàng)，如下：

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10, 4, 5, 2, 5];
const newNumbers = [...new Set(arrayNumbers)];
console.log(newNumbers); // [ 1,  5, 9, 3, 7, 10, 4, 2 ]

5. 字符串轉(zhuǎn)字符數(shù)組

String 也是一個(gè)可迭代對(duì)象，所以也可以使用擴(kuò)展運(yùn)算符 ...  將其轉(zhuǎn)為字符數(shù)組，如下：

const title = "china";
const charts = [...title];
console.log(charts); // [ 'c', 'h', 'i', 'n', 'a' ]

進(jìn)而可以簡(jiǎn)單進(jìn)行字符串截取，如下：

const title = "china";
const short = [...title];
short.length = 2;
console.log(short.join("")); // ch

6. NodeList 轉(zhuǎn)數(shù)組

NodeList  對(duì)象是節(jié)點(diǎn)的集合，通常是由屬性，如 Node.childNodes 和方法，如 document.querySelectorAll 返回的。

NodeList 類(lèi)似于數(shù)組，但不是數(shù)組，沒(méi)有 Array 的所有方法，例如find、map、filter 等，但是可以使用 forEach() 來(lái)迭代。

可以通過(guò)擴(kuò)展運(yùn)算符將其轉(zhuǎn)為數(shù)組，如下：

const nodeList = document.querySelectorAll(".row");
const nodeArray = [...nodeList];
console.log(nodeList);
console.log(nodeArray);

7. 解構(gòu)變量

解構(gòu)數(shù)組，如下：

const [currentMonth, ...others] = [7, 8, 9, 10, 11, 12];
console.log(currentMonth); // 7
console.log(others); // [ 8, 9, 10, 11, 12 ]

解構(gòu)對(duì)象，如下：

const userInfo = { name: "Crayon", province: "Guangdong", city: "Shenzhen" };
const { name, ...location } = userInfo;
console.log(name); // Crayon
console.log(location); // { province: 'Guangdong', city: 'Shenzhen' }

8. 打印日志

在打印可迭代對(duì)象的時(shí)候，需要打印每一項(xiàng)可以使用擴(kuò)展符，如下：

const years = [2018, 2019, 2020, 2021];
console.log(...years); // 2018 2019 2020 2021

感謝各位的閱讀！關(guān)于“es6中三個(gè)點(diǎn)指的是什么意思”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

文章題目：es6中三個(gè)點(diǎn)指的是什么意思
URL網(wǎng)址：http://muchs.cn/article24/ijchce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、外貿(mào)建站、網(wǎng)站營(yíng)銷(xiāo)、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)