JS数组

@(javascript)[js数组]

[toc]

JS数组

数组也是一种数据类型,用于存放数据。在各大语言中都存在数组,但是语法由于大同小异。在JavaScript中数组也是一个非常重要的东西,所以有必要好好的了解一下。

创建一个数组

在JavaScript中数组是一中数据格式,不是一种数据类型。
我们可以使用构造函数字面量两种方式创建一个数组。

构造函数:

var arr = new Array()
console.log(arr) // []

我看可以在创建的时候传递参数:

var arr = new Array(10)
console.log(arr) // (10) [empty × 10]

var arr = new Array(-10)
console.log(arr) // Uncaught RangeError: Invalid array length

var arr = new Array(10,10)
console.log(arr) // (2) [10, 10]

var arr = new Array("10")
console.log(arr) // ["10"]

可以看出,参数如果是

  • 一个number,数组就是一个长度为number的数组,里面的每一项都为空,不支持负数(取值范围出错)
  • 其他情况,就是数组的每一项,几个参数就是长度为几的数组

也可以使用字面量的方式创建一个新数组。
字面量:

var arr = [];
console.log(arr) // []

var arr = [10]
console.log(arr) // [10]

var arr = [10,10]
console.log(arr) // [10, 10]

var arr = ["10"]
console.log(arr) // ["10"]

与使用构造函数不同的是,使用字面量是无法一下创建一个长度为n的数组的,如果是要创建一个长度为10的数组,可以直接修改数组的长度。数组的长度是可读可写的。

var arr = [];
console.log(arr.length) // 0
arr.length = 10;
console.log(arr.length) // 10
console.log(arr) // (10) [empty × 10]

如果修改长度后数组的长度大于原来的长度,那么多出来的这几项为空(empty,一些浏览器显示为undefined)。若果是小于原来数组的长度,那么就是从数组的末尾删除这个差值的项数。

也可以直接使用数组的下标添加或者是修改数组

var arr = [0,1,2];
arr[1] = "1";
arr[5] = "5";
console.log(arr) // (6) [0, "1", 2, empty × 2, "5"]

如果数组中原来就存放了这一下那么就是修改,arr[1] = "1"。否则就是添加这一项arr[5] = "5"。中间多出来的显示一个empty

数组的方法

数组的方法是非常多的。

添加与删除

  • push
  • pop
  • shift
  • unshift

push与unshift

pushunshift方法都是添加数组。push是往数组后面添加一项,unshift是往数组前面添加一项。

var arr = [1,2,3]
var res = arr.push(4)
console.log(arr) // (4) [1, 2, 3, 4]
console.log(res) // 4
var res = arr.unshift(4)
console.log(arr) // (5) [4, 1, 2, 3, 4]
console.log(res) // 5

两个方法都接受至少0个参数。
两个方法都是返回的新数组的长度

pop与shift

popshift都是删除数组某一项的方法。pop是删除数组的这最后一项,shift是删除数组的第一项。分别与pushunshift方法对应。

var arr = [1,2,3]
var res = arr.pop()
console.log(arr) // (2) [1, 2]
console.log(res) // 3
var res = arr.shift()
console.log(arr) // [2]
console.log(res) // 1

两个方法都不需要参数
两个方法都是返回的删除的这一项

数组排序

  • reverse
  • sort

reverse反转数组

var arr = [3,5,1,6,4,7];
console.log(arr.reverse()) // (6) [7, 4, 6, 1, 5, 3]

很简单,就是把数组倒序了。

sort数组排序

var arr = [3,5,1,6,4,7];
console.log(arr.sort()) // (6) [1, 3, 4, 5, 6, 7]

如果只是一位数字没有问题,但是如果是多为数字就有问题。

var arr = [22,3,556,1,32,11,2]
console.log(arr.sort()) // (7) [1, 11, 2, 22, 3, 32, 556]

因为sort()方法会根据测试字符串的结果来改变顺序比较2与11的时候比较的是字符串"2"与"11"。所以出现上面的结果。

sort方法可以接受一个函数作为参数,自己规定排序问题。

var arr = [22,3,556,1,32,11,2]
console.log(arr.sort(function(a,b){
    return a - b;
})) // (7) [1, 2, 3, 11, 22, 32, 556]

参数函数接收两个参数,第一个参数因该位于第二个前面放回负数,位于之后返回正数,否则返回0。

数组拼接concat

concat 方法及拼接数组。在不改变原数组的情况下把多个数组拼接返回新数组。

var arr = [1,2];
var res = arr.concat([2,3])
console.log(arr) // (2) [1, 2]
console.log(res) // (4) [1, 2, 2, 3]

数组切割slice

slice方法可以把数组切割

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

slice接收两个参数,第一个是切割的开始位置。第二个可选,表示切割的结束位置(不包含这个索引对应的值),如果没有第二个参数,表示末尾。

如果slice中存在负数,则是倒数的。如果是slice(-1,3)则相当于是slice(4,3)。那么返回的是一个空数组。

数组的splice方法

splice是一个非常强大的方法,之前除了排序其他的方法都可以使用splice实现。这个方法自身可以接收>=2个参数。
两个参数为删除:

var arr = [1,2,3,4];
var res = arr.splice(1,2);
console.log(arr) // [1,4]
console.log(res) // [2,3]

第一个参数是删除的开始位置,第二个删除的项数。上面的表示第下标为1开始删除两项。
返回的是删除的内容。
三个参数是插入:

var arr = [1,2,3,4];
var res = arr.splice(1,0,3,5);
console.log(arr) // (6) [1, 3, 5, 2, 3, 4]
console.log(res) // (2) []

第三个及以后参数表示的是需要插入的项。

这样就可以实现替换的效果了。

var arr = [1,2,3,4];
var res = arr.splice(1,1,3,5);
console.log(arr) // (5) [1, 3, 5, 3, 4]
console.log(res) // (2) [2]

上面表示从第一项开始,删除一项并且替换为后面的东西。

位置判断indexOf与lastIndexOf

两个方法都是查找,接收一个参数,如果有返回查找的东西在数组中出现的下标(位置)。没有返回-1indexOf是正向查找,lastIndexOf是反向查找。

var arr = [1,2,3,4,3,2,1]
console.log(arr.indexOf(3)) // 2
console.log(arr.indexOf(5)) // -1
console.log(arr.lastIndexOf(3)) // 4
console.log(arr.lastIndexOf(5)) // -1

数组的迭代方法

  • every
  • some
  • filter
  • forEach
  • map
    五个方法都可以接收两个参数。第一个参数是一个函数,第二个是第一个函数中的this的值,即:如果有第二个参数,那么第一个参数中使用了this,这个this就表示第二个参数。

第一个参数函数可以接收三个参数:

  • 数组每一项的值
  • 这一项在数组中的下标
  • 数组本身

every与some

两个方法是判读数组中每一项满不满足这个条件。every表示每一项都满足返回true,否则返回false。some表示数组中有满足的就返回true,否则false。

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

推荐阅读更多精彩内容

  • 由于最近都在freecodecamp上刷代码,运用了很多JavaScript数组的方法,因此做了一份关于JavaS...
    2bc5f46e925b阅读 1,893评论 0 16
  • 本文总结了数组所有的方法。 1. 检测对象是不是数组 instanceof操作符 Array.isArray()方...
    胡不归vac阅读 644评论 0 1
  • 创建数组 arr.length--- title: js正则表达式categories: javascriptda...
    angelwgh阅读 1,363评论 0 2
  • JavaScript中创建数组有两种方式 (一)使用 Array 构造函数: var arr1 = new Arr...
    Gimmy呵呵阅读 394评论 0 1
  • 销售,是目前人才市场最流行、最司空见惯、最为活跃、最富挑战性的职业,也中流动性最强、工作量极大、工作最辛苦、最富社...
    裕_6b76阅读 250评论 0 2