JavaScript数组Array常用方法-蒲公英云

常用内置方法

fill()

将一个固定值替换数组的元素，并返回一个新的数组，不改变原数组。

语法：array.fill(value, start, end)

在这里插入图片描述

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.fill("JS", 2, 4);
console.log(a)  // ["Banana", "Orange", "JS", "JS"]

find()

检测数组中满足指定条件的第一个元素：当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数；如果没有符合条件的元素返回 undefined。
注意：不会对空数组进行检测。

语法：array.find(function(currentValue, index, arr),thisValue)

在这里插入图片描述

var ages = [3, 10, 18, 20];
var age = ages.find(function(item) { 
    return item >= 18;
})
console.log(age)  // 18

filter()

筛选符合条件的所有元素，并返回一个新的数组，不改变原数组。
注意：不会对空数组进行检测。

语法：array.filter(function(currentValue,index,arr), thisValue)

在这里插入图片描述

var ages = [32, 33, 16, 40];
ages = ages.filter(function(item) { 
    return item >= 18;
})
console.log(ages)  // [32, 33, 40]

forEach()

循环遍历，调用数组的每个元素，并将元素传递给回调函数，总是返回undefined。
注意：不会对空数组进行检测。

语法：array.forEach(function(currentValue, index, arr), thisValue)

在这里插入图片描述

var array = ['a', 'b', 'c'];
array.forEach(function(item) { 
    console.log(item);
});
// 输出结果:
// a
// b
// c

push()

添加新元素到数组末尾，会改变原数组。
注意：此方法改变数组的长度。

语法：array.push(item1, item2, …, itemX)
参数：item1, item2, …, itemX
描述：必需。要添加到数组的元素。

var array = ['Hello']
array.push('JavaScript')
console.log(array)  // ['Hello', 'JavaScript']

pop()

删除数组的最后一个元素并返回删除的元素，会改变原数组。
注意：此方法改变数组的长度。

语法：array.pop()

var numbers = [1, 2, 3, 4];
var lastNum = numbers.pop();
console.log(numbers)  // [1, 2, 3]
console.log(lastNum)  // 4

unshift()

添加新元素到数组开头，会改变原数组。

var array = [‘Hello’]
array.unshift(‘JavaScript’)
console.log(array) // [‘JavaScript’， ‘Hello’]

shift()

删除数组的第一个元素并返回删除的元素，会改变原数组。
注意：此方法改变数组的长度。

语法：array.shift()

var numbers = [1, 2, 3, 4];
var firstNum = numbers.shift();
console.log(numbers)  // [2, 3, 4]
console.log(firstNum)  // 1

concat()

合并数组，不会改变原数组，返回一个新的数组。

语法：array1.concat(array2,array3,…,arrayX)
参数：array2, array3, …, arrayX
描述：必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
console.log(children) // ["Cecilie", "Lone", "Emil", "Tobias", "Linus", "Robin"]

join()

把数组中的所有元素转换为一个字符串，返回一个字符串。

语法：array.join(separator)
参数：separator
描述：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join("|");
console.log(energy)  // Banana|Orange|Apple|Mango

isArray()

判断一个对象是否为数组，对象是数组返回 true，否则返回 false。

语法：Array.isArray(obj)
参数：obj
描述：必需，要判断的对象。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var isarray = Array.isArray(fruits);
console.log(isarray)  // true

includes()

判断数组是否包含一个指定的值，如果是返回 true，否则false。

语法：arr.includes(searchElement, fromIndex)

在这里插入图片描述

var array = ['hello', 'javascript'];
var bool = array.includes('javascript');
console.log(bool)  // true

indexOf()

查找数组中指定元素第一次出现的索引位置：如果找到一个指定元素 item，则返回 item 的第一次出现的位置；如果没找到指定元素则返回 -1。开始位置的索引为 0。

语法：array.indexOf(item,start)

在这里插入图片描述

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var index = fruits.indexOf("Apple");
console.log(index)  // 2

lastIndexOf()

查找数组中指定元素最后一次出现的索引位置：该方法将从尾到头地检索数组中指定元素 item，如果找到一个指定元素 item，则返回 item 从尾到头检索的第一次出现的位置；如果没找到指定元素则返回 -1。开始位置的索引为 0。

语法：array.lastIndexOf(item,start)

在这里插入图片描述

var fruits = ["Banana", "Apple", "Orange", "Apple", "Mango"];
var index = fruits.lastIndexOf("Apple");
console.log(index)  // 3

map()

通过指定函数处理数组的每个元素，并返回处理后的数组，不改变原数组。
注意：不会对空数组进行检测。

语法：array.map(function(currentValue,index,arr), thisValue)

在这里插入图片描述

var numbers = [4, 9, 16, 25];
numbers = numbers.map(function(item) { 
    return item + 1
})
console.log(numbers)  // [5, 10, 17, 26]

every()

检测数组中的所有元素是否都符合指定条件：如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测；如果所有元素都满足条件，则返回 true。
注意：不会对空数组进行检测。

语法：array.every(function(currentValue,index,arr), thisValue)

在这里插入图片描述

var ages = [32, 33, 16, 40];
var bool = ages.every(function(item) { 
    return item >= 18;
})
console.log(bool)  // false

some()

检测数组中的元素是否满足指定条件：如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测；如果没有满足条件的元素，则返回false。
注意：不会对空数组进行检测。

语法：array.some(function(currentValue,index,arr),thisValue)

在这里插入图片描述

var ages = [3, 10, 18, 20];
var bool = ages.some(function(item) { 
    return item >= 18;
})
console.log(bool)  // true

reduce()

数组元素求和，接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
注意：不会对空数组进行检测。

语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

在这里插入图片描述

var numbers = [65, 44, 12, 4];
var total = numbers.reduce(function(total, num) { 
    return total + num;
}, 0)
// 简写：var total = numbers.reduce((total, num) => total + num, 0)
console.log(total)

reverse()

数组倒序，会改变原数组。

语法：array.reverse()

var numbers = [1, 2, 3, 4]
numbers.reverse()
console.log(numbers)  // [4, 3, 2, 1]

sort()

对数组的元素进行排序，默认排序顺序为按字母升序。使用数字排序，必须通过一个函数作为参数来调用。会改变原数组。

语法：array.sort(sortfunction)

在这里插入图片描述

var numbers = [40,100,1,5,25,10];
numbers.sort(function(a, b){ return a-b});
console.log(numbers)  // [1, 5, 10, 25, 40, 100]

slice()

从已有的数组中返回选定的元素，返回一个新的数组，不会改变原始数组。

语法：array.slice(start, end)

在这里插入图片描述

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);
console.log(citrus)  // ["Orange", "Lemon"]

splice()

添加或删除数组中的元素，会改变原数组。

语法：array.splice(index,howmany,item1,…,itemX)

在这里插入图片描述

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var delArray = fruits.splice(2, 1, "Lemon", "Kiwi");
console.log(delArray)  // ["Apple"]
console.log(fruits)  // ["Banana", "Orange", "Lemon", "Kiwi", "Mango"]