JS数组常用操作

JS数组常用操作

添加一个元素到数组的最后的位置:

```

方式一:numbers[numbers.length] = 10

方式二:numbers.push(11)

```

在数组首位插入一个元素:

```

for (var i = numbers.length; i > 0; i--) {

    numbers[i] = numbers[i-1]

}

numbers[0] = -1     

```

删除最后的元素

```

numbers.pop()

```

删除首位的元素

```

numbers.shift()

```

splice:是做(1)删除 、(2)插入、(3)修改用的。在原数组上进行操作。

(1)删除指定位置的几个元素,第一个参数表示从索引为5(其实是第6个元素)开始删除3个元素.,返回的是删除的元素所组成的数组。

```

numbers.splice(5, 3)

```

(2)在指定位置插入元素, numbers.splice(5, 0, 3, 2, 1)中,第一个参数依然是索引值为5(第六个位置),第二个参数为0时表示不是删除数据, 而是插入数据,后面紧跟的是在这个位置要插入的数据, 可以是其他类型的数据。无返回值。

```

numbers.splice(5, 0, 3, 2, 1)

```

(3)在指定位置修改元素,第一个参数表示从索引为5的位置开始修改,第二个参数是要将数组中多少个元素给替换掉。无返回值。

```

numbers.splice(5, 1, "a", "b", "c")

```

slice:是截取字符串用的,在原数组的副本上进行操作。返回的截取的数组。

第一个参数:开始位置的索引。第二个参数:结束位置的索引(但不包含该索引位置的元素), 如果没有最后一个参数,则截取到最后。

```

var newArr = numbers.slice(1)

```

数组合并

```

var nums1 = [1, 2, 3]

var nums2 = [100, 200, 300]

var newNums = nums1.concat(nums2)

console.log(newNums) // 1,2,3,100,200,300

newNums = nums1 + nums2

console.log(newNums) // 1,2,3,100,200,300

```

迭代方法:(1)every()方法,(2)some()方法,(3)forEach()方法(4)filter()方法 (5)map()方法

(1)every()方法是将数组中每一个元素传入到一个函数中, 该函数返回的是布尔类型true/false。如果函数中每一个元素都返回true, 那么结果为true, 有一个为false, 那么结果为false

// 判断数组的元素是否都包含a字符

```

var flag = names.every(function (t) {

    return t.indexOf('a') != -1

})

console.log(flag)//false

```

(2)some()方法是将数组中每一个元素传入到一个函数中, 该函数返回布尔类型true/false。但是和every不同的是, 一旦有一次函数返回了true, 那么迭代就会结束. 并且结果为true

// 判断数组中是否包含有a字符的字符

```

var flag = names.some(function (t) {

    return t.indexOf("a") != -1

})

console.log(flag)//true

```

(3)forEach()方法仅仅是一种快速迭代数组的方式而已,该方法不需要返回值,返回值为undefined

```

names.forEach(function (t) {

    console.log(t)

})

```

(4)filter()方法是一种过滤的函数。首先会遍历数组中每一个元素传入到回调函数中。函数的结果返回true, 那么这个元素会被添加到最新的数组中, 返回false, 则忽略该元素。最终会形成一个新的数组, 该数组就是filter()方法的返回值。

```

// 获取names中所有包含'a'字符的元素组成的新数组

var newNames = names.filter(function (t) {

    return t.indexOf("a") != -1

})

console.log(newNames)

```

(5)map()方法提供的是一种映射函数。首先会遍历数组,将其中每一个元素传入到回调函数中,元素会经过回调函数中进行各种变换, 生成新的元素, 并且将新的元素返回。 最终会将返回的所有元素形成一个新的数组, 该数组就是map()方法的返回值。

```

var newNames = names.map(function (t) {

    return t + "-abc"

})

console.log(newNames)

```

(6)reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。reduce() 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上次回调函数的返回值),当前元素值,当前索引,调用reduce的数组。

```

arr.reduce(callback, [initialValue])

```

callback (执行数组中每个值的函数,包含四个参数)

- previousValue  (上一次调用回调返回的值,或者是提供的初始值(initialValue))

- currentValue  (数组中当前被处理的元素)

- index (当前元素在数组中的索引)

- array (调用 reduce 的数组)

initialValue (作为第一次调用 callback 的第一个参数)

例一:

```

var arr = [1, 2, 3, 4];

var arr = [1, 2, 3, 4];

var sum = arr.reduce((pre, cur, index, arr) => {

    console.log(pre, cur, index);

    return pre + cur;

})

console.log(arr, sum);

打印结果:

1 2 1

3 3 2

6 4 3

[1, 2, 3, 4] 10

```

这里可以看出,上面的例子index是从1开始的,第一次prev的值是数组的第一个值,数组的长度是4,但是reduce函数循环3次。

例二:

```

var arr = [1, 2, 3, 4];

var sum = arr.reduce((pre, cur, index, arr) => {

    console.log(pre, cur, index);

    return pre + cur;

}, 0)//指定cur的类型为Number并且初始值为0

console.log(arr, sum);

0 1 0

1 2 1

3 3 2

6 4 3

[1, 2, 3, 4] 10

```

这个例子index是从0开始的,第一次的perv的值是我们设置的初始值0,数组长度是4,reduce函数循环4次。如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。如果提供initialValue,从索引0开始。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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