js数组(Array, arr)常用的方法

一、arr的常用方法如下

        1. arr.push() ==> 向数组末尾添加

        2. arr.pop() ==> 删除数组末尾的一项

        3. arr.unshift() ==> 向数组首位添加

        4. arr.shift() ==> 删除数组首位的一项

        5. arr.forEach() ==> 循环数组

        6. arr.map() ==> 循环数组

        7. arr.reverse() ==> 颠倒数组中元素的顺序

        8. arr.concat() ==> 拼接两个数组

        9. arr.splice() ==> 删除、插入和替换数组

        10. arr.slice() ==> 截取数组

        11. arr.sort() ==> 排序数组

        12. arr.join(',') ==> 将数组改为，（逗号分割）的字符串

        13. arr.toString() ==> 将数组改为字符串

        14. arr.find() ==> 查找数组中满足条件的一项

        15. arr.findIndex() ==> 查找数组中满足条件的第一项的index

        16. arr.includes() ==> 查找数组是否存在某一项

        17. arr.reduce() ==> 可用作累加器

二、详细介绍

        1. arr.push()

                - 功能：向末尾添加

                - 是否接受参数：支持传入多位参数，传入一个就添加一个，传入多位就添加多位

                - 是否操作源数组：是

                - 返回：返回添加的数据

                - eg:

let arr = [1,2,3]

arr.push(4)
console.log(arr) // [1,2,3,4]

arr.push(5,6)
console.log(arr) // [1, 2, 3, 4, 5, 6]

arr.push(7,8,9)
console.log(arr) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

2. arr.pop()

        - 功能：删除数组末尾的一项

        - 是否接受参数：不接受参数

        - 是否操作源数组：是

        - 返回：返回删除掉的最后一项数据

        - eg:

let arr = [1, 2, 3]

arr.pop()

console.log(arr) //[1, 2]

3. arr.unshift()

        - 功能：向首位添加

        - 是否接受参数：支持传入多位参数，传入一个就添加一个，传入多位就添加多位

        - 是否操作源数组：是

        - 返回：返回添加的数据

        - eg:

let arr = [1, 2, 3]

arr.unshift(5, 6)

console.log(arr) // [5, 6, 1, 2, 3]

4. arr.shift()

        - 功能：向删除数组首位的一项

        - 是否接受参数：不接受参数

        - 是否操作源数组：是

        - 返回：返回删除的第一项的数据

        - eg:

let arr = [1, 2, 3]

arr.shift()

console.log(arr) //  [2, 3]

5. arr.forEach()

        - 功能：循环数组（针对数组的每一项进行操作）

        - 是否接受参数：接受一个函数（item, index, arr）=> {console.log('item, i, arr', item, i, arr);}

                item：循环的当前项

                i：循环的当前项的索引

                arr：数组本身

        - 是否操作源数组：是

        - 返回：undefined

        - eg:

let arr = [1, 2, 3];

let result = arr.forEach((item, i, arr) => {
  console.log('item, i, arr', item, i, arr);
  // item, i, arr 1 0 [1, 2, 3]
  // item, i, arr 2 1 [1, 2, 3]
  // item, i, arr 3 2 [1, 2, 3]
  item = item + 1;
});

console.log(arr); // [2, 3, 4]
console.log(result); // undefined

6. arr.map()

        - 功能：循环数组（针对数组的每一项进行操作）

        - 是否接受参数：接受一个函数（item, index, arr）=> {console.log('item, i, arr', item, i, arr);}

                item：循环的当前项

                i：循环的当前项的索引

                arr：数组本身

        - 是否操作源数组：否

        - 返回：***返回处理过后的新数组 （必须用return 返回）

        - eg:

let arr = [1, 2, 3];

let result = arr.map((item, i, arr) => {
  console.log('item, i, arr', item, i, arr);
  // item, i, arr 1 0 [1, 2, 3]
  // item, i, arr 2 1 [1, 2, 3]
  // item, i, arr 3 2 [1, 2, 3]
  return item + 1;
});

console.log(arr); // [1, 2, 3]
console.log(result); // [2, 3， 4]

7. arr.reverse()

        - 功能：颠倒数组中元素的顺序

        - 是否接受参数：否

        - 是否操作源数组：是

        - 返回：***返回处理过后的新数组

        - eg:

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

let result = arr.reverse();

console.log('arr', arr);  // [5, 4, 3, 2, 1]
console.log('result', result); // [5, 4, 3, 2, 1]

8. arr.concat()

        - 功能：拼接两个数组

        - 是否接受参数：接受数组,可多个

        - 是否操作源数组：否

        - 返回：***返回处理过后的新数组

        - eg:

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

let result = arr.concat([6, 7], [8, 9]);

console.log('arr', arr);  // [1, 2, 3, 4, 5]
console.log('result', result);  // [1, 2, 3, 4, 5, 6, 7, 8, 9]

9. arr.splice()

        - 功能：删除、插入和替换数组都可以(两个参数就是截取, 三个参数以上就是替换,三个参数以上时,第二参数截取长度为0, 就是添加)

        - 是否接受参数：接受至少两个参数arr.splice(index, len, ...others)

                index:索引,从那个索引开始替换

                len:截取的长度

                ...others:截取之后要添加进去的内容(可以是无数个参数,添加参数就添加几个)

        - 是否操作源数组：是

        - 返回：截取的部分

        - eg:

// 截取
let arr = [1, 2, 3, 4, 5];

let result = arr.splice(1, 2);
console.log('arr', arr); // [1, 4, 5]

console.log('result', result); // [2, 3]


// 替换
let arr = [1, 2, 3, 4, 5];

let result = arr.splice(1, 2, 9, 9, 9, 9, 9);

console.log('arr', arr); // [1, 9, 9, 9, 9, 9, 4, 5]
console.log('result', result); // [2, 3]


// 添加
let arr = [1, 2, 3, 4, 5];

let result = arr.splice(1, 0, 9, 9, 9, 9, 9);

console.log('arr', arr); // [1, 9, 9, 9, 9, 9, 2, 3, 4, 5]
console.log('result', result); // []

10. arr.slice()

        - 功能：截取数组

                当只有一个参数时,从startIndex开始,截取到最后;

                参数可以是负数

        - 是否接受参数：接受至少一个参数 arr.slice(startIndex, endIndex)

                startIndex:开始截取的index

                endIndex:截取到那个index(截取的不包含endIndex的项)

        - 是否操作源数组：否

        - 返回：截取后部分组成的数组

        - eg:

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

let result = arr.slice(1);

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // [2, 3, 4, 5]


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

let result = arr.slice(1, 3);

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // [2, 3]


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

let result = arr.slice(-3, -1);

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // [3, 4]

11. arr.sort() 

        - 功能：排序数组(数组, 字符串, 汉字都可以排序)(按照ASCII码排序)

        - 是否接受参数：可以接受参数,接受一个上函数(a, b) => a - b

                升序: (a, b) => a - b / 不穿参

                降序: (a, b) => b - a

        - 是否操作源数组：是

        - 返回：返回排序后的数组

        - eg:

// eg1 升序
let arr = [4, 5, 7, 2, 3, 7, 2, 1];

let result = arr.sort();

console.log('arr', arr); // [1, 2, 2, 3, 4, 5, 7, 7]
console.log('result', result); // [1, 2, 2, 3, 4, 5, 7, 7]


// eg2 升序
let arr = [4, 5, 7, 2, 3, 7, 2, 1];

let result = arr.sort((a, b) => a - b);

console.log('arr', arr); // [1, 2, 2, 3, 4, 5, 7, 7]
console.log('result', result); // [1, 2, 2, 3, 4, 5, 7, 7]


// eg3 降序
let arr = [4, 5, 7, 2, 3, 7, 2, 1];

let result = arr.sort((a, b) => {
    return b - a
});

console.log('arr', arr); // [7, 7, 5, 4, 3, 2, 2, 1]
console.log('result', result); // [7, 7, 5, 4, 3, 2, 2, 1]

12. arr.join(param)

        - 功能：将数组改为以任何字符(param)分割的字符串

        - 是否接受参数：接受一个字符

        - 是否操作源数组：否

        - 返回：返回分割后的*字符串*

        - eg:

// eg1 逗号分隔
let arr = [1, 2, 3, 4, 5];

let result = arr.join(',');

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // 1,2,3,4,5


// eg2 中线
let arr = [1, 2, 3, 4, 5];

let result = arr.join('-');

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // 1-2-3-4-5


// eg3 数字1
let arr = [1, 2, 3, 4, 5];

let result = arr.join(1);

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // 112131415

13. arr.toString()

        - 功能：将数组改为字符串

        - 是否接受参数：否

        - 是否操作源数组：否

        - 返回：返回分割后的*字符串*

        - eg:

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

let result = arr.toString();

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // 1,2,3,4,5

14. arr.find()

        - 功能： 查找数组中满足条件的一项

        - 是否接受参数：接受一个函数(item) => item == 8

        - 是否操作源数组：否

        - 返回：找到返回满足的第一项, 找不到返回undefined

        - eg:

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

let result = arr.find(item => item == 8});

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // undefined

15. arr.findIndex()

        - 功能： 查找数组中满足条件的第一项的index

        - 是否接受参数：接受一个函数(item) => item == 8

        - 是否操作源数组：否

        - 返回：找到返回满足的第一项的index, 找不到返回-1

        - eg:

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

let result = arr.findIndex(item => item == 8});

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // -1

16. arr.includes()

        - 功能： 查找数组是否存在某一项

        - 是否接受参数：接受一个函数

        - 是否操作源数组：否

        - 返回：找到返回true, 找不到返回false

        - eg:

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

let result = arr.findIndex(5});

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // true

17. arr.reduce()

        - 功能：可用作累加器, 去重等

        - 是否接受参数：接受两个参数 arr.reduce((pre, curr) => {}, total)

                第一个参数:函数(pre, curr) => {}

                        pre:上次循环返回的值,

                        curr:当前循环的项

                第二个参数:初始化的字

        - 是否操作源数组：否

        - 返回：返回循环结束处理的值

        - eg:

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

let result = arr.reduce((per, curr) => {
  return per + curr;
}, 0);

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // 15