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学习导图