javascript 数组基础方法、循环方法、数组扁平化、数组去重

1.join方法 用特定的字符链接数组的每一项，返回一个字符串

let arrJoin = [1, 2, 3, 4, 5] 
 console.log(arrJoin.join('-'));
 //1-2-3-4-5

2.split方法 用特定的字符分割字符串的每一项，返回一个数组

let strSplit = '12345'
console.log(strSplit.split(''));
// [ '1', '2', '3', '4', '5' ]

3.push方法 在数组的最后增加元素

// 返回值是新数组的长度！！！
// 修改了原数组
let arrPush = [1, 2, 3, 4, 5]
console.log(arrPush.push(2)); 
//6
console.log(arrPush); 
//[ 1, 2, 3, 4, 5, 2 ]

4.pop方法 删除数组最后一个元素

// 返回值是这个元素
// 修改了原数组
let arrPop = [1, 2, 3, 4, 5]
console.log(arrPop.pop()); 
//5
console.log(arrPop); 
//[ 1, 2, 3, 4 ]

5.unshift方法 添加一个或多个元素到数组最前面

// 返回值是添加后的数组长度
let arrUnshift = [1, 2, 3, 4, 5]
console.log(arrUnshift.unshift(0, 2));
//7
console.log(arrUnshift);
//[0,2,1, 2, 3, 4, 5]

6.shift 删除数组最前面的元素，返回值是这个元素

// 修改了原数组
let arrShift = [1, 2, 3, 4, 5]
console.log(arrShift.shift()) 
//1;
console.log(arrShift) 
//[2,3,4,5];

7.reverse 翻转数组

let arrReverse = [1, 2, 3, 4, 5]
console.log(arrReverse.reverse());
// [ 5, 4, 3, 2, 1 ]

8.sort 排序 写一个回调函数 接收两个参数

// 返回 a-b从小到大排序
// 返回 b-a从大到小排序
let arrSort = [2, 4, 3, 1]
console.log(arrSort.sort((a, b) => {
    // return a - b
    //[1,2,3,4]
    return b - a
    //[4,3,2,1]
}));

9.concat 拼接 把两个数组的每一项拿出来拼接到一起

// 原数组不受影响
let arrConcat = [1, 2, 3]
let arrConcat2 = [4, 5, 6]
console.log(arrConcat.concat(arrConcat2));
//[ 1, 2, 3, 4, 5, 6 ]
console.log(arrConcat) 
//[ 1, 2, 3 ]
console.log(arrConcat2); 
//[ 4, 5, 6 ]

10.slice 截取

let arrSlice = [1, 2, 3, 4, 5]
console.log(arrSlice.slice(0, 2)) 
//从下标0开始，截取两个  返回一个新数组 [1,2];
console.log(arrSlice.slice(1)) 
//从下标1开始，截取后面的全部  返回一个新数组 [2,3,4,5];
console.log(arrSlice.slice()); 
//截取全部 返回一个新数组[1,2,3,4,5]

10.1 使用slice完成深拷贝操作

let arrSlice = [1, 2, 3, 4, 5]
let arrSlice2 = arrSlice.slice()
console.log(arrSlice);
//[1, 2, 3, 4, 5]
console.log(arrSlice2);
//[1, 2, 3, 4, 5]
console.log(arrSlice2 === arrSlice);
//false

11.splice 删除或替换或增加元素

let arrSplice = [1, 2, 3, 4, 5]
// 从下标0开始，删除一个
arrSplice.splice(0, 1)
console.log(arrSplice);//[ 2, 3, 4, 5 ]
// 从下标0开始 删除1个，替换1个
arrSplice.splice(0, 1, 1) 
console.log(arrSplice);//[1,3,4,5]
// 从下标1开始 删除0个 添加一个  下标1和后面的全部后移
arrSplice.splice(1, 0, 2)
console.log(arrSplice);//[1,2,3,4,5]

12.indexOf 查找元素在数组中 第一次 出现的位置，没有则返回-1

let arrIndexOf = [1, 2, 3, 4, 5]
console.log(arrIndexOf.indexOf(1));
// 0
//判断元素在数组中是否存在 
if (arrIndexOf.indexOf(6) === -1) {
    console.log('元素不存在')
} else {
    console.log('元素存在');
}
//元素不存在

13.map 映射 返回一个对原数组进行 加工 后的新数组

// 长度不变
// 不修改原数组
let arrMap = [1, 2, 3, 4, 5]
let arrMap2 = arrMap.map((item, index, arr) => {
    if (item == 2) {
        return item * 2
    }
    return item
    })
console.log(arrMap2); 
//[ 1, 4, 3, 4, 5 ]

14.filter 过滤 返回一个满足 过滤 条件的新数组

// 长度可以变化
// 不修改原数组
let arrFilter = [1, 2, 3, 4, 5]
    // 过滤偶数项
let arrFilter2 = arrFilter.filter((item, index) => {
    return item % 2 === 0

})
console.log(arrFilter2);
//[2,4]
//过滤出布尔类型为true的项
let arrFilter3 = [1, '', false, 4, 5]
let arrFliter4 = arrFilter3.filter(item => {
    return item
})
console.log(arrFliter4);
//[1,4,5]

15.some 一真则真

// 返回值是布尔值
let someArr = [
    { name: 'zs', age: 17 },
    { name: 'ls', age: 19 },
    { name: 'ww', age: 20 }
]

console.log(someArr.some(item => {
    return item.age % 2 === 0
}));
//true

16.every 一假则假

// 返回值是布尔值
let arrEvery = [
    { name: 'zs', age: 18 },
    { name: 'ls', age: 19 },
    { name: 'ww', age: 20 }
]
console.log(arrEvery.every(item => {
    return item % 2 === 0
}));
。。false

17.find 返回满足条件的第一项

let arrFind = [0, 1, 2, 3, 4]
console.log(arrFind.find(item => {
    return item
}));
//1

18.findIndex 返回满足条件的第一项的下标

let arrFindIndex = [1, 2, 3, 4, 5]
console.log(arrFindIndex.findIndex(item => {
    return item % 2 === 0
}));
//1

19.reduce 求和计算

// pre 不传值默认从数组第一位开始
// 第二个pre是第一次相加的结果
// 第二个next是下一个没加的值
let arrReduce = [1, 2, 3, 4, 5]
console.log(arrReduce.reduce((pre, next) => {
    return pre + next
}, 0));
//末尾传的 0 当作pre的初始值
// 15

20.reduce + concat 数组扁平化

let arrReduce2 = [
    [1, 2],
    [3, 4],
    [5, 6]
]
console.log(arrReduce2.reduce((pre, next) => {
    return pre.concat(next)
}));
//[ 1, 2, 3, 4, 5, 6 ]

21.计算对象数组的值

// 对象数组计算
let arrObj = [
    { price: 10, count: 2 },
    { price: 20, count: 2 },
    { price: 30, count: 2 }
]
console.log(arrObj.reduce((pre, next) => {
    return pre + next.price * next.count
}, 0))
//120

22.计算数组的每一项在数组中出现的次数

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let countedNames = names.reduce((allNames, name) => {
    // console.log(allNames, '| ' + name);
    if (name in allNames) {
        allNames[name]++;
    } else {
        allNames[name] = 1;
    }
    return allNames;
}, {});
console.log(countedNames);
//{ Alice: 2, Bob: 1, Tiff: 1, Bruce: 1 }

23.数组扁平化
23.1数组扁平化 递归实现

let arrBph = [
    [1, 2],
    [3, 4],
    [5, 6, [7, 8, [9, 10]]]
]

function flatten(arr) {
    let result = []
    if (!Array.isArray(arr)) {
        result.push(arr)
    } else {[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]
        for (let i = 0; i < arr.length; i++) {
            result = result.concat(flatten(arr[i]))
        };
    }
    return result
}
console.log(flatten(arrBph));
//[1,2,3,4,5,6,7,8,9,10]

23.2reduce +concat进阶版(多维)

let arrBph2 = [1, 2, [3, 4, [5, 6]]]

function flatten2(arrBph2) {
    return arrBph2.reduce((pre, next) => {
        return pre.concat(Array.isArray(next) ? flatten2(next) : next)
    }, [])
}
console.log(flatten2(arrBph2));
//[1,2,3,4,5,6]

23.3拓展运算符 只支持一层

let arrBph3 = [1, 2, [3, 4, [5, 6]]]
console.log([].concat(...arrBph3));
//[1,2,3,4,5,6]

23.4 flat方法 自定义扁平化层数

let arrBph4 = [1, 2, [3, 4, [5, 6]]]
console.log(arrBph4.flat(1));//1层
console.log(arrBph4.flat(2));//2层
console.log(arrBph4.flat(Infinity));//无限层

24.数组去重
24.1 Array.from + new Set

let arrQc = [1, 1, 2, 2, 3, 3]
console.log([...new Set(arrQc)]);
//[1,2,3]

24.2 扩展运算符 + new Set

let arrQc = [1, 1, 2, 2, 3, 3]
console.log(Array.from(new Set(arrQc)));
//[1,2,3]

24.3indexOf

let arrQc2 = [1, 1, 2, 2, 3, 3]

function QuChong(arr) {
    let newArr = []
    for (let i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i])
        }
    };
    return newArr
}
console.log(QuChong(arrQc2));
//[1,2,3]

24.4 双层for循环去重

let arrQc3 = [1, 1, 2, 2, 3, 3, 4]

function QuChong2(arr) {
    for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[i] === arr[j]) {
                arr.splice(j, 1)
            }
        };
    };
    return arr
}
console.log(QuChong2(arrQc3));
//[1,2,3,4]