js数组方法

js的数组就是API的调用

1.创建数组

// 创建数组
var a = new Array(); // 创建一个没有任何元素的数组
var b = new Array(10); //创建一个指定长度的数组
console.log(b.length); // =>10 当实际添加长度大于10时，length = 实际长度
console.log(b[0]); // =>undefined

console.log(Array.isArray(b)); // => true 检测是否为数组

2.类型转换

var colors = ['red','blue']
colors.toString(); // =>"red,blue"
colors.join(); // =>"red,blue"

2.数组基本操作方法

push()和pop()

• push()和pop()方法允许将数组当做栈来使用
• push()在数组的尾部添加一个或多个元素，并返回数组的新长度
• 都是对原数组的操作

push()

var arr = ['a','b','c']
var len = arr.push('d','e')
console.log(len); // =>5
console.log(arr); // =>[ 'a', 'b', 'c', 'd', 'e' ]

pop() 删除数组最后一个元素，减小数组长度并返回它删除的值。

var arr = ['a','b','c']
var value = arr.pop()
console.log(value); // =>c
console.log(arr); // =>[ 'a', 'b' ]

unshift()和shift()

• unshift()在数组的头部添加一个或者多个元素，占有索引 0，其他元素整体后移，最后返回数组新的长度
• 当使用多个参数调用unshift()时，参数是一次性插入的（就想splice()方法）而非一次一个的插入，所以最终数组中插入的元素顺序和它们在参数列表中的顺序是一致的。如果一次一个插入，顺序应该是反过来的。

var arr = ['a','b','c'];
var length = arr.unshift('d');
console.log(length); // => 4
console.log(arr); //=> ['d', 'a', 'b', 'c']

// 多个参数插入
var arr1 = ['1','2','3'];
arr1.unshift('4','5','6');
console.log(arr1);  // => ['4','5','6','1','2','3']

• shift()删除数组的第一个元素并将其返回。

var arr = ['a','b','c'];
var value = arr.shift();
console.log(value); // => "a"
console.log(arr); // => ['b','c']

reverse()

• reverse()方法将数组中的元素颠倒顺序，返回逆序的数组。

var arr = [1,2,3];
arr.reverse();
console.log(arr);// => [3,2,1]

sort()

• sort()方法将数组中的元素排序并返回排序后的数组。
• 当不带参数调用sort()，数组元素以字母表顺序排序（如果有必要将零时转化为字符串进行比较）。
• sort()方法接收一个比较函数，该函数决定了它的两个参数在排好序的数组中的顺序,如果想第一个参数在前，比较函数应该返回小于0的数值，如果想第一个参数在后，函数应该返回大于0的值。
• 原数组被改变

var arr = [33,4,111,222];
arr.sort(); // => 字母表顺序 [111, 222, 33, 4]
// 升序
arr.sort(function(a,b){return a-b;});// => [4, 33, 111, 222]
// 降序
arr.sort(function(a,b){return b-a;});// => [222, 111, 33, 4]

concat()

• concat()方法创建并返回一个新数组，它的元素包括调用concat()的原始数组的元素和concat()的每个参数，如果这些参数中的任何一个自身是数组，则连接的是数组元素，而非数组本身（就是合并数组）
• concat()不会递归扁平化数组的数组（如：例子最后一个）
• concat()不会修改调用的数组

var arr = [1,2,3];
arr.concat(4,5);  // => [1,2,3,4,5] 相当于是push(4,5)
arr.concat([4,5]);// => [1,2,3,4,5] 合并两个数组返回新数组
arr.concat([4,5],[6,7]); // => [1,2,3,4,5,6,7]
arr.concat(4,[5,[6,7]]); // => [1,2,3,4,5,[6,7]]

// 原数组保持不变
console.log(arr); // => [1,2,3]

slice()

• slice()方法返回指定数组的一个片段或子数组。
• 它接收两个参数分别指定了截取的开始和结束位置（索引）
• 返回一个新数组，包含第一个参数指定位置和第二个参数指定位置的所有元素，但是不包含第二个参数指定位置的元素。（0<=x<1）
• 如果参数中出现负数，它表示相对于数组中最后一个元素的位置
• 如果只有一个参数（正数），参数位置到结束
• 如果只有一个参数（负数），结束位置到参数位置(从后往前)

var arr = [1,2,3,4,5];
arr.slice(0,3); // => [1,2,3]
arr.slice(3); // => [4,5] 
arr.slice(-3);// => [3,4,5]
arr.slice(1,-1); // => [2,3,4]
// 原数组不变
console.log(arr); // => [1,2,3,4,5]

splice()

• splice()方法可实现在数组中插入或删除元素，原数组发生改变。

• 第一个参数指定插入或删除的起始位置。

• 第二个参数指定删除个数，如果不写第二个参数则从起始到结尾都删除。

• splice()返回一个由删除元素组成的数组，没有删除元素返回空数组。

• 前两个参数后任意个数的参数指定了需要插入到数组中的元素，从第一个参数指定的位置开始插入。

• 区别于concat()，splice()会插入数组本身而非数组元素。

var arr = [1,2,3,4,5];
arr.splice(2,0,'a','b'); // 返回[]没有删除任何元素
console.log(arr); // => [1,2,'a','b',3,4,5]
arr.splice(2,2,[1,2],3); // => 返回['a','b'] 从2下标开始删除2个元素
console.log(arr);// => [1,2,[1,2],3,3,4,5]

查找数组元素

indexOf()

• indexOf()验证数组中是否包含某个元素，返回第一个匹配到的元素在数组中的索引，如果没有查到，则返回-1。

var arr = [1,2,3,4,5];
arr.indexOf(3);// => 2 查找3的位置
arr.indexOf(6);// => -1 数组中不包含6，所以返回-1

lastIndexOf()

• lastIndexOf ()从数组结尾开始查找，返回第一个匹配到的元素位置，如果每个查到则返回-1。

var arr = [1,2,3,4,5];
arr.lastIndexOf(3);// => 2 查找3的位置
arr.lastIndexOf(6);// => -1 数组中不包含6，所以返回-1

find()

• find()用于找出第一个符合条件的数组成员。

• 参数是一个回调函数，所有数组成员依次执行该函数，知道找出第一个返回值为true的成员，然后返回该成员。

• 如果没有符合条件的成员，返回undefined。

注意：此方法只返回第一个满足条件的数组成员

const arr = [1,4,-5,10];
// 找出第一个小于 0 的成员
const key = arr.find((n) => n < 0);
console.log(key); // => -5
// 找出第一个大于 0 的成员 大于 0 的成员有3个，但是只返回第一个
const key = arr.find((n) => n > 0);
console.log(key); // => 1
// 如果成员是对象呢？
const arr = [{a:1},{a:2},{a:3}];
const _value = arr.find((value) => value.a > 0);
console.log(_value); // => {a:1}

• find()接受三个参数，依次为(当前值，当前位置，原数组)

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

findIndex()

• findIndex()返回第一个符合条件的数组成员的位置，如果都不符合返回-1。
• 其它属性跟find()一样。

const arr = [1,5,10,15];
// 查找大于9的元素的索引
const key = arr.findIndex((value) => value > 9);
console.log(key); // => 2 第一个大于9的元素是 10，索引是 2

• 两个方法都可以接受第二个参数，用来绑定回调函数的this对象。

如下：回调函数中的 this 对象指向 person 对象。

function f (v){
  return v > this.age;// ?? this??是谁？？？满脸问号
}
let person = {name:'John',age:20};
// 回调函数中的this对象指向person对象
[10,12,26].find(f,person); // => 26
[10,26,12].findIndex(f,person); // => 1

includes()

• includes()返回一个布尔值，表示某个数组是否包含给定的值。

• 方法第二个参数表示搜索的起始位置，默认为0。如果为负数则表示倒数的位置，如果这时它大于数组长度(比如第二个参数为-4，但数组长度为3)则会重置为从0开始。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

// 从索引3开始搜索，但是此数组并没有索引3
[1, 2, 3].includes(3, 3); // => false
// 从数组最后一位开始搜索
[1, 2, 3].includes(3, -1); // => true
// 第二个参数为负数且绝对值大于数组长度，重置从0开始搜索
[1, 2, 3].includes(3,-4); // => true

数组的迭代方法

• ES5的5个迭代方法作用不同但是参数都一样

• 每个方法接受2个参数(运行函数，运行函数的作用域对象（可选）)

• 运行函数有3个参数（当前值，当前位置，数组本身）

every()

• every()检测数组中的元素是否满足某个条件，必须所有元素调用判定函数都返回true，它才返回true。
• 返回ture或者false。
• 就像这个单词的意思一样，每个都返回true，才会返回true。
  一旦确定该返回什么值就会停止遍历，有一个元素返回false就会停止遍历然后返回false，如果一直返回true，它会遍历整个数组。
• 空数组调用返回true。

const arr = [1,2,3,4,5,6];
arr.every((value) => value < 10); // => true  因为所有的值都小于10
arr.every((value) => value % 2 === 0); // => false 不是所有的值都是偶数 
[].every((value) => value < 10); // => true

some()

• some()当数组中至少有一个元素调用判定函数返回true，它就返回true。
• 当且仅当所有元素调用判定函数都返回false，它才返回false。
• 一旦确定该返回什么值就会停止遍历，判定函数第一次返回true后就返回true，但如果一直返回false，它将会遍历整个数组。
• 空数组调用返回false。

const arr = [1,2,3,4,5];
arr.some((value) => value % 2 ===0); // true arr数组中含有偶数
arr.some(isNaN); // => false 数组中不包含非数值元素
[].some((value) => value < 10); // => false

filter()

• filter()返回一个数组，是调用数组的子集，传递一个函数用来判定，该函数返回true或false，只有该函数返回true，传递给判定函数的值会被添加到一个新数组中返回。
• 返回新数组
• 原来的数组不变
• 返回的数组总是稠密的

const arr = [1,2,3,4,5];
// 返回所有小于3的元素
const value = arr.filter((value) => value < 3); // => [1,2]

• 压缩空缺并删除undefined和null元素，如下：
  a.filter((value) => value !undefined && value != null);

a.filter((value) => value !==undefined && value !=== null);

map()

• map()将调用的数组的每个元素传递给指定的函数，并返回一个数组，它包含该数组的返回值。
• map()返回的是新数组，它不修改调用的数组
• 如果是稀疏数组，返回的也是相同方式的稀疏数组：相同长度，相同的缺失元素。

const arr = [1,2,3,4];
const value = arr.map((value) => value * 2);
console.log(value); // [2,4,6,8]
console.log(arr); // [1,2,3,4] 

forEach()

forEach()从头到尾遍历数组，为每个元素调用指定函数。

无法在所有元素都传递给调用的函数之前终止遍历。不可以使用for中的break语句，如果要提前终止，必须把forEach()放在一个try块中，并能抛出一个异常foreach.breack，循环会提前终止。

const arr = [1,2,3,4,5];
let sum = 0;
arr.forEach((value) => sum+=value); // 将每个值累加到sum上
console.log(sum); // => 15
arr.forEach((value,index,arr) => arr[index] = value+1);
console.log(arr); // => [2,3,4,5,6]

注意：map、forEach里不可以使用continue、break,每一项都会执行。

注入和折叠

reduce() 和 reduceRight()

• reduce()和reduceRight()方法使用指定的函数将数组元素进行组合，生成单个值，这在函数式编程中是常见的操作，也可称为“注入”和“折叠”。

• reduce()需要两个参数

• 第一个是执行化简操作的函数

• 第二个参数是一个传递给函数的初始值（可选）如果数组为空数组，但是要使用这个初始值则会报错。

reduce()使用函数与其他不同，有四个参数

• 第一个参数是到目前为止的化简操作积累的结果，第一次调用函数时，第一个参数是一个初始值，它就是reduce()的第二个参数，下一个调用，这个值就是上一次计算的返回值（不指定初始值，函数使用数组的第一个元素作为初始值）
• 第二个参数是当前传入函数的值
• 第三个参数是当前传入函数的索引
• 第四个参数是当前数组

下边代码中如果数组是空prev必须指定

var arr = [1,2,3,4,5];
// 传入初始值为 0 
var sum  = arr.reduce(function(prev,cur,index,arr){
  console.log(prev); // 依次输出 0  1  3  6  10 
  return prev + cur;
},0); //数组求和 => 15

// 不传初始值 函数第一个元素作为初始值
var max = arr.reduce(function(prev,cur,index,arr){
  return (pre > cur)?pre:cur;
}); // 求最大值 => 5

• reduceRight()工作原理跟 reduce() 一样，不同的是它按照数组索引从高到底（从右到左）处理数组。

下边代码如果reduce的第二个参数不指定会报错

  sum(...values) {
      console.log(values);
      let summation = values.reduce((pre,cur)=>pre+cur,0);
      console.log(summation);   
   }

Array.from()

• Array.from()用于将类对象转为真正的数组：类似数组的对象和可遍历的对象
• 下面试一个类似数组的对象，Array.from()将它转为真正的数组。

let arrayLike = {
  '0':'a',
  '1':'b',
  '2':'c',
  length:3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // => ['a','b','c']
// ES6的写法
let arr2 = Array.from(arrayLike); // => ['a','b','c']

• Array.from()还支持类似数组的对象，所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from()转为数组，而此时扩展运算符就无法转换。

Array.from({length:3});
// => [ undefined,undefined,undefined]

• Array.from()还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// =>[1, 4, 9]

Array.of()

• Array.of()将一组值转换为数组。

Array.of(1,2,3); // => [1,2,3]
Array.of(1,2,3).length; // => 3
Array.of(3); // => [3]

• 这个方法的主要目的，是弥补数组构造函数Array()的不足。

Array(); // => []
Array(3); // => [,,,]
Array(1,2,3); // => [1,2,3]

• 上面代码中，Array()没有参数、一个参数、三个参数时，返回结果都不一样，只有当参数个数不少于2个时，Array()才会返回由参数组成的新数组，参数个数只有一个时，实际上是指定数组的长度。
• Array.of()基本上可以用来代替Array()或new Array()，并且不存在由于参数不同而导致的重载，它的行为非常统一。

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

• Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

copyWithin()

• 数组实例的 copyWithin()，在当前数组内部，将指定位置的成员复制到其它位置（会覆盖原有成员），然后返回当前数组
  使用这个方法会修改当前数组
  它接受三个参数

• target（必需）: 从该位置开始替换数据，如果为负数，表示倒数。

• start（可选）：从该位置开始读取数据，默认为0，如果为负数，表示从末尾开始计算。

• end（可选）：到该位置前停止读取数据，默认等于数组长度，如果为负数，表示从末尾开始计算。

• 这三个参数都应该是数值，如果不是，会自动转换为数值

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相当于3号位，-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

fill()

• fill()使用给定的值，填充一个数组。
• 数组中的已有元素会被抹去
• 用于空数组的初始化非常方便
• 改变原来的数组
• 如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。

[1,2,3].fill(4);
// => [4,4,4]
new Array(3).fill(7);
// => [7,7,7]

• fill()还可以接受第二个参数和第三个参数，用于指定填充的起始和结束位置。

var arr = [1,2,3,4,5];
arr.fill(7,1,2);
console.log(arr); // => [1,7,3,4,5]
// 等同于
arr.splice(1,1,7);
console.log(arr); // => [1,7,3,4,5]

entrues(),keys(),values()

• 用于遍历数组
• 使用for…of循环进行遍历
• keys()是对键名的遍历
• values()是对键值的遍历
• entries()是对键值对的遍历
• const arr = [‘a’,‘b’];

for(let index of arr.keys()){
  console.log(index);
}
// => 0
// => 1
for(let elem of arr.values()){
  console.log(elem);
}
// => 'a'
// => 'b'
for (let [index, elem] of arr.entries()) {
  console.log(index, elem);
}
// => 0 "a"
// => 1 "b"

flat()

• 数组的成员有时候还是数组，flat用于将嵌套的数组“拉平”，变成一维数组。

• 该方法返回新数组，对原数组没有影响

var arr = [1,2,[3,4]];
arr.flat();
// => [1,2,3,4]
console.log(arr); // => [1,2,[3,4]];

• 接受一个参数，表示想要拉平的层数，默认为1
• 如果不管有多少层嵌套，都希望转成一维数组，可以用Infinity关键字作为参数

[1, 2, [3, [4, 5]]].flat()
// =>  [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// => [1, 2, 3, 4, 5]
[1, [2, [3]]].flat(Infinity)
// =>  [1, 2, 3]
如果原数组有空位，该方法会跳过空位
[1,2,,4,5].flat();
// => [1,2,4,5]

flatMap()

• 该方法对原数组的每个成员执行一个函数（相当于执行map()），然后对返回值组成的数组执行flat()

• 返回新数组，不改变原数组

[1,2,3].flatMap((value) => [value,value * 2]);
// => [1,2,2,4,3,6]
// 相当于执行
[[1,2],[2,4],[3,6]].flat();

• flatMap()只能展开一层数组

哪些方法会改变原始数组

• copyWithin()
• fill()
  -pop()
• push()
• reverse()
• shift()
• unshift()
• splice()
• sort()