JavaScript对象编程（四）
补充：文章中所有的代码都是写在html文件中，JS代码需要用< script >< /script >标签包起来。这已经是第三次出现数组的知识了，大家应该感觉到数组的重要性了吧。内容很长，都是干货！！！
一、数组转字符串（两种方式）
1.toString()
把数组转换为数组值（逗号分隔）的字符串（这个方法我感觉作用不是特别明显），相当于就是把所有的元素用逗号进行分割，然后成为一个很多逗号的字符串。算了，下一个吧。
var fruits = ["Banana", "Orange", "Apple"];
var str = fruits.toString() //str的值是“Banana,Orange,Apple”, 原数组fruits不变
2.join()
把数组转换为数组值（指定分隔符分隔）的字符串；这个就实用多了，我可以通过 “-”、“/” 分割来组成一个日期形式，还可以把单词数组转成句子喔！
- “-”、“/” 分割来组成一个日期
var num = [2021,3,25];
console.log(num.join("-")) //2021-3-25
console.log(num.join("/")) //2021/3/25
- 单词数组转成句子
var word = ['I','am','a','clever','girl'];
console.log(word.join(" ")) // I am a clever girl
补充：当join()没有传入参数时，使用默认分隔符 “ , ” 逗号
二、合并数组 concat()
1.concat()的使用
concat()方法的作用：合并现有数组来创建一个新数组
例如：两个水果摊要联盟合并为一个大的水果超市，那就要把两个水果摊的水果都放进水果超市中，如下代码所示：
var fruits1 = ["Banana", "Orange"];
var fruits2 = ["Apple", "Mango"];
var FruitMarket = fruits1.concat(fruits2);
// FruitMarket 为["Banana", "Orange", "Apple", "Mango"]
FruitMarket水果超市有 Banana、Orange、Apple、Mango 这些水果
原水果摊的水果都不改变 （fruits1 、fruits2 不变）
【After a long time…】
随着生活水平的不断提高，水果超市的水果已经供不应求了，现在水果超市急需进购新的水果…
var FruitMarket = ["Banana", "Orange", "Apple", "Mango"];
var FruitMarket = FruitMarket .concat("grape", "strawberry")
//在水果超市中新增水果之后，再赋值给水果超市（因为原数组是不变的，所以需要通过赋值来改变）
2.concat()的注意事项
- fruits1.concat(fruits2)合并水果摊，但是不改变原来水果摊中的水果
- 可以传入多个数组作为参数
- 当concat()没有传入参数时，仅拷贝原数组的值
3.concat()小知识
关于深拷贝与浅拷贝
先来看一个有趣的代码：
var a = [1,2];
var b = a; // 浅拷贝：相当于就是引用
b[0] = 3;
console.log("a数组："+a);
console.log("b数组："+b);
输出结果：
a数组：3,2
b数组：3,2
在代码中我把 b数组 中的第一个元素修改了，但是 a数组 中的元素也发生了改变。再来看下一个：
var a = [1,2];
var b = a.concat(); // 深拷贝
b[0] = 3;
console.log("a数组："+a);
console.log("b数组："+b);
输出结果：
a数组：1,2
b数组：3,2
通过 var b = a.concat(); 把 a数组 拷贝一份给 b数组，改变b数组的元素不会影响 a数组。
三、查找索引 indexOf()
1.indexOf()的使用
通常使用indexOf()方法来判断一个数组中是否存在某个元素，如果存在则返回该元素第一次出现的索引值，如果不存在则返回 -1 ；
接下来是依次展示一下：
- 返回要查找的元素在数组中首次出现的位置（该元素只出现了一次）
var fruits = ["Banana", "Orange", "Apple"];
var index = fruits.indexOf("Apple") //index的值是2
- 返回要查找的元素在数组中首次出现的位置（该元素只出现了多次）
var fruits = ["Banana", "Orange", "Apple", "Orange"];
var index = fruits.indexOf("Orange") //index的值是1
- 在没找到的情况下返回-1（该元素不存在）
var fruits = ["Banana", "Orange", "Apple"];
var index = fruits.indexOf("Mango") //index的值是-1
补充：可以通过indexOf()来去掉重复的元素。
四、数组截取 slice()
1.slice()的使用
使用方式：arr.slice ( 开始位置索引值 , 结束位置索引值 )
用例子来说明一下：
- 参数为正数，只有开始位置
例如：从索引值为2的位置开始截取，直到最后一个元素
var FruitMarket = ["Banana", "Orange", "Apple", "Mango"];
var fruits= FruitMarket.slice(2) //fruits的值是['Apple', 'Mango'];
- 参数为正数，包含开始位置和结束位置
例如：从索引值为1的位置开始截取，到索引值为3的元素为止
注意：这里是左闭右开区间，可以取到开始索引值的元素，不能取到结束索引值的元素
var FruitMarket = ["Banana", "Orange", "Apple", "Mango"];
var fruits= FruitMarket.slice(1,3) //fruits的值是['Orange', 'Apple'];
- 参数为负数，只有开始位置
表示从结尾开始截取几个元素，如FruitMarket.slice(-2)表示截取arr的最后十个元素
var FruitMarket = ["Banana", "Orange", "Apple", "Mango"];
var fruits= FruitMarket .slice(-2) //newArr的值是[“Apple”, “Mango”];
- 参数为负数，包含开始位置和结束位置
如FruitMarket.slice(-3,-1)表示从倒数第三个元素（包含）到倒数第一个元素（不包含）
var FruitMarket = ["Banana", "Orange", "Apple", "Mango"];
var fruits= FruitMarket .slice(-3，-1) //newArr的值是"Orange", "Apple"];
2.slice()小练习
小题目：使用for循环生成一个1~100的数组[1,2,3,….,99,100], 使用slice()截取33~55的部分[33,34,…54,55]，主要是练习slice()函数的使用。
var arr = [ ]
for ( i = 0; i < 100; i++) {
arr[i] = i + 1
}
var newArr = arr.slice( 32,55 )
五、数组更新 splice()
1.splice()的使用
使用 splice() 向/从 数组中 添加/删除 元素，然后返回被删除的元素，该方法会修改原数组。
使用方式：arr.splice(index,howmany,itme1,itme2…)
第一个参数：定义开始位置的索引值（必填参数一）
第二个参数：确定你需要删除的元素个数
第三个参数及之后的参数：想要添加在数组中的元素
- 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.splice()小练习
小题目：使用for循环生成一个1~100的数组[1,2,3,….,99,100], 使用splice()将其中的66修改为666，并在3和4之间插入3.14。
var arr = [ ]
for ( i = 0; i < 100; i++ ) {
arr[i] = i + 1
}
arr.splice( 65，1，666 )arr.splice ( 2，0，3.14)
六、数组归并 reduce()
1.认识reduce()
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
使用方式：arr.reduce(function(acc,cur,index,arr){}, initialValue)
参数说明如下：
① acc: 必选 accumulator 累加器，计算结束后的返回值
② cur: 必选 currentValue 当前元素
③ index: 可选 currentIndex 当前元素的索引
④ arr: 可选 currentArray 当前元素所属的数组
⑤ initialValue: 可选 传递给函数的初始值
个人感觉这个函数有点难以说明清楚…
还是举例说明一下它的使用吧！
2.reduce()的使用
- 数组求和
这里的 acc 就是每一次return回来的值，cur表示当前的元素，下面这个例子就是得到数组中元素累加的和。
var arr = [ 1,2,3,4];
var result = arr.reduce( function ( acc, cur ) {
return acc + cur ;
})
- 二维数组合并为一维数组
就是将数组中的元素进行整合，这里的 acc 就是[ 1 , 2 ]，然后与 cur [ 3 , 4 ]进行合并为[ 1 , 2 , 3 , 4 ]，然后再进下一步…
var arr = [[1,2],[3,4],[5,6]]
var result = arr.reduce( function ( acc,cur ) {
return acc.concat( cur )
})
- 数组去重
这里就要使用上述的indexOf()方法了。acc 就是 [ ] ，然后 cur 就是 1 ，数组acc中不存在 cur ，就把 cur 添加进去，acc就变为了 [1]，以此类推…
var arr =[ 1,2,4,3,3,2,1,5,4]
var result = arr.reduce( function (acc, cur) {
if ( acc.indexOf( cur ) == -1) {
// 当数组中不存在这个元素，就添加到数组中
acc. push( cur ) // 添加元素
}
return a},[])
- 求数组中的最大值
这里要使用Math对象中的max()方法，acc 就是 1，cur 就是 3，然后比较两个数，得到最大值 3 ，之后 acc 就变为了返回值 3，以此类推…
var arr = [ 1,3,4,6,7,2,5]
var result = arr.reduce( function ( acc,cur )
return Math.max( acc, cur) //返回最大值
})
七、网页小案例
1.题目要求
① 更新待办事项程序，添加以下功能
② 添加序号显示
③ 新增项目时增加重复验证，若重复项目则不录入
④ 增加删除及更新功能、可根据序号删除或更新项目
⑤ 删除及修改功能的序号选择为自动生成的下拉框
2.原码奉上
建议先尝试着写一下，自己完成更有成就感喔！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#box {
font-size: 50px;
margin: 0;
text-align: center;
}
table {
border-collapse: collapse;
border: 0;
}
td {
border: solid 1px black;
}
input[type=text] {
width: 150px;
}
</style>
</head>
<body>
<p>请输入待办事项</p>
新增项目：<input type="text" name="item" id="item" value="" />
<input type="button" name="add" id="add" value="添加" onclick="add()" />
<br><br>
删除第<select name="del" id="del"></select>个项目
<input type="button" name="remove" id="remove" value="删除" onclick="remove()" />
<br><br>
修改第<select name="alter" id="alter"></select>个项目为 <input type="text" name="alItem" id="alItem" value="" />
<input type="button" name="change" id="change" value="更新" onclick="change()" />
<div id="box"></div>
<script>
var toDoList = [];
// 循环输出数组
function show(){
var txt = '';
var del = '';
txt += "<table> <tr><th>序号</th><th>项目</th></tr>"
for (var i=0;i<toDoList.length;i++){
txt+="<tr><td>"+(i+1)+"</td><td>"+toDoList[i]+"</td></tr>";
del+='<option value="'+(i+1)+'">'+(i+1)+'</option>';
}
document.getElementById("box").innerHTML=txt;
document.getElementById("del").innerHTML=del;
document.getElementById("alter").innerHTML=del;
document.getElementById("item").value="";
}
// 数组添加元素
function add(){
var newItem = document.getElementById("item").value; //获取添加的新元素
toDoList.push(newItem); //添加元素
show();
}
// 数组删除元素
function remove(){
var index = document.getElementById('del').value; //获取被删除的元素序号
toDoList.splice(index-1,1) //删除元素
show()
}
// 数组修改元素
function change(){
var index = document.getElementById('alter').value; //获取被修改的元素序号
var alItem = document.getElementById('alItem').value; //获取修改后的内容
toDoList.splice(index-1,1,alItem); //删除元素
show();
}
</script>
</body>
</html>
您如果对文章有其他的见解，欢迎指正~