js数组操作

目录

push

pop

unshift

shift

filter

forEach

 splice

slice

concat

join

reverse

sort

tostring

reduce

---

push

用于在数组的末尾追加一个或多个元素，会改变原数组，并返回数组的长度

var arr1 = ['1', '2', '3', '4'];
console.log(arr1.push('6'));  // 5
console.log(arr1);  // ['1', '2', '3', '4', '6']
//-------------------------//
console.log(arr1.push('6','7'));  // 6
console.log(arr1); // ['1', '2', '3', '4', '6', '7']

pop

用于删除并返回数组的最后一个元素，会改变原数组

var arr1 = ['1', '2', '3', '5'];
console.log(arr1.pop());  // 5
console.log(arr1); // ['1', '2', '3']

unshift

用于在数组的最前面添加元素，并返回数组的长度，改变原数组， 再ie中无法使用，不兼容

var arr1 = ['1', '2', '3', '4'];

console.log(arr1.unshift('0'));  // 5
console.log(arr1); // ['0', '1', '2', '3', '4']
//-------------------------//
console.log(arr1.unshift('0','1','1')); //7
console.log(arr1); // ['0', '1', '1', '1', '2', '3', '4']

shift

用于删除数组的第一个元素，并且返回第一个元素, 会改变原数组

var arr1 = ['5', '2', '3', '4'];

console.log(arr1.shift()); // 5
console.log(arr1);  // ['2', '3', '4']

filter

用于过滤数组，返回过滤之后的数组，不改变原数组，当要过滤的数组是对象数组的时候，修改新返回来的对象数组属性的时候同时也修改了原来的对象数组

// 过滤纯数组        
var arr1 = ['1', '2', '3', '4'];

const arr2 = arr1.filter(item => item != '1');
console.log(arr2); // ['2', '3', '4']
arr2.push('5');
console.log(arr2); // ['2', '3', '4', '5']
console.log(arr1); // ['1', '2', '3', '4']

var arr1 = [{a:'1'}, {a:'2'}];

// 过滤对象数组
const arr3 = arr1.filter(item => item.a != '1');
console.log(arr3); // [{a: '5'}]
arr3[0].a = '5';
console.log(arr1); // [{a:'1'}, {a:'5'}]

forEach

1. 对数组的每个元素执行一次给定的函数 没有返回值，不会直接改变调用它的对象，但是那个对象可能会被 callback 函数改变
2. 除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具
3. 三个参数：currentValue 数组中正在处理的当前元素， index 数组中正在处理的当前元素的索引，array 正在操作的数组

const arr1 = [1,2,3,4,5]
arr1.forEach((item,index,arr)=>{
    if (item === 2) {
        arr.push(6)
    }
})
console.log(arr1); // [1, 2, 3, 4, 5, 6]

const arr2 = [1,2,3,4,5]
arr2.forEach((item,index,arr)=>{})
console.log(arr2); // [1, 2, 3, 4, 5]

 splice

(index, howmany, item1, ......, item2) 用于删除数组，并添加新元素，改变原数组，返回含有被删除元素组成的数组，index 必须，代表添加或者删除的位置，使用负数可以在数组尾部规定位置，howmany 必须，代表删除几个，item 代表添加的元素

var arr1 = ['1', '2', '3', '4'];

console.log(arr1.splice(1, 1)); // ['2']
console.log(arr1); // ['1', '3', '4']
// ----------------------- //
console.log(arr1.splice(1, 0, '2')); // []
console.log(arr1); // ['1', '2', '2', '3', '4']
// ----------------------- //
console.log(arr1.splice(1, 5, '8')); // ['2', '3', '4']
console.log(arr1); // ['1', '8']
// ----------------------- //
console.log(arr1.splice(-2, 5, '8')); // ['3', '4']
console.log(arr1); // ['1', '2', '8']
// ----------------------- //
console.log(arr1.splice(-2, 1, '8')); // ['3']
console.log(arr1); // ['1', '2', '8', '4']

slice

1. (start, end)  用于从某个已有的数组中返回指定元素，不改变原数组， 会返回一个新数组
2. start代表从哪里开始，如果为-1，代表从末尾第一个开始算起，-2代表从末尾第二个算起
3. end代表从哪里结束，如果为负数，代表数组尾部开始算起，不写的话默认数组长度

var arr1 = ['1', '2', '3', '4'];

console.log(arr1.slice(0, 2)); // ['1', '2']
console.log(arr1); //  ['1', '2', '3', '4']
    // ----------------------- //
console.log(arr1.slice(0)); //  ['1', '2', '3', '4']
console.log(arr1); //  ['1', '2', '3', '4']
//  // ----------------------- //
console.log(arr1.slice(1, -2)); // ['2']
console.log(arr1); //  ['1', '2', '3', '4']
//  // ----------------------- //
console.log(arr1.slice(-2, 4)); // ['3', '4']
console.log(arr1); //  ['1', '2', '3', '4']

concat

用于连接两个或者多个数组 不会改变当前数组

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

console.log(arr1.concat(arr2)); // ['1', '2', '3', '4', '5', '6']
console.log(arr1); // ['1', '2', '3']
console.log(arr2); // ['4', '5', '6']
console.log(['0'].concat(arr1, arr2)); // ['0', '1', '2', '3', '4', '5', '6']

join

用于数组转化成字符串

var arr1 = ['1', '2', '3', '4'];

console.log(arr1.join()); // 1,2,3,4
console.log(arr1.join('-')); // 1-2-3-4

reverse

用于颠倒数组的顺序，会改变原数组

var arr1 = ['1', '2', '3', '4'];

console.log(arr1.reverse()); // ['4', '3', '2', '1']
console.log(arr1); // ['4', '3', '2', '1']

sort

(sortby) 用于数组的排序，sortby 可选参数 规定排序顺序 必须是函数，改变原数组

var arr1 = ['1', '5', '3', '4'];
console.log(arr1); // ['1', '5', '3', '4']
console.log(arr1.sort()); // ['1', '3', '4', '5']
console.log(arr1); // ['1', '3', '4', '5']
console.log(arr1.sort(function sortNumber(a,b){return b - a})); // ['5', '4', '3', '1']

tostring

用于将数组转化为字符串，用逗号分割， 不改变原数组

var arr1 = ['1', '2', '3', '4'];

console.log(arr1.toString()); // 1,2,3,4
console.log(arr1); // ['1', '2', '3', '4']

reduce

为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);
// 1 2 1
// 3 3 2
// 6 4 3
// [1, 2, 3, 4] 10


var  arr1 = [1, 2, 3, 4];
var sum = arr1.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
},0) //设置了初始值  设置初始值之后，就是arr1为[],也不会报错，如果不设置初始值，数组为[],会报错
console.log(arr1, sum);

// 0 1 0
// 1 2 1
// 3 3 2
// 6 4 3
// [1, 2, 3, 4] 10