Javascript 常用的Array方法

Javascript 常用的Array方法–温习一下

前言

2018年已经过去，在过去的一年中大部分的时间都用在了 coding 业务代码和各种生活琐事中，花在 learning 的时间少之又少，2019已经来了，在这里先立个 flag ：

1. review 自己之前写的代码，在欠缺的地方做改进。
2. 重温CSS、JS基础。
3. 完成自己的前端框架（一定完成·一定完成·一定完成）重要的事情说三遍，已经拖了太久了。
4. 完成个人博客网站（越写越觉得自己是个重度拖延症患者(O.O)…）。
5. 早睡、早起、少撸、多看书。---------（少撸：指玩游戏，想歪的自己面壁）
6. 深入学习各大框架底层。

flag 就立这么多吧！不然没法实现了。

先来看看JS

常用的 Array 方法

Array.from()

Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。

String 转换 Array

  /*
  * params form(arrayLike, Fn?, thisArg?)
  * arrayLike: 想要转换成数组的伪数组对象或可迭代对象。
  * Fn: 可选，如果指定了该函数，arrayLike中每个元素都会执行该函数
  * thisArg: 可选，Fn中this的指向对象，使用该参数时Fn不能使用箭头函数，否则this无法指向设置的对象
  **/
  console.log(Array.from('hello world')); 
  // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

Set 转换 Array

  const set = new Set(['hello world',  window]); 
  Array.from(set); // ['hello world', window]

Map 转换 Array

  const maps = new Map([[1, 3], [5, 7], [2, 4]]); 
  Array.from(maps); // [[1, 3], [5, 7], [2, 4]

Array.form() 配合 Set 使数组去重合并

  function combine() { 
	    let arr = [].concat.apply([], arguments);  //没有去重复的新数组 
	    return Array.from(new Set(arr));
	} 
  var m = [1, 2, 2], n = [2,3,3]; 
  console.log(combine(m,n));  // [1, 2, 3]

Array.isArray()

用于确定传递的值是否是一个 Array。

  /*
  * params isArray(obj)
  * obj: 想要转换成数组的伪数组对象或可迭代对象。
  **/
  // 假如不存在 Array.isArray(obj)，则在其他代码之前运行下面的代码将创建该方法。
  if (!Array.isArray) {
  	Array.isArray = function(arg) {
      return Object.prototype.toString.call(arg) === '[object Array]';
  	};
  }

Array.of()

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

  /*
  * params of(ele1, ele2, ele3···)
  * eleN: 任意个参数，将按顺序输出为数组并返回。
  **/
  Array.of(7);       // [7] 
  Array.of(1, 2, 3); // [1, 2, 3]

如果原生不支持的话，在其他代码之前执行以下代码会创建 Array.of() 。

  if (!Array.of) {
    Array.of = function() {
      return Array.prototype.slice.call(arguments);
    };
  }

Array.concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

  /*
  * params arr1.concat(arr2, arr3, arr4···)
  * arrN: 任意个参数，将按顺序合并后输出为新数组。
  **/
  var array1 = ['a', 'b', 'c'];
  var array2 = ['d', 'e', 'f'];
  console.log(array1.concat(array2)); // ['a', 'b', 'c', 'd', 'e', 'f']
  

Array.every()

every() 方法测试数组的所有元素是否都通过了指定函数的测试。

  /*
  * params every(fn, thisArg?)
  * fn: array中每个元素都会执行的函数测试。
  * thisArg: 可选，fn中this的指向对象，使用该参数时fn不能使用箭头函数，否则this无法指向thisArg
  **/
  function isBelowThreshold(currentValue) {
    return currentValue < 40;
  }

  var array1 = [1, 30, 39, 29, 10, 13];

  console.log(array1.every(isBelowThreshold));
  // expected output: true
  // ES6
  const array2 = [1, 30, 39, 29, 10, 13];
  console.log(array2.every(item => item < 40));

Array.filter()

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

  /*
  * params every(callback, thisArg?)
  * callback: array中每个元素都会执行的函数测试。
  * thisArg: 可选，callback中this的指向对象，使用该参数时callback不能使用箭头函数，否则this无法指向thisArg
  **/
  unction isBigEnough(element) {
    return element >= 10;
  }
  var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
  // filtered is [12, 130, 44]
  
  //ES6
  const filtered2 = [12, 5, 8, 130, 44].filter(item => item >= 10);

查询筛选对象数组

  // ES6
  const array = [{a: 1, b:2}, {a: 1, b:2}, {a: 2, b:2}, {a: 2, b:3}, {a: 1, b:2}];
  console.log(array.filter(item => item.a === 2))
  // [{a: 2, b: 2}, {a: 2, b: 3}]
  console.log(array.filter(item => {
    return item.a === 2;
  }))
  // 两个写法是一样的，写法1是省略了return，写法2中必须有return。

Array.find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

用对象的属性查找数组里的对象

  const array1 = [{a: 1, b:2}, {a: 1, b:2}, {a: 2, b:2}, {a: 1, b:2}, {a: 1, b:2}];
  console.log(array1.find(item => item.a === 2));
  // Object { a: 2, b: 2 }
  

Array.findIndex()

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
使用方法和 Array.find() 一样，差别仅为返回值是索引。这里就不多说了

Array.forEach()

forEach() 方法对数组的每个元素执行一次提供的函数。

  const array1 = ['a', 'b', 'c'];
  array1.forEach((el, i) => {
    console.log(el, i)
  })
  // a, 0
  // b, 1
  // c, 2

Array.includes()

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

  var pets = ['cat', 'dog', 'bat'];
  console.log(pets.includes('cat'));
  // expected output: true

  var array1 = [1, {a: 1}, 3];
  console.log(array1.includes({a: 1}));
  // expected output: false

  var o = {a: 1}
  var array1 = [1, o, 3];
  console.log(array1.includes(o));
  // expected output: true

Array.indexOf()

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

  var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
  console.log(beasts.indexOf('bison'));
  // expected output: 1

Array.join()

join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。
默认使用’ , ’

  var elements = ['Fire', 'Wind', 'Rain'];
  console.log(elements.join());
  // expected output: Fire,Wind,Rain
  
  console.log(elements.join(''));
  // expected output: FireWindRain

  console.log(elements.join('-'));
  // expected output: Fire-Wind-Rain

Array.lastIndexOf()

lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

  var animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

  console.log(animals.lastIndexOf('Dodo'));
  // expected output: 3

  console.log(animals.lastIndexOf('Tiger'));
  // expected output: 1

Array.map()

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

  // ES6
  const arr1 = [1, 2, 3, 4];
  const arr2 = arr1.map(item => item * item)
  console.log(arr2)
  // [1, 4, 9, 16]

Array.pop()

pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改原始数组的长度。

  var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

  console.log(plants.pop());
  // expected output: "tomato"

  console.log(plants);
  // expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

Array.push()

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

  var animals = ['pigs', 'goats', 'sheep'];

  console.log(animals.push('cows'));
  // expected output: 4

  console.log(animals);
  // expected output: Array ["pigs", "goats", "sheep", "cows"]

Array.reverse()

reverse() 方法将数组中元素的位置颠倒。

  var array1 = ['one', 'two', 'three'];
  console.log('array1: ', array1);
  // expected output: Array ['one', 'two', 'three']

  var reversed = array1.reverse(); 
  console.log('reversed: ', reversed);
  // expected output: Array ['three', 'two', 'one']

Array.shift()

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

  var array1 = [1, 2, 3];
  var firstElement = array1.shift();

  console.log(array1);
  // expected output: Array [2, 3]

  console.log(firstElement);
  // expected output: 1

Array.slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin和 end（不包括end）决定的原数组的浅拷贝。原始数组不会被改变。

  var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

  console.log(animals.slice(2));
  // expected output: Array ["camel", "duck", "elephant"]

  console.log(animals.slice(2, 4));
  // expected output: Array ["camel", "duck"]

Array.some()

some() 方法测试是否至少有一个元素通过由提供的函数实现的测试。

  const array = [1, 2, 3, 4, 5];
  console.log(array.some(item => item % 2 === 0));
  // expected output: true

Array.sort()

sort() 方法用原地算法对数组的元素进行排序，并返回数组。排序算法现在是稳定的。默认排序顺序是根据字符串Unicode码点。

  // 默认排序
  var array1 = [1, 30, 4, 21];
  array1.sort();
  console.log(array1);
  // expected output: Array [1, 21, 30, 4]

  // 比较数字而非字符串，比较函数可以简单的以 a 减 b，如下的函数将会将数组升序排列
  var numbers = [4, 2, 5, 1, 3]; 
  numbers.sort((a, b) => a - b); 
  console.log(numbers);
  // [1, 2, 3, 4, 5]

Array.splice()

splice()方法通过删除现有元素和/或添加新元素来修改数组,并以数组返回原数组中被修改的内容。

  /*
  * params splice(start, deleteCount, item1？，item2？···)
  * start: 指定要修改的起始位置。
  * deleteCount: 要删除的元素个数。（为0时不删除，该情况下item至少存在一个）
  * item[N]: 要添加到数组的元素
  */
  var months = ['Jan', 'March', 'April', 'June'];
  months.splice(1, 0, 'Feb');
  // inserts at 1st index position
  console.log(months);
  // expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

Array.unshift()

unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。

  var array1 = [1, 2, 3];

  console.log(array1.unshift(4, 5));
  // expected output: 5

  console.log(array1);
  // expected output: Array [4, 5, 1, 2, 3]

先写那么多，慢慢完善······