JavaScript-原生Array对象方法详解(一)

1、join()

join() 方法用于把数组中的所有元素转换为一个字符串。元素是通过指定的分隔符进行分隔的。
arrayObject.join(separator)参数代表分隔符,是可选的。如果不传参数,默认逗号。
注意返回值是字符串,不是数组。
注意:该方法不会改变原数组。

var arr = [1, 2, 3, 4, 7, 9, 6];
arr.join(); // "1,2,3,4,7,9,6"
arr.join(" "); // "1 2 3 4 7 9 6"
arr.join(""); //"1234796"
var a = new Array(10); //长度为10的空数组
a.join("*"); //"*********";9个*符号组成的字符串

join()方法是String.split()方法的逆向操作,后者是将字符串分割成若干块来创建一个数组。

2、sort()

sort()方法用于对数组的元素进行排序并返回排序后的数组。
注意:该方法会改变原来的数组

  • 当不带参数调用时,数组元素按照字母表排序(必要时临时转换为字符串比较)。
//字母表顺序排序
var a = [1, 2, 3, 4, 7, 9, 6];
a.sort() //[1, 2, 3, 4, 6, 7, 9];

//字母表顺序排序
var b = [33, 222, 4, 1111, 5555];
b.sort() //[1111, 222, 33, 4, 5555]

//字母表顺序排序
var c = ['c', 'ab', 'cd', 'a', 'f'];
c.sort() //["a", "ab", "c", "cd", "f"]

//字母表顺序排序,如有大写,大写在前,小写在后
var d = ['a', 'Ah', 'D', 'bcc'];
d.sort() //["Ah", "D", "a", "bcc"]

//如果数组有''元素,它们会排在数组的头部
var e = ['a', 'Ah', 'D', 'bcc', '', ''];
e.sort() //["", "", "Ah", "D", "a", "bcc"]

//如果数组包含undefined元素,它们会排在数组的尾部
  • 为了按照其他方式而非字母表顺序进行数组排序,必修给sort()传递一个比较函数作为参数。该函数决定了它的两个参数在数组中的排序。返回负数,第一个参数在前。反之,返回正数,第一个参数在后。如果返回0,也就是说排序无关紧要。
var b = [33, 222, 4, 1111, 5555];
b.sort() //[1111, 222, 33, 4, 5555]; 字母表顺序
b.sort(function(a, b) {
    return a - b;
}); //[4, 33, 222, 1111, 5555];  数值顺序

var d = ['a', 'Ah', 'D', 'bcc'];
d.sort() //["Ah", "D", "a", "bcc"]  区分大小写
d.sort(function(f, g) {
    var x = f.toLowerCase(); //都转换为小写
    var y = g.toLowerCase(); //都转换为小写
    if (x < y) return -1;
    if (x > y) return 1;
}); //["a", "Ah", "bcc", "D"] 不区分大小写

注意,这里使用匿名函数表达式非常方便。既然函数只使用一次,就没必要给它命名了。

3、reverse()

everse() 方法用于颠倒数组中元素的顺序,返回逆序的数组。
注意:该方法会改变原来的数组

reverse()是sort()的逆序版,reverse()的详细排序行为请参见上文 sort() 方法的解释。

var b = [33, 222, 4, 1111, 5555];
b.sort(); //[1111, 222, 33, 4, 5555] 正排序
b.reverse(); //[5555, 1111, 4, 222, 33] 逆排序
4、push()

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度,也就是添加元素后的数组长度。
注意:该方法会改变原来的数组

arrayObject.push(newelement1, newelement2, …., newelementX)

push()方法最少要有一个参数。push() 方法可把它的参数顺序添加到 arrayObject 的尾部。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

注意:push()方法中的参数不管是什么类型(数组、对象等),一个参数将会被作为一个整体元素插入 arrayObject 的尾部,不做拆分,详见示例。

var a = ["a","b"];

var b = {
  name: "Tom"
};

var c = [1,2,3];

console.log(a); // ["a", "b"]
console.log(a.push(b)); //3
console.log(a);
/*["a", "b", [object Object] {
  name: "Tom"
}]*/
console.log(a.push(c));
console.log(a); //4
/*["a", "b", [object Object] {
  name: "Tom"
}, [1, 2, 3]]*/

5、pop()

pop() 方法用于删除并返回数组的最后一个元素。
注意:该方法会改变原来的数组

pop() 方法将改变数组(删除数组的最后一个元素,把数组长度减 1),并且返回它删除的元素的值。如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。

var arr = ["George", "John", "Thomas"];
console.log(arr.pop());  // "Thomas"
console.log(arr);  / /["George", "John"];
console.log(arr.pop()); //"John"
console.log(arr); // ["George"]
console.log(arr.pop()); //"George"
console.log(arr); //[]
console.log(arr.pop()); //undefined
console.log(arr); //[]

6、unshift()

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
注意:该方法会改变原来的数组

arrayObject.unshift(newelement1, newelement2, …., newelementX)

参数newelement1……X至少要有一个。unshift()方法将把它的参数插入 arrayObject的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推。

在IE6与IE7中,unshift()会返回 underfined!

var arr = ["George", "John", "Thomas"];
console.log(arr.unshift("William")); //4
console.log(arr.unshift("Tom", "Jerry")); //6
console.log(arr); //["Tom", "Jerry", "William", "George", "John", "Thomas"]
7、shift()

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。
注意:该方法会改变原来的数组

var arr = ["George", "John", "Thomas"];
console.log(arr.shift()); //"George"
console.log(arr); //["John", "Thomas"]
console.log(arr.shift()); //"John"
console.log(arr); //["Thomas"]
console.log(arr.shift()); //"Thomas"
console.log(arr); //[]
console.log(arr.shift()); //undefined

8、contact()

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

注意:参数是必需的。可以是具体的值,也可以是数组对象,可以是任意多个。如果参数是元素,则拼接元素。如果参数是数组,则拼接数组中的元素,并非数组本身。

var a = [1,2,3];
var b = a.concat(4,5);
var c = a.concat(4,5,[6,7],8,"123");

console.log(a);  //[1, 2, 3]
console.log(b);  //[1, 2, 3, 4, 5]
console.log(c);  //[1, 2, 3, 4, 5, 6, 7, 8, "123"]
9、slice()

slice() 方法可从已有的数组中返回选定的元素,一个片段或一个子数组。

注意,该方法并不会修改数组,方法会返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

arrayObject.slice(start, end)参数start是必需的,规定从何处开始选取,如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

参数end是可选的,规定从何处结束选取,该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

在使用slice()时,如果参数start超过了数组的起点,则会从数组头部开始;如果参数end超过了数组的结尾,则会从数组的尾部结束;如果start和end中的范围不在数组中,或者end小于start,则会返回空数组;如果start和end不为数字,则会进行转换,转换失败的话,start默认为0,end默认为0。详见示例:

var arr = ["George", "John", "Thomas", "James", "Adrew", "Martin"];
console.log(arr.slice(2,4));      //["Thomas", "James"]
console.log(arr.slice(-3,4));     //["James"]
console.log(arr.slice(-10,4));    //["George", "John", "Thomas", "James"]
console.log(arr.slice(-10,-4));   //["George", "John"]
console.log(arr.slice(4,3));      //[]
console.log(arr.slice(-20,-10));  //[]
console.log(arr.slice("2","4"));  //["Thomas", "James"]
console.log(arr.slice("a","4"));  //["George", "John", "Thomas", "James"]
console.log(arr.slice("a","b"));  //[]
console.log(arr.slice("2a","4a"));//[]
console.log(arr.slice("",""));    //[]
10、splice()

splice() 方法用于插入、删除或替换数组的元素。
注意:splice()会直接对原数组进行修改。

arrayObject.splice(index, howmany, element1, ….., elementX)
参数index是必需的。规定从何处添加/删除元素,该参数是开始(包含)插入和(或)删除的数组元素的下标,必须是数字。

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

参数element1…elementX是可选的。规定要添加到数组的新元素,从 index 所指的下标处开始插入。

splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

请注意slice()和splice()的区别:slice意思是切片,即把数组切出来一段;splice意思是绞接,假如接两根绳子,需要把原来的绳子切开,然后把新绳子和被切开的旧绳子的两段拼接在一起。如果想删除数组中的一段元素,并向数组添加新元素,应该使用方法Array.splice()

注意如果参数index不为数字,则会自动转换,详见示例:

var arr = ["George", "John", "Thomas", "James", "Adrew", "Martin"]
console.log(arr.splice(2, 1)); //["Thomas"]
console.log(arr); //["George", "John", "James", "Adrew", "Martin"]
console.log(arr.splice(2, 2, "William")); //["James", "Adrew"]
console.log(arr); //["George", "John", "William", "Martin"]
console.log(arr.splice(2, 1, "Tom", "Jerry")); //["William"]
console.log(arr); //["George", "John", "Tom", "Jerry", "Martin"]
console.log(arr.splice(2)); //["Tom", "Jerry", "Martin"]
console.log(arr); //["George", "John"]
console.log(arr.splice("2")); //[]
console.log(arr); //["George", "John"]
console.log(arr.splice("a")); //["George", "John"]
console.log(arr); //[]
11、toString()和toLocaleString()

toString()方法可把数组转换为字符串,并返回结果。
Array.toString() 相当于 Array.join() ,返回值与没有参数的 join() 方法返回的字符串相同。
toLocaleString() 把数组转换为本地字符串。返回值Array 的本地字符串表示。


改变原数组的方法:pop()、push()、reverse()、shift()、sort()、splice()、unshift()

不改变原数组的方法:concat()、join()、slice()、toString()、toLocaleString()

注意:JavaScript里面,没有好的机制来区别Array和Object,一般可以通过下面的方法来识别数组:

var isArray = function(value){
  return Object.prototype.toString.apply(value) === '[object Array]';
}

Object.prototype.toString对任何变量会永远返回这样一个字符串“[object, class]”,而这个class就是JavaScript内嵌对象的构造函数的名字。至于用户自定义的变量,则class等于object。
因此通过Object.prototype.toString.apply(obj)可以准确的获取变量数据类型。
通过Object.prototype.toString可以获得的数据类型包括:Date,Object,String,Number,Boolean,Regexp,Function,undefined,null,Math等。


ECMAScript 5定义了9个新的数组方法,有机会再写!


以上内容参考:Feeldesign Studio 和JavaScript权威指南

谢谢观看,希望大牛指导,小牛一起进步~

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

推荐阅读更多精彩内容