关于数组的一切

数组的创建

var arr = []; //创建一个空数组  语法糖
var arr2 = new Array(); //使用构造函数创建一个空数组

关联数组和索引数组

• 索引数组：使用索引值对数组的元素进行编号
• 关联数组：使用字符串作为数组的索引
  注：关联数组不计算长度（length：0） 无法使用for语句遍历，可以用for...in遍历

// 关联数组
var arr = []
arr['name'] = '张三'
arr['age'] = 20
arr['sex'] = '男'

Array.from()

• 语法：Array.from(arrayLike[, mapFn[, thisArg]])
• 描述：可以通过以下方式来创建数组对象
  • 伪数组对象（拥有一个 length 属性和若干索引属性的任意对象）
  • 可迭代对象（可以获取对象中的元素,如 Map和 Set 等）
• 参数：
  • arrayLike：想要转换成数组的伪数组对象或可迭代对象
  • mapFn：如果指定了该参数，新数组中的每个元素会执行该回调函数。

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()

• 语法： Array.isArray(obj)
• 描述：判断是否是一个数组
• 参数：需要检测的值。
• 返回值：如果值是 Array，则为true; 否则为false

Array.isArray([1, 2, 3]);  
// true
Array.isArray({foo: 123}); 
// false
Array.isArray("foobar");   
// false
Array.isArray(undefined);  
// false

Array.prototype.push()

• 语法： arr.push(element1,…,elementN)
• 描述：该方法用于在数组的尾部添加 1到多个元素
• 参数：element 需要添加到数组尾部的元素(any)
• 返回值：返回添加内容后的新长度
• tip: 直接修改原数组

var sports = ["soccer", "baseball"];
var total = sports.push("football", "swimming");

console.log(sports); 
// ["soccer", "baseball", "football", "swimming"]

console.log(total);  
// 4

Array.prototype.pop()

• 语法： arr.pop()
• 描述： 该方法用于删除数组中的最后一个元素
• 返回值：返回被删除的元素，如果数组为空，返回undefined
• tip：直接修改原数组

let myFish = ["angel", "clown", "mandarin", "surgeon"];
let popped = myFish.pop();

console.log(myFish); 
// ["angel", "clown", "mandarin"]

console.log(popped); 
// surgeon

Array.prototype.shift()

• 语法： arr.shift()
• 描述： 该方法用于删除并返回数组中的第一个元素，并将后面的元素向前移一位，将数组的长度-1
• 返回值：返回被删除的元素
• tip：该方法直接修改原数组

let myFish = ['angel', 'clown', 'mandarin', 'surgeon'];

console.log('调用 shift 之前: ' + myFish);
// "调用 shift 之前: angel,clown,mandarin,surgeon"

var shifted = myFish.shift(); 

console.log('调用 shift 之后: ' + myFish); 
// "调用 shift 之后: clown,mandarin,surgeon" 

console.log('被删除的元素: ' + shifted); 
// "被删除的元素: angel"

Array.prototype.unshift()

• 语法: arr.unshift(value[,value2,…valueN])
• 描述: 该方法用于在数组的头部插入一条或多条数据， 将参数的值依次插入输入,将数组原来的值向后移动
• 参数: value 要插入到数组头部的值
• 返回值：返回添加内容后的新长度
• tip: 该方法直接操作原数组

let arr = [4,5,6];
arr.unshift(1,2,3);
console.log(arr); // [1, 2, 3, 4, 5, 6]

arr = [4,5,6]; // 重置数组
arr.unshift(1);
arr.unshift(2);
arr.unshift(3);
console.log(arr); // [3, 2, 1, 4, 5, 6]

Array.prototype.concat()

• 语法： arr.concat(value1,[…,valueN]); //语法中出现中括号表示这个参数可选
• 参数： value 需要添加到新数组的元素
• 描述： 该方法用于将参数依次添加到数组的尾部，并返回一个新数组
• 返回值：添加元素后的新数组
• tip:该方法不修改原数组

// 数组扁平化
var alpha = ['a', 'b', 'c'];
var numeric = [1, 2, 3];

alpha.concat(numeric);
// result in ['a', 'b', 'c', 1, 2, 3]

Array.prototype.toString()

• 语法: arr.toString()
• 描述: 将数组内所有的元素都进行toString() 然后用,连接
• 返回值: 拼接好的字符串

const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());
// expected output: "1,2,a,1a"

Array.prototype.join()

• 语法：arr.join(substring)
• 描述： 该方法用于将数组内所有的元素都进行toString()操作，并进行拼接。如果一个元素为 undefined 或 null，它会被转换为空字符串。
• 参数: substring 用于拼接字符串的连接符号
• 返回值: 新的字符串，包含了数组所有元素toString的结果，默认情况使用英文逗号拼接

var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join();      // myVar1的值变为"Wind,Rain,Fire"
var myVar2 = a.join(', ');  // myVar2的值变为"Wind, Rain, Fire"
var myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
var myVar4 = a.join('');    // myVar4的值变为"WindRainFire"

Array.prototype.reverse()

• 语法：arr.reverse()
• 描述：该方法颠倒数组中的所有元素(修改的是排列顺序)
• 返回值：颠倒后的数组
• tip: 直接修改原数组

const a = [1, 2, 3];
console.log(a); // [1, 2, 3]
a.reverse(); 
console.log(a); // [3, 2, 1]

Array.prototype.sort()

• 语法：arr.sort([compareFunction])
• 描述：通过比较元素Unicode码对数组进行排序
• 返回值：排序后的数组
• tip: 直接修改原数组

var numbers = [4, 2, 5, 1, 3]
numbers.sort((a, b) => a - b) //升序
console.log(numbers)

// [1, 2, 3, 4, 5]

Array.prototype.splice()

• 语法: arr.splice(start[deleteCount[,val,…]])
• 描述: 可以用于删除指定索引值的数组元素、可以用于数组的元素替换、可以在指定的索引位置插入新的元素 并将之前的元素向后移动
• 参数:
  • start 开始索引
  • deleteCount 要删除的数量
    • 如果没有这个参数 删除到数组结尾
    • 如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）
    • 如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素（val有值）
  • val 要插入到start位置的元素
• 返回值: 返回被删除的数组片段(Array)，如果没有删除元素，则返回空数组。
• tip:该方法直接操作原数组

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// 插入新元素
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// 替换元素
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

console.log(months.splice(3, 1));
// expected output: ["April"]
// 删除元素
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "May"]

Array.prototype.slice()

• 语法： arr.slice(start[,end])
• 描述： slice函数用于截取数组指定索引的片段
• 参数：
  • start 开始的索引
  • end 结束索引
    • 如果没有end参数 则从start开始到数组结尾结束，从而实现数组的浅拷贝
    • 如果 end 大于数组的长度，slice 也会一直提取到原数组末尾
    • end 允许是负数 -1表示最后1个 -2表示倒数第二个 依次类推
• 返回值：一个含有被截取元素的新数组，如果没有截取到，返回一个空数组

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

Array.prototype.indexOf()

• 语法: arr.indexOf(value[,start])
• 描述: 该方法用于检索数组中的value值,如果找到 则返回下标 没有找到 返回-1
• 参数:
  • value 在数组中需要检索的值
  • start 开始索引
• 返回值: 返回首个找到元素所对应的索引值 否则返回 -1

var array = [2, 5, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

// 数组去重
var arr = [123, 11, 723, 123, 123, 11, 71, 62];
var result = [];
for (var i = 0; i < arr.length; i++) { 
  if (arr.indexOf(result, i) === -1) {
     result.push(arr[i]);
  }
}
console.log(result);

Array.prototype.forEach()

• 语法: arr.forEach(callback)
• 描述: 该函数用于遍历数组 并将数组的每一个元素和索引值传入到回调函数中
• 回调参数:
  • value 数组中的每一个元素
  • index 元素所对应的索引值

const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

Array.prototype.filter()

• 语法: arr.filter(callback)
• 描述: 该方法用于过滤数组
• callback参数:
  • value 数组内的每一个元素
  • index 元素所对应的索引值
  • array 数组本身
  • thisArg 执行 callback 时，用于 this 的值。
• 返回值：一个新的、过滤后的数组，如果没有任何数组元素通过，则返回空数组。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]fd -+

Array.prototype.map()

• 语法: arr.map(callback)
• 描述: 函数map用于遍历并操作数组元素
• callback参数:
  • value 数组内的每一个元素
  • index 元素所对应的索引值
  • array 数组本身
  • thisArg 执行 callback 时，用于 this 的值。
• 返回值: 新的数组

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

筛选一个数组中对象中的某一属性成一个新数组

var arr = [
      {
        id: 1,
        name: '张三'
      }, {
        id: 2,
        name: '李四'
      }, {
        id: 3,
        name: '王二麻子'
      }
    ]
 var newArr = arr.map(item=>item.id)
 // newArr：[1, 2, 3]

Array.prototype.reduce()

• 语法: arr.reduce(callback)
• callback 参数
  • pre 上一次调用回调时返回的累积值
  • next 数组中正在处理的元素
  • index 数组中正在处理的当前元素的索引
  • array 数组本身
  • initialValue 作为第一次调用 callback函数时的第一个参数的值
• 返回值：函数累计处理的结果

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
});

callback 被调用四次，每次调用的参数和返回值如下表：

callback	accumulator	currentValue	currentIndex	array	return value
first call	0	1	1	[0, 1, 2, 3, 4]	1
second call	1	2	2	[0, 1, 2, 3, 4]	3
third call	3	3	3	[0, 1, 2, 3, 4]	6
fourth call	6	4	4	[0, 1, 2, 3, 4]	10

// 对数组中的所有值求和
var numbers = [3, 5, 7, 2]
var sum = numbers.reduce((x, y) => x + y)
console.log(sum) // returns 17

Array.prototype.includes()

• 语法: arr.includes(valueToFind[, fromIndex])
• 描述: 判断一个数组是否包含一个指定的值
• 参数:
  • valueToFind 需要查找的元素值
  • fromIndex 开始查找的索引值
• 返回值：true/false

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

Array.prototype.every()

• 语法: arr.every(callback)
• 描述: 使用一个逻辑表达式 检测数组中的每一个元素,如果全部通过检测 则返回true
• callback参数:
  • element 当前元素
  • index 元素所对应的索引值
  • array 数组本身
  • thisArg 执行 callback 时，用于 this 的值
• 返回值：true/false
• tip：若收到一个空数组，此方法在一切情况下都会返回 true

Array.prototype.some()

• 语法: arr.some(callback);
• 描述: 使用一个逻辑表达式 检测数组中的每一个元素,如果有一个通过检测 则返回true
• callback参数:
  • element 当前元素
  • index 元素所对应的索引值
  • array 数组本身
  • thisArg 执行 callback 时，用于 this 的值
• 返回值：true/false
• tip：如果用一个空数组进行测试，在任何情况下它返回的都是false

[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true

Array.prototype.find()

• 语法: arr.find(callback[, thisArg])
• 描述: 用于找出第一个符合条件的数组成员
• callback参数:
  • element 当前元素
  • index 元素所对应的索引值
  • array 数组本身
  • thisArg 执行 callback 时，用于 this 的值
• 返回值：数组中第一个满足所提供测试函数的元素的值，否则返回 undefined。

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

Array.prototype.findIndex()

• 语法: arr.findIndex(callback[, thisArg])
• 描述: 用于找出第一个符合条件的数组成员
• callback参数:
  • element 当前元素
  • index 元素所对应的索引值
  • array 数组本身
  • thisArg 执行 callback 时，用于 this 的值
• 返回值：数组中通过提供测试函数的第一个元素的索引。否则，返回-1

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

另外，这两个方法都可以发现NaN，弥补了数组的indexOf方法的不足

[NaN].indexOf(NaN)
// -1

[NaN].find(y => Object.is(NaN, y))
// NaN

[NaN].findIndex(y => Object.is(NaN, y))
// 0