js数组经常使用方法总结

js经常使用数组方法总结

push()

var arr = [1, 2, 3]
    console.log('添加前的数组', arr) // [1, 2, 3]
    var result = arr.push(10, 20)
    console.log('返回值', result)    // 5
    
//总结以下：
    `向数组末尾添加一项或多项`
    `返回值：添加后的数组长度`
    `原数组：发生改变`
复制代码

unshift()

var arr = [1, 2, 3]
    var result = arr.unshift(40, 50, 60)
    console.log('添加后', arr) // [40, 50, 60, 1, 2, 3]
    console.log('返回值', result) // 6
    
// 总结以下：
    `向数组开头添加一项或者多项`
    `返回值：添加后的数组长度`
    `原数组：发生改变`
复制代码

pop()

var arr = [1, 2, 3, 'hello']
    var result = arr.pop()
    console.log('删除后', arr) // [1, 2, 3]
    console.log('返回值', result) // 'hello'
    
// 总结以下：
    `做用：删除数组末尾最后一项`
    `原数组：发生改变`
    `返回值：返回的是 删除的那一项`
复制代码

shift()

var arr = ['hello', 1, 2, 3]
    console.log('删除前', arr) // ['hello', 1, 2, 3]
    var result = arr.shift()
    console.log('删除后', arr) // [1, 2, 3]
    console.log('返回值', result) // 'hello'
    
// 总结以下：
    `做用：删除数组开头第一项`
    `原数组：发生改变`
    `返回值：返回的是 删除的那一项`
复制代码

splice()

var arr = [10, 20, 30, 40, 50]
    console.log('调用前', arr) // [10, 20, 30, 40, 50]
    var result = arr.splice(2)
    var result = arr.splice(1, 3) 
    console.log('调用后原数组', arr) // [10, 20]
    console.log('返回值', result) // [30, 40, 50]
    var result = arr.splice(1, 0, 2019, 2018) // [10, 20, 2019, 2018]
// 总结以下：
    `splice(x): 从索引x处开始 一直删除到末尾，将删除的内容组成新数组返回`
    `splice(x, y): 从索引x处开始，删除y个`
    `splice(x, y, ...n): 从索引x处开始，删除y个，将参数n以及后面全部参数 插入到索引x处`
复制代码

slice()

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
    var res = arr.slice(1, 3)
    console.log('返回值', res) // ['b', 'c']

// 总结以下：
    `slice(x): 从索引x处开始 一直克隆到末尾，将克隆的内容组成新数组返回`
    `slice(x, y): 从索引x处克隆到索引y处（不包含y项）`
    `slice(-x)：从arr.length加上-x处截取到数组末尾`
复制代码

concat()

var arr1 = [1, 2, 3]
    var arr2 = [6, 7, 8]
    var res1 = arr1.concat(arr2, 2, 'df')
    console.log('返回值', res1) // [1, 2, 3, 6, 7, 8, 2, 'df']

// 总结以下：
    `不会影响原数组`
    `返回值：拼接好的内容 组成的新数组`
复制代码

join()

var arr = [1, 2, 3]
    arr.join('') // "123"
    arr.join('+') // "1+2+3"
    
// 总结以下：
    `将数组转换成字符串 原数组不会发生改变`
    `根据指定的链接符 组成新字符串`
复制代码

indexOf() （ES5的方法）

var arr = [1, 'a', 2, 'b', 3, 'c']
    var res = arr.indexOf('b') // 3
    var res = arr.indexOf(20) // -1
    
// 总结以下：
    `查找某个值 在数组中的索引位置`
    `返回值：查找到的那一项的索引`
    `若是查找不到 就返回-1 说明数组中不存在这一项`
复制代码

lastIndexOf() （ES5的方法）

var arr = [1, 'b', 2, 'b', 3]
    console.log(arr.lastIndexOf('b')) // 3
    
// 总结以下：
    `查找 值在数组中 最后一次出现的索引位置`
    `返回值：查找到的那一项的索引`
    `若是查找不到 就返回-1 说明数组中不存在这一项`
复制代码

every() （ES5的方法）

var arr = [1, 2, 3, 4];
    var temp = arr.every((item, index, array) => {
        return item > 2;
    });
    console.log(arr, temp); // [ 1, 2, 3, 4 ] false

    var arr = [1, 2, 3, 4];
    var temp = arr.every(function(item, index, array) {
        return item > this.id;
    }, {id: 2});
    console.log(arr, temp); // [ 1, 2, 3, 4 ] false
    
// 总结以下：
    `对数组中的每一项运行给定函数，若是该函数对每一项都返回true,则返回trun`
    `方法的第二个参数可选，做用是设定第一个参数中的this指向，若是使用第二个参数，注意callback不能是箭头函数`
复制代码

some() （ES5的方法）

var arr = [1, 2, 3, 4];
    var temp = arr.some((item, index, array) => {
        return item > 2;
    });
    console.log(arr, temp); // [ 1, 2, 3, 4 ] true
    
// 总结以下：
    `对数组中的每一项运行给定函数，若是该函数对任意一项返回true,则返回true`
复制代码

filter() （ES5的方法）

var arr = [1, 2, 3, 4];
    var temp = arr.filter((item, index, array) => {
        return item > 2;
    });
    console.log(arr, temp); // [ 1, 2, 3, 4 ] [3, 4]

// 总结以下：
    `对数组中的每一项运行给定函数，返回该函数返回true的项组成的数组`
复制代码

map() （ES5的方法）

var arr = [1, 2, 3, 4];
    var temp = arr.map((item, index, array) => {
        return item * item;
    });
    console.log(arr, temp); // [ 1, 2, 3, 4 ] [ 1, 4, 9, 16]

// 总结以下：
    `对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组`
复制代码

forEach() （ES5的方法）

var arr = [1, 2, 3, 4];
    var temp = arr.forEach((item, index, array) => {
       // 不会有返回值，但可在这里执行某些操做
        return item * item;
    });
    console.log(arr, temp); // [ 1, 2, 3, 4 ] undefined

// 总结以下：
    `对数组中的每一项运行给定函数。无返回值`
复制代码

reduce() && reduceRight() （ES5的方法）

// 数组求和
    var arr = [1, 2, 3];
    var sum = arr.reduce((prev, cur, index, array) => {
        return prev + cur;
    });
    console.log(arr, sum); // [ 1, 2, 3 ] 6
    
    // 传initialValue 基础值的示例
    var sum1 = arr.reduce((prev, cur, index, array) => {
        return prev + cur;
    }, 10);
    // 返回的值是：10+1+2+3
    console.log(arr, sum1); // [ 1, 2, 3 ] 16
    
    var arr = ['h', 'e', 'l', 'l', 'o'];
    var str = arr.reduceRight((prev, cur, index, array) => {
        return prev + cur;
    });
    console.log(arr, str); // [ 'h', 'e', 'l', 'l', 'o' ] 'olleh'
// 总结以下：
    `reduce()从数组的第一项开始，逐步遍历到最后，迭代数组的全部项`
    `reduceRight()从数组的第一项开始，逐步遍历到最后，迭代数组的全部项`
复制代码

find() （ES6的方法）

let arr = [1, 2, 3, 4, 5];
    let temp = arr.find((item, index, array) => {
        return item > 2;
    })
    console.log(arr, temp); // [1, 2, 3, 4, 5] 3
// 总结以下：
    `查找数组中第一个符合条件的元素，返回该元素`
复制代码

findIndex() （ES6的方法）

let arr = [1, 2, 3, 4, 5];
    let temp = arr.findIndex((item, index, array) => {
        return item > 2;
    })
    console.log(arr, temp); // [1, 2, 3, 4, 5] 2
// 总结以下：
    `查找数组中第一个符合条件的元素所在位置的索引，并返回该索引值`
复制代码

fill() （ES6的方法）

let arr = [1, 2, 3, 4, 5];
    let temp = arr.fill('a', 2, 4);
    console.log(arr, temp); // [1, 2, 'a', 'a', 5] [1, 2, 'a', 'a', 5]
// 总结以下：
    `用指定元素，填充数组从start(包括)到end（不包括）之间的元素，若是该区间内已经有元素，直接替换掉`
复制代码

includes() （ES7的方法）

let arr = [1, 2, 3, 4, 5];
    let temp = arr.includes(5);
    console.log(arr, temp); // [1, 2, 3, 4, 5] true
    
    // 这个方法弥补了indexOf查看元素时的一个不足，即查找NaN的偏差
    let arr1 = [NaN, 'a'];
    let temp1 = arr1.includes(NaN);
    let temp2 = arr1.indexOf(NaN);
    console.log(temp1, temp2); // true -1
// 总结以下：
    `判断数组中是否包含指定的元素`
复制代码