JavaScript中Array方法

定义数组

用字面量创建

var arr = [1,2,3,'hello',null,true];

new Array()创建

var arr=new Array();
arr[0]=1;
arr[1]=2;
arr[2]=3;
arr[3]='hello';
...

var arr=new Array(1,2,3,'hello',null,true);

Array.indexOf

返回在数组中可以找到给定元素的第一个索引,如果不存在,则返回-1。
Array.indexOf(searchElement[,fromIndex = 0])

  • searchElement —— 要查找的元素
  • fromIndex —— 开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,仍然从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0.
// 找出指定元素出现的所有位置
var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.indexOf(element);
while (idx != -1) {
  indices.push(idx);
  idx = array.indexOf(element, idx + 1);
}
console.log(indices);
// [0, 2, 4]

Array.lastIndexOf

返回指定元素在数组中的最后一个的索引,如果不存在则返回-1,。从数组的后面向前查找,从fromIndex开始。
arr.lastIndexOf(searchElement[, fromIndex = arr.length -1])

  • searchElement —— 被查找的元素
  • fromIndex —— 从此位置开始逆向查找。默认为数组的长度减 1,即整个数组都被查找。如果该值大于或等于数组的长度,则整个数组会被查找。如果为负值,将其视为从数组末尾向前的偏移。即使该值为负,数组仍然会被从后向前查找。如果该值为负时,其绝对值大于数组长度,则方法返回 -1,即数组不会被查找。
// 查找所有元素,下例使用 lastIndexOf 查找到一个元素在数组中所有的索引(下标),并使用 push 将所有添加到另一个数组中。
var indices = [];
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var element = 'a';
var idx = array.lastIndexOf(element);

while (idx != -1) {
  indices.push(idx);
  idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1);
}

console.log(indices);
// [4, 2, 0];

Array.slice

将数组的一部分浅拷贝, 返回到从开始到结束(不包括结束)选择的新数组对象。原始数组不会被修改。
arr.slice(begin, end)

  • begin —— 从该处开始提取原数组中的元素(从0开始)
  • end —— 在该处结束提取原数组的元素(从0开始)。slice会提取原数组中索引从begin到end的所有元素(包含begin,不包含end)
var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
//起始索引1,终止索引3,获取的数组为原数组的1-2
var citrus = fruits.slice(1, 3);
// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

Array.splice

可以从指定的索引开始删除若干个元素,然后再从该位置添加若干元素
Array.splice(startIndex,deleteCount,[item...])

//定义数组
var arr1 = ['Microsoft','Apple','Yahoo','AOL','Excite','Oracle'];

//从索引为2开始删除3个元素,然后再添加2个元素,返回删除的元素
arr1.splice(2,3,'Google','Facebook');  //删除的元素["Yahoo", "AOL", "Excite"],arr1为["Microsoft", "Apple", "Google", "Facebook", "Oracle"]

//只删除,不添加
arr1.splice(2,2);// 删除["Yahoo", "AOL"],arr1为["Microsoft", "Apple", "Excite", "Oracle"]

//只添加,不删除
arr1.splice(2,0,"Google",'Facebook');
alert(arr1.toString());
//复制数组,结果为副本
var arrCopy = arr1.slice();

Array.push

将一个或多个元素添加到数组的末尾,并返回数组的长度。
arr.push(element1, ..., elementN)

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

Array.pop

从数组中删除最后一个元素,并返回该元素的值。此方法改变数组的长度。
arr.pop()

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

Array.shift

从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
arr.shift()

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.unshift

将一个或多个元素添加到数组的开头,并返回新数组的长度。
arr.unshift(element1, ..., elementN)

  • element1, ..., elementN —— 要添加到数组开头的元素。
var arr = [1, 2];
arr.unshift(0); //result of call is 3, the new array length
//arr is [0, 1, 2]
arr.unshift(-2, -1); // = 5
//arr is [-2, -1, 0, 1, 2]
arr.unshift( [-3] );
//arr is [[-3], -2, -1, 0, 1, 2]

Array.sort

在适当的位置对数组的元素进行排序,并返回数组。sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。
arr.sort([compareFunction])

  • compareFunction —— 可选。用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序。
  • 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;
  • 如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变。备注: ECMAScript 标准并不保证这一行为,而且也不是所有浏览器都会遵守(例如 Mozilla 在 2003 年之前的版本);
  • 如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。
  • compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。
alert(arr.sort().toString());

Array.reverse

颠倒数组中元素的位置。第一个元素会成为最后一个,最后一个会成为第一个。

var myArray = ['one', 'two', 'three'];
myArray.reverse(); 

console.log(myArray) // ['three', 'two', 'one']

Array.concat

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

语法

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

参数

valueN
需要与原数组合并的数组或非数组值。详见下文。

返回值

如果对象是 Array,则为true; 否则为false。

描述

concat 方法将创建一个新的数组,然后将调用它的对象(this 指向的对象)中的元素以及所有参数中的数组类型的参数中的元素以及非数组类型的参数本身按照顺序放入这个新数组,并返回该数组.

concat 方法并不修改调用它的对象(this 指向的对象) 和参数中的各个数组本身的值,而是将他们的每个元素拷贝一份放在组合成的新数组中.原数组中的元素有两种被拷贝的方式:

  • 对象引用(非对象直接量):concat 方法会复制对象引用放到组合的新数组里,原数组和新数组中的对象引用都指向同一个实际的对象,所以,当实际的对象被修改时,两个数组也同时会被修改.
  • 字符串和数字(是原始值,而不是包装原始值的 String 和 Number 对象): concat 方法会复制字符串和数字的值放到新数组里.
    注意: 连接一个或多个数组(值)将不会改变原本的数组/值。进一步说,任何对新数组的操作都不会对原有的数组造成影响(仅当该元素不是对象的引用时),反之亦然。

该方法对数组的复制适用于非引用元素,当遇到对象或数组时,复制失效。

示例
连接两个数组

var alpha = ["a", "b", "c"];
var numeric = [1, 2, 3];

// 组成新数组 ["a", "b", "c", 1, 2, 3]; 原数组 alpha 和 numeric 未被修改
var alphaNumeric = alpha.concat(numeric);

连接三个数组

var num1 = [1, 2, 3];
var num2 = [4, 5, 6];
var num3 = [7, 8, 9];

// 组成新数组[1, 2, 3, 4, 5, 6, 7, 8, 9]; 原数组 num1, num2, num3 未被修改
var nums = num1.concat(num2, num3);

将非数组值合并到数组里

var alpha = ['a', 'b', 'c'];

// 组成新数组 ["a", "b", "c", 1, 2, 3], 原alpha数组未被修改
var alphaNumeric = alpha.concat(1, [2, 3]);

对对象或数组的引用

var a = [{ name: 'xiaoming', age: 18 }, { name: 'xiaopang', age: 20 }];
var b = [1, 2];
var c = a.concat(b);
console.log(c); // concat_pic_1
c[0].name = 'mingming'
console.log(c); // concat_pic_2
concat_pic_1
concat_pic_2

Array.join

将当前数组的每个元素都用指定的字符串连接起来,然后返回连接后的字符串。
Array.join([separator = ","])

  • separator —— 分割符,默认为","
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.keys

返回一个新的Array迭代器,它包含数组中每个索引的键。
arr.keys()

var arr = ["a", "b", "c"];
var iterator = arr.keys();

console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

Array.toLocaleString

返回一个字符串表示数组中的元素。数组中的元素将使用各自的toLocaleString方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。

var number = 1337;
var date = new Date();
var myArr = [number, date, "foo"];
var str = myArr.toLocaleString(); 
console.log(str); 
// 输出 "1337,2015/2/27 下午8:29:04,foo" 
// 假定运行在中文(zh-CN)环境,北京时区

多维数组

var arr1 = [[1,2,3],[4,5],['abc','def','ghj','hhh']];
var str='';
for (var i=0;i<arr1.length ; i++ )
{
    for (var j=0; j<arr1[i].length ; j++ )
    {   
        str =str +arr1[i][j]+';' ;
    }
    str +="\n";
}
alert(str);

Array.every

对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。
Array.every(function(item, index, array){})

  • item —— 数组中的每一项
  • index —— 当前项的索引
  • array —— 数组本身
var arr = [1, 2, 3, 'blue', 'red'];
arr.every(function(item, index, array){
    return typeof item == 'number';
}); //false

由于第4、5项结果为false,因此不满足所有返回值都要求是true的条件,因此返回值为false。

Array.some

对数组中的每一项运行给定函数,如果函数对任一项返回true,则返回true。
Array.some(function(item, index, array){})各项参数同every

var arr = [1, 2, 3, 'blue', 'red'];
arr.some(function(item, index, array){
    console.log(item);
    return typeof item == 'number';
}); // true 

由于第1项即为true,已满足任一项为true的条件,因此停止对数组的遍历(迭代),返回true。

Array.filter

对数组中的每一项运行给定函数,返回由该函数中返回值为true的项所组成的数组。
Array.filter(function(item, index, array){})各项参数同every

var arr = [1, 2, 3, 'blue', 'red'];
arr.filter(function(item, index, array){
    return typeof item == 'number';
}); // [1, 2, 3]

由于第4、5项不是数字,所以没有包含在返回值中。

Array.map

对数组中的每一项运行给定函数,返回由函数运行结果所组成的数组。
Array.map(function(item, index, array){})各项参数同every

var arr = [1, 2, 3, 'blue', 'red'];
arr.map(function(item, index, array){
    return typeof item == 'number';
}); // [true, true, true, false, false]

判断数组中的每一项是否为数字,结果分别为[true, true, true, false, false],即为返回值。

Array.forEach

对数组中的每一项运行给定函数,无返回值。
Array.forEach(function(item, index, array){})各项参数同every

var arr = [1, 2, 3, 'blue', 'red'];
arr.forEach(function(item, index, array){
    // 对数字+1
    if(typeof item == 'number'){  
        array[index]  = item +1
    }
});  // arr = [2, 3, 4, "blue", "red"]

Array.find

返回数组中满足提供的测试函数的第一个元素的值,否则返回undefined。
Array.find(function(item, index, array){})各项参数同上。

var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];
function findCherries(fruit) { 
    return fruit.name === 'cherries';
}
console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

Array.findIndex

返回数组中满足提供的测试函数的第一个元素的索引,否则返回-1。
Array.findIndex(function(item, index, array){})各项参数同上。

function isPrime(element, index, array) {
    var start = 2;
    while (start <= Math.sqrt(element)) {
        if (element % start++ < 1) return false;
    }
    return (element > 1);
}
console.log( [4, 6, 8, 12].findIndex(isPrime) ); // -1, 没找到质数元素
console.log( [4, 6, 7, 12].findIndex(isPrime) ); // 2

Array.includes

用来判断当前数组是否包含指定的值,如果是,则返回True,否则返回False。
Array.includes(searchElement[,fromIndex=0])

  • searchElement —— 要查找的元素
  • fromIndex —— 从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

includes() 作为一个通用方法

includes() 方法有意设计为通用方法。它不要求this值是数组对象,所以它可以被用于其他类型的对象 (比如类数组对象)。下面的例子展示了 在函数的arguments对象上调用的includes() 方法。

(function() {
  console.log([].includes.call(arguments, 'a')); // true
  console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');

Array.reduce

对累加器和数组的每个值(从左到右)应用一个函数,以将其减少为单个值。
arr.reduce(function(accumulator, currentValue, currentIndex, array){}[, initialValue])

  • accumulator —— 上一次调用回调返回的值,或者是提供的初始值(initialValue)
  • currentValue —— 数组中正在处理的元素
  • currentIndex —— 数据中正在处理的元素索引,如果提供了 initialValue ,从0开始;否则从1开始
  • array —— 调用 reduce 的数组
  • initialValue —— 可选项,其值用于第一次调用 callback 的第一个参数。
let sum = [0, 1, 2, 3].reduce(function(acc, val) {
  return acc + val;
}, 0);
// 6
console.log(sum);

Array.reduceRight

接受一个函数作为累加器(accumulator),让每个值(从右到左,亦即从尾到头)缩减为一个值。(与 reduce() 的执行方向相反)。
arr.reduceRight(function(previousValue, currentValue, currentIndex, array){}[, initialValue])

  • previousValue —— 上一次调用回调的返回值,或提供的 initialValue
  • currentValue —— 当前被处理的元素
  • index —— 当前处理元素的索引
  • array —— 调用 reduce 的数组
  • initialValue —— 可作为第一次调用回调 callback 的第一个参数
var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
    return a.concat(b);
}, []);
// flattened is [4, 5, 2, 3, 0, 1]

MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/

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

推荐阅读更多精彩内容