常用数组方法一 Array.join()
这个方法可以将数组中的元素连接成一个字符串,它的第一个形参是用来写分隔符的。
let fruits = ['Banana','Apple','Mango','Orange']
console.log(fruits.join('|'))
// 将会得到
// 'Banana'|'Apple'|'Mango'|'Orange'
常用数组方法二 Array.push()
这个方法的作用是将新元素追加到数组的最后一个位置中
let fruits = ['Banana','Apple','Mango','Orange']
let newFruits = fruits.push('Kiwi')
console.log(newFruits)
// 将会的到
// ['Banana','Apple','Mango','Orange','Kiwi']
常用数组方法三 Array.splice()
这个方法可以做到根据数组的下标在数组中的任意位置添加或者删除元素 形参1代表根据数组的下标,从第几个元素开始添加或删除。
形参2代表添加或删除几个元素
剩余的形参写想要添加的元素,如果不写第三个形参splice方法默认是删除方法。
// 删除
let fruits = ['Banana','Orange','Apple','Mango']
let newFruits = fruits.splice(0,1)
console.log(newFruits)
// 将会得到
// ['Orange','Apple','Mango']
// 添加
let fruits = ['Banana','Orange','Apple','Mango']
let newFruits = fruits.splice(5,1,'Kiwi')
console.log(newFruits)
// 将会得到
// ['Banana','Orange','Apple','Mango','Kiwi']
常用数组方法四 Array.slice()
这个方法的第一个形参是起始位置(start)根据数组下标裁切出一个新的数组。 第二个形参是结束位置(end)但!又不包括这个end下标元素
// 当只有一个形参时
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]
let newFruits = fruits.slice(1)
console.log(newFruits)
// 将会得到
// ["Orange", "Lemon", "Apple", "Mango"]
// 当有两个形参时
let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]
let newFruits = fruits.slice(1,3)
console.log(newFruits)
// 将会得到
// ["Orange", "Lemon"]
常用数组方法五 Array.forEach()
forEach() 该数组方法接收三个形参,第一个形参为数组中的每一项;
第二个形参为数组中每一项的索引下标;
第三个形参为数组本身。
// 声明一个变量用于展示
let txt = ''
let numbers = [45, 4, 9, 16, 25]
numbers.forEach(item = >{
txt = txt + item + '</br>'
})
console.log(txt)
// 将会得到
// 45
// 4
// 9
// 16
// 25
// 另外的两个形参不常用。
常用数组方法六 Array.map()
能用forEach()做到的,map()同样可以。反过来也是如此。
map()会分配内存空间存储新数组并返回,forEach()不会返回数据。
forEach()允许callback更改原始数组的元素。map()返回新的数组。
而且forEach没有返回值(返回值是undefined)所以它不支持链式编程(就是 . 什么什么)
而且forEach的执行速度比map慢70%。
let arr = [{label:'男',value:1},{label:'女',value:0}]
// 如果使用forEach来取出label放到一个新的数组中,需要:
let newArr = []
arr.forEach(item=>{
let label = item.label
newArr.push(label)
})
// 因为 forEach 内部没办法return(会return出undefined)所以就只能声明空数组再遍历push,所以代码很多很麻烦。
// 但如果使用map方法就会很简单。
let arr = [{label:'男',value:1},{label:'女',value:0}]
let newArr = arr.map(item=>item.label)
// 因为map()方法会分配内存空间存储新数组并返回,所以可以很简单的写出这段代码。
常用数组方法七 Array.filter()
filter() 方法会创建一个新的数组,新数组中的元素是通过filter方法检查后再指定数组中符合条件的所有元素并且它不会改变原始数组。
它和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。
注意filter() 不会对空数组进行检测。
例如,在一个Array中,删掉偶数,只保留奇数,可以这么写
let arr = [1, 2, 4, 5, 6, 9, 10, 15]
let newArr = arr.filter( item => return item % 2 !== 0)
console.log(newArr) // [1, 5, 9, 15]
常用数组方法八 Array.reduce()
reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减(递增),最终为一个值。
reduce() 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。
语法:
arr.reduce(callback,[initialValue])
// callback 是回调函数的意思;initialValue 的意思是提供的初始值
callback (执行数组中每个值的函数,包含四个参数)
- previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
- currentValue (数组中当前被处理的元素)
- index (当前元素在数组中的索引)
- array (调用 reduce 的数组)
- initialValue (作为第一次调用 callback 的第一个参数。)
简单的应用:
let items = [10, 120, 1000]
// 回调函数
let reducer = function add(sumSoFar, item) {
return sumSoFar + item
}
let total = items.reduce(reducer, 0)
console.log(total) // 1130
reduce函数的返回结果类型和传入的初始值相同,上个实例中初始值为number类型,同理,初始值也可为object类型。
例子2
var items = [10, 120, 1000];
// 回调函数
var reducer = function add(sumSoFar, item) {
sumSoFar.sum = sumSoFar.sum + item;
return sumSoFar;
};
// do the job
var total = items.reduce(reducer, {sum: 0});
console.log(total); // {sum:1130}
例子3
某同学的期末成绩如下表示:
var result = [
{
subject: 'math',
score: 88
},
{
subject: 'chinese',
score: 95
},
{
subject: 'english',
score: 80
}
]
如何求该同学的平均成绩?
// val代表第一次的初始值和以后的当前值,item代表数组中每一项
let sum = result.reduce ( (val,item) => {
return item.score + val
},0)
let pj = sum / 3
console.log( pj ) // 88
常用数组方法九 Array.every()
every() 方法检查所有数组值是否通过测试。返回布尔值 true 或 false
该实例检测数组中元素是否大于18,有一个不是就返回false
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);
function myFunction (value, index, array) {
return value > 18; // false
}
常用数组方法十 Array.some()
some() 方法检查某些数组值是否通过了测试。有一个是就返回true
该方法检测出某些值大于18所以返回true
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);
function myFunction (value, index, array) {
return value > 18;
}
常用数组方法十一 Array.indexOf()
indexOf() 方法在数组中搜索元素值并返回其位置。第一个项目的位置是 0,第二个项目的位置是 1,以此类推。
语法: array.indexOf(item, start)
参数1:代表数组中的每一项
参数2:代表(可选)从哪里开始搜索(用数组项目的下标来表示)。负值将从结尾开始的给定位置开始,并搜索到结尾。
简单例子: 检索数组中的项目 "Apple":
var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
indexOf() 方法可返回数组中某个指定的元素位置。
该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。 如果在数组中没找到指定元素则返回 -1。
提示:
- 如果未找到项目,Array.indexOf() 返回 -1。
- 如果项目多次出现,则返回第一次出现的位置。
- 如果想查找字符串最后出现的位置那么可以使用
lastIndexOf()方法
常用数组方法十二 Array.find()
find()方法返回通过测试函数的第一个数组元素的值。
实例: 这个例子查找(返回)大于 18 的第一个元素的值:
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
return value > 18;
// 所以最终大于 18 的第一个值是:25
}
常用数组方法十三 Array.pop()
pop() 方法从数组中删除最后一个元素:
实例:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop(); // 从 fruits 删除最后一个元素("Mango")
pop() 方法返回“被弹出”的值:
实例:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop(); // x 的值是 "Mango"
常用数组方法十四 Array.shift()
shift() 方法会删除首个数组元素,并把所有其他元素“位移”到更低的索引。
实例:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift(); // 从 fruits 删除第一个元素 "Banana"
shift() 方法返回被“位移出”的字符串:
实例:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift(); // 返回 "Banana"
常用数组方法十五 Array.unshift()
unshift() 方法(在开头)向数组添加新元素,并“反向位移”旧元素:
实例:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon"); // 向 fruits 添加新元素 "Lemon"
unshift() 方法返回新数组的长度。
实例:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon"); // 返回 5