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() |
返回数组对象的原始值。 |
-
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
-
copyWithin()方法- 定义和用法
用于从数组的指定位置拷贝元素到数组的另一个指定位置中。 - 实例
- 定义和用法
//复制数组的前面两个元素到后面两个元素上：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);
//fruits 输出结果：
//Banana,Orange,Banana,Orange
-
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
-
fill()方法定义和用法
fill()方法用于将一个固定值替换数组的元素。实例
//使用固定值填充数组：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob");
//fruits 输出结果：
Runoob,Runoob,Runoob,Runoob
-
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
-
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
-
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
-
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
-
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 个位置。
-
join()方法定义和用法
join()方法用于把数组中的所有元素转换一个字符串。
元素是通过指定的分隔符进行分隔的。实例
//把数组中的所有元素转换为一个用-连接的字符串：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join("-");
//energy输出结果：
Banana-Orange-Apple-Mango
-
lastIndexOf()方法定义和用法
lastIndexOf()方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索，字符位置是从 0 开始的。如果要检索的字符串值没有出现，则该方法返回 -1。
提示： 如果你想查找字符串首次出现的位置，请使用indexOf()方法。实例
//查找数组元素 "Apple"出现的位置：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");
//a 输出结果：
2
-
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
-
pop()方法定义和用法
pop()方法用于删除数组的最后一个元素并返回删除的元素。
注意：此方法改变数组的长度！
提示： 移除数组第一个元素，请使用shift()方法。实例
//移除最后一个数组元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
//fruits 结果输出：
Banana,Orange,Apple
-
push()方法定义和用法
push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。
注意： 新元素将添加在数组的末尾，此方法改变数组的长度。
提示： 在数组起始位置添加元素请使用unshift()方法。实例
//数组中添加新元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi")
//fruits 结果输出：
Banana,Orange,Apple,Mango,Kiwi
-
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() 专为累加这种操作而设计。
-
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
-
reverse()方法定义和用法
reverse()方法用于颠倒数组中元素的顺序。实例
//颠倒数组中元素的顺序：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
//fruits 结果输出：
Mango,Apple,Orange,Banana
-
shift()方法- 定义和用法
shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
注意： 此方法改变数组的长度！
提示： 移除数组末尾的元素可以使用pop()方法。 - 实例
- 定义和用法
//从数组中移除元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()
//fruits结果输出:
Orange,Apple,Mango
//fruits.shift()结果输出：
Banana
-
slice()方法定义和用法
slice()方法可从已有的数组中返回选定的元素。
slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
注意：slice()方法不会改变原始数组。实例
//在数组中读取元素：
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
citrus 结果输出:
Orange,Lemon
-
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
-
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
-
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']
-
toString()方法定义和用法
toString()方法可把数组转换为字符串，并返回结果。
注意： 数组中的元素之间用逗号分隔。实例
//将数组转换为字符串：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();
//fruits将输出：
Banana,Orange,Apple,Mango
-
unshift()方法定义和用法
unshift()方法可向数组的开头添加一个或更多元素，并返回新的长度。
注意： 该方法将改变数组的数目。
提示: 将新项添加到数组末尾，请使用push()方法。实例
//将新项添加到数组起始位置:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
//fruits 将输出：
Lemon,Pineapple,Banana,Orange,Apple,Mango
//fruits.unshift 将输出：
6
-
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);。
