【js基礎(chǔ)】js數(shù)組方法總結(jié)

aboutU 發(fā)布于2019-08-21 17:48 / 3106人閱讀

摘要：補(bǔ)充語(yǔ)言和宿主環(huán)境中許多新的內(nèi)置函數(shù)，都提供了一個(gè)可選的參數(shù)，通常被稱為上下文，其作用和一樣，確保你的回調(diào)函數(shù)使用指定的。

補(bǔ)充：

JavaScript 語(yǔ)言和宿主環(huán)境中許多新的內(nèi)置函數(shù)，都提供了一個(gè)可選的參數(shù)，通常被稱為“上下文”（context），其作用和 bind(..) 一樣，確保你的回調(diào)函數(shù)使用指定的 this。

function foo(el) {
 console.log( el, this.id );
}
var obj = {
 id: "awesome"
};
// 調(diào)用 foo(..) 時(shí)把 this 綁定到 obj
[1, 2, 3].forEach( foo, obj );
// 1 awesome 2 awesome 3 awesome

es5部分 1、map [es5]

不改變?cè)瓟?shù)組
需要一個(gè)函數(shù)作為參數(shù)，依次處理數(shù)組內(nèi)每個(gè)元素，并返回新的值，無(wú)返回值則為undefined
使用所有的返回值組成新的數(shù)組

console.log(["a","b","c"].map((elem, index) => {
    console.log(elem, index)
    /*a 0
    *b 1
    *c 2
    */
    if (elem === "a") return "this is a"
}))// (3) ["this is a", undefined, undefined]

2、filter [es5]

不改變?cè)瓟?shù)組
需要一個(gè)函數(shù)作為參數(shù)，依次便利每一個(gè)值，根據(jù)返回值生成新數(shù)組
返回真值便利到的元素添加至新數(shù)組

console.log([ , 1, "", 2, undefined, 3, null, 4, 0, false, 5, true, 6, new Date()].filter((elem, index) => {
    console.log(elem, index)
    return elem
})) // [1, 2, 3, 4, 5, true, 6, Tue Nov 28 2017 08:29:52 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)]

3、every [es5] some [es5]

語(yǔ)言太蒼白，show you code
數(shù)組的every，和some方法，可參考下面兩個(gè)函數(shù)實(shí)現(xiàn)的功能

const every = (fun, arr) => {
    for (let i = 0; i = arr.length; i ++) {
        if (!fun(arr[i], i)) return false    // 有結(jié)果為false, 立即返回false，不再繼續(xù)遍歷
    }
}
const some = (fun, arr) => {
    for (let i = 0; i < arr.length; i ++) {
        if (fun(arr[i], i)) return true      // 有結(jié)果為true, 立即返回true，不再繼續(xù)遍歷
    }
}

[0,1,2,3,4].filter(function (i) {if (i < 2){return 1}})  //[0, 1]

4、reduce [es5] reduceRight [es5]

功能描述參考下面代碼

const reduce = (fun, arr, start) => {
    arr = arr.slice()
    start = start === undefined ? arr.shift() : start
    for (let i = 0; i < arr.length; i++) {   // 從左往右
        start = fun(start, arr[i])
    }
    return start
}
const reduceRight = (fun, arr, start) => {
    arr = arr.slice()
    start = start === undefined ? arr.pop() : start
    for (let i = arr.length - 1; i >= 0; i--) {   // 從右往左
        start = fun(start, arr[i])
    }
    return start
}

5、indexOf

返回某個(gè)指定的變量在數(shù)組中首次出現(xiàn)的位置

const a = {}
const b = [0, {}, 2, 3, "4", 4, 5, a, 4]
console.log(b.indexOf(a)) // 7
console.log(b.indexOf(4)) // 5
console.log(b.indexOf(4, "6")) // 8
console.log(b.indexOf("4")) // 4

6、lastIndexOf

返回某個(gè)指定的變量在數(shù)組中最后一次出現(xiàn)的位置

const a = {}
const b = [0, {}, 2, 3, "4", 4, 5, a, 4]
console.log(b.lastIndexOf(a)) // 7
console.log(b.lastIndexOf(4)) // 8
console.log(b.lastIndexOf(4, "6")) // 5
console.log(b.lastIndexOf("4")) // 4

es3部分 1、join [es3]

將數(shù)組拼接為字符串．

const b = [0, {}, 2, 3, "4", 4, 5, 4]
console.log(b.join()) // 0,[object Object],2,3,4,4,5,4
console.log(b.join(",")) // 0,[object Object],2,3,4,4,5,4   同b.join()
console.log(b.join("分割符")) //0分割符[object Object]分割符2分割符3分割符4分割符4分割符5分割符4

const a = [new Date(), null, undefined,[1, 2,3], [1, 2, 3], [[11, 12, 13], [21, 22, {a: [1,2,3]}]], {a: 1}]
console.log(a.join())      //Mon Nov 27 2017 15:39:01 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間),,,1,2,3,1,2,3,11,12,13,21,22,[object Object],[object Object]
console.log(a.toString())  //Mon Nov 27 2017 15:41:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間),,,1,2,3,1,2,3,11,12,13,21,22,[object Object],[object Object]
const testelema = new Date()
const testelemb = {}
const testelemc = []
testelema.toString = e => 1
testelemb.toString = e => 2
testelemc.toString = e => 3
console.log([testelema, testelemb, testelemc].join("-----"))   //1-----2-----3


const notfunction = {}
notfunction.toString = 1212
console.log([notfunction].join())  //Uncaught TypeError: Cannot convert object to primitive value

個(gè)人猜測(cè)，join會(huì)依次調(diào)用數(shù)組內(nèi)元素的toString方法，并拼接成字符串，沒有toString方法的元素返回空""，類似

const join = 
    (arr, delimiter = ",") => 
        arr.reduce((last, next) => {
            if (next === null || next === undefined) {
                return last + delimiter
            } else {
                if (typeof next.toString !== "function") {
                    throw new Error(`Cannot convert $ {typeof next}to primitive value `)
                }
                return last + delimiter + next.toString()
            }
        }, "")
        .replace(delimiter, "")

2、reverse [es3]

將數(shù)組中的元素顛倒順序
該方法會(huì)直接改變?cè)瓟?shù)組

const b = [true,"1",2,3,4,5]
b.reverse()
console.log(b.join())

3、sort [es3]

將數(shù)組的元素按照一定規(guī)則排序
該方法會(huì)直接改變?cè)瓟?shù)組
參數(shù)類型必須為function
無(wú)參數(shù)的時(shí)候數(shù)組元素默認(rèn)按照字母表順序排序.

let b = [0,"a", 3,"3", 4,5,false]
console.log(b.sort().join()) //0,3,3,4,5,a,false

b = [0,"a", 3,"3", 4,5,false]
console.log(b.sort((elema, elemb) => {
    console.log(elema, elemb)
    /*
    * 0 "a"
    * a 3
    * 3 "3"
    * 3 4
    * 4 5
    * 5 false
    */
    console.log(typeof elema, typeof elemb)  //雖然上面打印出的字符串變量有的沒有帶引號(hào)，但是類型沒錯(cuò)
    /*
    * number string
    * string number
    * number string
    * string number
    * number number
    * number boolean
    */
}).join())  //0,a,3,3,4,5,false  如果作為sort參數(shù)的方法，無(wú)返回值，則排序結(jié)果與不帶參數(shù)相同

b = [10,"a",false, "20","11", 4,9]
console.log(b.sort((elema, elemb) => {
    if (typeof elema === "string" && typeof elemb === "number") {
        return -1   // 返回小于0的數(shù)則 elema在前  elemb在后 
    } else if (typeof elema === "number" && typeof elemb === "string") {
        return 1    // 返回大于0的數(shù) 則 elema在后  elemb在前
    }
    return 0; // 默認(rèn)返回0   不加return 0結(jié)果一樣
}).join()) // a,10,false,20,11,4,9   將字符串排在數(shù)字前面

4、concat [es3]

拼接數(shù)組
返回新數(shù)組，不改變?cè)瓟?shù)組

const a = [1, 2, {a: 3}]
const b = a.concat([1,2,3,4])
console.log(b) //(7) [1, 2, {…}, 1, 2, 3, 4]
const c = a.concat([[1,2,3,4]])
console.log(c) // (4) [1, 2, {…}, Array(4)]
console.log(a) // (3) [1, 2, {…}]
const d = a.concat() 
console.log(d) // (3) [1, 2, {…}]      可以使用concat進(jìn)行淺拷貝
d[0] = 10
console.log(d) // (3) [10, 2, {…}]
console.log(a) // (3) [1, 2, {…}]
d[2].a = 10
console.log(a[2].a)  //10

5、slice [es3]

返回?cái)?shù)組的一個(gè)片段
返回新數(shù)組，不改變?cè)瓟?shù)組
使用slice復(fù)制數(shù)組也是淺拷貝
兩個(gè)參數(shù)時(shí)，包含序號(hào)為前一個(gè)參數(shù)的元素，不包含序號(hào)為后一個(gè)參數(shù)的元素
前一個(gè)參數(shù)默認(rèn)為0
后一個(gè)參數(shù)默認(rèn)為數(shù)組長(zhǎng)度

const a = [0,1,2,3,4,5,6,7]
console.log(a.slice()) // (8) [0, 1, 2, 3, 4, 5, 6, 7]
console.log(a.slice(0)) // (8) [0, 1, 2, 3, 4, 5, 6, 7]
console.log(a.slice(0, a.length)) // (8) [0, 1, 2, 3, 4, 5, 6, 7]
console.log(a.slice(2))  // (6) [2, 3, 4, 5, 6, 7]
console.log(a.slice(2, a.length)) // (6) [2, 3, 4, 5, 6, 7]
console.log(a.slice(2, 3)) // [2]
console.log(a.slice(2, 4)) // (2) [2, 3]
console.log(a.slice(-2))  // (2) [6, 7]
console.log(a.slice(-2, a.length))  // (2) [6, 7]
console.log(a.slice(2, a.length - 1))  //(5) [2, 3, 4, 5, 6]
console.log(a.slice(2, - 1))   // (5) [2, 3, 4, 5, 6]

6、splice [es3]

從數(shù)組中刪除元素、插入元素、或者同時(shí)完成這倆種操作.
splice直接修改數(shù)組

let a = [0,1,2,3,4,5,6,7]
a.splice()
console.log(a)  // (8) [0, 1, 2, 3, 4, 5, 6, 7]
a = [0,1,2,3,4,5,6,7]
a.splice(0)
console.log(a)  // []
a = [0,1,2,3,4,5,6,7]
a.splice(0, a.length)
console.log(a)  // []
a = [0,1,2,3,4,5,6,7]
a.splice(0, 1)
console.log(a)  // []

7、其余常用的es3方法這里就簡(jiǎn)單列一下，就不啰嗦了

push和pop
unshift和shift;
toString和toLocaleString

es6部分 1、copyWithin

這是一個(gè)我想不到應(yīng)用場(chǎng)景的方法
大概我以后也很少用到
把數(shù)組自己的一部分復(fù)制到另一部分
參考如下代碼

const copyWithin = (arr, target, start = 0, end = arr.length) => {
    const copy = arr.slice()
    start = start < 0 ? (start + arr.length) : start
    end = end < 0 ? (end + arr.length) : end
    for (let i = start; i < end; i ++) {  // 拷貝內(nèi)容不包括end    end 小與 start 什么操作都不做且不報(bào)錯(cuò)
        arr[target + i - start] = copy[i]   // copyWithin修改原數(shù)組
    }
}

2、find

直接上polyfill

// https://tc39.github.io/ecma262/#sec-array.prototype.find
if (!Array.prototype.find) {
  Object.defineProperty(Array.prototype, "find", {
    value: function(predicate) {
     // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError(""this" is null or not defined");
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
      if (typeof predicate !== "function") {
        throw new TypeError("predicate must be a function");
      }

      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
      var thisArg = arguments[1];

      // 5. Let k be 0.
      var k = 0;

      // 6. Repeat, while k < len
      while (k < len) {
        // a. Let Pk be ! ToString(k).
        // b. Let kValue be ? Get(O, Pk).
        // c. Let testResult be ToBoolean(? Call(predicate, T, ? kValue, k, O ?)).
        // d. If testResult is true, return kValue.
        var kValue = o[k];
        if (predicate.call(thisArg, kValue, k, o)) {
          return kValue;
        }
        // e. Increase k by 1.
        k++;
      }

      // 7. Return undefined.
      return undefined;
    }
  });
}

未完待續(xù)

GPU云服務(wù)器云服務(wù)器 js數(shù)組方法 js 方法數(shù)組參數(shù) js數(shù)組操作方法 js數(shù)組取值方法

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90037.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

aboutU

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【如何構(gòu)建商業(yè)級(jí)別聊天系統(tǒng)】 MQTT 篇（五）保活 Keep Alive，請(qǐng)不要讓你的 MQTT

閱讀 2573·2021-09-02 15:40
javascript 事件流捕獲與冒泡

閱讀 1578·2019-08-30 15:54
一個(gè)極簡(jiǎn)主義設(shè)計(jì)的 Hexo 主題

閱讀 1094·2019-08-30 12:48
三列布局（左右固定，中間自適應(yīng)）

閱讀 3411·2019-08-29 17:23
回味background

閱讀 1057·2019-08-28 18:04
二叉樹遍歷

閱讀 3675·2019-08-26 13:54
對(duì)JavaScript對(duì)象的理解

閱讀 618·2019-08-26 11:40
精讀《源碼學(xué)習(xí)》

閱讀 2408·2019-08-26 10:15

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【js基礎(chǔ)】js數(shù)組方法總結(jié)

相關(guān)文章

JS程序

數(shù)組的使用總結(jié)— (js基礎(chǔ)復(fù)習(xí)第2期)

**js基礎(chǔ)歸納總結(jié)1**

**js 基礎(chǔ)總結(jié)（常用的反轉(zhuǎn)）**

**JavaScript學(xué)習(xí)總結(jié)（一）基礎(chǔ)部分**

發(fā)表評(píng)論

0條評(píng)論

aboutU

男|高級(jí)講師

TA的文章

【如何構(gòu)建商業(yè)級(jí)別聊天系統(tǒng)】 MQTT 篇（五）保活 Keep Alive，請(qǐng)不要讓你的 MQTT

javascript 事件流捕獲與冒泡

一個(gè)極簡(jiǎn)主義設(shè)計(jì)的 Hexo 主題

三列布局（左右固定，中間自適應(yīng)）

回味background

二叉樹遍歷

對(duì)JavaScript對(duì)象的理解

精讀《源碼學(xué)習(xí)》

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【js基礎(chǔ)】js數(shù)組方法總結(jié)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！