Array和经常使用API

2023年6月5日 130次阅读 来源: 梁广铭

什么是数组

在阮一峰的《JavaScript 规范参考教程（alpha）》中的诠释是：
数组（array）是按序次分列的一组值。每一个值的位置都有编号（从0最先），全部数组用方括号示意。
JS的实质明白是：
数组（array）就是原型链中有 Array.prototype 的对象

基础用法

var a = Array(3) // {length:3}
var a = new Array(3) // {length:3}

假如输入只要一个数字，那末建立的数组就是length为3，而且三个数的值都为undefinde。new加不加效果都一样

var b = Array(3,3) // [3,3] 
var b = new Array(3,3) // [3,3]

假如输入的值凌驾一个，那末建立的就是一个value即是输入值的数组。new加不加效果都一样

var a = [,,,]//{length:3},值为undefined
var a = [3,3]//[3,3]

建立数组也能够像如许直接建立，只要逗号的话代表的就是有下标然则值为undefined的数。

伪数组

  1. 有 0,1,2,3,4,5…n,length 这些 key 的对象
  2. 原型链中没有 Array.prototype

如许的对象就是伪数组

现在进修到的伪数组比方：

  1. arguments 对象
  2. document.querySelectAll(‘div’) 返回的对象

数组的API

Array.prototype.forEach()

forEach()吸收一个函数，而且forEach()要领对数组的每一个元素实行一次供应的函数。

array.forEach(callback(currentValue, index, array){
    //do something
})

array.forEach(callback())
  • callback：为数组中每一个元素实行的函数，该函数吸收三个参数
  • currentValue(当前值)：数组中正在处置惩罚的当前元素。
  • index(索引)：数组中正在处置惩罚的当前元素的索引。
  • array：forEach()要领正在操纵的数组。
  • 返回值：undefined

自写一下forEach函数

function forEach(array, x){
    for(let i = 0;i < array.length; i++){
        x(array[i],i)
    }
}

这就是一个简朴的forEach()自写的一个函数，array代表操纵的数组，x代表用来操纵数组的函数，传入数组和函数。

var obj = []

obj.forEach = function(x){
    for(let i = 0; i < this.length; i++){
        x(this[i], i)
    }
}

this就是指代obj这个数组

Array.prototype.sort()

sort() 要领用当场（ in-place ）的算法对数组的元素举行排序，并返回数组。 sort 排序不一定是稳固的。默许排序递次是依据字符串Unicode码点。

arr.sort() 
arr.sort(compareFunction)
  • compareFunction：可选。用来指定按某种递次举行分列的函数。假如省略，元素根据转换为的字符串的各个字符的Unicode位点举行排序。
  • 返回值：返回排序后的数组。原数组已被排序后的数组替代。

假如没有指明 compareFunction ，那末元素会根据转换为的字符串的诸个字符的Unicode位点举行排序。比方 “Banana” 会被分列到 “cherry” 之前。当数字按由小到大排序时，9 出现在 80 之前，但由于（没有指明 compareFunction），比较的数字会先被转换为字符串，所以在Unicode递次上 “80” 要比 “9” 要靠前。

假如是数字想升序分列，sort()中输入：

function compareNumbers(a, b) {
  return a - b;
}//也能够(a,b) => a-b

假如是数字想倒序分列，sort()中输入：

function compareNumbers(a, b) {
  return b - a;
}//也能够(a,b) => b-a

对象能够根据某个属性分列：

var students = ['小明','小红','小花'] 
var scores = { 小明: 59, 小红: 99, 小花: 80 } 
students.sort(function(x, y){
         return scores[y] - scores[x]
})

别的sort()是一个比较特别的API，由于它转变了本身数组，这是为了节约内存。

Array.prototype.join()

join() 要领将一个数组（或一个类数组对象）的一切元素衔接成一个字符串并返回这个字符串。

str = arr.join(separator)
// 分开符
  • separator：
    指定一个字符串来分开数组的每一个元素。
    假如须要(separator)，将分开符转换为字符串。
    假如省略()，数组元素用逗号分开。默许为 “,”。
    假如separator是空字符串(“”)，则一切元素之间都没有任何字符。
  • 返回值：一个一切数组元素衔接的字符串。假如 arr.length 为0，则返回空字符串
var a = ['a','s','d']
a.join()//"a,s,d"
a.join('')//"asd"
a.join('f')//"afsfd"

一切的数组元素被转换成字符串，再用一个分开符将这些字符串衔接起来。假如元素是undefined 或许null， 则会转化成空字符串。

Array.prototype.concat()

concat() 要领用于兼并两个或多个数组。此要领不会变动现有数组，而是返回一个新数组。

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
  • valueN：将数组和/或值衔接成新数组。
  • 返回值：新的 Array 实例。
var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];

alpha.concat(numeric);//[1, 2, 3, 4, 5, 6, 7, 8, 9]

将两个数组衔接起来天生一个新的数组。

var alpha = ['a', 'b', 'c'];

var alphaNumeric = alpha.concat(1, [2, 3]);
//['a', 'b', 'c', 1, 2, 3]

能够直接将值衔接到数组，天生一个新的数组。

var a = [1,2,3]
var b = a.concat()//[1, 2, 3]
b === a//false

concat()能够建立一个雷同值的数组，然则是新建立的一个对象。

Array.prototype.map()

map() 要领建立一个新数组，其效果是该数组中的每一个元素都挪用一个供应的函数后返回的效果。
map()和forEach()很像，然则forEach()返回undefined，而map()返回一个对数组内每一个数处置惩罚的数组。

let new_array = arr.map(function callback(value, key, array) { 
    // Return element for new_array 
})
  • callback：天生新数组元素的函数，运用三个参数。
  • value：callback 的第一个参数，数组中正在处置惩罚的当前元素。
  • key：callback 的第二个参数，数组中正在处置惩罚的当前元素的下标。
  • array：callback 的第三个参数，map 要领被挪用的数组。
  • 返回值：一个新数组，每一个元素都是回调函数的效果。
var a = [1,2,3]
a.map(function(value,key){
      return value *value
})//[1,4,9]

map()能够对数组的每一个值举行操纵，和forEach是基础一样的，然则，map()返回一个新的数组，而forEach返回的是undefined。

Array.prototype.filter()

filter() 要领建立一个新数组, 其包括经由历程所供应函数完成的测试的一切元素。

array.filter(function(value, key, array){})
  • value：当前在数组中处置惩罚的元素
  • key：正在处置惩罚元素在数组中的下标（索引）
  • array：挪用了filter挑选器的数组
  • 返回值：返回的是一个布尔值，来推断挑选前提
var a = [1,2,3,4,5,6,7,8,9,10]
a.filter(function(value){
    return value > 5
})//[6, 7, 8, 9, 10]

举行挑选，返回一个挑选以后的数组，不转变原数组

Array.prototype.reduce()

reduce() 要领对累加器和数组中的每一个元素（从左到右）运用一个函数，将其削减为单个值。

a.reduce(callback(prev, value),initial)
  • callback：实行数组中每一个值的函数
  • prev：累加器累加回调的返回值; 它是上一次挪用回调时返回的积累值
  • value：数组中正在处置惩罚的元素
  • initial：累加时的初始值
var a = [1,2,3,4,5,6,7,8,9,10]
a.reduce(function(sum,n){
        return sum + n
},0)//55

对数组的内容累计处置惩罚，reduce能够变更完成map()和filter()

var a = [1,2,3]
a.reduce(function(arr,n){
    arr.push(n*2)
    return arr
},[])//[2, 4, 6]

这就是reduce()完成map()的历程

var a = [1,2,3,4,5,6,7,8,9,10]
a.reduce(function(arr,n){
   if(n%2===0){
       arr.push(n) 
   }
   return arr
},[])//[2, 4, 6, 8, 10]

这是reduce()完成filter()的历程

    原文作者：梁广铭
    原文地址: https://segmentfault.com/a/1190000015620486
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞