JavaScript中運(yùn)算符與數(shù)組擴(kuò)展詳細(xì)講解

更新時(shí)間：2022年11月09日 08:36:58 作者：亦世凡華、

這篇文章主要介紹了JavaScript中運(yùn)算符與數(shù)組擴(kuò)展方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

運(yùn)算符

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

擴(kuò)展運(yùn)算符是三個(gè)點(diǎn)(...)，和rest參數(shù)的逆運(yùn)算一樣，將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列。

<script>
    // ... 擴(kuò)展運(yùn)算符能將 數(shù)組 轉(zhuǎn)換為逗號(hào)分隔的 參數(shù)序列
    const boys = ['張三','李四','王五']
    // 聲明一個(gè)函數(shù)
    function people(){
        console.log(arguments);
    }
    people(...boys)//['張三','李四','王五']
</script>

數(shù)組合并操作如下：

<script>
    // 數(shù)組的合并
    const number = [1,2,3]
    const str = ['a','b','c']
    const con = [...number,...str]
    console.log(con); //[1,2,3,'a','b','c']
</script>

數(shù)組克隆操作如下：

<script>
    // 數(shù)組的克隆
    const a = [1,2,3]
    const b = [...a]
    console.log(a); //[1,2,3]
</script>

將偽數(shù)組轉(zhuǎn)為真正的數(shù)組操作如下：

<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
        // 將偽數(shù)組轉(zhuǎn)為真正的數(shù)組
        const divs = document.querySelectorAll('div')
        const divArr = [...divs]
        console.log(divArr); //[div,div,div]
    </script>
</body>

指數(shù)運(yùn)算符

指數(shù)運(yùn)算符的特點(diǎn)是右結(jié)合，而不是左結(jié)合，多個(gè)指數(shù)運(yùn)算符連用時(shí)，從最右邊開始計(jì)算：

<script>
    // ES新增了指數(shù)運(yùn)算符 （**）
    var x = 2 ** 2//相當(dāng)于2的平方
    var y = 2 ** 3//相當(dāng)于2的立方
    console.log(x);//4
    console.log(y);//8
    var z = 2 ** 2 ** 4//相當(dāng)于 2 ** ( 2 ** 4 )
    console.log(z);//65536
</script>

指數(shù)運(yùn)算符也可以與等號(hào)結(jié)合使用，形成一個(gè)新的賦值運(yùn)算符 (**=)。

<script>
    var x = 2
    x**=2//x=x*x
    console.log(x);//4
    var y = 2
    y**=3//y=y*y*y
    console.log(y);//8
</script>

鏈判斷運(yùn)算符

鏈判斷運(yùn)算符的符號(hào)為：?. ，?.運(yùn)算符相當(dāng)于一種短路機(jī)制，只要不滿足條件就不再往下執(zhí)行。

<script>
    // a?.[++x] 等同于 a == null ? undefined : a[++x]
    var a = true
    var x = 1
    console.log(a?.[++x] === (a == null ? undefined : a[++x]));//true
</script>

如果屬性鏈有括號(hào) ，鏈判斷運(yùn)算符對(duì)括號(hào)外部沒有影響，只對(duì)圓括號(hào)內(nèi)部有影響。

(a?.b).c 等同于 (a == null ? undefined : a.b).c

Null判斷運(yùn)算符

Null判斷運(yùn)算符符號(hào)為：??，它的行為類似于 ||，但只有運(yùn)算符左側(cè)的值為 null 或 undefined 時(shí)，才會(huì)返回右側(cè)的值。

<script>
    console.log(null ?? 'a');//a
</script>

?? 本質(zhì)上是邏輯運(yùn)算，它與其它兩個(gè)邏輯運(yùn)算符 && 和 || 有一個(gè)優(yōu)先級(jí)問題，優(yōu)先級(jí)的不同，往往會(huì)導(dǎo)致邏輯運(yùn)算的結(jié)果不同，如果多個(gè)邏輯運(yùn)算符一起使用，必須用括號(hào)表明優(yōu)先級(jí)，否則會(huì)報(bào)錯(cuò)。

a && b ?? c//報(bào)錯(cuò)
(a && b) ?? c//不報(bào)錯(cuò)

這個(gè)運(yùn)算符的目的就是跟鏈判斷運(yùn)算符 ?. ，配合使用，為 null 或 undefined 的值設(shè)置默認(rèn)值。

邏輯賦值運(yùn)算符

邏輯賦值運(yùn)算符，將邏輯運(yùn)算符與賦值運(yùn)算符進(jìn)行結(jié)合，先進(jìn)行邏輯運(yùn)算，然后根據(jù)運(yùn)算結(jié)果再視情況進(jìn)行賦值運(yùn)算：

<script>
    var x = 1
    var y = 2
    // 或賦值運(yùn)算符
    console.log((x ||= y) === (x || (x = y)));//true
    // 與賦值運(yùn)算符
    console.log((x &&= y) === (x && (x = y)));//true
    // Null 賦值運(yùn)算符
    console.log((x ??= y) === (x ?? (x = y)));//true
</script>

數(shù)組擴(kuò)展方法

Array.from()

用于將兩類對(duì)象轉(zhuǎn)換為數(shù)組：類似數(shù)組對(duì)象的和可遍歷對(duì)象。

<script>
    // 類似數(shù)組對(duì)象，本質(zhì)特征只有一點(diǎn)，必須有l(wèi)ength屬性
    let array = {
        '0':'a',
        '1':'b',
        '2':'c',
        length:3 // 長度必須要寫的
    }
    let arr2 = Array.from(array)
    console.log(arr2);//['a', 'b', 'c']
    console.log(Array.from({ length: 3 }))
    // [ undefined, undefined, undefined ]
</script>

如果參數(shù)是一個(gè)真正的數(shù)組，返回的是一樣的數(shù)組。

<script>
    console.log(Array.from([1,2,3]));//[1,2,3]
</script>

如果參數(shù)是一個(gè)字符串，則會(huì)將字符串轉(zhuǎn)換為數(shù)組。

<script>
    let str = 'hello'
    console.log(Array.from(str));//['h', 'e', 'l', 'l', 'o']
</script>

Array.of()

用于將一組值轉(zhuǎn)換為數(shù)組。

<script>
    console.log(Array.of(1,2,3,4,5,6));//[1, 2, 3, 4, 5, 6]
    console.log(Array.of(1));//[1]
    console.log(Array.of(2).length);//1
    // 如果沒有參數(shù)，就返回一個(gè)空數(shù)組。
    console.log(Array.of());//[]
</script>

copyWithin()

在當(dāng)前數(shù)組內(nèi)部，將指定位置的成員復(fù)制到其他位置并覆蓋掉原有成員，然后返回當(dāng)前數(shù)組。

該方法接受三個(gè)參數(shù)：

target(必須)：從該位置開始替換數(shù)據(jù)。如果為負(fù)值，表示倒數(shù)。

start(可選)：從該位置開始讀取數(shù)據(jù)，默認(rèn)為 0。如果為負(fù)值，表示從末尾開始計(jì)算。

end(可選)：到該位置前停止讀取數(shù)據(jù)，默認(rèn)等于數(shù)組長度。如果為負(fù)值，表示從末尾開始計(jì)算。

<script>
    var arr = [1,2,3,4,5]
    console.log(arr.copyWithin(0,3));//[4, 5, 3, 4, 5]
</script>

上面代碼表示將從 3 號(hào)位直到數(shù)組結(jié)束的成員（4 和 5），復(fù)制到從 0 號(hào)位開始的位置，結(jié)果覆蓋了原來的 1 和 2。再以下面兩個(gè)例子舉例：

<script>
    var arr = [1,2,3,4,5]
    // 將3號(hào)位復(fù)制到0號(hào)位
    console.log(arr.copyWithin(0,3,4));
    // -2相當(dāng)于3號(hào)位，-1相當(dāng)于4號(hào)位
    console.log(arr.copyWithin(0,-2,-1));
</script>

find()

數(shù)組find()方法，用于找出第一個(gè)符合條件的數(shù)組成員。由find()衍生了和它類似的方法，如下：findIndex()、findLast()、findLastIndex()。

<script>
    var arr = [1,3,5,6,8,4]
    // find() 方法調(diào)函數(shù)可以接受三個(gè)參數(shù)，依次為當(dāng)前的值、當(dāng)前的位置和原數(shù)組。
    var result = arr.find((value,index,arr)=> value > 7)
    console.log(result);//結(jié)果輸出當(dāng)前的值
    // findIndex() 方法與find() 方法類似，區(qū)別是返回位置而不是結(jié)果
    var result1 = arr.findIndex((value,index,arr)=> value > 3)
    console.log(result1);//結(jié)果輸出符合的條件的第一個(gè)位置
    // findLast() 和 findLastIndex() 和上面兩者類似，只不過是從數(shù)組末尾往前查找
    var result2 = arr.findLast((value,index,arr)=> value ==8)
    var result3 = arr.findLastIndex((value,index,arr)=> value ==8)
    console.log(result2);//結(jié)果為 8
    console.log(result3);//結(jié)果為8 的下標(biāo) 4
</script>

fill()

數(shù)組fill()方法，將給定值將數(shù)組內(nèi)容全部覆蓋或者局部覆蓋。

<script>
    var arr = ['a','b','c']
    // 將數(shù)組內(nèi)容全部覆蓋。
    console.log(arr.fill(2));//[2, 2, 2]
    var arr1 = ['a','b','c','d']
    // 將數(shù)組內(nèi)容局部覆蓋，參數(shù)2是起始位置，參數(shù)3是終止位置,即將數(shù)組下標(biāo)為1的數(shù)替換為2
    console.log(arr1.fill(8,1,2));//['a', 8, 'c', 'd']
</script>

flat()

數(shù)組flat()方法，用于將嵌套的數(shù)組拉平，變成一維的數(shù)組，該方法返回一個(gè)新數(shù)組，對(duì)原數(shù)組沒有影響，簡單說就是將數(shù)組中的數(shù)組拆解插入到當(dāng)前它所在的位置。

<script>
    var arr = [1,2,[3,4],[5,6,[7,8]]]
    console.log(arr.flat());
</script>

到此這篇關(guān)于JavaScript中運(yùn)算符與數(shù)組擴(kuò)展詳細(xì)講解的文章就介紹到這了,更多相關(guān)JS運(yùn)算符與數(shù)組擴(kuò)展內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: