JavaScript-原生Array對(duì)象方法詳解（一）

ls0609 發(fā)布于2019-08-20 15:49 / 2819人閱讀

摘要：元素是通過指定的分隔符進(jìn)行分隔的。注意該方法會(huì)改變?cè)瓉淼臄?shù)組當(dāng)不帶參數(shù)調(diào)用時(shí)，數(shù)組元素按照字母表排序必要時(shí)臨時(shí)轉(zhuǎn)換為字符串比較。方法用于刪除并返回?cái)?shù)組的最后一個(gè)元素。如果數(shù)組已經(jīng)為空，則不改變數(shù)組，并返回值。返回值的本地字符串表示。

1、join()

join() 方法用于把數(shù)組中的所有元素轉(zhuǎn)換為一個(gè)字符串。元素是通過指定的分隔符進(jìn)行分隔的。
arrayObject.join(separator)參數(shù)代表分隔符，是可選的。如果不傳參數(shù)，默認(rèn)逗號(hào)。

注意返回值是字符串，不是數(shù)組。
注意：該方法不會(huì)改變?cè)瓟?shù)組。

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); //長(zhǎng)度為10的空數(shù)組
a.join("*"); //"*********";9個(gè)*符號(hào)組成的字符串

join()方法是String.split()方法的逆向操作，后者是將字符串分割成若干塊來創(chuàng)建一個(gè)數(shù)組。

2、sort()

sort() 方法用于對(duì)數(shù)組的元素進(jìn)行排序并返回排序后的數(shù)組。

注意：該方法會(huì)改變?cè)瓉淼臄?shù)組

當(dāng)不帶參數(shù)調(diào)用時(shí)，數(shù)組元素按照字母表排序（必要時(shí)臨時(shí)轉(zhuǎn)換為字符串比較）。

//字母表順序排序
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"]

//如果數(shù)組有""元素，它們會(huì)排在數(shù)組的頭部
var e = ["a", "Ah", "D", "bcc", "", ""];
e.sort() //["", "", "Ah", "D", "a", "bcc"]

//如果數(shù)組包含undefined元素，它們會(huì)排在數(shù)組的尾部

為了按照其他方式而非字母表順序進(jìn)行數(shù)組排序，必修給sort()傳遞一個(gè)比較函數(shù)作為參數(shù)。該函數(shù)決定了它的兩個(gè)參數(shù)在數(shù)組中的排序。返回負(fù)數(shù)，第一個(gè)參數(shù)在前。反之，返回正數(shù)，第一個(gè)參數(shù)在后。如果返回0，也就是說排序無關(guān)緊要。

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];  數(shù)值順序

var d = ["a", "Ah", "D", "bcc"];
d.sort() //["Ah", "D", "a", "bcc"]  區(qū)分大小寫
d.sort(function(f, g) {
    var x = f.toLowerCase(); //都轉(zhuǎn)換為小寫
    var y = g.toLowerCase(); //都轉(zhuǎn)換為小寫
    if (x < y) return -1;
    if (x > y) return 1;
}); //["a", "Ah", "bcc", "D"] 不區(qū)分大小寫

注意，這里使用匿名函數(shù)表達(dá)式非常方便。既然函數(shù)只使用一次，就沒必要給它命名了。

3、reverse()

everse() 方法用于顛倒數(shù)組中元素的順序，返回逆序的數(shù)組。

注意：該方法會(huì)改變?cè)瓉淼臄?shù)組

reverse()是sort()的逆序版，reverse()的詳細(xì)排序行為請(qǐng)參見上文 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() 方法可向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長(zhǎng)度，也就是添加元素后的數(shù)組長(zhǎng)度。

注意：該方法會(huì)改變?cè)瓉淼臄?shù)組

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

push()方法最少要有一個(gè)參數(shù)。push() 方法可把它的參數(shù)順序添加到 arrayObject 的尾部。push() 方法和 pop() 方法使用數(shù)組提供的先進(jìn)后出棧的功能。

注意：push()方法中的參數(shù)不管是什么類型（數(shù)組、對(duì)象等），一個(gè)參數(shù)將會(huì)被作為一個(gè)整體元素插入 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() 方法用于刪除并返回?cái)?shù)組的最后一個(gè)元素。

注意：該方法會(huì)改變?cè)瓉淼臄?shù)組

pop() 方法將改變數(shù)組（刪除數(shù)組的最后一個(gè)元素，把數(shù)組長(zhǎng)度減 1），并且返回它刪除的元素的值。如果數(shù)組已經(jīng)為空，則 pop() 不改變數(shù)組，并返回 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() 方法可向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度。

注意：該方法會(huì)改變?cè)瓉淼臄?shù)組

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

參數(shù)newelement1……X至少要有一個(gè)。unshift() 方法將把它的參數(shù)插入 arrayObject 的頭部，并將已經(jīng)存在的元素順次地移到較高的下標(biāo)處，以便留出空間。該方法的第一個(gè)參數(shù)將成為數(shù)組的新元素 0，如果還有第二個(gè)參數(shù)，它將成為新的元素 1，以此類推。

在IE6與IE7中，unshift()會(huì)返回 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() 方法用于把數(shù)組的第一個(gè)元素從其中刪除，并返回第一個(gè)元素的值。

如果數(shù)組是空的，那么 shift() 方法將不進(jìn)行任何操作，返回 undefined 值。
注意：該方法會(huì)改變?cè)瓉淼臄?shù)組

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() 方法用于連接兩個(gè)或多個(gè)數(shù)組。

該方法不會(huì)改變現(xiàn)有的數(shù)組，而僅僅會(huì)返回被連接數(shù)組的一個(gè)副本。

注意：參數(shù)是必需的?？梢允蔷唧w的值，也可以是數(shù)組對(duì)象，可以是任意多個(gè)。如果參數(shù)是元素，則拼接元素。如果參數(shù)是數(shù)組，則拼接數(shù)組中的元素，并非數(shù)組本身。

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() 方法可從已有的數(shù)組中返回選定的元素，一個(gè)片段或一個(gè)子數(shù)組。

注意，該方法并不會(huì)修改數(shù)組，方法會(huì)返回一個(gè)新的數(shù)組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。

arrayObject.slice(start, end)參數(shù)start是必需的，規(guī)定從何處開始選取，如果是負(fù)數(shù)，那么它規(guī)定從數(shù)組尾部開始算起的位置。也就是說，-1 指最后一個(gè)元素，-2 指倒數(shù)第二個(gè)元素，以此類推。

參數(shù)end是可選的，規(guī)定從何處結(jié)束選取，該參數(shù)是數(shù)組片斷結(jié)束處的數(shù)組下標(biāo)。如果沒有指定該參數(shù)，那么切分的數(shù)組包含從 start 到數(shù)組結(jié)束的所有元素。如果這個(gè)參數(shù)是負(fù)數(shù)，那么它規(guī)定的是從數(shù)組尾部開始算起的元素。

在使用slice()時(shí)，如果參數(shù)start超過了數(shù)組的起點(diǎn)，則會(huì)從數(shù)組頭部開始；如果參數(shù)end超過了數(shù)組的結(jié)尾，則會(huì)從數(shù)組的尾部結(jié)束；如果start和end中的范圍不在數(shù)組中，或者end小于start，則會(huì)返回空數(shù)組；如果start和end不為數(shù)字，則會(huì)進(jìn)行轉(zhuǎn)換，轉(zhuǎn)換失敗的話，start默認(rèn)為0，end默認(rèn)為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() 方法用于插入、刪除或替換數(shù)組的元素。

注意：splice()會(huì)直接對(duì)原數(shù)組進(jìn)行修改。

arrayObject.splice(index, howmany, element1, ….., elementX)
參數(shù)index是必需的。規(guī)定從何處添加/刪除元素，該參數(shù)是開始（包含）插入和（或）刪除的數(shù)組元素的下標(biāo)，必須是數(shù)字。

參數(shù)howmany是必需的。規(guī)定應(yīng)該刪除多少元素。必須是數(shù)字，但可以是 “0″。如果未規(guī)定此參數(shù)，則刪除從 index 開始到原數(shù)組結(jié)尾的所有元素。

參數(shù)element1…elementX是可選的。規(guī)定要添加到數(shù)組的新元素，從 index 所指的下標(biāo)處開始插入。

splice() 方法可刪除從 index 處開始的零個(gè)或多個(gè)元素，并且用參數(shù)列表中聲明的一個(gè)或多個(gè)值來替換那些被刪除的元素。如果從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的數(shù)組。

請(qǐng)注意slice()和splice()的區(qū)別：slice意思是切片，即把數(shù)組切出來一段；splice意思是絞接，假如接兩根繩子，需要把原來的繩子切開，然后把新繩子和被切開的舊繩子的兩段拼接在一起。如果想刪除數(shù)組中的一段元素，并向數(shù)組添加新元素，應(yīng)該使用方法Array.splice()。

注意如果參數(shù)index不為數(shù)字，則會(huì)自動(dòng)轉(zhuǎn)換，詳見示例：

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() 方法可把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。

Array.toString() 相當(dāng)于 Array.join() ，返回值與沒有參數(shù)的 join() 方法返回的字符串相同。
toLocaleString() 把數(shù)組轉(zhuǎn)換為本地字符串。返回值Array 的本地字符串表示。

改變?cè)瓟?shù)組的方法：pop()、push()、reverse()、shift()、sort()、splice()、unshift()
不改變?cè)瓟?shù)組的方法：concat()、join()、slice()、toString()、toLocaleString()

注意：JavaScript里面，沒有好的機(jī)制來區(qū)別Array和Object，一般可以通過下面的方法來識(shí)別數(shù)組：

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

Object.prototype.toString對(duì)任何變量會(huì)永遠(yuǎn)返回這樣一個(gè)字符串“[object, class]”，而這個(gè)class就是JavaScript內(nèi)嵌對(duì)象的構(gòu)造函數(shù)的名字。至于用戶自定義的變量，則class等于object。
因此通過Object.prototype.toString.apply(obj)可以準(zhǔn)確的獲取變量數(shù)據(jù)類型。
通過Object.prototype.toString可以獲得的數(shù)據(jù)類型包括:Date,Object,String,Number,Boolean,Regexp,Function,undefined,null,Math等。

ECMAScript 5定義了9個(gè)新的數(shù)組方法，有機(jī)會(huì)再寫！

以上內(nèi)容參考：[Feeldesign Studio ](http://www.feeldesignstudio.c...和JavaScript權(quán)威指南

謝謝觀看，希望大牛指導(dǎo)，小牛一起進(jìn)步~

GPU云服務(wù)器云服務(wù)器 javascript對(duì)象詳解 javascript對(duì)象方法 js原生動(dòng)畫詳解 array方法

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82503.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

ls0609

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

remove.bg – 在線免費(fèi)自動(dòng)摳圖去除圖片背景工具

閱讀 2979·2021-09-26 10:18
www怎么是主機(jī)名-網(wǎng)址的主機(jī)名是什么？

閱讀 5309·2021-09-22 15:02
moment太重? 那就試試miment--一個(gè)超輕量級(jí)的js時(shí)間庫(kù)

閱讀 2809·2019-08-30 15:53
【winter重學(xué)前端筆記13】瀏覽器：一個(gè)瀏覽器是如何工作的？CSS計(jì)算

閱讀 1856·2019-08-29 18:41
XML已死？

閱讀 2706·2019-08-27 10:58
PayPal smart payment buttons

閱讀 2639·2019-08-26 13:49
webpack 4.x學(xué)習(xí)使用總結(jié)

閱讀 2763·2019-08-26 12:17
過渡(1)：元素/組件過渡和動(dòng)畫

閱讀 912·2019-08-26 11:49

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

JavaScript-原生Array對(duì)象方法詳解（一）

1、join()

2、sort()

3、reverse()

4、push()

5、pop()

6、unshift()

7、shift()

8、contact()

9、slice()

10、splice()

11、toString()和toLocaleString()

相關(guān)文章

JavaScript深入淺出

【連載】前端個(gè)人文章整理-從基礎(chǔ)到入門

JavaScript 小知識(shí)點(diǎn)

JS中的call、apply、bind方法詳解

發(fā)表評(píng)論

0條評(píng)論

ls0609

男|高級(jí)講師

TA的文章

remove.bg – 在線免費(fèi)自動(dòng)摳圖去除圖片背景工具

www怎么是主機(jī)名-網(wǎng)址的主機(jī)名是什么？

moment太重? 那就試試miment--一個(gè)超輕量級(jí)的js時(shí)間庫(kù)

【winter重學(xué)前端筆記13】瀏覽器：一個(gè)瀏覽器是如何工作的？CSS計(jì)算

XML已死？

PayPal smart payment buttons

webpack 4.x學(xué)習(xí)使用總結(jié)

過渡(1)：元素/組件過渡和動(dòng)畫

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

JavaScript-原生Array對(duì)象方法詳解（一）

1、join()

2、sort()

3、reverse()

4、push()

5、pop()

6、unshift()

7、shift()

8、contact()

9、slice()

10、splice()

11、toString()和toLocaleString()

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

1、join()

3、reverse()

5、pop()

6、unshift()

7、shift()

8、contact()

9、slice()

10、splice()