javascript数组操作

javascript数组操作

今天针对javascript的数组的一些常见操作进行一些讲解,希望对给为开发者有帮助。 先看下面常见的三种循环。

for循环
var arr =[1, 3, 8, 4]
for (var i = 0,j = arr.length; i < j; i++) {
    console.log(arr[i], i)
}
// Prints:
// [0] is 1 0
// [1] is 3 1
// [2] is 8 2
// [3] is 4 3
for in 循环
var arr =[1, 3, 8, 4]
var map ={a: 1,b: 2,c: 3}
Array.prototype.text =5
for (var i in arr) {
    console.log(arr[i], i)
}

for (var i in map) {
   console.log(map[i], i)
}
// Prints arr:
// [0] is 1 "0"
// [1] is 3 "1"
// [2] is 8 "2"
// [3] is 4 "3"
// [4] is 5 "text"

//prints map:
// [0] is 1 "a"
// [1] is 2 "b"
// [2] is 3 "c"

for of循环
var arr =[1, 3, 8, 4]
for (var i of arr) {
    console.log(i)
}
// Prints:
// [0] is 1
// [1] is 2
// [2] is 3
// [3] is 8
// [4] is 4

可以看到, for循环和 for of循环都是遍历数组本身,但是区别是 i的值,前者是索引,后者是数组值。 for in循环不仅遍历数组本身,还遍历了原型遍历,同时可以遍历对象。这里指的注意的是 i的值是 string类型的 "0,1,2,3" 总结:for循环能满足我们的大多数情况,但是是最麻烦的,拿到的是索引,不如for of那样直接拿到数组值。for in循环功能是最强的,能遍历对象,但是缺点第遍历了原型对象,有时候可能对我们的遍历产生影响。 上面的3个循环都能通过 break跳出循环。

forEach循环
var arr =[1, 3, 8, 4]
arr.forEach((row, index, test) = >{
    console.log(row, index, test)
})
// Prints:
// [0] is 1 0 arr
// [1] is 2 1 arr
// [2] is 3 2 arr
// [3] is 8 3 arr
// [4] is 4 4 arr

可以看到 forEach循环和 for in循环是很像的,区别是 forEach是以回调函数的形式来遍历的,参数分别是数组值,索引和数组本身,遍历期间可以通过 row对数组本身进行处理,会改变数组本身。 forEach对于需要中断遍历就没那么友好,不能通过break来结束循环。大多数情况下 forEach很容易满足我们的遍历,但是forEach循环存在上下文变量的问题(如果不能用箭头函数的情况下,这里通过箭头函数避免了该问题)。

map遍历
var arr =[1, 3, 8, 4]
var newArr = arr.map((row, index, test) = >{
    return row
})
arr.push(5)
console.log(arr, newArr)
// Prints:
//[1,3,8,4,5],[1,3,8,4]

map遍历和forEach遍历参数是一样的,同样是通过回调函数来遍历整个数组,不同是 map遍历通过return给我们返回一个全新的数组。

filter操作
var arr =[1, 3, 8, 4]
var newArr = arr.filter((row, index, test) = >{
    return row >= 5
})
console.log(newArr)
// Prints:
//[8]

filter操作是用来数组过滤的,找出符合条件的值并返回一个新的数组,回调函数的参数跟forEach一样,通过返回true false来判断是否符合新数组的条件。

concat操作
var arr =[1, 3, 8, 4]
var arr2 =[4, 5]
var newArr = arr.concat(arr2)
var newArr1 = arr.concat()
console.log(newArr, arr2)
// Prints:
//[1, 3, 8, 4, 4, 5]
//[1, 3, 8, 4]

concat操作是用来合并数组的,并返回一个新的数组。这里有个骚操作是 arr.concat()只需要一行代码就能轻松实现数组的拷贝。

sort排序
var arr =[1, 3, 8, 4]
arr.sort((a, b) = >a > b)
console.log(arr)
// Prints:
// [1, 3, 4, 8]

sort对数组进行排序,接受一个回调函数,函数的参数是连续的数组2项,上面的代码类似实现了一个冒泡排序,通过返回 true false来判断是否需要调换位置,这些操作直接作用在原数组上。

一些其他操作
//shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined
//unshift:将参数添加到原数组开头,并返回数组的长度
//pop:删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined
//push:将参数添加到原数组末尾,并返回数组的长度
//reverse:将数组反序
//splice(start,deleteCount,val1,val2,...):从start位置开始删除deleteCount项,并从该位置起插入val1,val2,...
//slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组
//join(separator):将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符
//some(),every()判断数组中是否存在满足条件的值,前者有一个为true则返回true,后者所有未true才返回true,有点像&&和||。

//这里写一个数组比较的问题
[]==[]
//prints:false
var a1 =[1, 2, 3]
var a2 =[1, 2, 3]
a1.toString() == a2.toString()
//prints:true
//上面的方式巧妙的避开了大量代码来判断数组是否相同
对象操作
var map1 ={name: 'jack',age: 21,sex: '0'}
var map2 ={phone: '123456'}
var map3 =Object.assign(map1, map2)
var arr =Object.keys(map1)
console.log(arr)
console.log(map3)
//prints:
//["name", "age", "sex"]
//{name: "jack", age: 21, sex: "0", phone: "123456"}

可以看到 Object.keys方法可以将对象的key组成一个数组,得到数组时候我们就可以使用forEach等一些方法来遍历这个对象了。 Object.assign能合并n个对象的属性,后面的属性会覆盖前面的属性,最终得到一个新的对象。这2个es6的方式是很实用的。

总结

数组是javascript常见的数组类型,操作很多,选择适当的方式能提高程序性能和代码可读性。部分函数是es6才有的这里不做说明,具体各种操作性能也不做对比。

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

推荐阅读更多精彩内容