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>
您如果对文章有其他的见解,欢迎指正~