js基础篇（三）——DOM的各种操作
js基础篇（二）——字符串的各种操作

1. 创建数组

创建一个数组，有三种方法。
下面的代码定义了一个名为 myCars的数组对象：

1.1 常规方法

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.访问数组

通过指定数组名以及索引号码，你可以访问某个特定的元素。

2.1 取值

以下实例可以访问myCars数组的第一个值：

var name=myCars[0];

2.2 赋值

以下实例修改了数组myCars 的第一个元素:

myCars[0]="Opel";

3.数组属性与方法

3.1 数组属性

属性	描述
constructor	返回创建数组对象的原型函数。
length	设置或返回数组元素的个数。
prototype	允许你向数组对象添加属性或方法。

3.2 数组方法

数组也是对象，数组对象的属性可以称为数组方法，用来操作数组。
下列表格是总结，每个方法的示例在下面。

方法	描述
concat()	连接两个或更多的数组，并返回结果。
copyWithin()	从数组的指定位置拷贝元素到数组的另一个指定位置中。
every()	检测数值元素的每个元素是否都符合条件。
fill()	使用一个固定值来填充数组。
filter()	检测数值元素，并返回符合条件所有元素的数组。
find()	返回符合传入测试（函数）条件的数组元素。
findIndex()	返回符合传入测试（函数）条件的数组元素索引。
forEach()	数组每个元素都执行一次回调函数。
indexOf()	搜索数组中的元素，并返回它所在的位置。
join()	把数组的所有元素放入一个字符串。
lastIndexOf()	返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reduce()	将数组元素计算为一个值（从左到右）。
reduceRight()	将数组元素计算为一个值（从右到左）。
reverse()	反转数组的元素顺序。
shift()	删除并返回数组的第一个元素。
slice()	选取数组的的一部分，并返回一个新数组。
some()	检测数组元素中是否有元素符合指定条件。
sort()	对数组的元素进行排序。
splice()	从数组中添加或删除元素。
toString()	把数组转换为字符串，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值。

1. concat() 方法
   • 定义和用法
     用于连接两个或多个数组。
     该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
   • 实例

//合并三个数组的值：
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
//children 输出结果：Cecilie,Lone,Emil,Tobias,Linus,Robin

1. copyWithin()方法
   • 定义和用法
     用于从数组的指定位置拷贝元素到数组的另一个指定位置中。
   • 实例

//复制数组的前面两个元素到后面两个元素上：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);
//fruits 输出结果：
//Banana,Orange,Banana,Orange

1. every()方法

   • 定义和用法
     every()方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
     every() 方法使用指定函数检测数组中的所有元素：
     如果数组中检测到有一个元素不满足，则整个表达式返回 false，且剩余的元素不会再进行检测。
     如果所有元素都满足条件，则返回true。
     注意：every()不会对空数组进行检测，不会改变原始数组。

   • 实例

//检测数组 ages 的所有元素是否都大于 18 :
var ages = [32, 33, 16, 40];
function checkAdult(age) {
          return age >= 18;
}
function myFunction() {
          document.getElementById("demo").innerHTML = ages.every(checkAdult);
}
//输出结果为:
false

1. fill()方法

   • 定义和用法
     fill()方法用于将一个固定值替换数组的元素。

   • 实例

//使用固定值填充数组：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob");
//fruits 输出结果：
Runoob,Runoob,Runoob,Runoob

1. filter()方法

   • 定义和用法
     filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
     注意： filter() 不会对空数组进行检测，不会改变原始数组。

   • 实例

//返回数组 ages 中所有元素都大于 18 的元素:
var ages = [32, 33, 16, 40];
function checkAdult(age) {
          return age >= 18;
}
function myFunction() {
          document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
//输出结果为:
32,33,40

1. find()方法

   • 定义和用法
     find() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素。
     find()方法为数组中的每个元素都调用一次函数执行：
     当数组中的元素在测试条件时返回true 时, find()返回符合条件的元素，之后的值不会再调用执行函数。
     如果没有符合条件的元素返回 -1
     注意: find()对于空数组，函数是不会执行的， 并没有改变数组的原始值。

   • 实例

//获取数组中年龄大于 18 的第一个元素
var ages = [3, 10, 18, 20];
function checkAdult(age) {
          return age >= 16;
}
function myFunction() {
          document.getElementById("demo").innerHTML = ages.find(checkAdult);
}
fruits 输出结果：
18

1. findIndex()方法

   • 定义和用法
     findIndex()方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
     findIndex() 方法为数组中的每个元素都调用一次函数执行：
     当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
     如果没有符合条件的元素返回 -1
     注意: findIndex()对于空数组，函数是不会执行的，并没有改变数组的原始值。

   • 实例

//获取数组中年龄大于 18 的第一个元素索引位置
var ages = [3, 10, 18, 20];
function checkAdult(age) {
          return age >= 18;
}
function myFunction() {
          document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
}
//fruits 输出结果：
2

1. forEach()方法

   • 定义和用法
     forEach()方法用于调用数组的每个元素，并将元素传递给回调函数。
     注意: forEach()对于空数组是不会执行回调函数的。

   • 实例

//列出数组的每个元素：
<button onclick="numbers.forEach(myFunction)">点我</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>
//输出结果：
index[0]: 4
index[1]: 9
index[2]: 16
index[3]: 25

1. indexOf()方法

   • 定义和用法
     indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。 如果在数组中没找到字符串则返回 -1。 提示如果你想查找字符串最后出现的位置，请使用lastIndexOf() 方法。

   • 实例

//查找数组中的 "Apple" 元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
//a 结果输出：
2
以上输出结果意味着 "Apple" 元素位于数组中的第 2 个位置。

1. join()方法

   • 定义和用法
     join()方法用于把数组中的所有元素转换一个字符串。
     元素是通过指定的分隔符进行分隔的。

   • 实例

//把数组中的所有元素转换为一个用-连接的字符串：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join("-");
//energy输出结果：
Banana-Orange-Apple-Mango

1. lastIndexOf()方法

   • 定义和用法
     lastIndexOf()方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索，字符位置是从 0 开始的。如果要检索的字符串值没有出现，则该方法返回 -1。
     提示： 如果你想查找字符串首次出现的位置，请使用indexOf()方法。

   • 实例

//查找数组元素 "Apple"出现的位置：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
//a 输出结果：
2

1. map()方法

   • 定义和用法
     map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
     map() 方法按照原始数组元素顺序依次处理元素。
     注意：map()不会对空数组进行检测，不会改变原始数组。

   • 实例

//返回一个数组，数组中元素为原始数组的平方根:
var numbers = [4, 9, 16, 25];
function myFunction() {
          x = document.getElementById("demo")
          x.innerHTML = numbers.map(Math.sqrt);
}
//输出结果为:
2,3,4,5

1. pop()方法

   • 定义和用法
     pop()方法用于删除数组的最后一个元素并返回删除的元素。
     注意：此方法改变数组的长度！
     提示： 移除数组第一个元素，请使用shift()方法。

   • 实例

//移除最后一个数组元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
//fruits 结果输出：
Banana,Orange,Apple

1. push()方法

   • 定义和用法
     push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。
     注意： 新元素将添加在数组的末尾，此方法改变数组的长度。
     提示： 在数组起始位置添加元素请使用 unshift()方法。

   • 实例

//数组中添加新元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")
//fruits 结果输出：
Banana,Orange,Apple,Mango,Kiwi

1. reduce()方法

   • 定义和用法
     reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
     注意:reduce() 对于空数组是不会执行回调函数的。

   • 实例1

//计算数组元素相加后的总和：
var numbers = [1, 2, 3, 4];
function getSum(total, num) {
          return total + num;
}
function myFunction(item) {
          document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}
//输出结果：
10

- 实例2

数组arr = [1,2,3,4]求数组的和

//forEach 实现
var arr = [1,2,3,4],
sum = 0;
arr.forEach(function(e){sum += e;}); // sum = 10  just for demo

//map 实现
var arr = [1,2,3,4],
sum = 0;
arr.map(function(obj){sum += obj});//return undefined array. sum = 10  just for demo

//reduce实现
var arr = [1,2,3,4];
arr.reduce(function(pre,cur){return pre + cur}); // return 10

reduce() 专为累加这种操作而设计。

1. reduceRight()方法

   • 定义和用法
     reduceRight()方法的功能和reduce() 功能是一样的，不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。
     注意: reduce()对于空数组是不会执行回调函数的。

   • 实例

//计算数组元素相加后的总和：
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
          return total + num;
}
function myFunction(item) {
          document.getElementById("demo").innerHTML = numbers.reduceRight(getSum);
}
//输出结果：
125

1. reverse()方法

   • 定义和用法
     reverse()方法用于颠倒数组中元素的顺序。

   • 实例

//颠倒数组中元素的顺序：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
//fruits 结果输出：
Mango,Apple,Orange,Banana

1. shift()方法
   • 定义和用法
     shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
     注意： 此方法改变数组的长度！
     提示： 移除数组末尾的元素可以使用 pop()方法。
   • 实例

//从数组中移除元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()
//fruits结果输出:
Orange,Apple,Mango
//fruits.shift()结果输出：
Banana

1. slice()方法

   • 定义和用法
     slice()方法可从已有的数组中返回选定的元素。
     slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
     注意： slice()方法不会改变原始数组。

   • 实例

//在数组中读取元素：
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
citrus 结果输出:
Orange,Lemon

1. some()方法

   • 定义和用法
     some()方法用于检测数组中的元素是否满足指定条件（函数提供）。
     some()方法会依次执行数组的每个元素：
     如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
     如果没有满足条件的元素，则返回false。
     注意： some() 不会对空数组进行检测，不会改变原始数组。

   • 实例

//检测数组中是否有元素大于 18:
var ages = [3, 10, 18, 20];
function checkAdult(age) {
          return age >= 18;
}
function myFunction() {
          document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
//输出结果为:
true

1. sort()方法

   • 定义和用法
     sort()方法用于对数组的元素进行排序。
     默认排序顺序为按字母升序。
     注意：当数字是按字母顺序排列时"40"将排在"5"前面。
     使用数字排序，你必须通过一个函数作为参数来调用。
     函数指定数字是按照升序还是降序排列。
     注意：这种方法会改变原始数组！

   • 实例1

//数组排序：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
//fruits 输出结果：
Apple,Banana,Mango,Orange

- 实例2

//降序函数  
var desc = function(x,y) {    
        if (x > y)      
        return -1;  //返回一个小于0 的数即可  
        else        
        return 1;  //返回一个大于0 的数即可  
}    
//升序函数  
var asc = function(x,y) {    
        if (x > y)      
        return 1;  //返回一个大于0 的数即可  
        else            
        return -1;  //返回一个小于0 的数即可  
}  
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() 方法用于插入、删除或替换数组的元素。
     从指定的索引开始删除若干元素，然后再从该位置添加若干元素，注意：这种方法会改变原始数组。
   • 实例

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
原数组arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
原数组arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
原数组arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

1. toString()方法

   • 定义和用法
     toString()方法可把数组转换为字符串，并返回结果。
     注意： 数组中的元素之间用逗号分隔。

   • 实例

//将数组转换为字符串：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();
//fruits将输出：
Banana,Orange,Apple,Mango

1. unshift()方法

   • 定义和用法
     unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
     注意： 该方法将改变数组的数目。
     提示: 将新项添加到数组末尾，请使用push() 方法。

   • 实例

//将新项添加到数组起始位置:
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 在后台自动调用，并不显式地出现在代码中。
     注意： valueOf() 方法不会改变原数组。

   • 实例1

//valueOf() 是数组对象的默认方法。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var v=fruits.valueOf();
// fruits.valueOf()与 fruits返回值一样。
//v输出结果为：
Banana,Orange,Apple,Mango

valueOf()：返回最适合该对象类型的原始值；
toString(): 将该对象的原始值以字符串形式返回。
这两个方法一般是交由JS去隐式调用，以满足不同的运算情况。
在数值运算里，会优先调用valueOf()，如a + b;
在字符串运算里，会优先调用toString()，如alert(c);。