系列课程目录
第八讲 JavaScript对象编程（四）
前言
JavaScript数组的方法(二)提示：以下是本篇文章正文内容，下面案例可供参考
一、数组的方法
1.数组转字符串
- toString()
把数组转换为数组值（逗号分隔）的字符串
var fruits = ["Banana", "Orange", "Apple"];
var str = fruits.toString() //str的值是“Banana,Orange,Apple”, 原数组fruits不变
- join()
把数组转换为数组值（指定分隔符分隔）的字符串
var fruits = ["Banana", "Orange", "Apple"];
var str = fruits.join("|") //str的值是“Banana|Orange|Apple”, 原数组fruits不变
当join()没有传入参数时，使用默认分隔符 逗号
2.合并数组
- concat()
合并现有数组来创建一个新数组
var arr1 = ["Banana", "Orange"];
var arr2 = ["Apple", "Mango"];
var newArr = arr1.concat(arr2)
//newArr为["Banana", "Orange", "Apple", "Mango"] 原数组arr1,arr2不变
var arr1 = ["Banana", "Orange"];
var newArr = arr1.concat("Apple", "Mango")
//newArr为[“Banana”, “Orange”, “Apple”, “Mango”] 原数组arr1不变
可以传入多个数组作为参数
当concat()没有传入参数时，仅拷贝原数组的值
3.查找索引
- indexOf()
返回要查找的项在数组中首次出现的位置
var fruits = ["Banana", "Orange", "Apple"];
var index = fruits.indexOf("Apple") //index的值是2
在没找到的情况下返回-1
var fruits = ["Banana", "Orange", "Apple"];
var index = fruits.indexOf("Mango") //index的值是-1
多个相同元素的情况只返回首个元素出现的位置
var fruits = ["Banana", "Orange", "Apple", "Orange"];
var index = fruits.indexOf("Orange") //index的值是1
3.数组截取
- slice()
用数组的某个片段切出新数组
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var newArr = fruits.slice(1) //newArr的值是[“Orange”, “Apple”, “Mango”]; fruits的值不变
当slice()参数为一个时，表示从该参数位置开始，直到数组结束部分的所有元素
如arr.slice(3)会截取从arr[3]开始（包含arr[3]）往后的所有元素组成一个新数组
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var newArr = fruits.slice(1,3) //newArr的值是[“Orange”, “Apple”]; fruits的值不变
当slice()参数为两个时，表示从第一个参数位置开始，到第二个参数位置（不包含）之间元素
如arr.slice(3,6)会截取从arr[3]开始（包含arr[3]）到arr[6]（不包含arr[6]）即arr[3]，arr[4]，arr[5]
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var newArr = fruits.slice(-2) //newArr的值是[“Apple”, “Mango”];
当参数为负数时表示从结尾开始截取几个元素，如arr.slice(-10)表示截取arr的最后十个元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var newArr = fruits.slice(-3,-1) //newArr的值是[“Orange”, “Apple”];
当slice()参数为两个负数时，表示倒数的元素区间
如arr.slice(-10,-2)表示从倒数第十个元素（包含）到倒数第二个元素（不包含）
练习1：使用for循环生成一个1~100的数组[1,2,3,….,99,100], 使用slice()截取33~55的部分[33,34,…54,55]
首先运用for循环将数值传入，然后运用我们才学的知识，slice（）里面左闭右开的原则，33就应该是下标为32的数组元素，55应该是下标54的数组元素但是左闭右开，所以右边取的数应该为55而非54.
4.数组更新
- splice()
向/从数组中添加/删除项目，然后返回被删除的项目，该方法会修改原数组
arr.splice(index, howmany, item1,.....,itemX)
index: 必选 规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var items = fruits.splice(2) //fruits的值是[“Banana”, “Orange”]; items的值是[“Apple”, “Mango”]
howmany: 可选 要删除的项目数量。如果不填，则删除剩余所有项目； 如果设置为 0，则不会删除项目。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var items = fruits.splice(2,1) //fruits的值是[“Banana”, “Orange”, “Mango”]; items的值是[“Apple”]
item1, …, itemX:可选 向数组添加的新项目。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var items = fruits.splice(2,0,"Pear") //fruits的值是[“Banana”, “Orange”, “Pear”, “Apple”, “Mango”];
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var items = fruits.splice(2,1,"Pear") //fruits的值是[“Banana”, “Orange”, “Pear”, “Mango”];
练习2：使用for循环生成一个1~100的数组[1,2,3,….,99,100], 使用splice()将其中的66修改为666，并在3和4之间插入3.14
思路分析一下，如果要替换就用splice（index，1，value）相当于在index索引的位置删除1个元素，然后添加一个值为value的元素，如果是添加插入那就splice（index，0，value），就相当于在index索引的位置添加value的值。这时就不是索引为2的地方了，因为插入之后是处于第四个位置，所以应该是索引为3的地方。
var arr=[]
for(i=0;i<100;i++){
arr[i]=i+1
}
arr.splice(65,1,666)
arr.splice(3,0,3.14)
5.数组归并
- reduce()
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
arr.reduce(function(acc,cur,index,arr){}, initialValue)
acc: 必选 accumulator 累加器，计算结束后的返回值
cur: 必选 currentValue 当前元素
index: 可选 currentIndex 当前元素的索引
arr: 可选 currentArray 当前元素所属的数组
initialValue: 可选 传递给函数的初始值
- 数组求和
- 二维数组合并为一维数组
- 数组去重
- 求数组中的最大值
二、课堂作业
1.按照要求完成任务
如下（示例）：
2.解析代码
- 任务8-1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var arr = [];
var text = "";
var sltext = "";
var count = 1;
function tj() {
arr.push(document.getElementById("vl").value)
text += "<tr>"
text += "<td>" + count + "</td>" + "<td>" + arr[arr.length - 1] + "</td>"
text += "</tr>"
sltext += "<option value='" + count + "'>" + count + "</option>"
document.getElementById("yxj1").innerHTML = sltext
document.getElementById("yxj2").innerHTML = sltext
count++
document.getElementById("zhi").innerHTML = text
}
function sc() {
text=""
sltext=""
var obj = document.getElementById("yxj1");
var index = obj.selectedIndex;
arr.splice(index,1)
for(var i=0;i<arr.length;i++){
text += "<tr>"
text += "<td>" + (i+1) + "</td>" + "<td>" + arr[i] + "</td>"
text += "</tr>"
sltext += "<option value='" + (i+1) + "'>" + (i+1) + "</option>"
}
document.getElementById("yxj1").innerHTML = sltext
document.getElementById("yxj2").innerHTML = sltext
count--
document.getElementById("zhi").innerHTML = text
}
function gx(){
text=""
var obj = document.getElementById("yxj2");
var index = obj.selectedIndex;
arr.splice(index,1,document.getElementById("gl").value)
for(var i=0;i<arr.length;i++){
text += "<tr>"
text += "<td>" + (i+1) + "</td>" + "<td>" + arr[i] + "</td>"
text += "</tr>"
}
document.getElementById("zhi").innerHTML = text
}
</script>
请输入待办事项
<input type="text" name="" id="vl" value="" />
<input type="button" name="" id="tj" value="添加" onclick="tj()" />
<br>删除第
<select id="yxj1">
</select>
个项目
<input type="button" name="" id="sc" value="删除" onclick="sc()" />
<br>
修改第
<select id="yxj2">
</select>
个项目<br>
为
<input type="text" name="" id="gl" value="" />
<input type="button" name="" id="gx" value="更新" onclick="gx()" />
<table border="1" id="zhi">
</table>
</body>
</html>
总结
350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
