Javascript Array对象属性

前面的话

数组总共有22种方法,本文将其分为对象继承方法、数组转换方法、栈和队列方法、数组排序方法、数组拼接方法、创建子数组方法、数组删改方法、数组位置方法、数组归并方法和数组迭代方法共10类来进行详细介绍。


对象继承方法


1、toStirng()

由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串

  • 定义和用法
    toString() 方法可把数组转换为字符串,并返回结果。
    注意: 数组中的元素之间用逗号分隔。

  • 语法

    array.toString()
    
    //实例
    [1,[2,'c']].toString();//'1,2,c'
    ['a','b','c'].toString();//'a,b,c'
    
  • 【toLocaleString()】是toString()方法的本地化版本
    如果数组中的某一项的值是null或者undefined,则该值在toLocaleString()toString()方法返回的结果中以空字符串表示。

2、valueOf()

valueOf()方法返回数组对象本身

var a = [1, 2, 3];
console.log(a.valueOf());// [1, 2, 3]
console.log(a.valueOf() instanceof Array);//true

数组转换方法


3、join()

  • 定义和用法
    Array.join()方法是String.split()方法的逆向操作
    join() 方法用于把数组中的所有元素转换一个字符串。
    元素是通过指定的分隔符进行分隔的。
    如果不给join()方法传入任何值,则使用逗号作为分隔符

  • 语法

    array.join(separator)
    
  • 实例:

    var a = [1,2,3];
    console.log(a.join());//'1,2,3'
    console.log(a.join(' '));//'1 2 3'
    console.log(a.join(''));//'123'
    
    var b = new Array(10);
    b.join('-');//'---------',9个连字符组成的字符串
    

若join()方法的参数是undefined,标准浏览器以逗号为分隔符返回字符串,而IE7-浏览器以’undefined’为分隔符返回字符串

 //标准浏览器为'1,2,3';IE7-浏览器为'1undefined2undefined3'
 var a = [1,2,3];
 console.log(a.join(undefined));

如果数组中的某一项的值是null或者undefined,则该值在join()方法返回的结果中以空字符串表示

var colors = [1,undefined,2,null,3];
console.log(colors.join());//'1,,2,,3'

栈和队列方法


这几个方法都会改变原数组

4、pop()

  • 定义和用法
    pop() 方法用于删除数组的最后一个元素并返回删除的元素。会改变原数组。
    注意:此方法改变数组的长度length!
    提示: 移除数组第一个元素,请使用shift()方法。对空数组使用pop()方法,不会报错,而是返回undefined

  • 语法

    array.pop()
    
  • 实例

    var a = ['a', 'b', 'c'];
    console.log(a.pop()); //  'c'
    console.log(a); // ['a', 'b'] 
    

5、push()

  • 定义和用法
    push() 方法可以接受任意数量的参数,可向数组的末尾添加一个或多个元素,并返回新的长度。会改变原数组。
    注意:新元素将添加在数组的末尾。此方法改变数组的长度length。
    提示:在数组起始位置添加元素请使用unshift()方法。

  • 语法

    array.push(item1, item2, ..., itemX)
    

6、shift()

  • 定义和用法
    shift() 方法用于把数组的第一个元素从其中删除,并返回所删除的值。
    对空数组使用shift()方法,不会报错,而是返回undefined。
    该数组会改变原数组

7、unshift()

  • 定义和用法
    unshift() 方法可向数组的开头添加一个或更多个元素,并返回新的数组的长度。
    注意: 该方法将改变数组的数目。

  • 语法

    array.unshift(item1,item2, ..., itemX)
    

当使用多个参数调用unshift()时,参数是一次性插入的而非一次一个地插入。这意味着最终的数组中插入的元素的顺序和它们在参数列表中的顺序一致

var a = ['a', 'b', 'c'];
console.log(a,a.unshift('x','y','z')); //['x','y','z','a', 'b', 'c'] 6

数组排序方法


数组中存在两个可以直接用来重排序的方法:reverse()sort()

8、reverse()

  • 定义和用法
    reverse() 方法用于颠倒数组中元素的顺序。

  • 语法

    array.reverse()
    
  • 实例

    var array = [1,2,4,3,5];
    console.log(array,array.reverse());//[5,3,4,2,1] [5,3,4,2,1]
    

9、sort()

  • 定义和用法
    sort() 方法用于对数组的元素进行排序。
    排序顺序可以是字母或数字,并按升序或降序。
    默认排序顺序为按字母升序。

  • 注意:当数字是按字母顺序排列时"40"将排在"5"前面。
    使用数字排序,你必须通过一个函数作为参数来调用。
    函数指定数字是按照升序还是降序排列。
    这些说起来可能很难理解,你可以通过本页底部实例进一步了解它。

  • 注意: 这种方法会改变原始数组!。
    如果数组包含undefined元素,它们会被排到数组的尾部

  • 语法

    array.reverse()
    

sort()方法可以接受一个比较函数作为参数,以便指定哪个值在哪个值的前面。比较函数接收两个参数,如果第一个参数应该位于第二个参数之前则返回一个负数,如果两个参数相等则返回0,如果第一个参数应该位于第二个参数之后则返回一个正数。

function compare(value1,value2){
    if(value1 < value2){
        return -1;
    }else if(value1 > value2){
        return 1;
    }else{
        return 0;
    }
}
var array = ['5px',50,1,10];
//当数字与字符串比较大小时,字符串'5px'会被转换成NaN,这样结果就是false
console.log(array.sort(compare));//["5px",1, 10, 50]

数组拼接方法


10、concat()

  • 定义和用法
    concat() 方法用于连接两个或多个数组。
    该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

  • 语法
    参数必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个。
    如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。

    array1.concat(array2,array3,...,arrayX)
    

创建子数组方法


11、slice()

  • 定义和用法
    slice() 方法可从已有的数组中返回选定的元素
    slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
    不改变原有数组。如果没有参数,则返回原数组

  • 语法

    array.slice(start, end)
    

数组删改方法


12、splice()

  • 定义和用法
    splice() 方法用于插入、删除或替换数组的元素。
    注意:这种方法会改变原始数组!。

  • 返回值
    splice()返回一个由删除元素组成的数组,或者如果没有删除元素就返回一个空数组

  • 注意
    splice()slice()拥有非常相似的名字,但它们的功能却有本质的区别。splice()方法用于删除原数组的一部分成员,并可以在被删除的位置添加入新的数组成员,该方法会改变原数组

  • 语法

    array.splice(index,howmany,item1,.....,itemX)
    

    必需。规定应该删除多少元素。必须是数字,但可以是 "0"。
    如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。

如果howmany是负数或NaNundefined,则howmany=0,因此不删除元素。
如果howmany后面还有更多的参数,则表示这些就是要被插入数组的新元素


数组位置方法


13、indexOf()

  • 定义和用法
    indexOf(search,startPosition) 方法可返回某个指定的字符串值在字符串中首次出现的位置,如果没有找到则返回-1。
    search参数表示要搜索的项;使用严格相等运算符(===)进行比较

  • 语法

    array.indexOf(search,startPosition)
    //返回search首次出现的位置,如果没有找到则返回-1
    
  • lastIndexOf()返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。 |


数组归并方法


14、reduce()

  • 定义和用法
    reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

  • 语法

    array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
    
  • 参数
    reduce()方法需要两个参数。第一个是执行化简操作的函数。化简函数的任务就是用某种方法把两个值组合或化简为一个值,并返回化简后的值。

    化简函数接受四个参数,分别是:

  • 【1】初始变量,默认为数组的第一个元素值。函数第一次执行后的返回值作为函数第二次执行的初始变量,依次类推

  • 【2】当前变量,如果指定了第二个参数,则该变量为数组的第一个元素的值,否则,为第二个元素的值

  • 【3】当前变量对应的元素在数组中的索引(从0开始)

  • 【4】原数组对象

化简函数的这四个参数之中,只有前两个是必须的,后两个则是可选的

values.reduce(function(prev, cur, index, array){
   //todo
});

reduce()方法第二个(可选)的参数是一个传递给函数的初始值。

15、 reduceRight()

  • 定义和用法
    reduce() 方法接收一个函数作为累加器,数组中的每个值(从右到左)开始缩减,最终计算为一个值。

  • 语法

 array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
  • 实例
var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
    console.log(prev,cur);
    return prev + cur;
});
console.log(sum);
//5 4
//9 3
//12 2
//14 1
//15

数组迭代方法


16、filter()

  • 定义和用法
    filter() 方法返回一个满足条件的所有元素组成的新数组
    注意: filter() 不会对空数组进行检测。 filter() 不会改变原始数组。

  • 语法

    array.filter(function(currentValue,index,arr), thisValue)
    

17、forEach()

  • 定义和用法
    forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
    返回操作后的新数组

  • 语法

    arr.includes(searchElement)
    arr.includes(searchElement, fromIndex)
    
  • 实例

使用forEach()方法实现简单的加法

var sum = 0;
[1, 2, 3, 4].forEach(function (item, index, array) {
    sum += item;
});
console.log(sum);//10

18、map()

  • 定义和用法
    map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
    map() 方法按照原始数组元素顺序依次处理元素。
    注意: map() 不会对空数组进行检测。 map() 不会改变原始数组。

  • 语法

    array.map(function(currentValue,index,arr), thisValue)
    

19、some()

  • 定义和用法
    some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
    some() 方法会依次执行数组的每个元素:

    • 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
    • 如果没有满足条件的元素,则返回false。
  • 语法

    array.some(function(currentValue,index,arr),thisValue)
    

20、every()

  • 定义和用法
    every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
    every() 方法使用指定函数检测数组中的所有元素:
    • 如果数组中检测到有一个元素不满足,则整个表达式返回** false** ,且剩余的元素不会再进行检测。
    • 如果所有元素都满足条件,则返回 true
      注意: every() 不会对空数组进行检测。every() 不会改变原始数组。

可以改变原数组的方法总共有7种:包括unshift()、shift()、push()、pop()这4种栈和队列方法,reverse()和sort()这2种数组排列方法,数组删改方法splice()。




补充


21、copyWithin()

  • 版本 ECMAScript 6

  • 定义和用法
    copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。

  • 语法

    array.copyWithin(target, start, end)
    

    数组实例的copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。

  • 参数 描述

    • target (必需):从该位置开始替换数据。
    • start (可选):从该位置开始读取数据,默认为 0 。如果为负值,表示倒数。
    • end (可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。

22、fill()

  • 定义和用法
    fill() 方法用于将一个固定值替换数组的元素。

  • 语法

     array.fill(value, start, end)
    

fill方法用于空数组的初始化非常方便。数组中已有的元素,会被全部抹去。
fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置

23、find()

  • 定义和用法
    find() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素。

24、findIndex()

  • 定义和用法
    findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

25、reverse()

  • 定义和用法
    valueOf() 方法返回 Array 对象的原始值。
    该原始值由 Array 对象派生的所有对象继承。
    valueOf() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中。
    注意: valueOf() 方法不会改变原数组。

  • 语法

    array.valueOf()
    

26、includes()

  • JavaScript 版本: ECMAScript 6
  • 定义和用法
    includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

参考资料

【1.JavaScript Array 对象】http://www.runoob.com/jsref/jsref-obj-array.html
【2.JavaScript数组中的22个常用方法】http://www.codeceo.com/article/22-array-methods-of-javascript.html

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