js基礎(chǔ)篇（三）——DOM的各種操作
js基礎(chǔ)篇（二）——字符串的各種操作

1. 創(chuàng)建數(shù)組

創(chuàng)建一個數(shù)組擂找，有三種方法奈应。
下面的代碼定義了一個名為 myCars的數(shù)組對象：

1.1 常規(guī)方法

var myCars=new Array(); 
myCars[0]="Saab";       
myCars[1]="Volvo";
myCars[2]="BMW";

1.2 簡潔方法

var myCars=new Array("Saab","Volvo","BMW");

1.3 字面

推薦使用

var myCars=["Saab","Volvo","BMW"];

2.訪問數(shù)組

通過指定數(shù)組名以及索引號碼，你可以訪問某個特定的元素账磺。

2.1 取值

以下實(shí)例可以訪問myCars數(shù)組的第一個值：

var name=myCars[0];

2.2 賦值

以下實(shí)例修改了數(shù)組myCars 的第一個元素:

myCars[0]="Opel";

3.數(shù)組屬性與方法

3.1 數(shù)組屬性

3.2 數(shù)組方法

數(shù)組也是對象，數(shù)組對象的屬性可以稱為數(shù)組方法碧聪，用來操作數(shù)組冒版。
下列表格是總結(jié)，每個方法的示例在下面逞姿。

1. concat() 方法
   • 定義和用法
     用于連接兩個或多個數(shù)組破喻。
     該方法不會改變現(xiàn)有的數(shù)組，而僅僅會返回被連接數(shù)組的一個副本盟榴。
   • 實(shí)例

//合并三個數(shù)組的值：
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
//children 輸出結(jié)果：Cecilie,Lone,Emil,Tobias,Linus,Robin

1. copyWithin()方法
   • 定義和用法
     用于從數(shù)組的指定位置拷貝元素到數(shù)組的另一個指定位置中曹质。
   • 實(shí)例

//復(fù)制數(shù)組的前面兩個元素到后面兩個元素上：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);
//fruits 輸出結(jié)果：
//Banana,Orange,Banana,Orange

1. every()方法

   • 定義和用法
     every()方法用于檢測數(shù)組所有元素是否都符合指定條件（通過函數(shù)提供）。
     every() 方法使用指定函數(shù)檢測數(shù)組中的所有元素：
     如果數(shù)組中檢測到有一個元素不滿足擎场，則整個表達(dá)式返回 false羽德，且剩余的元素不會再進(jìn)行檢測。
     如果所有元素都滿足條件迅办，則返回true宅静。
     注意：every()不會對空數(shù)組進(jìn)行檢測，不會改變原始數(shù)組礼饱。

   • 實(shí)例

//檢測數(shù)組 ages 的所有元素是否都大于 18 :
var ages = [32, 33, 16, 40];
function checkAdult(age) {
          return age >= 18;
}
function myFunction() {
          document.getElementById("demo").innerHTML = ages.every(checkAdult);
}
//輸出結(jié)果為:
false

1. fill()方法

   • 定義和用法
     fill()方法用于將一個固定值替換數(shù)組的元素坏为。

   • 實(shí)例

//使用固定值填充數(shù)組：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob");
//fruits 輸出結(jié)果：
Runoob,Runoob,Runoob,Runoob

1. filter()方法

   • 定義和用法
     filter()方法創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素镊绪。
     注意： filter() 不會對空數(shù)組進(jìn)行檢測匀伏，不會改變原始數(shù)組。

   • 實(shí)例

//返回?cái)?shù)組 ages 中所有元素都大于 18 的元素:
var ages = [32, 33, 16, 40];
function checkAdult(age) {
          return age >= 18;
}
function myFunction() {
          document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
//輸出結(jié)果為:
32,33,40

1. find()方法

   • 定義和用法
     find() 方法返回傳入一個測試條件（函數(shù)）符合條件的數(shù)組第一個元素蝴韭。
     find()方法為數(shù)組中的每個元素都調(diào)用一次函數(shù)執(zhí)行：
     當(dāng)數(shù)組中的元素在測試條件時返回true 時, find()返回符合條件的元素够颠，之后的值不會再調(diào)用執(zhí)行函數(shù)。
     如果沒有符合條件的元素返回 -1
     注意: find()對于空數(shù)組榄鉴，函數(shù)是不會執(zhí)行的履磨， 并沒有改變數(shù)組的原始值。

   • 實(shí)例

//獲取數(shù)組中年齡大于 18 的第一個元素
var ages = [3, 10, 18, 20];
function checkAdult(age) {
          return age >= 16;
}
function myFunction() {
          document.getElementById("demo").innerHTML = ages.find(checkAdult);
}
fruits 輸出結(jié)果：
18

1. findIndex()方法

   • 定義和用法
     findIndex()方法返回傳入一個測試條件（函數(shù)）符合條件的數(shù)組第一個元素位置庆尘。
     findIndex() 方法為數(shù)組中的每個元素都調(diào)用一次函數(shù)執(zhí)行：
     當(dāng)數(shù)組中的元素在測試條件時返回 true 時, findIndex() 返回符合條件的元素的索引位置剃诅，之后的值不會再調(diào)用執(zhí)行函數(shù)。
     如果沒有符合條件的元素返回 -1
     注意: findIndex()對于空數(shù)組驶忌，函數(shù)是不會執(zhí)行的矛辕，并沒有改變數(shù)組的原始值。

   • 實(shí)例

//獲取數(shù)組中年齡大于 18 的第一個元素索引位置
var ages = [3, 10, 18, 20];
function checkAdult(age) {
          return age >= 18;
}
function myFunction() {
          document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
}
//fruits 輸出結(jié)果：
2

1. forEach()方法

   • 定義和用法
     forEach()方法用于調(diào)用數(shù)組的每個元素，并將元素傳遞給回調(diào)函數(shù)聊品。
     注意: forEach()對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的飞蹂。

   • 實(shí)例

//列出數(shù)組的每個元素：
<button onclick="numbers.forEach(myFunction)">點(diǎn)我</button>
<p id="demo"></p>
<script>
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25];
function myFunction(item, index) {
          demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>";
}
</script>
//輸出結(jié)果：
index[0]: 4
index[1]: 9
index[2]: 16
index[3]: 25

1. indexOf()方法

   • 定義和用法
     indexOf() 方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置。 該方法將從頭到尾地檢索字符串 stringObject翻屈，看它是否含有子串 searchvalue陈哑。開始檢索的位置在字符串的 fromindex 處或字符串的開頭（沒有指定fromindex 時）。如果找到一個 searchvalue伸眶，則返回 searchvalue 的第一次出現(xiàn)的位置惊窖。stringObject 中的字符位置是從 0 開始的。 如果在數(shù)組中沒找到字符串則返回 -1赚抡。 提示如果你想查找字符串最后出現(xiàn)的位置爬坑，請使用lastIndexOf() 方法。

   • 實(shí)例

//查找數(shù)組中的 "Apple" 元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
//a 結(jié)果輸出：
2
以上輸出結(jié)果意味著 "Apple" 元素位于數(shù)組中的第 2 個位置涂臣。

1. join()方法

   • 定義和用法
     join()方法用于把數(shù)組中的所有元素轉(zhuǎn)換一個字符串。
     元素是通過指定的分隔符進(jìn)行分隔的售担。

   • 實(shí)例

//把數(shù)組中的所有元素轉(zhuǎn)換為一個用-連接的字符串：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join("-");
//energy輸出結(jié)果：
Banana-Orange-Apple-Mango

1. lastIndexOf()方法

   • 定義和用法
     lastIndexOf()方法可返回一個指定的字符串值最后出現(xiàn)的位置赁遗，在一個字符串中的指定位置從后向前搜索，字符位置是從 0 開始的族铆。如果要檢索的字符串值沒有出現(xiàn)岩四，則該方法返回 -1。
     提示： 如果你想查找字符串首次出現(xiàn)的位置哥攘，請使用indexOf()方法剖煌。

   • 實(shí)例

//查找數(shù)組元素 "Apple"出現(xiàn)的位置：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
//a 輸出結(jié)果：
2

1. map()方法

   • 定義和用法
     map()方法返回一個新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值逝淹。
     map() 方法按照原始數(shù)組元素順序依次處理元素耕姊。
     注意：map()不會對空數(shù)組進(jìn)行檢測，不會改變原始數(shù)組栅葡。

   • 實(shí)例

//返回一個數(shù)組茉兰，數(shù)組中元素為原始數(shù)組的平方根:
var numbers = [4, 9, 16, 25];
function myFunction() {
          x = document.getElementById("demo")
          x.innerHTML = numbers.map(Math.sqrt);
}
//輸出結(jié)果為:
2,3,4,5

1. pop()方法

   • 定義和用法
     pop()方法用于刪除數(shù)組的最后一個元素并返回刪除的元素。
     注意：此方法改變數(shù)組的長度欣簇！
     提示： 移除數(shù)組第一個元素规脸，請使用shift()方法。

   • 實(shí)例

//移除最后一個數(shù)組元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
//fruits 結(jié)果輸出：
Banana,Orange,Apple

1. push()方法

   • 定義和用法
     push()方法可向數(shù)組的末尾添加一個或多個元素熊咽，并返回新的長度莫鸭。
     注意： 新元素將添加在數(shù)組的末尾，此方法改變數(shù)組的長度横殴。
     提示： 在數(shù)組起始位置添加元素請使用 unshift()方法被因。

   • 實(shí)例

//數(shù)組中添加新元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")
//fruits 結(jié)果輸出：
Banana,Orange,Apple,Mango,Kiwi

1. reduce()方法

   • 定義和用法
     reduce() 方法接收一個函數(shù)作為累加器，數(shù)組中的每個值（從左到右）開始縮減，最終計(jì)算為一個值氏身。
     注意:reduce() 對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的巍棱。

   • 實(shí)例1

//計(jì)算數(shù)組元素相加后的總和：
var numbers = [1, 2, 3, 4];
function getSum(total, num) {
          return total + num;
}
function myFunction(item) {
          document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}
//輸出結(jié)果：
10

- 實(shí)例2

數(shù)組arr = [1,2,3,4]求數(shù)組的和

//forEach 實(shí)現(xiàn)
var arr = [1,2,3,4],
sum = 0;
arr.forEach(function(e){sum += e;}); // sum = 10  just for demo

//map 實(shí)現(xiàn)
var arr = [1,2,3,4],
sum = 0;
arr.map(function(obj){sum += obj});//return undefined array. sum = 10  just for demo

//reduce實(shí)現(xiàn)
var arr = [1,2,3,4];
arr.reduce(function(pre,cur){return pre + cur}); // return 10

reduce() 專為累加這種操作而設(shè)計(jì)。

1. reduceRight()方法

   • 定義和用法
     reduceRight()方法的功能和reduce() 功能是一樣的蛋欣，不同的是reduceRight()從數(shù)組的末尾向前將數(shù)組中的數(shù)組項(xiàng)做累加航徙。
     注意: reduce()對于空數(shù)組是不會執(zhí)行回調(diào)函數(shù)的。

   • 實(shí)例

//計(jì)算數(shù)組元素相加后的總和：
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
          return total + num;
}
function myFunction(item) {
          document.getElementById("demo").innerHTML = numbers.reduceRight(getSum);
}
//輸出結(jié)果：
125

1. reverse()方法

   • 定義和用法
     reverse()方法用于顛倒數(shù)組中元素的順序陷虎。

   • 實(shí)例

//顛倒數(shù)組中元素的順序：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
//fruits 結(jié)果輸出：
Mango,Apple,Orange,Banana

1. shift()方法
   • 定義和用法
     shift() 方法用于把數(shù)組的第一個元素從其中刪除到踏，并返回第一個元素的值。
     注意： 此方法改變數(shù)組的長度尚猿！
     提示： 移除數(shù)組末尾的元素可以使用 pop()方法窝稿。
   • 實(shí)例

//從數(shù)組中移除元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()
//fruits結(jié)果輸出:
Orange,Apple,Mango
//fruits.shift()結(jié)果輸出：
Banana

1. slice()方法

   • 定義和用法
     slice()方法可從已有的數(shù)組中返回選定的元素。
     slice()方法可提取字符串的某個部分凿掂，并以新的字符串返回被提取的部分伴榔。
     注意： slice()方法不會改變原始數(shù)組。

   • 實(shí)例

//在數(shù)組中讀取元素：
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
citrus 結(jié)果輸出:
Orange,Lemon

1. some()方法

   • 定義和用法
     some()方法用于檢測數(shù)組中的元素是否滿足指定條件（函數(shù)提供）庄萎。
     some()方法會依次執(zhí)行數(shù)組的每個元素：
     如果有一個元素滿足條件踪少，則表達(dá)式返回true , 剩余的元素不會再執(zhí)行檢測。
     如果沒有滿足條件的元素糠涛，則返回false援奢。
     注意： some() 不會對空數(shù)組進(jìn)行檢測，不會改變原始數(shù)組忍捡。

   • 實(shí)例

//檢測數(shù)組中是否有元素大于 18:
var ages = [3, 10, 18, 20];
function checkAdult(age) {
          return age >= 18;
}
function myFunction() {
          document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
//輸出結(jié)果為:
true

1. sort()方法

   • 定義和用法
     sort()方法用于對數(shù)組的元素進(jìn)行排序集漾。
     默認(rèn)排序順序?yàn)榘醋帜干颉?br> 注意：當(dāng)數(shù)字是按字母順序排列時"40"將排在"5"前面。
     使用數(shù)字排序砸脊，你必須通過一個函數(shù)作為參數(shù)來調(diào)用具篇。
     函數(shù)指定數(shù)字是按照升序還是降序排列。
     注意：這種方法會改變原始數(shù)組脓规！

   • 實(shí)例1

//數(shù)組排序：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
//fruits 輸出結(jié)果：
Apple,Banana,Mango,Orange

- 實(shí)例2

//降序函數(shù)  
var desc = function(x,y) {    
        if (x > y)      
        return -1;  //返回一個小于0 的數(shù)即可  
        else        
        return 1;  //返回一個大于0 的數(shù)即可  
}    
//升序函數(shù)  
var asc = function(x,y) {    
        if (x > y)      
        return 1;  //返回一個大于0 的數(shù)即可  
        else            
        return -1;  //返回一個小于0 的數(shù)即可  
}  
var arr2 = [4,6,4,2,7,9,0,1];    
arr2.sort(desc); //降序排序  
document.writeln(arr2);    //9,7,6,4,4,2,1,0
document.writeln("<br>");    
arr2.sort(asc); //升序排序  
document.writeln(arr2); //0,1,2,4,4,6,7,9

1. splice()方法
   • 定義和用法
     splice() 方法用于插入栽连、刪除或替換數(shù)組的元素。
     從指定的索引開始刪除若干元素侨舆，然后再從該位置添加若干元素秒紧，注意：這種方法會改變原始數(shù)組。
   • 實(shí)例

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 從索引2開始刪除3個元素,然后再添加兩個元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回刪除的元素 ['Yahoo', 'AOL', 'Excite']
原數(shù)組arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只刪除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
原數(shù)組arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不刪除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因?yàn)闆]有刪除任何元素
原數(shù)組arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

1. toString()方法

   • 定義和用法
     toString()方法可把數(shù)組轉(zhuǎn)換為字符串挨下，并返回結(jié)果熔恢。
     注意： 數(shù)組中的元素之間用逗號分隔。

   • 實(shí)例

//將數(shù)組轉(zhuǎn)換為字符串：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();
//fruits將輸出：
Banana,Orange,Apple,Mango

1. unshift()方法

   • 定義和用法
     unshift() 方法可向數(shù)組的開頭添加一個或更多元素臭笆，并返回新的長度叙淌。
     注意： 該方法將改變數(shù)組的數(shù)目秤掌。
     提示: 將新項(xiàng)添加到數(shù)組末尾，請使用push() 方法鹰霍。

   • 實(shí)例

//將新項(xiàng)添加到數(shù)組起始位置:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
//fruits 將輸出：
Lemon,Pineapple,Banana,Orange,Apple,Mango
//fruits.unshift 將輸出：
6

1. valueOf()方法

   • 定義和用法
     valueOf() 方法返回Array對象的原始值闻鉴。
     該原始值由 Array 對象派生的所有對象繼承。
     valueOf()方法通常由 JavaScript 在后臺自動調(diào)用茂洒，并不顯式地出現(xiàn)在代碼中孟岛。
     注意： valueOf() 方法不會改變原數(shù)組。

   • 實(shí)例1

//valueOf() 是數(shù)組對象的默認(rèn)方法督勺。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var v=fruits.valueOf();
// fruits.valueOf()與 fruits返回值一樣渠羞。
//v輸出結(jié)果為：
Banana,Orange,Apple,Mango

valueOf()：返回最適合該對象類型的原始值；
toString(): 將該對象的原始值以字符串形式返回智哀。
這兩個方法一般是交由JS去隱式調(diào)用次询，以滿足不同的運(yùn)算情況。
在數(shù)值運(yùn)算里瓷叫，會優(yōu)先調(diào)用valueOf()屯吊，如a + b;
在字符串運(yùn)算里，會優(yōu)先調(diào)用toString()摹菠，如alert(c);雌芽。