JavaScript数组方法

一、基础添加和删除方法 push(),pop(),unshift(),shift()

  1. push(element1, ..., elementN)
    将一个或多个元素添加到数组的末尾,并返回该数组的新长度
// 添加一个元素
> arr.push(1)
< 1  // 返回数组长度
// 添加多个元素
> arr.push(1,2,3)
<4
arr
(4) [1, 1, 2, 3]  // 会改变原数组值
  1. pop()
    从数组中删除最后一个元素,并返回该元素的值(当数组为空时返回undefined。此方法更改数组的长度。
  2. unshift(element1, ..., elementN)
    将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。
  3. shift()
    从数组中删除第一个元素,并返回该元素的值,如果数组为空则返回undefined。此方法更改数组的长度。

二、进阶splice(),可进行删除、添加和替换

  • splice(start[, deleteCount[, item1[, item2[, ...]]]])
    通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。返回被删除的元素组成的一个数组。
    参数:
    • start: 指定修改的开始位置(从0计数)。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位。
    • deleteCount(可选):整数,表示要移除的数组元素的个数。
      如果 deleteCount 被省略了,或者它的值大于等于array.length - start(也就是说,如果它大于或者等于start之后的所有元素的数量),那么start之后数组的所有元素都会被删除。
      如果 deleteCount 是 0 或者负数,则不移除元素。
    • itemN: 要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素。

三、数组排序sort([compareFunction(a, b)])

对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的Unicode位点进行排序。会改变原数组
参数:
compareFunction(可选):用来指定按某种顺序进行排列的函数。

  • 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;
  • 如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变;
  • 如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。
// 对象可以按照某个属性排序:
var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic' },
  { name: 'Zeros', value: 37 }
];

// sort by value
items.sort(function (a, b) {
  return (a.value - b.value)
});

// sort by name
items.sort(function(a, b) {
  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }
  // names must be equal
  return 0;
});

四、其他常用方法

  1. concat(value1[, value2[, ...[, valueN]]])
    用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
  2. join([separator])
    将一个数组的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。
    参数:
    • separator(可选):
      指定一个字符串来分隔数组的每个元素。如果缺省该值,数组元素用逗号(,)分隔。如果separator是空字符串(""),则所有元素之间都没有任何字符。
  3. reverse()
    将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组。
  4. indexOf(searchElement[, fromIndex])
    返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1
    • searchElement:要查找的元素
    • fromIndex (可选):开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。
  5. lastIndexOf(searchElement[, fromIndex])
    返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。
  6. slice([begin[, end]])
    返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。

五、要提供函数作为参数的方法

  1. filter()
    返回一个新数组, 其包含通过所提供函数实现的测试的所有元素。
    用来测试数组的每个元素的函数,返回 true 表示该元素通过测试,保留该元素,false 则不保留。它接受以下三个参数:
    • element
      数组中当前正在处理的元素。
    • index可选
      正在处理的元素在数组中的索引。
    • array可选
      调用了 filter 的数组本身。
  2. find() findIndex()
    返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
  3. map()
    创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});
// doubles数组的值为: [2, 8, 18]
// numbers数组未被修改: [1, 4, 9]
  1. reduce() reduceRight()
    对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。
    reducer 函数接收4个参数:
    • Accumulator (acc) (累计器)
    • Current Value (cur) (当前值)
    • Current Index (idx) (当前索引)
    • Source Array (src) (源数组)
      reducer 函数的返回值分配给累计器,该返回值在数组的每个迭代中被记住,并最后成为最终的单个结果值。
// 累加器
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
  1. forEach()
    对数组的每个元素执行一次给定的函数。
    除了抛出异常以外,没有办法中止或跳出 forEach() 循环。
  2. every()
    测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。若收到一个空数组,此方法在一切情况下都会返回 true。
  3. flatMap()
    首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。
var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// only one level is flattened
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]
  1. some()
    测试数组中是不是至少有1个元素通过了被提供的函数测试,至少一个元素通过回调函数的测试就会返回true。
    如果用一个空数组进行测试,在任何情况下它返回的都是false。

六、其他方法

  1. copyWithin(target[, start[, end]])
    浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。
    参数:
    • target
      从0开始的索引,复制序列到该位置。如果是负数,target 将从末尾开始计算。
      如果 target 大于等于 arr.length,将会不发生拷贝。如果 target 在 start 之后,复制的序列将被修改以符合 arr.length。(数组长度不会改变)
    • start
      开始复制元素的起始位置。如果是负数,start 将从末尾开始计算。
      如果 start 被忽略,copyWithin 将会从0开始复制。
    • end
      开始复制元素的结束位置。copyWithin 将会拷贝到该位置,但不包括 end 这个位置的元素。如果是负数, end 将从末尾开始计算。
      如果 end 被忽略,copyWithin 方法将会一直复制至数组结尾(默认为 arr.length)。
[1, 2, 3, 4, 5].copyWithin(-2, -3, -1)
// [1, 2, 3, 3, 4]
  1. entries()
    返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。
const array1 = ['a', 'b', 'c'];

const iterator1 = array1.entries();

console.log(iterator1.next().value);
// expected output: Array [0, "a"]

console.log(iterator1.next().value);
// expected output: Array [1, "b"]
  1. fill(value[, start[, end]])
    用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
const array1 = [1, 2, 3, 4];
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]
  1. flat([depth])
    按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。默认结构深度为1。
    flat() 方法会移除数组中的空项。
// 扁平化嵌套数组
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
  1. includes(valueToFind[, fromIndex])
    用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。(区分大小写)
  2. keys()
    返回一个包含数组中每个索引键的Array Iterator对象。
const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

for (const key of iterator) {
 console.log(key);
}
// expected output: 0
// expected output: 1
// expected output: 2
  1. toLocaleString()
    返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。
  2. toString()
    返回一个字符串,表示指定的数组及其元素。
[1,2,[3,4,5,[6,7]]].toString()
"1,2,3,4,5,6,7"
  1. values()
    返回一个新的 Array Iterator 对象,该对象包含数组每个索引的值.
const array1 = ['a', 'b', 'c'];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value);
}

// expected output: "a"
// expected output: "b"
// expected output: "c"
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,968评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,601评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,220评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,416评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,425评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,144评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,432评论 3 401
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,088评论 0 261
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,586评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,783评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,343评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2 345

推荐阅读更多精彩内容