Javascript數組基本操作
Javascript中的數組是一種特殊的對象,用來表示偏移量的索引是該對象的屬性,索引可能是整數,然而這些數字索引在內部被轉換為字符串類型,這是因為javascript對象中的屬性名必須是字符串。
一:如何創建數組?
創建數組有2中方式,第一種是對象字面量如下:
var arrs = []; // 定義了一個空數組。
還有一種方式是:調用Array的構造函數創建數組
var arrs = new Array();
二:數組的基本操作如下:
1. 把字符串轉換為數組 可以使用split方法。如下:
console.log("aabbcc".split(""));
打印:["a", "a", "b", "b", "c", "c"]
2. 把數組轉換為字符串,可以使用join方法。如下:
console.log(['aa','bb','vv'].join(""));
打印如下:aabbvv
3. indexOf查找元素。用來查找元素是否在數組中,如果存在就返回數組的索引,否則就返回-1;
["aa",'bb'].indexOf('bb'); // 1
indexOf()函數總是返回第一個與參數相同的元素的索引,有另一個功能與之類似的函數是 lastIndexOf()方法,該函數返回相同元素中最後一個元素的索引,如果沒有找到,則返回-1.
如:["aa",'bb','cc','aa'].lastIndexOf('aa'); // 3
["aa",'bb','cc','aa'].indexOf('aa'); // 0
4. 數組合並使用concat()方法。
如:console.log(["aa",'bb'].concat(['cc']));
返回 [“aa”,”bb”,”cc”];
5. splice()方法從現有數組裡截取一個新數組,該方法的第一個參數是截取的起始索引,第二個參數是截取的長度。比如如下代碼:
["aa","bbb","vvv","ddd","ee"].splice(2,2)
返回是:["vvv", "ddd"]
6. slice()方法 從已有的數組中返回選定的元素
arrs.slice(start,end);
start 必須,規定從何處開始選取,如果是負數,那麼規定從數組尾部開始算起的位置,比如:-1是最後一個元素,-2是倒數第二個元素。
end 可選,規定從何處結束選取,該參數是數組片段結束處的數組下標,如果沒有指定該參數,那麼切分的數組包含從start到數組結束的所有元素。 比如如下:
['aa','bb','cc','dd'].slice(1,2);
返回[“bb”];
7 . push()方法,從數組最後添加元素;比如如下代碼:
var nums = [1,2,3,4,5];
nums.push(6);
console.log(nums); // [1,2,3,4,5,6];
8. unshift()方法 可向數組的開頭添加一個或更多元素,並返回新的長度。如下:
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()方法 刪除數組末尾的元素。返回被刪的元素
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()方法 刪除數組的第一個元素,如下代碼:
var nums = [9,1,2,3,4,5,6];
console.log(nums.shift()); // 9
console.log(nums);// [1,2,3,4,5,6];
從數組中間位置添加和刪除元素,可以使用splice()方法,需要提供如下參數:
1. 起始索引。
2. 需要刪除元素的個數(添加元素時該參數設置為0);
3. 想要添加進數組的元素。
比如如下:
在數組中間插入元素。
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]
在數組中刪除元素。
var nums = [1,2,3,100,200,300,400,4,5];
nums.splice(3,4);
console.log(nums);// 1,2,3,4,5
11. 數組排序,第一個方法是:reverse(); 該方法將數組中元素的順序進行翻轉。比如如下代碼:
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"]
但是如果數組元素是數字類型,就有問題了,比如如下代碼:
var nums = [3,1,2,100,4,200];
nums.sort();
console.log(nums);// [1, 100, 2, 200, 3, 4]
sort()方法是按照字典順序對元素進行排序的,因此他假定元素都是字符串類型。但是對於數字型的我們可以簡單寫一個函數即可。比如如下代碼:
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().是針對標准浏覽器做的,IE9+,firefox,chrome操作的,IE8及以下不支持的。
一:forEach()方法:該方法接受一個函數作為參數,對數組的每個元素使用該函數,如下代碼:
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()方法 該方法接受一個返回值為布爾類型的函數,對數組中每個元素使用該函數,如果返回所有的為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()方法接受一個返回值為布爾類型的函數,只要有一個為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()方法接受一個函數,返回一個值,該方法會從一個累加值開始,不斷對累加值和數組中的後續元素調用該函數,直到數組中的最後一個元素,最後返回得到的累加值。如下代碼:
function add(total,currentVal) {
return total + currentVal;
}
var nums = [1,2,3,4];
console.log(nums.reduce(add));
返回10.
Javascript還提供了reduceRight()方法,和reduce()方法不同,它是從右到左執行的,下面demo是對數組中的字符串做操作,如下代碼:
function concat(accumulatedString,item) {
return accumulatedString + item;
}
var words = ["aa",'bb','cc'];
console.log(words.reduce(concat));
返回aabbcc。
但是如果使用reduceRight()方法的話,則值是從右邊開始的。如下代碼:
function concat(accumulatedString,item) {
return accumulatedString + item;
}
var words = ["aa",'bb','cc'];
console.log(words.reduceRight(concat));
打印 ccbbaa
五:map()方法對數組中的每個元素使用某個函數,產生新數組。如下代碼:
function curve(grade) {
return grade +=5;
}
var grades = [77,78,89,13];
console.log(grades.map(curve));// [82,83,94,18]
下面是一個字符串使用map()方法對數組的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()方法:傳入一個返回值為布爾類型的函數,對數組中所有元素使用該函數,返回一個新數組,如下代碼:
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
下面總結下 javascript字符串的基本方法如下:
1. concat()方法:該方法可以把多個參數到指定字符串的尾部。如下代碼:
var a="Hello"; var b="World";
console.log(a.concat(b)); // HelloWorld
2. charAt(),charCodeAt()方法。
charAt()用於返回字符串中第N個字符,charCodeAt用於返回字符串中的第N個字符串的代碼。如下代碼:
var a = "hello world";
console.log(a.charAt(2)); // l
console.log(a.charCodeAt(2)) // 108
3. indexOf(),lastIndexOf()方法,2個都是查找字符串的位置,indexOf()是從頭開始查找,lastIndexOf()是從尾部開始查找的,該2個方法分別有2個參數,第一個參數為查找的對象,第二個參數為查找的起始位置。如下代碼:
var a = "hello world";
console.log(a.indexOf("lo",1)); // 3
console.log(a.indexOf(2)); // -1
4. substr(),substring()方法。
substr(start,end);該方法根據指定的長度來截取字符串,包含2個參數,第一個參數為截取字符串的起始下標,第二個參數為表示截取的長度。
如下代碼:
var a = "hello world";
console.log(a.substr(0,5));// hello
substring(start,stop); start 參數字符串開始的位置,stop字符串結束的位置。如下代碼:
var a = "hello world";
console.log(a.substring(2,5)); // llo
5. slice()方法:
slice()與substring()類似,都是根據起始下標與結束下標來截取子字符串。slice()方法聲明:slice(start, [end])
如下代碼:
var a = "hello world";
console.log(a.slice(2,5)); // llo
slice()方法與substring()方法的區別:
區別1:如果第一個參數的值比第二個參數的值大,即起始下標大於結束下標,substring()方法能夠在執行截取之前,先交換2個參數,而slice()方法無效,返回空字符串, 如下代碼:
var a = "hello world";
console.log(a.substring(11,6)); // world
console.log(a.slice(11,6)); // 返回空
區別2:如果參數值為負數,slice()方法能夠把負號解釋為從右側開始定位,右側第一個為-1,第二個為-2,以此類推。而substring()方法無效,並返回空字符串。如下代碼:
var a="Hello World";
console.log(a.substring(-5,-1)); // 空
console.log(a.slice(-5,-1)); // worl
6. replace()方法
replace(regexp,replacement); 第一個參數表示執行匹配的正則表達式,也可以是字符串;第二個參數表示准備代替匹配的子字符串。
var a = "hello a";
console.log(a.replace(/a/g,'world')) // hello world
7. toLowerCase(),toUpperCase()方法。
toLowerCase() 將字符串轉換成為小寫,toUpperCase() 將字符串轉換成為大寫。
如下代碼:
var a="Hello World"
console.log(a.toLowerCase()); // hello world
console.log(a.toUpperCase()); // HELLO WORLD