版权声明:欢迎交流,转载请注明出处。 https://blog.csdn.net/u013034226/article/details/82998689
创建:
对象的实例创建:var aList = new Array(1,2,3);
直接创建:var aList = [1,2,3,'a']
数组的api:增删改查/反转排序/合成字符串
1.增:放到最后
var list = ['穿山甲','水娃','蛇精']
list.push('丽丽')
console.log(list)
2.删:从末尾开始删除
list.pop()
3.改:
splice(): 任意位置添加/删除/替换...
参数1: 从哪个索引值开始操作;
参数2: 删除几个;
参数3-n: 用什么替换;
// 3.1 从指定位(索引位1)添加,不删除
list.splice(1,0,'火娃')
// 3.2 删除指定位元素和指定个数(从索引2开始,删除2个)
list.splice(2,2,)
// 3.3 从指定位开始删除,再添加(从索引2开始,删除1个,再添加'金刚葫芦娃')
list.splice(2,1,'金刚葫芦娃')
console.log(list)
4.查:indexOf():查看元素索引值,没有则返回-1
扫描二维码关注公众号,回复:
4189591 查看本文章
var index1 = list.indexOf('穿山甲')
var index2 = list.indexOf('lili')
console.log(index1,index2)
5.反转:
list.reverse()
6.排序
var list2 = new Array(1, 3, 56, 66)
list2.sort(function(c,d){ // 可以是任何字母,前-后:升序,后-前:降序
return c-d
// return d-c
})
console.log(list2)
7.将数组元素拼接成字符串
var str = list2.join() // 不传递参数,用逗号连接
var str = list2.join(' ') //传递空格,会用空格连接,
var str = list2.join('-')
var str = list2.join('') // 传递空字符串,无缝连接
console.log(str,list2)
拓展1.数组去重
思路:创建一个新的空数组,遍历原数组,利用indexOf()查看,新数组中是否已有原数组中的元素,没有则添加,组成新的去重后的数组。
<script>
var list1 = ['丽丽', '莉莉', 'lili', '丽丽', '莉莉', 'lili']
var list2 = new Array
// 遍历1,看2中有没有,没有push进去
for (i=0;i<list1.length;i++){
if(list2.indexOf(list1[i]) == -1){
list2.push(list1[i])
}
}
console.log(list2)
</script>
拓展2.将数组数据写入标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none
}
h1 {
width: 500px;
margin: 50px auto;
text-align: center
}
ul {
width: 500px;
margin: 0 auto
}
ul li {
font:22px/50px 'simsun';
border-bottom: 2px dashed yellow;
text-align: center;
}
</style>
<script>
window.onload = function(){
var list = ['haha', 'heihie', 'xixi', 'hehe']
// 通过id获得ul,并给了变量ul
var ul = document.getElementById('ul')
// 定义一个空的str,用来接受列表内容
var str = ''
// 遍历列表,将内容拼接成<li>内容</li>
for (i=0;i<list.length;i++){
str += '<li>'+list[i]+'</li>'
}
// 赋值,通过innerHTML操作ul中的li
ul.innerHTML = str
}
</script>
</head>
<body>
<h1>我是谁</h1>
<ul id='ul'>
</ul>
</body>
</html>