javascript常用方法 - Array

  //1.Aarry方法

  // 1.1 Array.from(arrayLike[, mapFn[, thisArg]])
  // @arrayLike 想要转换成数组的伪数组对象或可迭代对象。
  // @mapFn     如果指定了该参数，新数组中的每个元素会执行该回调函数。
  // @thisArg   可选参数，执行回调函数 mapFn 时 this 对象。
  // 浅拷贝：从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
  console.log(Array.from('foo'));
  // expected output: Array ["f", "o", "o"]
  console.log(Array.from([1, 2, 3], x => x + x));
  // expected output: Array [2, 4, 6]

  // Array.isArray(obj)
  // 于确定传递的值是否是一个 Array

  // Array.of(element0[, element1[, ...[, elementN]]])
  // 创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
  Array.of(7);       // [7]       Array.of(7) 创建一个具有单个元素 7 的数组
  Array.of(1, 2, 3); // [1, 2, 3]

  Array(7);          // [ , , , , , , ]
  Array(1, 2, 3);    // [1, 2, 3]

  // 2.常用方法（修改）

  // 2.1 添加
  {
    // 2.1.1 添加（右）
    // push(element1, ..., elementN)

    // 2.1.2 添加（左）
    // unshift(element1, ..., elementN)
  }

  // 2.2 删除
  {
    // 2.2.1 删除（右1）：删除最后一个元素，并返回该元素的值。（此方法更改数组的长度）
    // pop()

    // 2.2.2 删除（左1）：第一个元素
    // shift()
  }

  // 2.3 删除\替换\添加
  // splice(start[, deleteCount[, item1[, item2[, ...]]]])
  // @start​             指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容.
  // @deleteCount       整数，表示要移除的数组元素的个数。
  // @item1, item2, ... 添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素
  // @return            由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组

  // 实例1：添加，从第 2 位开始删除 0 个元素，插入“drum”
  var myFish = ["1ab", "2cd", "3ef", "4gh"];
  var removed = myFish.splice(2, 0, "5ij");
  // 运算后的 myFish: ["1ab", "2cd", "5ij", "3ef", "4gh"]
  // 被删除的元素 removed: [], 没有元素被删除
  console.log(myFish);
  console.log(removed);

  // 实例2：替换，从第 2 位开始删除 1 个元素，插入“trumpet”
  var myFish = ["1ab", "2cd", "3ef", "4gh"];
  var removed = myFish.splice(2, 1, "5ij");
  console.log(myFish);
  console.log(removed);
  // 运算后的 myFish: ["1ab", "2cd", "5ij", "4gh"]
  // 被删除的元素 removed: ["3ef"], 没有元素被删除

  // 2.4.排序
  {
    // 2.4.1 颠倒
    // reverse()

    // 2.4.2 排序
    // sort([compareFunction])
    // @compareFunction 一个比较函数
    // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

    // 比较数字
    var numbers = [4, 2, 5, 1, 3];
    numbers.sort(function (a, b) {
      return a - b;
    });
    // 可以写成 numbers.sort((a, b) => a - b);
    console.log(numbers);  // [1, 2, 3, 4, 5]
  }

  // 3.常用方法（访问）

  // 3.1 合并
  {
    // 3.1.1 合并成（数组）
    // var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

    // 3.1.2 连接成一个（字符串）（自定义）
    // join([separator])
    var elements = ['Fire', 'Air', 'Water'];
    console.log(elements.join()); //"Fire,Air,Water"
    console.log(elements.join('')); //"FireAirWater"
    console.log(elements.join('-')); //"Fire-Air-Water"

    // 3.1.3  连接成一个（字符串）（用,隔开）
    // toString()
  }

  // 3.2 判断
  {
    // 3.2.1 包含一个指定的值
    // includes(valueToFind[, fromIndex])
    var array1 = [1, 2, 3];
    console.log(array1.includes(2)); //true
  }

  // 3.3 截取当前数组中的一段元素组合成一个新数组（浅拷贝）
  // slice([begin[, end]])
  // 由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）
  var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
  console.log(animals.slice(2));     // Array ["camel", "duck", "elephant"]
  console.log(animals.slice(2, 4));  // Array ["camel", "duck"]
  console.log(animals.slice(1, 5));  // Array ["bison", "camel", "duck", "elephant"]

  // 3.4 由数组元素组合而成的【本地化】后的字符串
  // toLocaleString([locales[,options]])
  // @locales 带有BCP 47语言标记的字符串或字符串数组，关于locales参数的形式与解释，请看Intl页面。
  // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl
  // @options 一个可配置属性的对象，对于数字 Number.prototype.toLocaleString()，对于日期 Date.prototype.toLocaleString().
  var array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
  var localeString = array1.toLocaleString('en', { timeZone: "UTC" });
  console.log(localeString);
  // expected output: "1,a,12/21/1997, 2:12:00 PM",
  // This assumes "en" locale and UTC timezone - your results may vary

  // 3.5 查找
  {
    // 3.5.1 查找（左）
    // indexOf(searchElement[, fromIndex])
    var array = ["1ab", "2cd", "3ef", "4gh"];
    var idx1 = array.indexOf('3ef'); //2
    var idx2 = array.indexOf('ab'); //-1

    // 3.5.2 查找（右）
    // lastIndexOf(searchElement[, fromIndex])
    var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
    console.log(animals.lastIndexOf('Dodo')); //3
    console.log(animals.lastIndexOf('Tiger')); //1

    // 3.5.3 查找通过测试函数的第一个元素的（值）。否则返回 undefined。
    // find(callback[, thisArg])
    var array1 = [5, 12, 8, 130, 44];
    var found = array1.find(function (element) {
      return element > 10;
    });
    console.log(found); //  12

    // 3.5.4 查找通过测试函数的第一个元素的（索引）。否则返回 -1.
    // findIndex(callback[, thisArg])
    var found2 = array1.findIndex(function (element) {
      return element > 10;
    });
    console.log(found2); //  1
  }

  // 4.常用方法（迭代）

  // 4.1 普通循环

  // 4.1.1 循环执行一次（不能跳出循环）
  // forEach(callback(currentValue[, index[, array]])[, thisArg]);
  // @callback(currentValue[, index[, array]]) 为数组中每个元素执行的函数，该函数接收三个参数：
  //      @currentValue 数组中正在处理的当前元素。
  //      @index（可选） 数组中正在处理的当前元素的索引。
  //      @array（可选） forEach() 方法正在操作的数组。
  // @thisArg  可选参数。当执行回调函数时用作 this 的值(参考对象) 。
  function logArrayElements(element, index, array) {
    console.log('a[' + index + '] = ' + element);
  }

  // 注意索引 2 被跳过了，因为在数组的这个位置没有项
  [2, 5, , 9].forEach(logArrayElements);
  // logs:
  // a[0] = 2
  // a[1] = 5
  // a[3] = 9

  // 4.2 循环判断
  {
    // 4.2.1 判断（每个元素）都通过测试函数
    // every(callback[, thisArg])
    function isBelowThreshold(currentValue) {
      return currentValue < 40;
    }
    var array1 = [1, 30, 39, 29, 10, 13];
    console.log(array1.every(isBelowThreshold)); //true

    // 4.2.2 判断有（1个元素）通过测试函数
    // some(callback(element[, index[, array]])[, thisArg])

    // 例1：是否有能除尽2的值
    var array = [1, 2, 3, 4, 5];
    var even = function (element) {
      // checks whether an element is even
      return element % 2 === 0;
    };
    console.log(array.some(even)); //true
    console.log("---------");

    // 例2：判断数组元素中是否存在某个值
    var serr = ["EN-US", "zh-cn", "fr-fr"];
    var bool = serr.some(function name(element) {
      return element.toLowerCase() === "en-us";
    })
    console.log(bool); //true
  }

  // 4.3 创建新数组
  {
    // 4.3.1 通过测试函数过滤的所有数组组成的新数组
    // var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
    var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
    const result = words.filter(word => word.length > 6);
    console.log(result);
    // expected output: Array ["exuberant", "destruction", "present"]

    // 4.3.2 每个元素执行一次测试函数后的返回值组成的行数组，
    // 当你不打算使用返回的新数组却使用map是违背设计初衷的，请用forEach或者for-of替代
    // var new_array = arr.map(function callback(currentValue[, index[, array]])[, thisArg])
    var array1 = [1, 4, 9, 16];
    const map1 = array1.map(x => x * 2);
    console.log(map1);
    // expected output: Array [2, 8, 18, 32]
  }

  // 4.4 累计器
  {
    // 4.4.1 从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，
    //       并返回最后一次回调函数的返回值。
    // reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
    // @callback 执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数，包含四个参数：
    //      @accumulator     累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。
    //      @currentValue    数组中正在处理的元素。
    //      @index （可选）   数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则从索引1起始。
    //      @array （可选）    调用reduce()的数组
    // @initialValue （可选）  作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。
    //                       在没有初始值的空数组上调用 reduce 将报错。
    // @return 函数累计处理的结果

    const array1 = [1, 2, 3, 4];
    const reducer = function (accumulator, currentValue) {
      return accumulator + currentValue;
    }
    // 1 + 2 + 3 + 4
    console.log(array1.reduce(reducer));
    // 5 + 1 + 2 + 3 + 4
    console.log(array1.reduce(reducer, 5));

    // 4.4.2 从右到左为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，
    //       并返回最后一次回调函数的返回值。
    // reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])
  }

  // *（实验性API） 4.5 键值对
  {
    // 4.5.1 entries()
    // 返回键值对数组
    var array1 = ['a', 'b', 'c'];
    var iterator1 = array1.entries();
    console.log(iterator1.next().value);
    // expected output: Array [0, "a"]
    console.log(iterator1.next().value);
    // expected output: Array [1, "b"]

    // 4.5.2 keys()
    // 返回键数组

    // 4.5.3 values()
    //返回值数组
  }