【js基礎】js數組方法總結

aboutU 發布于2019-08-21 17:48 / 3096人閱讀

摘要：補充語言和宿主環境中許多新的內置函數，都提供了一個可選的參數，通常被稱為上下文，其作用和一樣，確保你的回調函數使用指定的。

補充：

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

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

es5部分 1、map [es5]

不改變原數組
需要一個函數作為參數，依次處理數組內每個元素，并返回新的值，無返回值則為undefined
使用所有的返回值組成新的數組

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]

不改變原數組
需要一個函數作為參數，依次便利每一個值，根據返回值生成新數組
返回真值便利到的元素添加至新數組

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 (中國標準時間)]

3、every [es5] some [es5]

語言太蒼白，show you code
數組的every，和some方法，可參考下面兩個函數實現的功能

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

[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

返回某個指定的變量在數組中首次出現的位置

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

返回某個指定的變量在數組中最后一次出現的位置

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]

將數組拼接為字符串．

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 (中國標準時間),,,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 (中國標準時間),,,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

個人猜測，join會依次調用數組內元素的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]

將數組中的元素顛倒順序
該方法會直接改變原數組

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

3、sort [es3]

將數組的元素按照一定規則排序
該方法會直接改變原數組
參數類型必須為function
無參數的時候數組元素默認按照字母表順序排序.

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)  //雖然上面打印出的字符串變量有的沒有帶引號，但是類型沒錯
    /*
    * number string
    * string number
    * number string
    * string number
    * number number
    * number boolean
    */
}).join())  //0,a,3,3,4,5,false  如果作為sort參數的方法，無返回值，則排序結果與不帶參數相同

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

4、concat [es3]

拼接數組
返回新數組，不改變原數組

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進行淺拷貝
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]

返回數組的一個片段
返回新數組，不改變原數組
使用slice復制數組也是淺拷貝
兩個參數時，包含序號為前一個參數的元素，不包含序號為后一個參數的元素
前一個參數默認為0
后一個參數默認為數組長度

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]

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

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方法這里就簡單列一下，就不啰嗦了

push和pop
unshift和shift;
toString和toLocaleString

es6部分 1、copyWithin

這是一個我想不到應用場景的方法
大概我以后也很少用到
把數組自己的一部分復制到另一部分
參考如下代碼

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 ++) {  // 拷貝內容不包括end    end 小與 start 什么操作都不做且不報錯
        arr[target + i - start] = copy[i]   // copyWithin修改原數組
    }
}

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;
    }
  });
}

未完待續

云服務器 GPU云服務器 js數組方法 js 方法數組參數 js數組操作方法 js數組取值方法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90037.html

JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
數組的使用總結— (js基礎復習第2期)

摘要：前一個值，當前值，索引，數組對象產生新數組的迭代器方法類似，對數組的每個元素使用某個函數，并返回新數組和相似，傳入一個返回值為布爾類型的函數。 1. 前言數組真的是每天用了，但是有很多方法都是記不住，總是要百度查，很煩，所以才寫了個數組使用總結，有什么不對的希望大家指出來。 2. 思路先看看這些問題都記得很清楚么？創建數組，怎么創建數組的數組的構造方法Array有哪些方法？E...

zhigoo 2019-08-23 13:10 評論0 收藏0
js基礎歸納總結1

摘要：局部變量在函數中聲明的變量，會成為函數的局部變量。局部變量的作用域是局部的只能在函數內部訪問它們。單獨的情況下，指的是全局對象。在事件中，指的是接收事件的元素。布爾值提供一種布爾數據類型。所有不具有真實值的即為布爾值為零負零空值。閉包閉包的優點：1.可以讀取函數內部的變量2.這些變量的值始終保持在內存中適用場景作用域作用域指的是有權訪問的變量集合。在 JavaScript 中有...

Jeff 2019-08-26 13:54 評論0 收藏0
js 基礎總結（常用的反轉）

摘要：中的反轉中的反轉主要有以下三種，數字反轉，字符串反轉，數組的反轉數組的反轉結果字符串的反轉先將字符串轉換為數組，然后反轉數組，最后將數組轉合并為字符串結果兼容性由于存在兼容性問題，的瀏覽器可以很好的使用，但是是個問題。 js中的反轉 js中的反轉主要有以下三種，數字反轉，字符串反轉，數組的反轉數組的反轉 var arr = [1,2,3,4,5]; arr = arr.reverse...

ACb0y 2019-08-22 11:21 評論0 收藏0
JavaScript學習總結（一）基礎部分

摘要：前綴規范每個局部變量都需要有一個類型前綴，按照類型可以分為表示字符串。例如，表示以上未涉及到的其他對象，例如，表示全局變量，例如，是一種區分大小寫的語言。布爾值與字符串相加將布爾值強制轉換為字符串。基本概念 javascript是一門解釋型的語言，瀏覽器充當解釋器。js執行時，在同一個作用域內是先解釋再執行。解釋的時候會編譯function和var這兩個關鍵詞定義的變量，編譯完成后從...

AlanKeene 2019-08-21 12:27 評論0 收藏0