js数组的常用方法 详细 (一)

第二篇 js数组的常用方法 详细 (二)
注：参数后接?表示可选

1.在数组后面插入元素push(value)

• 可传入多个参数，会影响原数组，返回值是数组的长度

const arr = ['a','b', 'c'];
console.log(arr.push('d'));//4
console.log(arr.push('e', 'f'));//5
console.log(arr);//  ['a','b', 'c','d','e', 'f']

2.在数组后面删除一个元素pop()

• 参数为空，会影响到原数组，返回值是删除的那个值

const arr = ['a', 'b', 'c', 'd'];
console.log(arr.pop());// d
console.log(arr); // [ 'a', 'b', 'c' ]

3.在数组前面添加元素unshift(value)

• 可传入多个参数，会影响原数组，返回值是数组的长度

const arr = ['a', 'b', 'c'];
console.log(arr.unshift('1', '2')); // 5
console.log(arr); // [ '1', '2', 'a', 'b', 'c' ]

4.在数组前面删除一个元素shift()

• 参数为空，会影响到原数组，返回值是删除的那个值

const arr = ['a', 'b', 'c'];
console.log(arr.shift()); // a
console.log(arr); // [ 'b', 'c' ]

5.排序sort(compareFn?)

• 参数为空默认为升序排序，会影响到原数组，返回值是同一个数组

compareFn为一个函数

function (a,b) { a - b } 降序

function (a,b) { b - a } 升序

const arr = [1, 5, 3, 9, 6];
const arr1 = arr.sort((a, b) => b - a);
console.log(arr1); // [ 9, 6, 5, 3, 1 ]
console.log(arr1 === arr); // true
console.log(arr.sort()); //[ 1, 3, 5, 6, 9 ]

6.翻转数组reverse()

• 参数为空,会影响到原数组，返回值是同一个数组

const arr = ['a', 'b', 'c', 'd', ];
const arr1 = arr.reverse();
console.log(arr1 === arr); //true
console.log(arr); // [ 'd', 'c', 'b', 'a' ]

7.连接两个或多个数组concat(value)

• 可传入多个参数,不会影响到原数组，返回值是一个新数组

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];
const arr3 = arr1.concat();
const arr = arr1.concat(...arr2);
console.log(arr3);// 复制数组  [ 'a', 'b' ]
console.log(arr);// [ 'a', 'b', 'c', 'd' ]
console.log(arr1); // [ 'a', 'b' ]

8.数组截取slice(start,end)

• 可传入一个或两个参数，不会影响到原数组，返回值是一个新数组

const arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.slice(1, 3)); //[ 'b', 'c' ]
console.log(arr.slice(1)); // [ 'b', 'c', 'd', 'e' ]

9.数组刷新splice(start, deleteCount?,value?)

• 一个参数开始截取的下标，第二个参数可选，代表截取数组的长度，第三个参数代表添加的元素
• 影响原数组 ，返回值是一个截取后数组

let arr = ['a', 'b', 'c', 'd', 'e', 'f'];
console.log(arr.splice(1, 2)); //['b', 'c']
console.log(arr.splice(1)); // ['d', 'e', 'f']
console.log(arr); //['a']

//运用第三个参数，原数组先从start开始删除deleteCount个元素，在添加如value的元素
let arr = ['a', 'b', 'c', 'd'];
console.log(arr.splice(1, 3, '1', '2', '3')); //[ 'b', 'c', 'd' ]
console.log(arr); // [ 'a', '1', '2', '3' ]

10.寻找索引indexOf(searchElement,fromIndex?) &lastIndexOf(searchElement,fromIndex?)

• 第一个参数为要查找的元素，查得到返回第一个对应元素对应下标，找不到返回-1

• indexOf(searchElement,fromIndex?) 从数组第一个开始

• lastIndexOf(searchElement,fromIndex?) 从数组倒数第一个开始

const arr = ['a', 'b', 'c', 'd', 'b', 'f'];
console.log(arr.indexOf('b')); // 1
console.log(arr.indexOf('b', 2)); // 4
console.log(arr.lastIndexOf('b')); // 4
console.log(arr.lastIndexOf('b', 3)); // 1

11.数组遍历forEach(callbackfn)

• 不会改变原数组，无返回值.callbackfn回调函数里

  **callbackfn（item，index?，array?）：**item：数组里的每一个元素，index：元素下标，array：进行遍历的数组

const arr = ['a', 'b', 'c'];
const result = arr.forEach((item, index, array) => {
    console.log(item, index, array);
   // a 0 [ 'a', 'b', 'c' ]
   // b 1 [ 'a', 'b', 'c' ]
   // c 2 [ 'a', 'b', 'c' ]
});
console.log(result); //无返回值 undefined

12.map(callbackfn)

• 不会改变原数组，返回一个新数组，批量处理数组中的每一个元素
• callbackfn 参数同 forEach

const arr = [1, 5, 8, 3, 5, 2]; //数组中每个元素值+2
const result = arr.map((item, index, array)=>{
    return item + 2
})
console.log(result); // [ 3, 7, 10, 5, 7, 4 ]

13.数组过滤fifler(callbackfn)

• 不会改变原数组，返回一个新数组，筛选数组中的元素
• callbackfn 参数同 forEach

const arr = [1, 5, 8, 3, 5, 2];// 筛选处数组中大于4的元素
const result = arr.filter((item, index, array) => {
    return item > 4
});
console.log(result); // [ 5, 8, 5 ]

14.判断数组中每一项都是否满足条件every(callbackfn)

• 不会改变原数组，返回一个boolean值，满足为true，callbackfn 参数同 forEach

const arr = [1, 5, 8, 3, 5, 2];//判断数组中的每一项是否大于0
const result = arr.every((item, index, array) => {
    return item > 0
});
console.log(result); //true

15.判断数组中某一项都是否满足条件some(callbackfn)

const arr = [1, 5, 8, 3, 5, 2];/判断数组中是否存在大于5的数
const result = arr.some((item, index, array) => {
    return item > 5
});
console.log(result); // true

16迭代所有项 reduce(callbackfn，value)&reduceRight(callbackfn，value)

• callbackfn(preValue, currentValue, index): preValue表示当前循环之前的值，currentValue当前循环元素的值，index下标
• value表示初始preValue的值

const arr = [1, 2, 3, 4];
const result = arr.reduce((preValue, currentValue, index) => {
    return currentValue + preValue
}, 10)
console.log(result); // 20

**reduceRight( )**起始位置从数组右侧开始

第二篇js数组的常用方法 详细 (二)