Javascript數(shù)組基本操作

Javascript中的數(shù)組是一種特殊的對(duì)象，用來(lái)表示偏移量的索引是該對(duì)象的屬性，索引可能是整數(shù)，然而這些數(shù)字索引在內(nèi)部被轉(zhuǎn)換為字符串類型，這是因?yàn)閖avascript對(duì)象中的屬性名必須是字符串。

一：如何創(chuàng)建數(shù)組？

創(chuàng)建數(shù)組有2中方式，第一種是對(duì)象字面量如下：

var? arrs = [];? // 定義了一個(gè)空數(shù)組。

還有一種方式是：調(diào)用Array的構(gòu)造函數(shù)創(chuàng)建數(shù)組

var arrs = new Array();

二：數(shù)組的基本操作如下：

1. 把字符串轉(zhuǎn)換為數(shù)組可以使用split方法。如下：

console.log("aabbcc".split(""));

打印：["a", "a", "b", "b", "c", "c"]

2. 把數(shù)組轉(zhuǎn)換為字符串，可以使用join方法。如下：

console.log(['aa','bb','vv'].join(""))；

打印如下：aabbvv

3. indexOf查找元素。用來(lái)查找元素是否在數(shù)組中，如果存在就返回?cái)?shù)組的索引，否則就返回-1;

["aa",'bb'].indexOf('bb');? // 1

indexOf()函數(shù)總是返回第一個(gè)與參數(shù)相同的元素的索引，有另一個(gè)功能與之類似的函數(shù)是 lastIndexOf()方法，該函數(shù)返回相同元素中最后一個(gè)元素的索引，如果沒(méi)有找到，則返回-1.

如：["aa",'bb','cc','aa'].lastIndexOf('aa'); // 3

["aa",'bb','cc','aa'].indexOf('aa');? // 0

4. 數(shù)組合并使用concat()方法。

如：console.log(["aa",'bb'].concat(['cc']));

返回 [“aa”,”bb”,”cc”];

5. splice()方法從現(xiàn)有數(shù)組里截取一個(gè)新數(shù)組，該方法的第一個(gè)參數(shù)是截取的起始索引，第二個(gè)參數(shù)是截取的長(zhǎng)度。比如如下代碼：

["aa","bbb","vvv","ddd","ee"].splice(2,2)

返回是：["vvv", "ddd"]

6. slice()方法從已有的數(shù)組中返回選定的元素

arrs.slice(start,end);

start 必須，規(guī)定從何處開(kāi)始選取，如果是負(fù)數(shù)，那么規(guī)定從數(shù)組尾部開(kāi)始算起的位置，比如：-1是最后一個(gè)元素，-2是倒數(shù)第二個(gè)元素。

end 可選，規(guī)定從何處結(jié)束選取，該參數(shù)是數(shù)組片段結(jié)束處的數(shù)組下標(biāo)，如果沒(méi)有指定該參數(shù)，那么切分的數(shù)組包含從start到數(shù)組結(jié)束的所有元素。 ? ? ? ? ? ?比如如下：

['aa','bb','cc','dd'].slice(1,2);

返回[“bb”];

7 . push()方法，從數(shù)組最后添加元素；比如如下代碼：

var nums = [1,2,3,4,5];

nums.push(6);

console.log(nums); // [1,2,3,4,5,6];

8. unshift()方法可向數(shù)組的開(kāi)頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度。如下：

var arrs = [1,2,3,4,5];

console.log(arrs.unshift("aa","bb")); 返回7

console.log(arrs); // ["aa", "bb", 1, 2, 3, 4, 5]

9. pop()方法刪除數(shù)組末尾的元素。返回被刪的元素

var arrs = [1,2,3,4,5,6];arrs.pop();

console.log(arrs.pop()); // 6

console.log(arrs);// 1,2,3,4,5

10. shift()方法刪除數(shù)組的第一個(gè)元素，如下代碼：

var nums = [9,1,2,3,4,5,6];

console.log(nums.shift()); // 9

console.log(nums);// [1,2,3,4,5,6];

從數(shù)組中間位置添加和刪除元素，可以使用splice()方法，需要提供如下參數(shù)：

1. 起始索引。

2. 需要?jiǎng)h除元素的個(gè)數(shù)(添加元素時(shí)該參數(shù)設(shè)置為0)；

3. 想要添加進(jìn)數(shù)組的元素。

比如如下：

在數(shù)組中間插入元素。

var nums = [1,2,3,7,8,9];

nums.splice(3,0,4,5,6);

console.log(nums);// [1,2,3,4,5,6,7,8,9]

在數(shù)組中刪除元素。

var nums = [1,2,3,100,200,300,400,4,5];

nums.splice(3,4);

console.log(nums);// 1,2,3,4,5

11. 數(shù)組排序，第一個(gè)方法是：reverse(); 該方法將數(shù)組中元素的順序進(jìn)行翻轉(zhuǎn)。比如如下代碼：

var nums = [1,2,3,4,5];

nums.reverse();

console.log(nums);// 5,4,3,2,1

如果是字符串排序，可以使用sort()方法。如下代碼：

var arrs = [“Da”,”ade”,”cdf”,’bfg’];

arrs.sort();

console.log(arrs);// ["Da", "ade", "bfg", "cdf"]

但是如果數(shù)組元素是數(shù)字類型，就有問(wèn)題了，比如如下代碼：

var nums = [3,1,2,100,4,200];

nums.sort();

console.log(nums);// [1, 100, 2, 200, 3, 4]

sort()方法是按照字典順序?qū)υ剡M(jìn)行排序的，因此他假定元素都是字符串類型。但是對(duì)于數(shù)字型的我們可以簡(jiǎn)單寫(xiě)一個(gè)函數(shù)即可。比如如下代碼：

function compare(num1,num2) {

return num1 – num2;

}

var nums = [3,1,2,100,4,200];

num.sort(compare);

console.log(nums);// 1,2,3,4,100,200

下面介紹的幾種新元素 分別是 forEach(),every()，some(),reduce(),reduceRight(),map(),filter().是針對(duì)標(biāo)準(zhǔn)瀏覽器做的，IE9+，firefox，chrome操作的，IE8及以下不支持的。

一：forEach()方法：該方法接受一個(gè)函數(shù)作為參數(shù)，對(duì)數(shù)組的每個(gè)元素使用該函數(shù)，如下代碼：

function square(num) {

console.log(num*num);

}

var nums = [1,2,3,4,5,6,7,8,9,10];

console.log(nums.forEach(square));

// 1,4,9,16,25,36,49,64,81,100

二：every()方法該方法接受一個(gè)返回值為布爾類型的函數(shù)，對(duì)數(shù)組中每個(gè)元素使用該函數(shù)，如果返回所有的為true，則true，否則返回false，如下代碼：

function isEven(arrs) {

return arrs % 2 == 0;

}

var arrs = [2,4,6,8];

console.log(arrs.every(isEven));

返回true；如果上面的arrs 是 [2,4,5,6];則返回false

三：some()方法接受一個(gè)返回值為布爾類型的函數(shù)，只要有一個(gè)為true，則返回true，如下代碼：

function isEven(arrs) {

return arrs % 2 == 0;

}

var arrs = [1,5,3,7];

console.log(arrs.some(isEven));

返回false，如果上面的arrs = [1,5,3,6];則返回true。

四：reduce()方法接受一個(gè)函數(shù)，返回一個(gè)值，該方法會(huì)從一個(gè)累加值開(kāi)始，不斷對(duì)累加值和數(shù)組中的后續(xù)元素調(diào)用該函數(shù)，直到數(shù)組中的最后一個(gè)元素，最后返回得到的累加值。如下代碼：

function add(total,currentVal) {

return total + currentVal;

}

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

console.log(nums.reduce(add));

返回10.

Javascript還提供了reduceRight()方法，和reduce()方法不同，它是從右到左執(zhí)行的，下面demo是對(duì)數(shù)組中的字符串做操作，如下代碼：

function concat(accumulatedString,item) {

return accumulatedString + item;

}

var words = ["aa",'bb','cc'];

console.log(words.reduce(concat));

返回aabbcc。

但是如果使用reduceRight()方法的話，則值是從右邊開(kāi)始的。如下代碼：

function concat(accumulatedString,item) {

return accumulatedString + item;

}

var words = ["aa",'bb','cc'];

console.log(words.reduceRight(concat));

打印 ccbbaa

五：map()方法對(duì)數(shù)組中的每個(gè)元素使用某個(gè)函數(shù)，產(chǎn)生新數(shù)組。如下代碼：

function curve(grade) {

return grade +=5;

}

var grades = [77,78,89,13];

console.log(grades.map(curve));// [82,83,94,18]

下面是一個(gè)字符串使用map()方法對(duì)數(shù)組的demo，如下：

function first(word) {

return word[0];

}

var words = ["ased","bvc","cde"];

console.log(words.map(first)); // ['a','b','c'];

console.log(words.map(first).join("")); //"abc"

六：filter()方法：傳入一個(gè)返回值為布爾類型的函數(shù)，對(duì)數(shù)組中所有元素使用該函數(shù)，返回一個(gè)新數(shù)組，如下代碼：

function isEven(num) {

return num % 2 == 0;

}

function isOdd(num) {

return num % 2 != 0;

}

var nums = [];

for(var i = 0; i < 10; i++) {

nums[i] = i + 1;

}

console.log(nums.filter(isEven));? // 2,4,6,8,10

console.log(nums.filter(isOdd));?? // 1,3,5,7,9

下面總結(jié)下 javascript字符串的基本方法如下：

1. concat()方法：該方法可以把多個(gè)參數(shù)到指定字符串的尾部。如下代碼：

var a="Hello"; var b="World";

console.log(a.concat(b)); // HelloWorld

2. charAt(),charCodeAt()方法。

charAt()用于返回字符串中第N個(gè)字符，charCodeAt用于返回字符串中的第N個(gè)字符串的代碼。如下代碼：

var a = "hello world";

console.log(a.charAt(2)); // l

console.log(a.charCodeAt(2)) // 108

3. indexOf(),lastIndexOf()方法，2個(gè)都是查找字符串的位置，indexOf()是從頭開(kāi)始查找，lastIndexOf()是從尾部開(kāi)始查找的，該2個(gè)方法分別有2個(gè)參數(shù)，第一個(gè)參數(shù)為查找的對(duì)象，第二個(gè)參數(shù)為查找的起始位置。如下代碼：

var a = "hello world";

console.log(a.indexOf("lo",1));? // 3

console.log(a.indexOf(2));?? // -1

4. substr(),substring()方法。

substr(start,end);該方法根據(jù)指定的長(zhǎng)度來(lái)截取字符串，包含2個(gè)參數(shù)，第一個(gè)參數(shù)為截取字符串的起始下標(biāo)，第二個(gè)參數(shù)為表示截取的長(zhǎng)度。

如下代碼：

var a = "hello world";

console.log(a.substr(0,5));// hello

substring(start,stop); start 參數(shù)字符串開(kāi)始的位置，stop字符串結(jié)束的位置。如下代碼：

var a = "hello world";

console.log(a.substring(2,5)); // llo

5. slice（）方法：

slice()與substring（）類似，都是根據(jù)起始下標(biāo)與結(jié)束下標(biāo)來(lái)截取子字符串。slice()方法聲明：slice(start, [end])

如下代碼：

var a = "hello world";

console.log(a.slice(2,5)); // llo

slice()方法與substring()方法的區(qū)別：

區(qū)別1：如果第一個(gè)參數(shù)的值比第二個(gè)參數(shù)的值大，即起始下標(biāo)大于結(jié)束下標(biāo)，substring()方法能夠在執(zhí)行截取之前，先交換2個(gè)參數(shù)，而slice（）方法無(wú)效，返回空字符串， ? ? ?如下代碼：

var a = "hello world";

console.log(a.substring(11,6)); // world

console.log(a.slice(11,6)); // 返回空

區(qū)別2：如果參數(shù)值為負(fù)數(shù)，slice()方法能夠把負(fù)號(hào)解釋為從右側(cè)開(kāi)始定位，右側(cè)第一個(gè)為-1，第二個(gè)為-2，以此類推。而substring（）方法無(wú)效，并返回空字符串。如下代碼：

var a="Hello World";

console.log(a.substring(-5,-1));? // 空

console.log(a.slice(-5,-1)); // worl

6. replace()方法

replace(regexp,replacement); ?第一個(gè)參數(shù)表示執(zhí)行匹配的正則表達(dá)式，也可以是字符串；第二個(gè)參數(shù)表示準(zhǔn)備代替匹配的子字符串。

var a = "hello a";

console.log(a.replace(/a/g,'world')) // hello world

7. toLowerCase(),toUpperCase()方法。

toLowerCase() 將字符串轉(zhuǎn)換成為小寫(xiě),toUpperCase() 將字符串轉(zhuǎn)換成為大寫(xiě)。

如下代碼：

var a="Hello World"

console.log(a.toLowerCase());? // hello world

console.log(a.toUpperCase()); // HELLO WORLD