JS数组 方法整理 我要好好用数组

说点啥

数组是程序员的法宝之一，善用数组方法可以使数据处理变的简单（优雅）。
每次重新看数组的知识都有新收获。

什么是数组

数组是值的有序集合。
每个值叫做一个元素，而每个元素在数组中有一个位置，以数字表示，称为索引。

不一样的JavaScript数组

1、js数组是无类型的
  • 数组元素可以是任意类型，并且同一个数组中的不同元素也可能有不同类型。
var arr1=[1,2,3,5]; 
var arr2=[1,"2",{a:'11'},["1"]];
2、js数组的索引是基于零的32为数值
  • 第一个元素的索引为0
  • 最大可能的索引为4 294 967 294（2^{32} - 2）
  • 最大能容纳 4 294 967 295 个元素
3、js数组是动态的

+根据需要它们会增长或者缩减，并且在创建数组时无须声明一个固定的大小或者在数组大小变化时无须重新分配空间。

4、js数组可能是稀疏的
  • 数组元素的索引不一定要连续，它们之间可以有空缺。
  • 针对稀疏数组，length比所有元素的索引要大。
5、数组继承自Array.prototype中的属性

创建数组

1、使用数组直接量是创建数组最简单的方法
var emptys = []; // 创建没有元素的数组
var primes = [1,3,5,7,11]; // 创建有5个数值的数组
var count = [1,,3]; // 数组有3个元素，中间那个元素值为undefined
...
2、调用构造函数Array()创建数组
var a = new Array(); // 创建一个没有任何元素的空数组
var b = new Array(10); // 创建指定长度数组，
console.log(b.length); // => 10 当实际添加长度大于10 时，length=实际长度
console.log(b[0]); // => undefined

数组类型检测

1、通过ES5方法检测
if (Array.isArray([])){
  // do something
  ...
}
2、不靠谱的instanceof(了解有这么个东西但是从来不用)
[] instanceof Array // => true
([]) instanceof Array // => false

使用这货的问题在web浏览器中有可能有多个窗口或者窗体(frame)存在，每个窗口都有自己的js环境，有自己的全局对象，并且每个全局对象有自己的一组构造函数，因此一个窗体中的对象将不可能是另外窗体中的构造函数的实例，窗体之间的混淆不常发生，但这足以证明instanceof不能视作一个可靠的数组检测方法。

  • 对于上述问题，ES3中的解决方案
var isArray = Function.isArray || function (o) {
  return typeof o === 'object' && Object.prototype.toString.call(o) === '[object Array]';
}

类型转换

var colors = ['red','blue','green']
/* 除了null或undefined之外的任何值都具有toString()方法 */
colors.toString(); // => "red,blue,green" 
colors.join();     // => "red,blue,green"

+[] // => 0
+[1] // => 1
+[""] // => 0
+["1"] // => 1
+['a'] // => NaN

toString() 和 join()输出一样，但是join("-")可以随意输入连接符

值 字符串 数字 布尔值
[] (空数组) "" 0 true
[9] (1个任意数字元素) "9" 9 true
["a"] (其它) 使用join() NaN true

数组基本操作方法

push（）和 pop()

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

var arr = ['a','b','c'];
var length = arr.push('d','e');
console.log(length) ; // => 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()，数组元素以字母表顺序排序（如果有必要将零食转化为字符串进行比较）。
  • 如果数组包含undefined元素，它们会被排到数组的尾部。
  • 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() 和 findIndex() ES6

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()返回第一个符合条件的数组成员的位置，如果都不符合返回-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

另外这俩方法都能发现NaN，弥补了数组的indexOf()的不足。

[NaN].indexOf(NaN); // => -1
[NaN].findIndex(y => Object.is(NaN, y)); // => 0
[NaN].find(y => Object.is(NaN, y)); // => NaN

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

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);   
   }

ES6 扩展

代替函数的apply方法

由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。

// ES5 写法
function f (x,y,z) {
   return x + y + z;
}
var args  = [0,1,2];
f.apply(null,args); // => 3

// ES6 写法
let args = [0, 1, 2];
f(...args); // => 3

求一个数组的最大元素

// ES5
Math.max.apply(null,[14,3,77]); // => 77
// ES6
Math.max(...[14,3,77]); // => 77
// 等同于
Math.max(14,3,77); // => 77
扩展运算符的应用
  • 复制数组
    数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。
const a1 = [1,2];
const a2 = a1;

a2[0] = 2;
console.log(a1); // => [2,2];

上面的代码中，a2并不是a1的克隆，而是指向同一份数据的另一个指针，修改a2，会直接导致a1的变化。

ES5 只能用变通方法来复制数组。

const a1 = [1,2];
const a2 = a1.concat();

a2[0] = 2;
console.log(a1); //  => [1,2];

上面的代码，利用concat()特性a1会返回原数组的克隆，互不影响。

扩展运算符提供了复制数组的简便写法。都是克隆

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;
  • 合并数组
    扩展运算符提供了数组合并的新写法
const arr1 = ['a','b'];
const arr2 = ['c'];
const arr3 = ['d','e'];
// ES5 的合并数组
const newArr = arr1.concat(arr2,arr3);
console.log(newArr); // =>  ["a", "b", "c", "d", "e"]
// ES6 的合并数组
const newArr = [...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

不过两种方法都是浅拷贝。

const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];

const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];

a3[0] === a1[0] // true
a4[0] === a1[0] // true

上面代码中，a3和a4是两种不同方法合并而成的新数组，但是他们的成员都是对原数组成员的引用，这就是浅拷贝，如果修改了引用指向的值，会同步反映到新数组。

  • 与结构赋值结合
    扩展运算符可以与解构赋值结合起来，用于生成数组。
var list = [1,2,3,4,5];
// ES5
a = list[0],rest = list.slice(1);
// ES6
[a,...rest] = list;

const [first, ...rest] = [];
first // undefined
rest  // []

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

const [...butLast, last] = [1, 2, 3, 4, 5];
// 报错

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 报错

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]

下面的例子将数组中布尔值为false的成员转为0。

Array.from([1, , 2, , 3], (n) => n || 0)
// => [1, 0, 2, 0, 3]
  • 利用Array.from()数组去重
const arr = [1,1,2,3,4,5,5,5];
Array.from(new Set(arr));
// => [1, 2, 3, 4, 5]

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()只能展开一层数组

数组的空位

数组的空位指，数组的某一个位置没有任何值。

  • 比如Array()构造函数返回的数组都是空位
Array(3); // => [,,,]
  • 空位不是undefined一个位置的值等于undefined依然是有值的
0 in [undefined, undefined, undefined] // true
0 in [, , ,] // false
  • ES5对空位的处理，很不一致，大多数情况下会忽略空位
    • -forEach()，filter()，reduce()，every()，some()都会跳过空位
    • -map()会跳过空位，但是会保留这个值
    • -join()，toString()会将空位视为undefined,而undefined和nulll会被处理成空字符串
// forEach方法
[,'a'].forEach((x,i) => console.log(i)); // 1

// filter方法
['a',,'b'].filter(x => true) // ['a','b']

// every方法
[,'a'].every(x => x==='a') // true

// reduce方法
[1,,2].reduce((x,y) => x+y) // 3

// some方法
[,'a'].some(x => x !== 'a') // false

// map方法
[,'a'].map(x => 1) // [,1]

// join方法
[,'a',undefined,null].join('#') // "#a##"

// toString方法
[,'a',undefined,null].toString() // ",a,,"
  • ES6明确将空位转为undefined
Array.from(['a',,'b'])
// [ "a", undefined, "b" ]
[...['a',,'b']]
// [ "a", undefined, "b" ]
[,'a','b',,].copyWithin(2,0) // [,"a",,"a"]
  • 由于空位处理规则的不统一，所以尽量避免出现空位

哪些方法会改变原始数组

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342

推荐阅读更多精彩内容

  • 数组操作方法，这一篇就够了
    转载：在开发中，数组的使用场景非常多，平日中也涉及到很多数组的api/相关操作，一直也没有对这块内容进行一块整理总...
    七色烟火阅读 3,206评论 0赞 3
  • PHP数组
    一、数组定义 array() 1、索引数组 在一个变量中，存储一个或多个值。数组中的每一个元素都有一个访问ID，根...
    竹与豆阅读 525评论 0赞 0
  • 电子商务网站开发与建设
    概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,072评论 0赞 3
  • 数组操作方法汇总
    常用方法速览： 接下来是比较全的、详细的方法用法 1. Array.from() 该方法从一个类似数组或可迭代对象...
    Sun____阅读 484评论 0赞 1
  • php 常用函数
    总结了一些开发中常用的函数： usleep() //函数延迟代码执行若干微秒。 unpack() //函数从二进制...
    ADL2022阅读 454评论 0赞 3