js - 数组常用的方法

作者: 梁庄十年 | 来源:发表于2019-06-26 23:58 被阅读0次

js基础了解
数组常用方法
JavaScript数组常用方法
js 常用方法总结
JS数组常用方法
js与ES6数组常用方法区别
初识javascript
2018-11-07
js数组常用方法
js 数组常用方法

splice(start, number, params1, ...): 添加或删除数组元素; 改变原数组;

   /**
     *  params: 
     *  start:  应该添加新元素的位置
     *  number: 定义应该删除多少元素
     *  其余参数: 定义需要添加的新元素
    */

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    const arr = fruits.splice(1, 0, 'a', 'b');
  //  输出结果: ['Banana', 'a', 'b', 'Orange', 'Apple', 'Mango']

    fruits.splice(1, 2);
  // 输入结果 ['Banana', 'Mango']

slice(start, end):截取数组片段;不改变原数组,返回截取的数组片段

    /**
     * params:
     * start: 截取的开始索引
     * end: 截取的数组索引(不包含);可不传,默认截取到数组的剩余部分;
    */

     var fruits = ["Banana", "Orange", "Apple", "Mango"];
     const arr = fruits.slice(1, 3);
     console.log(arr, fruits);
    //  ['Orange', 'Apple'],  ['Banana', 'Orange', 'Apple', 'Mango']

join(separate): 将所有数组元素结合为一个字符串;不改变原数组, 返回字符串;

    /**
     * params:
     * separate: 可不传;
    */
     var fruits = ["Banana", "Orange", "Apple", "Mango"];
    let str = fruits.join();
    console.log(str, fruits); // Banana,Orange,Apple,Mango , ['Banana', 'Orange', 'Apple', 'Mango']

    let str = fruits.join(' ');
    console.log(str); // Banana Orange Apple Mango

toString(): 把数组转换为数组值（逗号分隔）的字符串;不改变原数组, 返回字符串;

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  let str = fruits.toString();
  console.log(str, fruits); // Banana,Orange,Apple,Mango   ['Banana', 'Orange', 'Apple', 'Mango']

push(params): （在数组结尾处）向数组添加一个新的元素; 改变原数组,返回数组长度;

   /**
     * params:
     * params: 添加到数组的元素,可以传递一个或多个,以逗号分隔;
    */
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    let length = fruits.push('a', 'b');
    console.log(fruits, length); // ['Banana', 'Orange', 'Apple', 'Mango', 'a', 'b']   6

pop(): 从数组中删除最后一个元素; 改变原数组,返回删除的元素;

  var fruits = ["Banana", "Orange", "Apple", "Mango"];
  let el = fruits.pop();
  console.log(fruits, el); // ['Banana', 'Orange', 'Apple']    'Mango'

shift(): 删除首个数组元素;改变原数组, 返回删除的元素;

 var fruits = ["Banana", "Orange", "Apple", "Mango"];
 let el = fruits.shift();
 console.log(fruits, el); //['Orange', 'Apple', 'Mango']   'Banana'

unshift(params): 向数组添加新元素; 改变原数组,返回数组长度;

   /**
     * params:
     * params: 添加到数组的元素,可以传递一个或多个
    */
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    let length = fruits.unshift('a', 1);
    console.log(fruits, length); // ['a', 1, 'Banana', 'Orange', 'Apple', 'Mango']   6

delete 删除数组某项元素, 会在数组留下未定义的空洞; 改变原数组, 数组长度未改变;(个人觉得不好用)

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    delete fruits[1];
    console.log(fruits); // ['Banana', empty, 'Apple', 'Mango']

concat(params): 通过合并（连接）现有数组来创建一个新数组; 不改变现有数组,返回新数组;

    /**
     * params:
     * params: 一个或多个数组或其他非数组元素;
    */

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    const arr1 = [1, 2, 3, 'ab'];
    const arr2 = [12, '设计费开始节点'];
    let res = fruits.concat(arr1, arr2, 'a', 'str');
    console.log(fruits, res);
// ['Banana', 'Orange', 'Apple', 'Mango'] 
// ['Banana', 'Orange', 'Apple', 'Mango', 1, 2, 3, 'ab', 12, '设计费开始节点', 'a', 'str', 1]

sort(func): 对数组进行排序;改变原有数组;

    /**
     * params:
     * func: 通过回调函数,控制排序
     * eg: 
     *  (a, b) => { a - b } 升序
     *  (a, b) => { b - a } 降序
    */
   var fruits = [12, 42, 50, 1];
    fruits.sort((a, b) => {
        return a - b;
    })
    console.log(fruits); // [1, 12, 42, 50]

    fruits.sort((a, b) => {
        return a - b;
    })
   console.log(fruits); //  [50, 42, 12, 1]

reverse(): 反转数组中的元素;

    var fruits = [12, 42, 50, 1];
    fruits.reverse();
    console.log(fruits); // [1, 50, 42, 12]

forEach(func): 遍历数组中的元素; 数组循环过程中无法return;

    /**
     * params: 
     * func: 回调函数
     * Array.forEach((item, index) => {
     *   item: 数组中的每个元素
     *   index: 数组的索引
     * })
    */
    var fruits = [12, 42, 50, 1];
    fruits.forEach((item, index) => {
        console.log(item, index);
    })
// 输出结果 :
  12 0
  42 1
  50 2
  1 3

map(func) 循环遍历数组, 返回一个新的数组;

  /**
     * params: 
     * func: 回调函数
     * Array.map((item, index) => {
     *   item: 数组中的每个元素
     *   index: 数组的索引
     * })
    */
    var fruits = ['hello', 'name', 'age', 'gender'];
    let res = fruits.map((item, index) => {
        if(item === 'hello') {
            return
        }
        return `${item}${index}`
    })
    console.log(fruits, res);
    // 输出: ['hello', 'name', 'age', 'gender'] [undefined, 'name1', 'age2', 'gender3']

filter(func): 返回一个通过测试条件的新数组;

    /**
     * params: 回调函数;
     * func: 回调函数
     * Array.filter((item, index) => {
     *   item: 数组中的每个元素
     *   index: 数组的索引
     * })
    */
    var fruits = ['hello', 'name', 'age', 'gender'];
    let res = fruits.filter((item, index) => {
       return item.length > 3;
    })
    console.log(fruits, res);
// ['hello', 'name', 'age', 'gender'] ['hello', 'name', 'gender']

reduce(func) : 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值

   /**
     * params:
     * func: 回调函数
     * Array.reduce((total, item) => {
     *   第一次调用回调函数的第一个参数，是初始值，第二个参数就是从数组中拿第一个值
     *  第2次调用回调函数，回调函数的第一个参数是上一次回调函数的返回值
     * })
    */
    let list = [1, 34, 56, 2];
    let res = list.reduce((total, value) => {
        console.log(total, value);
        return total + value;
    })
  // 输出结果: 
    1 34
    35 56
    91 2
    [1, 34, 56, 2] 93

every(func): 检查所有数组值是否通过测试; 返回boolean值; 如果每一项都可以通过测试函数,返回true,
如果有一项不符合测试函数, 返回false;

    /**
     * params:
     * func: 回调函数
     * Array.every((item, index) => {
     *    item: 数组每一项
     *    index: 数组索引
     * })
    */
    let list = [1, 34, 56, 2];
    let res = list.every((value, index) => {
        return value > 0;
    })
    console.log(list, res);
//输出结果:   [1, 34, 56, 2] true

some(func): 查某些数组值是否通过了测试, 返回boolean值;如有部分数组项可以通过测试函数,返回true;如果全都不符合返回false;

    /**
     * params:
     * func: 回调函数
     * Array.some((item, index) => {
     *    item: 数组每一项
     *    index: 数组索引
     * })
    */
    let list = [1, 34, 56, 2];
    let res = list.some((value, index) => {
        return value > 34;
    })
    console.log(list, res);
  //输出结果 [1, 34, 56, 2] true

indexOf(param) 数组中搜索元素值并返回其位置; 返回索引位置或者-1;如果项目多次出现，则返回第一次出现的位置;

    var list = ['hello', 'name', 'age', 'gender'];
    let res = list.indexOf('name')
    console.log(list, res);
//输出结果 ['hello', 'name', 'age', 'gender'] 1

lastIndexOf(): 与indexOf() 类似，但是从数组结尾开始搜索;返回number值;返回索引位置或者-1;

   var list = ['hello', 'name', 'age', 'gender'];
    let res = list.lastIndexOf('name')
    console.log(list, res);
// 输出结果: ['hello', 'name', 'age', 'gender'] 1

find(func): 返回通过测试函数的第一个数组元素的值;返回通过测试函数的数组元素或者undefined;

    var list = ['hello', 'name', 'beautiful', 'wonderfun', 'age', 'gender'];
    let res = list.find((item, index) => {
        return item.length > 15
    })
    console.log(res);
  // 输出结果: undefined
   let res = list.find((item, index) => {
        return item.length > 5
    })
  // 输出结果 'beautiful'

findIndex(func): 回通过测试函数的第一个数组元素的索引;返回值为number,如果都不符合, 返回-1;

    var list = ['hello', 'name', 'beautiful', 'wonderfun', 'age', 'gender'];
    let res = list.findIndex((item, index) => {
        return item.length > 20
    })
    console.log(res);
  // 输出结果: -1
   let res = list.findIndex((item, index) => {
        return item.length > 5
    })
    console.log(res);
  // 输出结果: 2

includes(): 判断数组是否包含某一指定元素; 返回boolean值;如果包含,返回true;否则,返回false;

   var list = ['hello', 'name', 'beautiful', 'wonderfun', 'age', 'gender'];
   let res = list.includes('name');
   console.log(res);
  // 输出结果: true

Array.isArray(array): 判断是否是数组; 返回boolean值;

   var list = ['hello', 'name', 'beautiful', 'wonderfun', 'age', 'gender'];
    let obj = {
        name: 'wangwu',
    }
    let res = Array.isArray(list);
    let res1 = Array.isArray(obj)
    console.log(res, res1);
  // 输出结果: true false