javascript学习:数组方法

JS学习导图


判断

//判断参数是否是数组,返回布尔值
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]

JS学习导图

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值