JavaScript数组学习笔记
创建
demo代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var arr = [1,2,3];
var arr2 = new Array("1",2,'3');
document.write(arr);
document.write('<br>');
document.write(arr2);
</script>
</body>
</html>
执行:
遍历
demo代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var arr = [1,2,3];
for(var i = 0;i<arr.length;i++){
document.write(arr[i]+'<br>');
}
//第二种遍历方法
for(var i in arr){
document.write(arr[i]+'<br>');
}
</script>
</body>
</html>
执行:
解构赋值
demo代码:
<script>
var arr = [1,2,3];
[a,b] = arr;
document.write(a+" "+b);
document.write("<br>");
[a,b,c,d] = arr;
document.write(a+" "+b+" "+c+" "+d);
</script>
执行:
右侧“[]”中的元素依次赋值给左侧"[]"变量,
当左侧变量的数量小于右侧的元素的个数时,忽略多余的元素;
当左侧的变量数量大于右侧的元素个数时,多余变量被初始化为undefined。
常用方法
尾部添元素push()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
var arr = [1,2,3];
arr.push(8);
arr.push(10,11);
document.write(arr);
</script>
</body>
</html>
执行:
头添元素unshift()
<script>
var arr = [1,2,3,4,5];
arr.unshift(9,10);
document.write(arr);
</script>
执行:
头删元素shift()
<script>
var arr = [1,2,3,4,5];
arr.shift();
document.write(arr);
</script>
执行:
尾删元素pop()
<script>
var arr = [1,2,3,4,5];
arr.pop();
document.write(arr);
</script>
执行:
删除并添加元素splice()
<script type="text/javascript">
var arr = [1,2,3,4,5,6,7];
arr.splice(0,4,'hello');
document.write(arr);
document.write("<br>");
var arr = [1,2,3,4,5,6,7];
arr.splice(0,4);
document.write(arr);
</script>
执行:
解释:第一个数组从0下标开始删除共4个元素,删除后并添加“hello”,第二个数组是从0下标开始删除共4个元素但不添元素。
注意:
- splice()的第一个参数的值超过数组下标时从数组末尾开始操作
- 第一个参数为负时,下标为数组长度加负数,若还是负数则从数组头开始操作
- 添加的元素可以是多个元素,多种类型,比如数组,null,未定义等。
得到元素索引indexOf()
<script> var arr = [1,2,3,4,5,6,6]; document.write(arr.indexOf(6)); document.write("<br>"); document.write(arr.indexOf(7)); </script>
执行:
若找到元素则返回第一个找到的元素下标,未找到则返回-1判断元素存在includes()
<script> var arr = [1,2,3,4,5,6]; document.write(arr.includes(5)); document.write("<br>"); document.write(arr.includes(5,5)); </script>
执行:
第一个参数是要找的值,存在返回true,不存在返回false,第二个参数指定开始搜索的下标。上例中从下标5开始寻找5显然是false。数组转字符串join()
<script> var arr = [[1,2],3,[4,5],6]; document.write(arr.join()); document.write("<br>"); document.write(arr.join("__")); document.write("<br>"); document.write(typeof arr.join()); </script>
执行:
toString()作业和join()基本相同,只是join()可以指定元素间间隔符是什么。连接数组concat()
<script> var arr = [1,2,3,4,5]; var arr2 = ["hello","nihao"]; var arr3 = [88,99,100]; document.write(arr.concat(arr2,arr3,[7,8,9])); </script>
执行:
数组反转reverse()
<script> var arr = [1,2,3,4,5]; arr.reverse(); document.write(arr); </script>
执行:
数组排序sort()
<script> var arr = [3,5,2,9,3,4,5]; arr.sort(); document.write(arr+"<br>"); function mySort(a,b){ if(a>b)return -1; else if(a==b) return 0; else{ return 1; } } var arr = [3,5,2,9,3,4,5]; arr.sort(mySort); document.write(arr+"<br>"); </script>
执行:
sort里可以接受function,即可以人为规定排序规则。