内置对象Array-1

concat()

原文：MDN - concat()
功能：concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
语法：newArr = arr1.concat(arr2)
- newArr：新数组
- arr1：旧数组 1
- arr2：旧数组 2
返回值：新的 Array 实例。
代码：

const newArr = [1, 2, 3].concat(['a', 'b', 'c']);

// [1, 2, 3, 'a', 'b', 'c']

fill()

原文：MDN - fill()
功能：fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
语法：arr.fill(value, start, end)
- value：用来填充数组元素的值。
- start：起始索引，默认值为0。
- end：终止索引，默认值为 this.length。
返回值：修改后的数组。
代码：

let arr = [1, 2, 3, 4, 5];
arr = new Array(arr.length).fill(0);
// arr - [0, 0, 0, 0, 0];

filter()

原文：MDN - filter()
功能：filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
语法：arr.filter(callback)
- callback：用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：
  - element：数组中当前正在处理的元素
  - index：正在处理的元素在数组中的索引。
  - array：调用了 filter 的数组本身。
返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。
代码：

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

find()

原文：MDN - find()
功能：find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
语法：arr.find(callback)
- callback：在数组每一项上执行的函数，接收 3 个参数：
  - element：当前遍历到的元素。
  - index：当前遍历到的索引。
  - array：数组本身。
返回值：数组中第一个满足所提供测试函数的元素的值，否则返回 undefined。
代码：

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

function findCherries(fruit) {
    
     
  return fruit.name === 'cherries';
}

inventory.find(findCherries));
// { name: 'cherries', quantity: 5 }

findIndex()

原文：MDN - findIndex()
功能：findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
语法：arr.findIndex(callback)
- callback：在数组每一项上执行的函数，接收 3 个参数：
  - element：当前遍历到的元素。
  - index：当前遍历到的索引。
  - array：数组本身。
返回值：返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
代码：

var array1 = [5, 12, 8, 130, 44];

function isLargeNumber(element) {
    
    
  return element > 13;
}

array1.findIndex(isLargeNumber); // 3

forEach()

原文：MDN - forEach()
功能：forEach() 方法对数组的每个元素执行一次提供的函数。
语法：arr.forEach(callback)
- callback：为数组中每个元素执行的函数，该函数接收三个参数：
  - currentValue：数组中当前正在处理的元素
  - index：数组中正在处理的当前元素的索引。
  - array：forEach() 方法正在操作的数组。
返回值：undefined.
代码：

const items = ['item1', 'item2', 'item3'];
const copy = [];

// 使用 for 遍历
for (let i = 0; i < items.length; i++) {
    
    
  copy.push(items[i]);
}

// 使用 forEach 遍历
items.forEach(function(item){
    
    
  copy.push(item);
});

includes()

原文：MDN - includes()
功能：includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。
语法：arr.includes(valueToFind, fromIndex)
- searchValue：需要查找的元素值。
- formIndex：可选，开始查找的位置
返回值：返回一个布尔值 Boolean。
代码：

[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

indexOf()

原文：MDN - indexOf()
功能：indexOf() 方法返回调用 String 对象中第一次出现的指定值的索引。
语法：indexOf(searchValue, fromIndex)
- searchValue：查找的值
- formIndex：开始查找的位置
返回值：如果找到了，则返回第一次出现的索引；如果没找到，则返回 -1。
代码：

'I am jsliang'.indexOf('a', 4); // 9
[1, 3, 1, 4].indexOf(1, 1); // 2
'怪盗 jsliang'.indexOf('我'); // -1

扩展：如果需要查找到最后一次出现指定值的索引，可以使用 lastIndexOf()。

lastIndexOf()

原文：MDN - lastIndexOf()
功能：lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。
语法：lastIndexOf(searchValue, fromIndex)
- searchValue：查找的值
- formIndex：从该位置逆向查找
返回值：数组中最后一个元素的索引，如未找到返回 -1。
代码：

var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2); // 3

扩展：如果需要查找到第一次出现指定值的索引，可以使用 indexOf()。

join()

原文：MDN - join()
功能：join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串
语法：arr.join(separator)
- separator 是合并的形式。例如 '' 就是不以任何形式拼接成字符串：['hello', 'hi'].join('') -> 'hellohi'；例如 '-' 就是以 - 形式拼接成字符串：['hello', 'hi'].join('') -> 'hello-hi'
返回值：一个所有数组元素连接的字符串。
代码：

var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join();      // myVar1 的值变为 "Wind,Rain,Fire"
var myVar2 = a.join(', ');  // myVar2的值变为"Wind, Rain, Fire"
var myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
var myVar4 = a.join('');    // myVar4的值变为"WindRainFire"

map()

原文：MDN - map()
功能：map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
语法：map((item, index) => {})
- item：遍历的项
- index：该次遍历项的索引
返回值：一个新数组，每个元素都是回调函数的结果。
代码：

[1, 2, 3, 4].map(item => item * 2) // [2, 4, 6, 8]

[{
    
    
  name: 'ZZZ',
  age: 24,
}, {
    
    
  name: 'XXX',
  age: 124
}].map((item, index) => {
    
    
  return `${
      
      index} - ${
      
      item.name}`;
}) // ['0 - ZZZ', '1 - XXX']

reduce()

原文：MDN - reduce()
功能：reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
语法：arr.reduce((prev, next) => { return prev + next }
- prev：数组前一项的值
- next：数组后一项的值
- return：return 出来的值，会被当成下一次的 prev
返回值：函数累计处理的结果
代码：

[1, 2, 3, 4].reduce((prev, next) => {
    
    
  return prev + next;
}); // 10
['前端', 'pang', 'liang'].reduce((prev, next, index) => {
    
    
  return (index = 0 ? '-js' : '') + prev + 'js' + next;
}); // 前端-jspang-jsliang

concat()

fill()

filter()

find()

findIndex()

forEach()

includes()

indexOf()

lastIndexOf()

join()

map()

reduce()

猜你喜欢