javascript之Array的使用

Array数组对象是用于构造数组的全局对象; 它是高阶，类似列表的对象。
我们可以创建一个数组

var array = new Array();
var array = new Array(20);//数组的成员数量20
或
var array = new Array(20)

var arrs = ["1","2"];
arrs.length();//数组的长度
#可以通过索引访问数组元素
arrs[0]//结果1

#创建一个空数组
var arr = [];

###遍历一个数组(常用)

• forEach 方法

  var arrs = ["aaa","bbb"];
  arrs.forEach(function (item, index, array) {
      console.log(item, index);
      //aaa  0
      //bbb 1
  });

• for( ; ; ){}

  for(var i=0;i< arrs.length;i++){
      console.log(arrs[i]);
  }

• for in 方法

  for(var i in arrs){
      console.log(arrs[i]);
  }

• for of 方法

  for(var value of arrs){
      console.log(value);
  }

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

  let array = arr.map(function callback(currentValue, index, array) {
      // Return element for new_array
  }[, thisArg])
  方法会将其传入三个参数，分别是`currentValue`当前成员、`index `当前位置和`array `数组本身
  
  var numbers = [1, 2, 3];
  numbers.map(function (n) {
    return n + 1;
  });
  // [2, 3, 4]

• 如何判断是否为数组

  var arr = [1,2,3];
  #判断方法
  typeof arr // "object"
  Array.isArray(arr) // true

#Array实例方法

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

  var arrs = ["a","b","c"];
  Array.from(arrs);//["a","b","c"]
  
  Array.from("welcome");
  //[ 'w', 'e', 'l', 'c', 'o', 'm', 'e' ]
  
  Array.from("123456789")
  //[ '1', '2', '3', ',', '4', '5', '6', '7', '8', '9' ]

var setArr = new Set(["sss","aaa"])
console.log(Array.from(setArr))
//[ 'sss', 'aaa' ]
var mrr = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(mrr);
// [[1, 2], [2, 4], [4, 8]]

#from的functions方法
Array.from([1, 2, 3], x => x + x);
//[2, 4, 6]
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

• valueOf() :方法返回数组本身

  var arrs = ["aaa","bbb"];
  arrs.valueOf();

• toString() :此方法返回数组的字符串形式

  var arrs = ["a","b","c"];
  arrs.toString();//"a,b,c"
  
  var arrs = ["a","b","c",[1,2,3]];
  console.log(arrs.toString())
  //a,b,c,1,2,3

• Array.of() :方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型
  Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个包含 7 个 undefined元素的数组。

Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]
# 对比
Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

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

  let arr1 = ["a", "b", "c"];
  let arr2 = ["d", "e", "f"];
  let arr3 = arr1.concat(arr2);
  #结果["a","b","c","d", "e", "f"]

• copyWithin() :方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，而不修改其大小

  arr.copyWithin(target)
  arr.copyWithin(target, start)
  arr.copyWithin(target, start, end)
  arr.copyWithin(目标索引, [源开始索引], [结束源索引])

  target
  0 为基底的索引，复制序列到该位置。如果是负数，target 将从末尾开始计算。
  如果 target 大于等于 arr.length，将会不发生拷贝。如果 target 在 start 之后，复制的序列将被修改以符合 arr.length。
  start
  0 为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算。
  如果 start 被忽略，copyWithin 将会从0开始复制。
  end
  0 为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数， end 将从末尾开始计算。
  如果 end 被忽略，copyWithin 将会复制到 arr.length。

[1, 2, 3, 4, 5].copyWithin(-2);
// [1, 2, 3, 1, 2]

[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
// [1, 2, 3, 3, 4]

[1, 2, 3, 4, 5].copyWithin(2, 1, 3)
//[1,2,2,3,5]

• push() :方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

  var numbers = [1, 2, 3];
  numbers.push(4);
  console.log(numbers);
  // [1, 2, 3, 4]
  
  #合并两个数组
  var a = [1,2,3,4];
  var b = [5,6];
  a.push.apply(a,b)
  //[1,2,3,4,5,6]

• pop() :方法用于删除数组的最后一个元素，并返回该元素。注意，此方法更改数组的长度，如果你在一个空数组上调用 pop()，它返回undefined

  let a = [1, 2, 3];
  a.length; // 3
  #删除最后一个元素
  a.pop(); // 3

push和pop结合使用，就构成了“后进先出”的栈结构（stack）

• join() :方法将数组（或一个类数组对象）的所有元素连接到一个字符串中

  let a = ['1', '2', '3'];
  a.join();
  //默认为 ","
  //"1,2,3"
  
  a.join("");
  // 分隔符 === 空字符串 ""
  // "123"
  
  a.join("-");
  //"1-2-3"

若数组成员存在undefined或null或空位，会被转成空字符串

[undefined, null].join('-')
// '-'

['1',, '2'].join('-')
// '1--2'

也可以通过call 方法用于字符串

Array.prototype.join.call('hello', '-')
// "h-e-l-l-o"
var obj = { 0: 'a', 1: 'b', length: 2 };
Array.prototype.join.call(obj, '-')
// 'a-b'

• shift() :方法用于删除数组的第一个元素，并返回该元素。注意，该方法会改变原数组

shift方法移除索引为 0 的元素(即第一个元素)，并返回被移除的元素，其他元素的索引值随之减 1。如果 length属性的值为 0 (长度为 0)，则返回undefined

let myFish = ['1', '2', '3', '4'];
myFish.shift();
// ['2', '3', '4']

shift方法可以遍历并清空一个数组

var list = [1, 2, 3];
var ite;
while (ite = list.shift()) {
  console.log(ite);
}
// 结果list:[]

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

  let a = [1, 2, 3];
  a.unshift(4, 5);//添加
  // [4, 5, 1, 2, 3]

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

  var myArray = ['1', '2', '3'];
  myArray.reverse();
  // ['3', '2', '1']

• slice() :方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。

  arr.slice();//[0,end]
  arr.slice(begin);//[begin,end]
  arr.slice(begin,end)://[begin,end)
  它的第一个参数begin为起始位置（从0开始），第二个参数end为终止位置（但该位置的元素本身不包括在内）。如果省略第二个参数，则一直返回到原数组的最后一个成员

  var arr = ['a', 'b', 'c'];
  arr.slice(1) // ["b", "c"]
  arr.slice(1, 2) // ["b"]
  arr.slice(2, 7) // ["c"],7已经超过数组的length
  arr.slice() // ["a", "b", "c"]
  如果是负数则表示倒数计算位置
  arr.slice(-2) // ["b", "c"]

slice方法的一个重要应用，是将类似数组的对象转为真正的数组

Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })
// ['a', 'b']
或者
function list() {
  return Array.prototype.slice.call(arguments);
}
var list1 = list(1, 2, 3); // [1, 2, 3]

• splice() :方法通过删除现有元素和/或添加新元素来更改一个数组的内容

  array.splice(start)
  array.splice(start, deleteCount)
  array.splice(start, deleteCount, item1, item2, …)

  splice:第一个参数是删除的起始位置，第二个参数是被删除的元素个数。
  如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。
  # 起始位置如果是负数，就表示从倒数位置开始删除

var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
arr.splice(4, 2) // arr:["a", "b", "c", "d"]
arr.splice(4,2,1,2)//arr:["a", "b", "c", "d",1,2]

• sort() :方法在适当的位置对数组的元素进行排序，并返回数组。 sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点

  var fruit = ['cherries', 'apples', 'bananas'];
  fruit.sort();
  // ['apples', 'bananas', 'cherries']

var scores = [1, 10, 21, 2];
scores.sort();
// [1, 10, 2, 21]
// 注意10在2之前,
// 因为在 Unicode 指针顺序中"10"在"2"之前

var things = ['word', 'Word', '1 Word', '2 Words'];
things.sort();
// ['1 Word', '2 Words', 'Word', 'word']
// 在Unicode中, 数字在大写字母之前,
// 大写字母在小写字母之前.

sort可以按照自定义的方式排序，可以传入一个函数作为参数

[10111, 1101, 111].sort(function (a, b) {
  return a - b;
})
// [111, 1101, 10111]

• filter() :方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素,参数函数可以接受三个参数，第一个elem参数是当前数组成员的值，这是必需的，后两个参数是可选的，分别是当前数组成员的位置index和整个数组arr

  filter(function (elem, index, arr) {…do somthing…})

  function isBigEnough(value) {
    return value >= 10;
  }
  var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
  //[12, 130, 44]

[1, 2, 3, 4, 5].filter(function (item) {
  return (item > 4);
})
// [5]

• some() :方法测试数组中的某些元素是否通过由提供的函数实现的测试

  const asd = (element, index, array) => {
    return element > 10;
  }
  [2, 5, 8, 1, 4].some(asd);//false
  [2, 5, 8, 1, 40].some(asd);//true

• every() :方法测试数组的所有元素是否都通过了指定函数的测试,类似some()

• reduce() :方法对累加器和数组中的每个元素 (从左到右)应用一个函数，将其减少为单个值

  var total = [0, 1, 2, 3].reduce(function(item, value) {
    return item + value;
  }, 0);
  // total is 6

• reduceRight() :方法接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值

  let flattened = [[0, 1], [2, 3], [4, 5]].reduceRight((a, b) => {
      return a.concat(b);
  }, []);
  // flattened is [4, 5, 2, 3, 0, 1]

• indexOf(),lastIndexOf():
  indexOf方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1

  let a = [2, 9, 7, 8, 9];
  a.indexOf(2); // 0
  a.indexOf(6); // -1

lastIndexOf方法返回给定元素在数组中最后一次出现的位置，如果没有出现则返回-1

var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1

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

  function isBigEnough(element) {
    return element >= 15;
  }
  [12, 5, 8, 130, 44].find(isBigEnough); // 130

• findIndex() :方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1

  function isBigEnough(element) {
    return element >= 15;
  }
  [12, 5, 8, 130, 44].findIndex(isBigEnough); // 3

• toLocaleString() :返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 “,”）隔开

var number = 1668;
var date = new Date();
var arr = [number, date, "welcome"];
var str = arr.toLocaleString();
console.log(str);
// 输出 "1,668,2017/8/15 下午8:32:24, welcome"
// 假定运行在中文（zh-CN）环境，北京时区

• includes() :方法用来判断一个数组是否包含一个指定的值，如果是，酌情返回 true或 false

  arr.includes(searchElement)
  arr.includes(searchElement, fromIndex)
  searchElement需要查找的元素值
  fromIndex从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

  et a = [1, 2, 3];
  a.includes(2);
  // true
  a.includes(5);
  // false

• fill() :方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素

  arr.fill(value)
  arr.fill(value, start)
  arr.fill(value, start, end)
  value用来填充数组元素的值 start起始索引，默认值为0 end 终止索引，默认值为 this.length

  var numbers = [1, 2, 3]
  numbers.fill(1);
  // results in [1, 1, 1]