JS数组方法

数组的创建方式
1.字面量的形式:var arr=[1,2,3];
1.构造函数:var arr1=new Array();//不常用

arr[0] = 100;//修改数组中第一个元素为100 ,同样可用以赋值。 
console.log(arr[0]); //输出数组里的第一个元素 
console.log(arr.length);//输出数组中元素的个数 
console.log(arr[5]);//输出结果为undefined
arr.length=20;//人为地改变数组的元素个数 
console.log(arr.length);//结果为20,多出来的值为undefined

for(var i=0;i<arr.length;i++){//遍历数组 
    console.log(arr[i]);//输出数组中第i+1个元素
}

Array构造函数有一个很大的缺陷,就是不同的参数,会导致它的行为不一致。
1.单个数值作为参数,参数表示数组的元素个数

var arr2=new Array(5);
console.log(arr2.length);//输出结果为5
  1. 单个非数值(比如字符串、布尔值、对象等)作为参数,则该参数是返回的新数组的成员
new Array('abc') // ['abc']
// 多参数时,所有参数都是返回的新数组的成员 
new Array(1, 2) // [1, 2]
new Array('a', 'b', 'c') // ['a', 'b', 'c']

可以看到,Array作为构造函数,行为很不一致。因此,不建议使用它生成新数组,直接使用数组字面量是更好的做法。

数组的操作

push/pop/unshift/shift//增加、删除元素(数组的方法,所以使用时应调用
数组名.方法名())

var arr=[];
arr.push();
//在数组的尾部增加一个或多个元素(传入的参数),并返回新数组的元素个数,原数组改变。 
//无参数的时候,直接返回数组的长度。 
arr.pop();
//(无需传参,参数无作用)从数组的尾部删除一个元素,并返回被删除的元素,原数组改变。 
arr.unshift();
//在数组的头部部增加一个或多个元素(传入的参数),并返回新数组的元素个数,原数组改变。 
//无参数的时候,直接返回数组的长度。 
arr.shift();
//(无需传参,参数无作用)从数组的头部删除一个元素,并返回被删除的元素,原数组改变。 

arr. slice/splice//截取元素
arr.slice(); 原数组不发生改变
无参数时,返回原数组,相当于数组的复制。
一个参数时,从参数作为下标的元素截取,至数组结束。
二个参数时,从第一个参数作为下标(索引)的元素开始截取,到第二个参数作为下标的元素结束,但不包括第二个参数作为下标的函数。 (起始元素包含,结尾元素不包含)
多个参数时,前两个参数起效,后边的参数无效。
arr.splice();原数组改变
无参数时,返回空数组。
一个参数时,从参数作为下标的元素截取,至数组结束。
二个参数时,从第一个参数作为下标(索引)的元素开始截取,即表示截取的起始位置,第二个参数表示截取的元素个数。
多个参数时,前两个参数起效,后边的参数从原数组的截取起始位置开始填充,填充到原数组。
reverse/sort//改变元素位置
arr.reverse();//数组翻转(元素位置颠倒)
arr.sort();从小到大排序,但遵循的是字符串的按位比较规则,所以排序结果容易出现异常。

如果想让sort方法按照自定义方式排序,可以传入一个函数作为参数。
[10111, 1101, 111].sort(function (a, b) {
return a - b;//升序(return b-a;//降序)
})
// [111, 1101, 10111]
上面代码中,sort的参数函数本身接受两个参数,表示进行比较的两个数组成员。如果该函数的返回值大于0,表示第一个成员排在第二个成员后面;其他情况下,都是第一个元素排在第二个元素前面

join();//不改变原数组
join()以指定参数作为连接符,将所有数组成员连接为一个字符串返回。如果不提供参数,默认用逗号分隔。

var a = [1, 2, 3, 4];
a.join(‘  ’) // “1 2 3 4” 
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"
//如果数组成员是undefined或null或空位,会被转成空字符串。
[undefined, null].join('#')
// '#'
['a',, 'b'].join('-')
// 'a--b'

concat();//拼接数组 不改变原数组

var arr1=[1,2,3];var arr2=[4,5,6];
var arr=arr1.concat(arr2);//[1,2,3,4,5,6]
var arr=arr1.concat(arr2,7,8);[1,2,3,4,5,6,7,8]

ES5新增数组操作方法
indexOf (item) 返回元素在数组中对应的索引值,找不到的话,返回-1,用以测试元素是否存在于数组中
forEach(function(item,index)) 遍历数组,没有返回值
map(function(item,index)) 遍历数组,存在返回值
filter(function(item)) {return item>2} 返回大于2的元素
some 返回布尔值,条件部分成立|| arr.some(function(item){return item>2} )
every 返回布尔值,条件全部成立&& arr.every(function(item){return item>2} )
reduce (对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供。)arr.reduce(function(a,b){return a+b;});

toString()和toLocaleString()
功能:将数组的每个元素转化为字符串,并且输出用逗号分隔的字符串列表。功能类似join();
参数:无
输出:字符串

 //   toString()和toLocaleString() 将数组的每个元素转化为字符串
var arr = ['a','b','c','d','e'];
console.log(arr.toString()); // a,b,c,d,e
console.log(arr.toLocaleString()); // a,b,c,d,e

indexOf()和lastIndexOf()
功能:搜索整个数组中具有给定值的元素,返回找到的第一个元素的索引或者如果没有找到就返回-1;lastIndexOf为反向搜索。
参数:元素的值,起点索引(可选)
输出:索引值或-1

//indexOf() 两个参数:要查找的项和(可选的)表示查找起点位置的索引。一个参数时, 
//从数组的开头(位置 0)开始向后查找。没找到返回-1,找到返回查找项的索引值
// lastIndexOf() 从数组的末尾开始向前查找。返回查找项的索引值
//(索引值永远是正序的索引值),没找到返回-1
var arr = [3,4,6,9,8];
console.log(arr.indexOf(6,1)); //2
console.log(arr.indexOf(5)); // -1
console.log(arr.lastIndexOf(4)); // 1

Array.from()
功能:将两类对象转为真正的数组:类似数组的对象和可遍历的对象
参数:待转换的对象,第二个参数可选,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。
输出:数组

let arrayLike = {
 '0':'a',
'1':'b',
'2':'c',
length:3
};
let arr2 = Array.from(arrayLike);// ['a','b','c']

Array.of()
功能:将一组值,转换为数组。
参数:数组元素
输出:数组

Array.of(2,11,3)// =>[2,11,3]
Array.of(3)// =>[3]

copyWithin()
功能:在当前数组内部,将指定位置的成员复制到其他位置,返回变化后的数组。
参数:索引(从该位置开始替换数据);索引(从该位置开始读取数据,默认为0,负值表示倒数);索引(到该位置前停止读取,默认为最大索引)
输出:返回当前替换后的数组。
注意:改变了当前数组

[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]

find()和findIndex()
功能:找到第一个符合条件的数组成员。
参数:回调函数,所有数组成员依次执行该函数,直到找到第一个返回值为true的成员。回调函数可以接受三个参数,依次为值,位置,原数组。
输出:find()返回找到的成员;findIndex()返回成员的位置。

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

fill()
功能:使用给定的值,填充一个数组。
参数:第一个参数为待填充的值,第二和第三参数可选,分别表示填充的起始和结束位置(不包括)。
输出:填充后的数组

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

entries()、keys()、values()
功能:用于遍历数组,可以用for…of循环进行遍历。区别是keys()是对键名的遍历、values是对键值的遍历、entries()是对键值对的遍历。
参数:无
输出:遍历器对象

for (let index of ['a', 'b'].keys()) {
  console.log(index);
 }
  // 0
 // 1

 for (let elem of ['a', 'b'].values()) {
   console.log(elem);
}
 // 'a'
 // 'b'

 for (let [index, elem] of ['a', 'b'].entries()) {
   console.log(index, elem);
 }
 //0 "a"
 //1 "b"

includes()
功能:表示某个数组是否包含给定的值
参数:第一个参数必选(待检查的给定值),第二个参数可选,表示搜索的起始位置,默认为0,负数表示倒数的位置。
输出:一个布尔值。
注意:和indexOf的区别,indexOf进行了运算符的强比对,会导致对NaN误判。

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

推荐阅读更多精彩内容

  • 1.join() var arr = [1,2,3]; console.log(arr.join()); // 1...
    _杨柳_阅读 507评论 0 0
  • 1. push(),pop() push方法用于在数组的末端添加一个或多个元素,并返回添加新元素后的数组长度。注意...
    东郭皮蛋阅读 401评论 0 0
  • 本文总结了数组所有的方法。 1. 检测对象是不是数组 instanceof操作符 Array.isArray()方...
    胡不归vac阅读 666评论 0 1
  • 创建数组 使用Array构造函数 使用数组字面量表示法 数组属性 length表示数组的长度 length属性并不...
    Dreammin_chen阅读 1,432评论 9 19
  • 以前学习JS没有着重总结关于数组的方法,导致实现某些功能不能找对最合适的实现方法,浪费很多时间。今天总结一些...
    Mango97阅读 561评论 0 0