JS数组

基础使用

Array(3,4,5,6)                    //(4) [3,4,5,6]正常写法,麻烦
var arr = [3,4,5,6]                   //字面量写法
console.log(arr.length)        //    4   元素个数,数组的属性,用它可以访问每一位的元素
console.log(arr[0])            // 3
console.log(arr[1])          // 4
console.log(4)              //undefined
arr[4] = 'hello'               //自己添加一位元素
console.log(arr[4])         //'hello'
arr.push('haha')            //数组最后加一位元素
arr.pop()                    //剔除数组的最后一位元素,()里不加东西
console.log(arr)           //[3,4,5,6,'hello','haha']
arr[1] = 1
console.log(arr[1])      //1
arr[100] = 101
arr                          //[3,1,5,6,'hello','haha',undefined*94,101]
arr.length                 // 101

清空数组怎么搞?

arr .length = 0          //[ ]

var arr = [4,5,6]
for(var i=0,i<arr.length;i++) {
        console.log(arr[i])
}                                                     //4        5        6
获取最后一位值:
arr[arr.length-1]                           //6
arr.pop()                             //6      剔除6,然后数组里没有6了
arr.unshift('haha')          // 3 数组第一位上加
arr            //(3)['haha',4,5]
arr.shift()           //"haha"      删除第一位
arr                 //(2) [4,5]

现在就是在开头和结尾新增和删除的操作。任一位置操作呢——
var arr = [4,5,6]
arr.push(8,9,10)              //6
arr                             //(6)[4,5,6,8,9,10]
arr.splice(2,2)          //(2)[6,8]拿掉,括号里第一个2是元素位,第二个2是替换几个元素,第三个是增加0没写,所以是踢掉。
arr                     //(4)[4,5,9,10]
在9后面增加1,2,3:
arr.splice(2,0,1,2,3)              // [ ]拿掉, 在第三个元素那替换,替换掉0个,增加1,2,3
arr                      //(7)[4,5,1,2,3,9,10]结果在9前面加了
所以,应该:
arr.splice(3,0,1,2,3)这个命令。
替换的话就是把0换掉就行了。

这里重点是splice(x,y,z)的用法,x是开始位,y是长度,z是替换内容。还有一个slice,也是把数组的一段截取出来,只不过splice处理好之后,arr本身就变掉了,slice拿出来,arr本身不变,而且slice(x,y)中的参数y意义不一样的,x是开始,y是结束且不包括最后一位y。

var arr = [3,4,5,6]
var arr2 = arr.slice(1,2)
console.log(arr2)                 // 4
arr                       //[3,4,5,6]

还有一个join的用法,把数组的内容连接,拼成字符串。

arr.join('')                       //"3456"
arr.join('haha')                   //"3haha4haha5haha6"
arr.join(',')                          //"3,4,5,6"
arr.join('-')                        //"3-4-5-6"
arr.join(';')                      // "3;4;5;6"

反转reverse:

var arr = [3,5,-1,18,9,27]
undefined
arr.reverse()
(6) [27, 9, 18, -1, 5, 3]
arr
(6) [27, 9, 18, -1, 5, 3]

操作后,修改原数组,本身变化了。
常用操作基本讲完了。

创建

常用字面量,因为简单方便。

var b = [3,4,5]

最后一位最好不要加逗号,有些浏览器处理方式不对,会把逗号当成后面还有个undefined的元素,长度会多出一位。

数组是特殊的对象

对象是由key-value值组成的,数组是位和对应的位元素作用结合的,算是特殊对象了。

var arr = [1,2,3]
undefined
arr
(3) [1, 2, 3]
obj = {0:1,1:2,2:3,length:3}
Object {0: 1, 1: 2, 2: 3, length: 3}

基本就是这个意思了。但是数组还是跟对象不一样的,对象的key值随意,但是数组的位就是规定的位,从0开始,一位一位的。
length可以清空数组,上面讲了,也可以切掉数组:

arr.length = 2
arr
(2) [1,2]

元素的添加和删除

前面有push,pop,shift,unshift。
神器就是splice:开始索引;
删除元素的位移;
插入新元素,可以多个。返回删除的元素组成的数组或空数组。
删除元素位移是0,就是插入,而且是在开始索引的元素前插入。位移不是0,就是替换,而且包括索引元素替换掉。

var a = [1,2,3,4,5]
a.splice(1,0,9,99,999)
[]
a
(8) [1, 9, 99, 999, 2, 3, 4, 5]
a.splice(1,3,8,88,888)
(3) [9, 99, 999]
a
(8) [1, 8, 88, 888, 2, 3, 4, 5]

删除多个,只能一次一次地删,因为每删一次,数组就会改变,length就会变化。

var a = [3,4,-3,-2,-1,5]
for(var i=0 ;i < a.length; i++) {
    if (a[i] < 0 ) {         
          a.splice(i,1)
  } 
}
[-1]
a
(4) [3, 4, -2, 5]

i=0,没变。1时,没变。2时,删除-3,这时候:
i是2,自增下次就是3了。而这时候a=[3,4,-2,-1,5],而且length是5了。再运行:
3<5,a[3]=-1,splice掉。i自增,得4。a =[3,4,-2,5],length=4=i,终止。问题是,如果删除了,a的length就会减一位,所以,需要让这时候的i同步减一位啊。

var a = [3,4,-3,-2,-1,5]
for(var i=0 ;i < a.length; i++) {
    if (a[i] < 0 ) {         
          a.splice(i,1)
          i--
  } 
}
a
(3)[3,4,5]

另外,从后往前是可以的

var a = [3,4,-3,-2,-1,5]
for(var i =a.length-1;i>=0;i-- ) {
      if(a[i]<0){
            a.splice(i,1)
   }
}

5时,是5,自减变4;
4时,是-1,删,自减变3,a=[3,4,-3,-2,5],length=5;
3时,是-2,删,自减变2,a=[3,4,-3,5],length=4;
,,,
这里的意思就是i和length保持同步。

数组拼接

concat:
a.concat(b)返回一个拼接好的新数组,a,b都不会改变。

var a =[1,2,3],b=[4,5,6]
a.concat(b)
(6) [1, 2, 3, 4, 5, 6]
a
(3) [1, 2, 3]
b
(3) [4, 5, 6]

如何用它来克隆呢?-----重点

var c =[].concat(a)
c
(3) [1, 2, 3]
c[0]="haha"
"haha"
c
(3) ["haha", 2, 3]
a
(3) [1, 2, 3]

sort-------经常用的

数组排序用的,数字或字母排序,undefined放最后,对象会调用其toString方法,最终会改变原数组。

var a=[5,4,3,2,1]
a.sort()
(5) [1, 2, 3, 4, 5]
var b =['d','a',8,'w',3,'c']
undefined
b.sort()
(6) [3, 8, "a", "c", "d", "w"]

but:

var a =[7,8,9,10,11]
undefined
a.sort()
(5) [10, 11, 7, 8, 9]

不加参数去sort时,会把元素当成字符串去排序,一个字节一个字节地对比,10就是1和0,11就是1和1,第一位先比较,比较不出来再看第二位。这时候需要sort的比较函数了:

var a =[7,8,9,10,11]
a.sort(function(v1,v2){
    return v1-v2
})
(5) [7, 8, 9, 10, 11]
假如返回值是大于1的,就反转,这个逻辑——
a.sort(function(v1,v2){
    return 1
})
(5) [11, 10, 9, 8, 7]
a.sort(function(v1,v2){
    return 1
})
(5) [7, 8, 9, 10, 11]

传递了两个参数,再赋值给两个参数,做减法,小于0,就两者位置不动,大于就换换位子。

var friends =[{age:3,name:'dog'},{age:2,name:'ccat'},{age:4,name:'bird'}]
friends.sort(function(v1,v2){
  return v1.age - v2.age 
})
(3) [Object, Object, Object]
0: Objectage: 2name: "ccat":
 Object1: Objectage: 3name: "dog": 
Object2: Objectage: 4name: "bird": 
Objectlength: 3__proto__: Array(0)

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

推荐阅读更多精彩内容

  • 一、数组方法汇总 shift:删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined var ...
    快抓住那个胖子阅读 262评论 0 0
  • 创建数组 arr.length--- title: js正则表达式categories: javascriptda...
    angelwgh阅读 1,362评论 0 2
  • 数组方法里push、pop、shift、unshift、join、split分别是什么作用 push(val):在...
    王难道阅读 340评论 0 0
  • 问题: 数组方法里push、pop、shift、unshift、join、split分别是什么作用? push用...
    爱上帘外修竹阅读 360评论 0 0
  • 从前的鱼吃起来慢 蒸,吃,吐刺都慢 一顿只够吃一条鱼 从前的猫也很好看 猫牙精美有样子 他吃了鱼 你也不知道 ...
    杨林广阅读 168评论 3 3