关于javascript:javaScript数组方法汇总

40次阅读

共计 11236 个字符，预计需要花费 29 分钟才能阅读完成。

JavaScript 的 Array 对象是用于结构数组的全局对象，数组是相似于列表的高阶对象。

for

for 不是 Array 特有的办法

for 是 javaScript 的特有语句 

for(let i = 0; i<numberList.length;i++) {console.log('numberList[i]---------',numberList[i])

}

forEach

对数组中的每一项运行给定函数

该办法没有返回值

语法：arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

  • 该函数能够一顺次传入三个参数，别离为数组以后的值，数组以后项的索引，数组对象自身

    numberList.forEach(function(element, index, array) {
    console.log(‘array—————–‘,array);
    console.log(‘index—————–‘,index);
    console.log(‘element—————–‘,element);
    })

map

对数组中的每一项运行给定函数

该办法返回每次函数调用的后果组成的新数组

语法：var new_array = arr.map(function callback(currentValue[, index[, array]]) {

// Return element for new_array
}[, thisArg])

  • 接管一个函数回调 callback, 接管三个参数：currentValue、index、array
  • currentValue:callback 数组中正在解决的以后元素
  • index:callback 数组中正在解决的以后元素的索引。

  • array:map 办法调用的数组。

    let newArray = numberList.map(function(element, index, array) {
    return !element ? 0 : element + 1
    })

concat

连贯 2 个或者更多数组，并返回后果

此办法不会更改现有数组，而是返回一个新数组

语法：var new_array = old_array.concat(value1[, value2[, …[, valueN]]])

  • 通过 concat 连贯两个数组：let numberList_2 = [12, 13, 14, 15, 16, 17, 18];

    let numberList_3 = []
numberList_3 = numberList_3.concat(numberList, numberList_2);
console.log('numberList_3-----------------', numberList_3);

  • 将值连贯到数组：let alpha = [‘a’, ‘b’, ‘c’];

    let alphaNumeric = alpha.concat(1, [2, 3]);
console.log(alphaNumeric);
// results in ['a', 'b', 'c', 1, 2, 3]

filter

对数组中的每一项运行给定函数

该办法会返回 true 的项组成的数组

语法：var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

  • 该办法接管一个函数回调 callback，接管三个参数：element、index、array
  • element: 数组中以后正在解决的元素
  • index: 正在解决的元素在数组中的索引
  • array: 调用了 filter 的数组自身

  • 示例：

    let filtered = [12, 5, 8, 130, 44].filter(function (element) {return element >= 10;});

every

对数组中的每一项运行给定函数

如果该函数对每一项都返回 true，则返回 true

若收到一个空数组，此办法在所有状况下都会返回 true。

every() 不会扭转原数组

语法：arr.every(callback(element[, index[, array]])[, thisArg])

  • 该办法接管一个函数回调 callback，用来测试每个元素的函数，接管三个参数：element、index、array
  • element：用于测试的以后值。
  • index：用于测试的以后值的索引

  • array：调用 every 的以后数组

    let everyResult = [12, 54, 18, 130, 44].every(function (element, index, array) {
    return element >= 10
    })

some

some() 办法测试数组中是不是至多有 1 个元素通过了被提供的函数测试, 它返回的是一个 Boolean 类型的值。

对数组中每一项运行给定函数

如果任意一项返回 true，则返回 true

留神：如果用一个空数组进行测试，在任何状况下它返回的都是 false。

some() 被调用时不会扭转数组。

语法：arr.some(callback(element[, index[, array]])[, thisArg])

  • 该办法接管一个函数回调 callback，用来测试每个元素的函数，接管三个参数：element、index、array
  • element: 数组中正在解决的元素
  • index : 数组中正在解决的元素的索引值。

  • array :some() 被调用的数组。

    let someResult = [2, 5, 8, 1, 4].some(function(element, index, array) {
    return element > 10;
    })
    console.log(‘someResult———‘, someResult)

from

该办法从一个相似数组或可迭代对象创立一个新的，浅拷贝的数组实例

语法：Array.from(arrayLike[, mapFn[, thisArg]])

  • 该办法接管一个 arrayLike，mapFn，thisArg
  • arrayLike：想要转换成数组的伪数组对象或可迭代对象。
  • mapFn：如果指定了该参数，新数组中的每个元素会执行该回调函数。
  • thisArg：可选参数，执行回调函数 mapFn 时 this 对象。

个可选参数 mapFn，能够在最初生成的数组上再执行一次 map 办法后再返回。

也就是说 Array.from(obj, mapFn, thisArg) 就相当于 Array.from(obj).map(mapFn, thisArg)

从 Sting 生成数组 

let fromResult = Array.from('123213')

从 Set 生成数组 实现数组去重 

const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// ["foo", "bar", "baz"]

of

创立一个具备可变数量参数的新数组实例

语法：Array.of(element0[, element1[, …[, elementN]]])

  • elementN：任意个参数，将按程序成为返回数组中的元素。

Array.of() 和 Array 构造函数之间的区别在于解决整数参数 

Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]
Array(7);          // [, , , , , ,]
Array(1, 2, 3);    // [1, 2, 3]

返回新的 Array 实例。

indexOf

indexOf() 办法返回在数组中能够找到一个给定元素的第一个索引，如果不存在，则返回 -1。

该办法将从头到尾地检索数组，看它是否含有对应的元素

语法：arr.indexOf(searchElement[, fromIndex])

  • searchElement 要查找的元素
  • fromIndex 开始查找的地位。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回 -1
  • 如果参数中提供的索引值是一个负值，则将其作为数组开端的一个对消，即 - 1 示意从最初一个元素开始查找，- 2 示意从倒数第二个元素开始查找，以此类推。
  • 留神：如果参数中提供的索引值是一个负值，并不扭转其查找程序，查找程序依然是从前向后查问数组。如果对消后的索引值仍小于 0，则整个数组都将会被查问。其默认值为 0.

// 找出指定元素呈现的所有地位 

var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.indexOf(element);
if(idx == -1) {indices = [];
}
while (idx != -1) {indices.push(idx);
  idx = array.indexOf(element, idx + 1);
}
console.log('indices-------',indices);

lastIndexOf

lastIndexOf() 办法返回在数组中能够找到一个给定元素的最初一次呈现的索引，并返回给定元素所在的索引值，如果不存在，则返回 -1（从数组的前面向前查找，从 fromIndex 处开始）

该办法将从尾到头地检索数组，看它是否含有对应的元素

开始地位的索引为 0。

语法：arr.lastIndexOf(searchElement[, fromIndex])

  • 从此地位开始逆向查找

  • searchElement：要查找的元素 必选参数

    • 从此地位开始逆向查找
    • 默认为数组的长度减 1(arr.length – 1)，即整个数组都被查找
    • 如果该值大于或等于数组的长度，则整个数组会被查找。
    • 如果为负值，将其视为从数组开端向前的偏移。即便该值为负，数组依然会被从后向前查找。
    • 如果该值为负时，其绝对值大于数组长度，则办法返回 -1，即数组不会被查找。

    • 返回值：数组中该元素最初一次呈现的索引，如未找到返回 -1。

      var last_array = [2, 5, 9, 2];
var last_array_index = last_array.lastIndexOf(2);
last_array_index = last_array.lastIndexOf(7);
// 该值大于或等于数组的长度，则整个数组会被查找 从地位索引为 0 开始
last_array_index = last_array.lastIndexOf(2, 3);
last_array_index = last_array.lastIndexOf(2, 2);
last_array_index = last_array.lastIndexOf(2, -2);
last_array_index = last_array.lastIndexOf(2, -1);
console.log('last_array_index-------', last_array_index)

find

find() 办法返回数组中满足提供的测试函数的第一个元素的值

语法：arr.find(callback[, thisArg])

  • 该办法接管一个回调函数，在数组每一项上执行的函数，接管 3 个参数：element、index、array
  • element：以后遍历到的元素。
  • index：可选参数 以后遍历到的索引。
  • array：可选参数 数组自身
  • thisArg：可选参数 执行回调时用作 this 的对象
  • callback 函数带有 3 个参数：以后元素的值、以后元素的索引，以及数组自身

  • // 用对象的属性查找数组里的对象, 返回找到该对象 

    var inventory = [{ name: 'apples', quantity: 2},
{name: 'bananas', quantity: 0},
{name: 'cherries', quantity: 5}
];

let inventory_result = inventory.find(function(fruit, index) {return fruit.name === 'bananas';})

console.log('inventory_result------', inventory_result)

返回值：数组中第一个满足所提供测试函数的元素的值，否则返回 undefined。

find 办法不会扭转原数组

findIndex

该办法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。

语法：arr.findIndex(callback[, thisArg])

  • element : 以后元素
  • index：以后元素的索引
  • array : 调用 findIndex 的数组

  • 示例：

    let findIndex_data = [4, 6, 8, 12].findIndex(function(item, index, array) {

    return item > 5
})
console.log('findIndex_data----', findIndex_data)

includes

该办法用来判断一个数组是否蕴含一个指定的值，依据状况，如果蕴含则返回 true，否则返回 false。

语法：arr.includes(valueToFind[, fromIndex])

  • valueToFind：须要查找的元素值。
  • fromIndex：可选参数，从 fromIndex 索引处开始查找 valueToFind。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜（即便从开端开始往前跳 fromIndex 的绝对值个索引，而后往后搜查）。默认为 0。

  • 返回一个布尔值 Boolean，如果在数组中找到了（如果传入了 fromIndex，示意在 fromIndex 指定的索引范畴中找到了）则返回 true。

    • 如果 fromIndex 大于等于数组的长度，则会返回 false，且该数组不会被搜寻。
    • 如果 fromIndex 为负值，计算出的索引将作为开始搜寻 searchElement 的地位。如果计算出的索引小于 0，则整个数组都会被搜寻。

  • includes 办法示例：

    [1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

返回一个布尔值 Boolean

valueOf

这是数组对象的默认办法，该办法属于 Object 对象，因为所有的对象都 ” 继承 ” 了 Object 的对象实例，因而简直所有的实例对象都能够应用该办法。ps：JavaScript 的 Array 对象是用于结构数组的全局对象，数组是相似于列表的高阶对象。

把数组转换为字符串，并返回后果

arrayObject 的数组对象的原始值示意。

语法：arr.valueOf()

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
months.valueOf();

toString

JavaScript 的 Array 对象是用于结构数组的全局对象，数组是相似于列表的高阶对象。所以笼罩了 Object 的 toString 办法

返回一个字符串，示意指定的数组及其元素

语法：arr.toString()

  • 返回值：一个示意指定的数组及其元素的字符串

  • 对于数组对象，toString 办法连贯数组并返回一个字符串，其中蕴含用逗号分隔的每个数组元素。

    const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString()); // 1,2,a,1a

copyWithin

该办法浅复制数组的一部分到同一数组中的另一个地位，并返回它，不会扭转原数组的长度。

语法：arr.copyWithin(target[, start[, end]])

entries

办法返回一个新的 Array Iterator 对象，该对象蕴含数组中每个索引的键 / 值对。

语法：arr.entries()

  • 返回值：返回一个新的 Array 迭代器对象
  • Array Iterator 是对象，它的原型上有一个 next 办法

  • next 办法可用用于遍历迭代器获得原数组的 [key,value]

    var arr_iterator = ["a", "b", "c"];
var iterator = arr_iterator.entries();
console.log('iterator-----',iterator.next().value);

keys

keys() 办法返回一个蕴含数组中每个索引键的 Array Iterator 对象

语法：arr.keys()

  • 示例 // 索引迭代器会蕴含那些没有对应元素的索引 

    const array2_keys = [1, '','a','b']
const object_keys = Object.keys(array2_keys);
console.log('object_keys-------', object_keys)
var denseKeys = [...object_keys.keys()];
console.log('denseKeys-------', denseKeys)
  • 返回值：一个新的 Array 迭代器对象。

values

values() 办法返回一个新的 Array Iterator 对象，该对象蕴含数组每个索引的值

语法：arr.values()

  • 返回值：一个新的 Array 迭代对象。该对象蕴含数组每个索引的值

  • 示例：

    const array1_values = ['array1_values', 'b', 'c'];
const iterator_values = array1_values.values();
console.log('iterator_values', [...iterator_values])
for (const value of iterator) {console.log(value);
}

返回值：一个新的 Array 迭代对象。

fill

fill() 办法用一个固定值填充一个数组中从起始索引到终止索引内的全副元素。不包含终止索引。

语法：arr.fill(value[, start[, end]])

  • value：必选参数 用来填充数组元素的值。
  • start：可选参数 起始索引，默认值为 0。
  • end：可选参数 终止索引，默认值为 this.length。
  • 返回值：批改后的数组。
  • 如果 start 是个正数, 则开始索引会被主动计算成为 length+start
  • 如果 end 是个正数, 则完结索引会被主动计算成为 length+end

  • // 当只有 value 值，start 与 end 没有值时，value 值 

    let data_fill = [1, 2, 3].fill(4); // [4, 4, 4]
console.log('data_fill------', data_fill)

  • // 当 value 值与 start 值存在 

    let data_fill_start = [1, 2, 3].fill(4, 0, 1); // [[4, 2, 3]
console.log('data_fill_start------', data_fill_start)

  • // 当 start 与 end 的值存在并且是正数时候
    // 此时得 start 等于 array.length + start = 3 + (-3) = 0;
    // 此时得 end 等于 array.length + end = 3 + (-2) = 1

    let fu_fill_start_end = [1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
console.log('fu_fill_start_end-------', fu_fill_start_end)

留神：当一个对象被传递给 fill 办法的时候, 填充数组的是这个对象的援用。

reduce

reduce() 办法对数组中的每个元素执行一个由您提供的 reducer 函数 ( 升序执行)，将其后果汇总为单个返回值。

语法：arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

  • 该办法接管一个回调函数 callback, 执行数组中每个值 (如果没有提供 initialValue 则第一个值除外) 的函数，蕴含四个参数：
  • accumulator: 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或 initialValue
  • currentValue：数组中正在解决的元素。
  • index：可选参数 数组中正在解决的以后元素的索引。如果提供了 initialValue，则起始索引号为 0，否则从索引 1 起始。
  • array：可选参数 调用 reduce() 的数组
  • initialValue：可选参数 作为第一次调用 callback 函数时的第一个参数的值。
  • initialValue：如果没有提供初始值，则将应用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。
  • 如果 arr 数组为空且没有提供 initialValue，会抛出 TypeError

  • // 数组里所有值的和 

    let reduce_data = [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {return accumulator + currentValue;}, 4); // 输入 14

  • // 数组里所有值的和 

    var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {return accumulator + currentValue;}, 0); // 输 = 出 6

sort

该办法用于对数组的元素进行排序

排序程序能够是字母或数字，并按升序或降序。

默认状况下，sort() 会依照升序重新排列数组元素，即最小的值在后面，最大的值在前面。

即便数组的元素都是数值，也会先把数组转换为字符串再比拟、排序。

留神：会扭转原数组，数组在原数组上进行排序，不生成正本

示例：数字数组 

let sort_values = [0, 1, 5, 10, 15];

- // 升序状况下
sort_values.sort(function(a, b) {return a - b})
- // 降序状况下
sort_values.sort(function(a, b) {return b - a})

reverse

该办法也用于对数组的元素进行排序

反向排序，办法很直观，但不够灵便

留神：会扭转原数组，数组在原数组上进行排序，不生成正本

示例：数字数组 

let reverse_values = [0, 1, 5, 10, 15];
reverse_values.reverse()
console.log('sort_values-------', reverse_values)

slice

该办法能够接管一个或两个参数：返回元素的开始索引和完结索引。

如果只有一个参数，则 slice() 会返回该索引到数组开端的所有元素。

如果有两个参数，则 slice() 返回从开始索引到完结索引对应的所有元素，其中不蕴含完结索引对应的元素。

slice(start,end)

  • start 必须。规定从何处开始选取。如果是正数，那么它规定从数组尾部开始算起的地位。

    • 也就是说，-1 指最初一个元素，-2 指倒数第二个元素，以此类推。
  • end 可选。规定从何处完结选取。该参数是数组片断完结处的数组下标。

例子：let colors = [“red”, “green”, “blue”, “yellow”, “purple”];

  • 如果只有一个参数，则 slice() 会返回该索引到数组开端的所有元素。

  • // let colors2 = colors.slice(1);

    // console.log('colors---------', colors2)
let colors3 = colors.slice(-1)
console.log('colors3---------', colors3)
  • 如果有两个参数，则 slice() 返回从开始索引到完结索引对应的所有元素，其中不蕴含完结索引对应的元素。

  • let colors3 = colors.slice(1, 4);

    console.log('colors3---------', colors3);

- 打印：["green", "blue", "yellow"]

slice() 办法不会扭转原始数组。

  • console.log(‘colors———slice() 办法不会扭转原始数组 ’, colors) // [“red”, “green”, “blue”, “yellow”, “purple”]

splice

办法用于增加或删除数组中的元素。

let splice_colors = [‘red’, ‘green’, ‘blue’]

次要目标是在数组两头插入元素，但有 3 种不同的形式应用这个办法。

  • 第一种办法 删除性能

  • 须要给 splice() 传 2 个参数

    • 第一个要删除元素的地位，第二个要删除元素的数量。
    • 能够从数组中删除任意多个元素，比方 splice(0, 2) 会删除前两个元素。
    • let removed_delete = splice_colors.splice(0,1); // 删除性能
  • 第二种办法 插入性能

  • 须要给 splice() 传 3 个参数

    • 第一个元素是开始地位、第二个要删除元素的数量、第三个要插入的元素 (能够插入的任意多个元素)
    • 能够在数组中指定的地位插入元素。第三个参数之后还能够传第四个、第五个参数，乃至任意多个要插入的元素。
    • 比方，splice(2, 0, “red”, “green”) 会从数组地位 2 开始插入字符串 ”red” 和 ”green”。
    • splice_colors.splice(1, 0, “yellow”, “orange”); // 插入性能
  • 第三种办法 替换性能

  • 同样要传入 3 个参数

    • 第一个元素是开始地位、第二个要删除元素的数量、第三个要插入的元素 (能够插入的任意多个元素)
    • 要插入的元素数量不肯定跟删除的元素数量 统一
    • 比方，splice(2, 1, “red”, “green”) 会在地位 2 删除一个元素，而后从该地位开始向数组中插入 ”red” 和 ”green”。
    • splice_colors.splice(1, 2, “red”, “purple”); // 插入两个值，删除两个元素

留神：这种办法会扭转原始数组。

pop

该办法用于删除数组的最初一项，同时缩小数组的 length 值，返回被删除的项

unshift

let pop_arr = [1, 4, 5, 7, 3]

 let item_pop = pop_arr.pop();
console.log('item_pop', item_pop) // 3

该办法在数组结尾增加任意多个值，而后返回新的数组长度 

let unshift_arr = new Array();

let unshift_item = unshift_arr.unshift(1,2,34)
console.log('unshift_arr---------', unshift_arr) // 1,2,34
console.log('unshift_item 长度 ---------', unshift_item)  //  3

shift

该办法会删除数组的第一项并返回它删除的一项 

let shift_arr = [1, 4, 5, 7, 3];

let shift_item = shift_arr.shift();
console.log('shift_arr--------', shift_arr) // 4,57,3
console.log('shift_item---------', shift_item) //  1

push

该办法接管任意数量的参数，并将它们增加到数组开端，返回数组的最新长度 

let push_arr = [1, 4, 5, 7, 3]

let push_item = push_arr.push({demo:123})
console.log('push_item--------', push_item)  // 数组长度 为 6
console.log('push_arr--------', push_arr)

正文完
javascript
发表至： javascript
2021-07-30
 0
关于javascript:从输入URL到渲染的完整过程
关于javascript:TypeScript-之-Keyof-Type-Operator
关于javascript:JS性能优化-JS代码优化
关于javascript:event-loop原理宏微任务node和浏览器在实现loop时候的差别