Js学习笔记4-数组

数组总结

数组的类型相关

方法	描述	备注
Array.isArray()	判断是否为数组
toString()	将数组转换为字符串
Array.from(arrayLike)	将伪数组转化为真数组
Array.of(value1, value2, value3)	创建数组：将一系列值转换成数组

注意，获取数组的长度是用length属性，不是方法。关于 length属性，详见上一篇文章。

数组元素的添加和删除

方法	描述	备注
push()	向数组的最后面插入一个或多个元素，返回结果为新数组的长度	会改变原数组
pop()	删除数组中的最后一个元素，返回结果为被删除的元素	会改变原数组
unshift()	在数组最前面插入一个或多个元素，返回结果为新数组的长度	会改变原数组
shift()	删除数组中的第一个元素，返回结果为被删除的元素	会改变原数组

slice()	从数组中提取指定的一个或多个元素，返回结果为新的数组	原数组.slice(开始index，结束index)
splice()	从数组中删除指定的一个或多个元素，返回结果为被删除元素组成的新数组	原数组.splice(起始索引index, 需要删除的个数, 新的元素1, 新的元素2…)

fill()	填充数组：用固定的值填充数组，返回结果为新的数组	不会改变原数组，数组.fill(固定值,startIndex,endIndex)

数组的合并和拆分

方法	描述	备注
concat()	合并数组：连接两个或多个数组，返回结果为新的数组	不会改变原数组
join()	将数组转换为字符串，返回结果为转换后的字符串	不会改变原数组
split()	将字符串按照指定的分隔符，组装为数组	不会改变原字符串

注意，split()是字符串的方法，不是数组的方法。

数组排序

方法	描述	备注
reverse()	反转数组，返回结果为反转后的数组	会改变原数组
sort()	对数组的元素,默认按照Unicode 编码，从小到大进行排序	会改变原数组

查找数组的元素

方法	描述	备注
indexOf(value)	从前往后索引，检索一个数组中是否含有指定的元素
lastIndexOf(value)	从后往前索引，检索一个数组中是否含有指定的元素
includes(item)	数组中是否包含指定的内容，返回true or false	数组.includes(元素，开始查找位置)
find(function())	找出第一个满足「指定条件返回 true」的元素
findIndex(function())	找出第一个满足「指定条件返回 true」的元素的 index
every()	确保数组中的每个元素都满足「指定条件返回 true」，则停止遍历，此方法才返回 true	全真才为真。要求每一项都返回 true，最终的结果才返回 true
some()	数组中只要有一个元素满足「指定条件返回 true」，则停止遍历，此方法就返回 true	一真即真。只要有一项返回 true，最终的结果就返回 true

遍历数组

方法	描述	备注
for 循环	这个大家都懂
forEach()	和 for 循环类似，但需要兼容 IE8 以上	forEach() 没有返回值。也就是说，它的返回值是 undefined
map()	对原数组中的每一项进行加工，将组成新的数组	不会改变原数组
filter()	过滤数组：返回结果是 true 的项，将组成新的数组，返回结果为新的数组	不会改变原数组
reduce	接收一个函数作为累加器，返回值是回调函数累计处理的结果

重点解析

sort()

首先，sort方法会改变原来的数组，其次，sort方法不带参数时，表示按照Unicode编码进行从小到大的排序，如果数组中是数字，不带参数排序不会得到理想的结果，所以我们需要在sort()函数的参数中制定排序的规则，具体如下：

数字按照从小到大排序

基础版：

let arr = [5, 2, 11, 3, 4, 1];

// 自定义排序规则
let result = arr.sort(function (a, b) {
    return a - b; // 升序排列
    // return b - a; // 降序排列
});

console.log('arr =' + JSON.stringify(arr));
console.log('result =' + JSON.stringify(result));

ES6箭头函数版：

let arr = [5, 2, 11, 3, 4, 1];

// 自定义排序规则：升序排列
let result = arr.sort((a, b) => a - b);

console.log('arr =' + JSON.stringify(arr));
console.log('result =' + JSON.stringify(result));

数组的遍历

forEach()

let myArr = ['王一', '王二', '王三'];

myArr.forEach((item, index, arr) => {
    console.log('item:' + item);
    console.log('index:' + index);
    console.log('arr:' + JSON.stringify(arr));
    console.log('----------');
});
// item是元素，index是下标，arr是数组元素

forEach中修改整个元素对象时，无法改变原数组，如果改变原数组中某个对象的某个属性时，可以改变原数组

et objArr = [
    { name: '千古壹号', age: 20 },
    { name: '许嵩', age: 30 },
];

objArr.forEach((item) => {
    item = {
        name: '邓紫棋',
        age: '29',
    };
});
// 不会改变
objArr.forEach((item) => {
    item.name = '邓紫棋';
});
// 会改变
```  

forEach可以通过参数2和参数3改变原数组

```js
let numArr = [1, 2, 3];

numArr.forEach((item, index, arr) => {
    arr[index] = arr[index] * 2;
});
console.log(JSON.stringify(numArr)); // 打印结果：[2,4,6]

for of

let arr1 = [2, 6, 8, 5];

for (let value of arr1) {
    console.log(value);
}

map()方法

对数组中每一项运行回调函数，返回该函数的结果，组成的新数组（返回的是加工之后的新数组）。不会改变原数组

1
2
3

arr.map(function (item, index, arr) {
    return newItem;
});


var arr1 = [1, 3, 6, 2, 5, 6];

var arr2 = arr1.map(function (item, index) {
    return item + 10; //让arr1中的每个元素加10
});

// json数据提取
const arr1 = [
    { name: '千古壹号', age: '28' },
    { name: '许嵩', age: '32' },
];

// 将数组 arr1 中的 name 属性，存储到 数组 arr2 中
const arr2 = arr1.map((item) => item.name);

// 将数组 arr1 中的 name、age这两个属性，改一下“键”的名字，存储到 arr3中
const arr3 = arr1.map((item) => ({
    myName: item.name,
    myAge: item.age,
})); // 将数组 arr1 中的 name 属性，存储到 数组 arr2 中
// arr1:[{"name":"千古壹号","age":"28"},{"name":"许嵩","age":"32"}]

// arr2:["千古壹号","许嵩"]

// arr3:[{"myName":"千古壹号","myAge":"28"},{"myName":"许嵩","myAge":"32"}]

filter()方法

对数组中的每一项运行回调函数，该函数返回结果是 true 的项，将组成新的数组（返回值就是这个新的数组）。不会改变原数组。

1
2
3

arr.filter(function (item, index, arr) {
    return true;
});

let arr1 = [1, 3, 6, 2, 5, 6];

let arr2 = arr1.filter((item) => {
    if (item > 4) {
        return true; // 将arr1中大于4的元素返回，组成新的数组
    }
    return false;
});

reduce()方法

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。返回值是回调函数累计处理的结果。

1	arr.reduce(function (previousValue, currentValue, currentIndex, arr) {}, initialValue);

参数解释：

previousValue：必填，上一次调用回调函数时的返回值
currentValue：必填，当前正在处理的数组元素
currentIndex：选填，当前正在处理的数组元素下标
arr：选填，调用 reduce()方法的数组
initialValue：选填，可选的初始值（作为第一次调用回调函数时传给 previousValue 的值）

为了方便理解 reduce()，我们先来看看下面的简单代码，过渡一下：

let arr1 = [1, 2, 3, 4, 5, 6];

arr1.reduce((prev, item) => {
    console.log(prev);
    console.log(item);
    console.log('------');
    return 88;
}, 0);

打印结果：

0
1
------
88
2
------
88
3
------
88
4
------
88
5
------
88
6
------

上面的代码中，由于return的是固定值，所以 prev 打印的也是固定值（只有初始值是 0，剩下的遍历中，都是打印 88）。

// 数组求和
const arr = [2, 0, 1, 9, 6];
// 数组求和
const total = arr.reduce((prev, item) => {
    return prev + item;
});

console.log('total:' + total); // 打印结果：18

// 统计元素个数
function repeatCount(arr, value) {
    if (!arr || arr.length == 0) return 0;

    return arr.reduce((totalCount, item) => {
        totalCount += item == value ? 1 : 0;
        return totalCount;
    }, 0);
}
// 求元素最大值
const arr = [2, 0, 1, 9, 6];
// 数组求最大值
const maxValue = arr.reduce((prev, item) => {
    return prev > item ? prev : item;
});