数组方法

创建数组：

// 字面量方式:
var a = [3, 11, 8];
// [3,11,8];
// 构造器:
// 实际上 new Array === Array,加不加new 一点影响都没有。
var a = Array();
// []
var a = Array(3);
// [,,]
var a = Array(3,11,8);
// [ 3,11,8 ]

Array.of(element0[, element1[, ...[, elementN]]])

定义： 返回由所有参数组成的数组，如果没有参数，就返回一个空数组。
目的：为了解决Array()参数个数不同导致行为有差异的问题

let a = Array.of(3, 11, 8);
// [3,11,8]
let a = Array.of(3);
// [3]

Array.from(arrayLike[, mapFn[, thisArg]])

定义：从一个类似数组或可迭代对象中创建一个新的数组实例。
arrayLike：想要转换成数组的伪数组对象或可迭代对象。
mapFn (可选参数)： 如果指定了该参数，新数组中的每个元素会执行该回调函数。
thisArg (可选参数)：执行回调函数 mapFn 时 this 对象。

方法

数组方法大致可分为三类：1. 改变原数组的值；2. 不改变原数组；3. 数组的遍历方法。

1. 改变原数组（9个）

let a = [1,2,3];
// ES5:
a.splice(); // 删除/添加元素
a.sort(); // 排序
a.pop();  // 删除数组中最后一个元素
a.shift(); // 删除数组中第一个元素
a.push(); // 向数组的末尾添加元素
a.unshift(); // 向数组的头部添加元素
a.reverse(); // 倒序
// ES6:
a.copyWithin(); 
a.fill();
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

定义： splice()方法向/从数组中添加/删除项目，返回被删除的项目
参数：
start​：指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数）；若只使用start参数而不使用deleteCount、item，如：array.splice(start)，表示删除[start，end]的元素。
deleteCount 可选：整数，表示要移除的数组元素的个数。如果 deleteCount 是 0，则不移除元素。这种情况下，至少应添加一个新元素。如果 deleteCount 大于start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。如果deleteCount被省略，则其相当于arr.length - start。
item1, item2, ... 可选：要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

const a = [1, 2, 3, 4, 5, 6, 7];
// 删除
a.splice(0,3); // [1,2,3]
// 添加
a.splice(0, 0, '添加'); // ["添加", 1, 2, 3, 4, 5, 6, 7]
// 删除并添加
a.splice(0, 3, '添加'); // ["添加", 4, 5, 6, 7]
arr.copyWithin(target[, start[, end]])

定义： 浅复制数组的一部分到同一数组中的另一个位置，并返回它，而不修改其大小。
参数：
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。

const a = [1, 2, { b: 3 }];
a.copyWithin(0, 2);
a[2].c = 4;
console.log(a); //  [{ b: 3, c: 4 }, 2, { b: 3, c: 4 }]
arr.fill(value[, start[, end]])

value：用来填充数组元素的值。
start 可选： 起始索引，默认值为0。
end 可选： 终止索引，默认值为 this.length。

const a = [1, 2, 3, 4, 5, 6, 7];
a.fill(8, 0, 1);  // [8, 2, 3, 4, 5, 6, 7]
其他的例子
const a = [1, 2, 3, 4];
a.sort((v1, v2) => (v2 - v1)); // [4, 3, 2, 1]
a.pop(); // [1, 2, 3]
a.shift(); // [2, 3, 4]
a.push([5]); // [1, 2, 3, 4, [ 5 ]]
a.unshift(0); // [0, 1, 2, 3, 4]
a.reverse(); // [4, 3, 2, 1]

2. 不改变原数组的方法(8个):

// ES5：
a.slice() // 浅拷贝数组的元素
a.join() // 数组转字符串
a.toLocaleString() // 每个元素调用toLocateString()然后join(',')
a.toString() // 每个元素调用toString()然后join(',')
a.concat() // 连接数组
a.indexOf()
a.lastIndexOf()

// ES7
includes
a.concat(value1[, value2[, ...[, valueN]]])

创建一个新的数组，它由被调用的对象中的元素组成，每个参数的顺序依次是该参数的元素（如果参数是数组）或参数本身（如果参数不是数组）。它不会递归到嵌套数组参数中。

知识点：利用concat可以扁平化多维数组

const flattenArray = array => ([].concat(...array.map(v => (Array.isArray(v) ? flattenArray(v) : v))));
const a = [1, [2, [3, [4]]]];
flattenArray(a);
a.includes(searchElement[, fromIndex])

定义：判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。searchElement为需要查找的元素， fromIndex为查找开始的位置，精确匹配
好处：
弥补indexOf不能识别NaN的缺陷。
表达直观，indexOf必须要判断是否等于-1， 。

const a = [1, 2, 3, NaN];
a.includes(NaN); // true
a.indexOf(NaN); // -1
其他例子
const a = [1, 2, 3, 4];
console.log(a.slice(1, 2)); // [2]
console.log(a.join('-')); // 1-2-3-4
console.log(a.toLocaleString()); // 1,2,3,4
console.log(a.toString()); // 1,2,3,4
console.log(a.indexOf('2')); // -1
console.log(a.indexOf(2)); // 1
console.log(a. lastIndexOf(2)); // 1

3. 遍历方法(12个):

// ES5： forEach、every 、some、 filter、map、reduce、reduceRight
// ES6： find、findIndex、keys、values、entries
forEach、every 、some、 filter、map、find、findIndex

这几个方法参数是一样的，区别是返回值不同。

a.map(function(currentValue, index, arr), thisArg)
currentValue为当前遍历的每一个元素的值，index为元素下边，arr为整个数组，thisArg为绑定的this上下文。

定义
forEach() 全局遍历对象， 无返回值
map() 全局遍历对象， 根据function返回相应的数组
every() 检测数组所有元素是否都符合条件， 只要有一项不符合即返回false其余项不再检测，否则返回true。
forEach() 检测数组所有元素是否都符合条件， 只要有一项符合即返回true其余项不再检测，否则返回false。
filter() 返回符合条件的数组的元素
find() 找出第一个符合条件的数组成员，并返回该成员，如果没有符合条件的成员，则返回undefined。
findIndex() 同上不同的时候返回的是该数组的index下标

a.reduce(function(accumulator, currentValue, currentIndex, arr)[, initialValue]);

累加器，对数组中的每个元素（从左到右）应用一个函数，将其减少为单个值
accumulator为累加器返回的累积值， currentValue为当前处理的元素值，currentIndex为当前处理的元素的index，initialValue为第一次调用的时候的初始值， 如果没有则使用第一个值

const a = [1, 2, 3, 4];
const b = a.reduce((total, v) => (total + v), 10);
const c = a.reduce((total, v) => (total + v));
console.log(b); // 20
console.log(c); // 10
a.reduceRight(function(accumulator, currentValue, currentIndex, arr)[, initialValue]);

同上，区别是从右到左。

keys()&values()&entries() 遍历键名、遍历键值、遍历键名+键值

返回值为Array迭代器，不能用for循环或者forEach循环，可用Array.from转化为普通数组或者for...of遍历

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