判断
//判断参数是否是数组,返回布尔值
Array.isArray([1, 2, 3]) //true
//数组是否为空
arr.length === 0
//是否是数组的实例
arr instanceof Array
转换
数组转字符串
arr.toString()
String(arr)
Array.from()
将类数组或可迭代对象转成一个浅拷贝的数组实例
参数:
第一个参数:想要转换成数组的伪数组对象或可迭代对象
第一个参数:函数
//字符串
Array.from('foo'); // [ "f", "o", "o" ]
//set
const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set); // [ "foo", "bar", "baz" ]
//arguments
function f() {
return Array.from(arguments);
}
f(1, 2, 3); //[ 1, 2, 3 ]
//第二个参数:fn
Array.from([1, 2, 3], x => x + x); // [2, 4, 6]
Array.from(divs,(item) => {
item.style.backgroundColor = 'red'
return item
})
//数组合并去重
function combine(){
let arr = [].concat.apply([], arguments); //没有去重复的新数组
return Array.from(new Set(arr));
}
var m = [1, 2, 2], n = [2,3,3];
console.log(combine(m,n)); // [1, 2, 3]
console.log(Array.from({ length: 2 }, () => 'jack')) // ['jack', 'jack']
Array.from(new Array(26),(item,index) => index = index++) //[0,1,2,3,4]
Array.from(new Array(26),(item,index) => index = ++index) //[1.2.3.4.5]
数组连接成字符串arr.join()
将数组连接,返回字符串
参数:要连接的符号
const arr = [1,2,3,4,5]
let ret = arr.join('!') //1!2!3!4!5
let arr = [1]
console.log(arr.join('&')); //1,如果数组只有一个值,不会拼接,直接返回
截取arr.slice()
将数组的内容切片截取,返回新数组,不改变原始组
参数:
第一个参数是:索引开始的位置
第二个参数是:索引结束的位置,不包括自身,不写是到结束位置
let arr = [1,2,3,4,5]
let result = arr.slice(2) //从索引2开始,到后面全部,[3,4,5]
let result = arr.slice(2,4)//从索引2开始,到4结束,不包括4,[3,4]
查
值查找,获取索引
arr.indexOf()
查找值,返回该值的索引位置,没有找到返回-1,找到第一个就返回不再继续查找
参数:
第一个参数:要查找的值
第二个参数:开始的索引位置,如果为负值,表示倒数。
let arr = [1, 2, 3, 4, 10, 3, 11, 15]
let result1 = arr.indexOf(3) //2
let result2 = arr.indexOf(3, 3) //5
arr.lastIndexOf()
从右边开始查找,参数同上
let arr = [1, 2, 3, 4, 10, 11, 15, 10, 2, 2, 2]
let result = arr.lastIndexOf(10) //7
let arr = [1, 2, 3, 4, 10, 11, 15, 10, 2, 2, 2]
let result = arr.lastIndexOf(10, -5) //4
值查找,获取布尔值
arr.includes()
值查找,返回布尔值,找到返回true,无则返回false
参数:
第一个参数是:要查找的值
第二个参数是:开始的索引,不写是从0开始
let arr = [1,2,3,4,10,11,15]
let result = arr.includes(2)
console.log(result) //true
//实现该方法
function includes(arr,find){
for(let value of arr) if (value === find) return true
return false
}
条件查找,获取值
arr.find()
根据条件遍历查找值一个满足条件的值,返回该值,如果没有符合条件的值,返回undefined
参数:条件函数
函数第一个形参:数组元素
函数第二个形参:数组元素的索引
函数第三个形参:数组
let arr = [1,2,3,4,10,11,15]
let result1 = arr.find(item => item > 8) //10
let result2 = arr.find((item, index) => index === 3) //4
let lessons = [{name:'js'},{name:'css'}]
let result1 = lessons.find((item) => item.name ==='css') //{name:'css'}
console.log(lessons.includes({name:'css'})) //false
//实现该方法
function find(arr,callback){
for(let value of arr){
if(callback(value)) return value
}
return undefined
}
条件查找,获取索引
arr.findIndex()
根据条件遍历查找值,返回该值的索引,无则返回-1
参数:条件函数
let arr = [1,2,3,4,10,11,15]
let result = arr.findIndex(item => item > 10) //5
条件查找,获取布尔值
arr.some()
根据条件遍历查找一个满足条件的值,返回布尔值,只要有一个满足条件就返回true,否则返回false
参数:条件函数
let arr = [1,2,3,4,10,11,15]
let result = arr.some(item => item > 10) //true
let result = arr.some((item, index) => index === 10) //false
arr.every()
根据条件遍历查找全部,返回布尔值,全部满足就返回true,只要有一个不满足条件就返回false
参数:条件函数
let arr = [1,2,3,4,10,11,15]
let result = arr.every(item => item < 20) //全部小于20 true
增
let arr = ['xx','bb']
arr[arr.length] = 'cc'
arr[arr.length] = 'bb'
console.log(arr) // ["xx", "bb", "cc", "bb"]
arr.push()尾添加
在数组尾部添加,返回数组长度,会改变原数组
可接收数组,接收数组会变成二维数组
let arr = [1,2,5,19,55]
let result = arr.push(99,66),
console.log(result) //返回7
console.log(arr) //[1,2,5,19,55,99,66]
arr.unshift()头添加
在数组头部添加,返回数组长度,会改变原数组
let arr = [1,2,5,19,55]
let result = arr.push(99,66)
console.log(result) //返回7
console.log(arr) //[99,66,1,2,5,19,55]
arr.concat()合并添加
数组合并,返回新数组
参数:要合并的数组
let arr = [1,2,3]
let arr2 = [4,5,6]
let result = arr.concat(arr2) //把添加的数组放在数组后
console.log(result) //[1,2,3,4,5,6]
删
arr.pop()尾删除
在这里插入代码片
arr.shift()头删除
删除首位一个值,返回该值,会改变原数组
let arr = [1,2,5,19,55]
let result = arr.shift()
console.log(result) //返回1
console.log(arr) //[2,5,19,55]
arr.splice()删除添加插入
删除添加插入,接收多个参数,会改变原数组
参数:2-n个
第一个是:开始的索引,从0开始数
第二个是:删除的个数,从1开始数
第三个是:插入的值,可多个,不写第三个参数是只删除不添加
//这个方法好
let arr = [1,2,5,19,55]
let result = arr.splice(1,2,3,66) //从1开始删除,删除2个,插入3,66
console.log(result) //将删除的元素以新数组返回,[2,5]
console.log(arr) //[1,3,66,19,55]
其他删除
delete arr[1] //删除索引的值,该位为empty
arr.length = 3 //超过3的下标被删除
//清空
arr = [] //清空数组
arr.length = 0 //清空数组
arr.splice(0, arr.length) //清空数组
改
let arr = [1,2,3,4]
arr[2] = 6
arr[3] = true
console.log(arr) //[1,2,6,true]
过滤
arr.filter()
根据条件遍历查找全部,将满足条件的以新数组返回,不改变原数组
参数:条件函数
let arr = [1,2,3,4,10,11,15]
let result = arr.filter(item => item % 2 !== 0) //[1,3,11,15]
console.log(arr) //[1,2,3,4,10,11,15]
//也可以这样写:引用函数
let arr = [1,2,3,4,10,11,15]
function fn(n){return n >= 10 }
let result = arr.filter(fn) //[10,11,15]
//实现该方法
let arr = [1,2,3,4,10,11,15]
function filter(arr,except){
let newArr = []
for(let value of arr){
if(except.includes(value) === false){ //如果新数组没有改值,就添加到新数组
newArr.push(value)
}
}
return newArr
}
console.log(filter(arr, [2,3])) //[1, 4, 10, 11, 15]
//改良
let arr = [1,2,3,4,10,11,15]
function filter(arr,callback){
let newArr = []
for(let value of arr){
if(callback(value) === false){
newArr.push(value)
}
}
return newArr
}
console.log(filter(arr, (value) => value > 2)) //[1, 2] //大于2的值过滤掉
//根据索引查找值
const list = [
{ id: 1, title: '吃饭', completed: false },
{ id: 2, title: '睡觉', completed: true },
{ id: 3, title: '写代码', completed: false },
]
let index = 1
//直接操作
console.log(list[index].completed)
list[index].completed = !list[index].completed
let arr = list.filter((item, i) => i === index)
arr[0].completed = !arr[0].completed
填充替换
arr.fill()
填充替换,返回新数组,会改变旧数组
参数:
第一个参数是:要填充的值
第二个参数是:开始的索引
第三个参数是:结束的索引,第三不写默认填充后面的全部。
let arr = [1,2,3,4,5,6]
let result = arr.fill(10,2,4) //从2开始,到4结束
console.log(result) //[1,2,10,10,5,6]
Array(5).fill('x') //[x,x,x,x,x]
复制替换
arr.copyWithin()
复制数组的一部分到同一数组中的另一个位置,返回改变过的数组,改变原数组,不会改变数组的长度
三个参数:到哪个位置
参数:
第一个参数是:索引,从什么索引位置开始替换数据
第二个参数是:从什么索引位置开始读取数据,默认为0
第三个参数是:结束的索引,不写默认填充后面的全部
let arr = [1,2,3,4,5]
let ret = arr.copyWithin(1,4) //替换索引1的数字,用索引4的数字
console.log(ret) //[1, 5, 3, 4, 5]
console.log(arr) //[1, 5, 3, 4, 5]
let ret = arr.copyWithin(1,3,4) //替换索引1的数字,用索引3的数字,到4结束
console.log(ret) //[1, 4, 3, 4, 5]
let arr = [1,2,3,4,5,6]
console.log(arr.copyWithin(3,1,2)) //[1,2,3,2,3,6]
计算累计
arr.reduce()
累加,两个值的对比操作
参数:
第一个参数是:函数,函数接收两个参数
第一个是prev,表示之前的值,默认是第一个值
第二个是curr,表示当前的值
第三个是index,表示当前值的索引
第四个是arr,表示该数组
第二个参数是:初始值(可选,如果写上初始值,prev则代表该值)
//计算总数,和比较大小都可以使用该方法
let arr = [1,2,3,4]
let result1 = arr.reduce((p,c) => p + c) //10
let result2 = arr.reduce((p,c) => p + c, 10) //20
//获取最大值
let arr = [1,2,3,5,1]
function arrMax(arr){
//前后对比,如果大于就返回前值,否则返回后值(谁的苹果大)
retrun arr.reduce((p,c) => p > c ? p : c)
}
arrMax(arr) //5
//将二维数组转化为一维
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
( acc, cur ) => acc.concat(cur),
[]
);
//[0, 1, 2, 3, 4, 5]
//实现一:统计数组中某数字出现的次数
let arr = [1,2,3,1,1]
function getMax(arr,item){
retrun arr.reduce((total,cur) => {
total += item === cur ? 1 : 0 //初始值 + 1 === 2? 如果等于就加1,不等于加0
return total
},0)
}
getMax(arr,1) //3
//实现二:统计数组中所有的值出现的次数
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce((allNames, name)=>{
if (name in allNames) { //如果存在,name就+1
allNames[name]++;
}
else {
allNames[name] = 1; //如果不存在,name就=1
}
return allNames;
}, {});
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
//计算数组对象中的和(购物车计算总和)
let arr = [{name: 'x',price: 8000,},{name: 'b',price: 7000,},]
console.log(arr.reduce((p, c) => (p += c['price']), 0)) //15000
//获取超过5000元的商品名字
let arr = [{name: 'x',price: 8000,},{name: 'b',price: 7000,},{name: 'c',price: 3000,}]
function getNameByprice(goods,price){
return goods.reduce((arr,cur) => {
if(cur.price > price) arr.push(cur)
return arr
},[]).map(item => item.name)
}
getNameByprice(arr,5000) //["x", "b"]
//去重商品
let arr = [{name: 'x',price: 8000,},{name: 'x',price: 7000,},{name: 'c',price: 3000}]
function filterGoods(goods){
return goods.reduce((arr,cur) => {
let find = arr.find(v => v.name === cur.name)
if(!find) arr.push(cur)
return arr
},[])
}
filterGoods(arr)
//按数组对象的属性分类,放到不同的数组
var goods = [
{ title: '手机', price: 5800, type:'electronic'},
{ title: '电脑', price: 8800, type:'electronic'},
{ title: '辣条', price: 18, type:'foods' }
{ title: '泡面', price: 18, type:'foods'}
];
function groupBy(goods, property) {
return goods.reduce((acc, obj) => {
let key = obj[property]; //让对象的key === key
if (!acc[key]) { //如果acc的属性不存在,就让该属性=[]
acc[key] = [];
}
acc[key].push(obj); //各自放到自己的数组中
return acc;
}, {});
}
console.log(groupBy(goods, 'type'))
reduceRight()
从右计算
const arr = [[0, 1], [2, 3], [4, 5]].reduceRight(
(pre, cur) => pre.concat(cur)
);
console.log(arr); //[4, 5, 2, 3, 0, 1]
排序
arr.reverse()
颠倒数组的顺序,改变原数组
let arr = [1,2,3,4,10]
let result = arr.reverse()
console.log(result) //[10,4,3,2,1]
arr.sort()
默认按照编码排序,改变原数组
let arr = [1,2,55,4,10,6,18]
let result = arr.sort((small,big) => small - big) 从小到大排序
let result2 = arr.sort((small,big) => big - small ) 从大到小排序
console.log(result) //[1,2,4,6,10,18,55]
console.log(result2) //[55,18,10,6,4,2,1]
注意:改变参数和return的位置,都会改变排序
const number = [2,3,1]
let ret = number.sort() //不写默认从小到大
console.log(ret) //[1,2,3]
//商品排序
let cart = [
{name:'phone',price:8000},
{name:'ipad',price:2000}
]
cart = cart.sort((a,b) => a.price - b.price )
console.table(cart)
//实现该方法
function sort(arr,callback){
for(let n in arr){
for(let m in arr){
if(callback(arr[n], arr[m]) < 0 ){
const temp = arr[n]
arr[n] = arr[m]
arr[m] = temp
}
}
}
return arr
}
console.table(sort(arr,(a,b) => b - a))
递归合并
arr.flat()
按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
注意:该方法会移除数组中的空项
参数:提取嵌套数组的结构深度,默认值为1,写Infinity是无限遍历
var arr1 = [1, 2, [3, 4]]; //1层
arr1.flat(); //[1, 2, 3, 4]
等同于 arr.reduce((acc, val) => acc.concat(val), []);
var arr2 = [1, 2, [3, 4, [5, 6]]]; //2层
arr2.flat(); //[1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]]; //2层
arr3.flat(2); //[1, 2, 3, 4, 5, 6]
//使用 Infinity,可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
//简单实现该方法
var arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
function fn(arr){
let newArr = []
for (let item of arr) {
// 遍历每一项是否是数组
if(Array.isArray(item)){
newArr.push(...fn(item))
}else{
newArr.push(item)
}
}
return newArr
}
console.log(fn(arr)); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]