数组常用方法

一、 获取数组的长度 – length

let arr = ['red', 'blue', 'pink'];
console.log(arr.length); // 3

二、 更改数组元素的值 – arr[index] = value

let arr = ['red', 'pink', 'blue'];
arr[2] = 'white';
console.log(arr); // ['red', 'white', 'blue']

三、 判断是不是数组 – isArray(arr)

const arr = [1, 2, 3];
console.log(arr.isArray); // true

四、 操作数组元素

1. 为数组追加一条数据 – arr.push()

2. 从数组最前面添加一条数据 – arr.unshift()

3. 从数组最后删除一条数据 –arr.pop()

4. 从数组最前面删除一条数据 – arr.shift()

let arr = ['red', 'blue', 'pink'];
let color1 = 'white';
let color2 = 'brown';

arr.push(color1); // 从后面添加
console.log(arr); // ['red', 'blue', 'pink', 'white']

arr.unshift(color2); // 从前面添加
console.log(arr); // ['brown', 'red', 'blue', 'pink', 'white'];

arr.pop(); // 从后面删除
console.log(arr); // ['brown', 'red', 'blue', 'pink']

arr.pop(2); // 往 pop 括号里面写东西，会被自动忽略
console.log(arr); // ['brown', 'red', 'blue', 'pink']

arr.shift(); // 从前面删除
console.log(arr); // ['red', 'blue', 'pink'];

五、把多个数组合并为一个数组 — .concat() – 如果要拼接多个数组，数组名用逗号隔开

let arr = ['red', 'pink', 'blue'];
let color = 'yellow';
console.log(arr.concat(color)); // ['red', 'pink', 'blue', 'yellow']

let b = ['yellow', 'brown', 'purple'];
let c = ['black', 'white', 'yellowgreen'];
let bc = 'red';
let bcc = 100;
let bac = ['just do it', 666];
console.log(arr.concat(b, c, bc, bcc, bac));
// ["red", "pink", 'blue', "yellow", "brown", "purple", "black", "white", "yellowgreen", "red", 100, "just do it", 666]
console.log(arr.length); // 11

六、 把数组按规则拼接成字符串 — arr.join('*') – 不改变原来的数组

let arr = ['red', 'pink', 'blue'];
console.log(arr.join('-')); // red-pink-blue
console.log(arr.join('')); // redpinkblue
console.log(arr.join(*)); // red*pink*blue

七、 判断是否为数组 — Array.isArray(arr)

let arr1 = ['red', 'pink'];
let arr2 = '我不是数组';
console.log(Array.isArray(arr1)); // true
console.log(Array.isArray(arr2)); // false   

八、 arr.splice()– 删除、添加、替换数组元素，改变原数组

let arr1 = ['yellow', 'brown', 'purple'];
let color = ['red', 'blue', 'pink'];

// 当第二个参数为 0 的时候 -- 表示添加一个或者多个元素
arr1.splice(2, 0, color);
console.log(arr1); // ['yellow', 'brown', Array(3), 'purple']

// 当第二个参数不为 0 的时候 -- 表示替换的元素
arr1.splice(2, 1, color);
console.log(arr1); // ['yellow', 'brown', Array(3)]
arr1.splice(1, 1, color);
console.log(arr1); // ['yellow', Array(3), 'purple']
arr1.splice(0, 1, color);
console.log(arr1); // [Array(3), 'brown', 'purple'];

// 下标包含开始，不包含末尾!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
let e = ['red', 'pink', 'blue', 'purple', 'green'];
console.log(e.splice(1, 2)); // 从下标为1的元素开始删除两个元素 ['pink', 'blue']
console.log(e); // ['red', 'purple', 'green']

// 当参数都是 0 ，就返回原数组，一个也不删除
let f = ['red', 'pink', 'blue', 'purple', 'green'];
console.log(f.splice(0, 0)); // []
console.log(f); // ['red', 'blue', 'pink', 'purple', 'green']

九、 arr.slice() – 切割数组元素，不改变原来的数组

let arr2 = ['red', 'pink', 'blue', 'purple', 'brown', 'white'];
// 当没有参数的时候 -- 返回完整的数组
console.log(arr2.slice());
// 当只有一个参数的时候 -- 取从这个下标，到数组结尾的元素
console.log(arr2.slice(2)); // ["blue", "purple", "brown", "white"]
// 两个参数的时候 -- [2, 4)
console.log(arr2.slice(2, 4)); // ['blue', 'purple']

十、 数组排序 – sort – 改变原来的数组

• 默认功效 – 按照字符串的先后顺序对数组的每一项的字符顺序来进行排序，如果数组的某个项目不是字符串，会先把数组项目转换成字符串，再按照字符串的比较方法来排序
• 如果括号里面没有排序函数，默认就是按第一位字符的 ASCII 码来排序
• 可以传入一个参数，该参数必须为一个函数(比较函数)，接收两个参数

let arr = [101, 20, 3, 401, 4];

// 默认是按按第一位字符的ASCII码来排序
console.log(arr.sort()); // 101, 20, 3, 401, 4

arr.sort(function (a, b) {
    if (a > b) {
        return 1;
    }
    else if (a < b) {
        return -1;        
    } else {
        return 0;
    }
})
console.log(arr); // 3, 4, 20, 101, 401

// 综合上述
arr.sort(function (a, b) {
    return a - b; // 升序
    // return b - a; // 降序
    // return 0; // 原数组排序
})
console.log(arr); // 3, 4, 20, 101, 401

let str = ['red', 'blue', 'pink', 'purple'];
console.log(str.sort); // blue, puink, purple, red

str.sort(function (a, b) {
    return a - b;
})
console.log(str); // ['red', 'blue', 'pink', 'purple']

十一、 reverse – 反转数组元素

// reverse() 仅仅只是把数组的顺序从头到尾依次换了一下
let arr3 = ['101', '2', '3'];
arr3.reverse();
console.log(arr3); // ['3', '2', '101']

let arr4 = ['one', 'three', 'two'];
arr4.reverse();
console.log(arr4); // ['two', 'three', 'one']

十二、 every – 全部满足，结果才为 true

传入的参数必须每一项都满足条件就为 true, 否则为 false

let arr = [1, 2, 3, 5, 4, 3, 2, 1];
function fun1(item, index, array) {
    return (item > 1);
})
function fun2(item) {
    return (item > 3);
})
console.log(arr.every(fun1)); // true
console.log(arr.every(fun2)); // false

十三、 some – 只要有一个满足就为 true

传入的参数只要有一个满足条件就为 true, 否则为 false

let arr = [1, 2, 0, 5, 4, 3, 2, 0];
function fun1(item, index, array) {
    return (item > 1);
})
function fun2(item, index, array) {
    return (item > 6);
})
console.log(arr.some(fun1)); // true
console.log(arr.some(fun2)); // false

十四、 filter – 筛选符合条件的，不改变原数组，返回一个新数组

筛选出符合条件的结果,并组合成一个新的数组返回

let arr = [1, 2, 0, 5, 4, 3, 2, 0];
function fun1(item, index, array) {
    return (item > 1);
})
console.log(arr.filter(fun1)); // [2, 5, 4, 3, 2]

十五、 map() – 遍历元素，不改变原数组

• map 方法返回一个新数组，数组元素为原来的数组元素调用函数处理后的值
• map方法按照原数组元素的顺序依次处理元素
• map 方法不会改变原来的数组

let str = ['red', 'blue', 'pink', 'purple'];
let temp = '';

arr.map(function (item, index) {
  temp += `${index}: ${item}<br>`;
})
document.write(temp);
document.write(arr); // ['red', 'blue', 'pink', 'purple']

let arr1 = [];
let arr2 = [];
let num = 0;
arr.map(function (value, index) {
    // 组成一个新的数组
    arr1.push(value);
    arr2.unshift(value);

    // 求数组元素的和
    num += value;
})
console.log(arr1); // [1, 2, 3, 4, 5];
console.log(arr2); // [5, 4, 3, 2, 1];
console.log(num); // 15

十六、forEach – 遍历数组

• 没有返回值
• 本质上和 for 循环一样
• 只是处理从数组中传入函数的每个参数
• 该方法会修改原数组，而 map 不会修改原数组

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

arr.forEach(function (item, index) {
    temp += `${index} = ${item + 10}<br>`;
})

document.write(temp);
document.write(arr); // 1,2,3,4,5

// forEach()实现数组元素求和
let sum = 0;
function getSum(item) {
    return sum += item
}
arr.forEach(getSum);
console.log(sum)
// 或者
arr.forEach(function(item) {
    sum += item;
})
console.log(sum);

// 点击按钮将数组里面的值乘以特定的数字
function fun(item, index, array) {
    array[index] = item * input.value; // 依次改变数组元素
    num.innerHTML = arr2; // 把改变之后的数组输出到页面
}
btn.onclick = function () {
    arr2.forEach(fun);
}

十七、forEach() 方法的 break 和 continue
forEach() 本身是不支持 break 和 continue 的，但是 some() 和 evry() 可以实现

// every 实现 forEach 的 break
arr.every(function (item) {
    console.log(item);
    return item !== 3; // 先打印 1, 2, 3 轮到 4 就不执行了
})

// return 实现 遍历的终止
let arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
    if (item === 3) return; // 如果等于 3 啥也不做
    console.log(item); // 输出 1, 2, 4, 5
})

// return 实现 遍历的跳出
arr.some(function (item) {
    if (item === 2) return;
    console.log(item); // 1, 3, 4, 5
})

十八、 reduce() – 并归

• reduce() 方法接收一个 累加函数 和 一个初始值(可选)
• 这个函数接收4个参数(前一个值，当前值，当前值的下标，数组对象)
• 不会为一个空数组执行

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce(function (previousValue, currentValue, currentIndex, array) {
    return previousValue + currentValue;
})
console.log(sum); // 15