1.数组的概念
- 数组是值的有序集合
- 数组中的每个值 称之为 元素
- 每个元素可以是任意数据类型的值
- 每个元素都有索引(下标)
- 元素的索引从0开始,按照顺序递增。 元素最大的索引 2^32-2
2.创建数组
-
直接量
[]
-
构造函方式
new Array()
<script> //直接量方式 console.log([1,2,3]); var arr = []; //构造函数方式 var arr1 = new Array(); console.log(arr1); //Array(值)值为一个数字的时候,表示数组长度 var arr2 = new Array(5); console.log(arr2); //Array(值) 值为多个的时候,表示数组值 var arr3 = new Array(1,2,3,4,5,"heiehi"); console.log(arr3); //只定义一个数组值的时候 var arr4 = new Array(); arr4[0] = 100; console.log(arr4); console.log(typeof arr4);//返回object console.log(typeof arr);//返回object </script
3.读写数组中的元素
- 数组名[索引]
4.稀疏数组
- js数组的索引是连续的
- 没有连续的给元素赋值 , 没有赋值的元素会自动赋值 undefined
5.添加和删除 数组的元素
-
添加数组元素
-
指定索引来添加元素
-
把数组长度当做新元素的索引
arr[arr.length] = value
-
在数组的最后添加元素(可以有多个) push()
arr.push("值")
-
在数组的前面添加元素(可以有多个) unshift()
arr.unshift("值")
-
在数数组的任意位置添加元素
splice(index, 0, value(可以有多个值))
<script> //创建数组 var arr = ["刘奶奶", "牛奶奶", "马奶奶", "羊奶奶", "司马奶奶"]; console.log(arr); console.log(arr.length); //给数组添加 元素 arr[5] = "欧阳奶奶"; arr[arr.length] = "白奶奶"; //给数组追加元素 //在数组的最后一个位置 追加元素 arr.push("王奶奶"); //在数组的最后 追加(多个)元素 arr.push("刘姥姥", "马姥姥"); //在数组的最前面 添加(多个)元素 arr.unshift("酸奶奶"); arr.unshift("甜奶奶", "辣奶奶", "咸奶奶"); //在数组的任意位置 添加(多个)元素 arr.splice(4, 0, "姥姥"); arr.splice(2, 0, "大姥姥", "小姥姥"); console.log(arr); </script>
-
-
删除数组的元素
-
改变数组的length属性
arr.length -= 1; arr.length -= n
(删除后面n个元素) -
删除最后面的
一个
元素pop()
(没有参数) -
删除数组的第
一个
元素shift()
(没有参数) -
删除指定位置的指定个数的元素
splice(index, 删除个数)
-
会把数组变稀疏,值删了但是位置还在
delete arr[下标值]
<script> //创建数组 var arr = ["刘姥姥", "马姥姥", "赵姥姥", "张姥姥", "司马姥姥", "欧阳姥姥", "独孤姥姥", "东方姥姥", "西门姥姥"]; console.log(arr); // 直接改变数组的长度 //arr.length = 5; //arr.length = arr.length - 1; arr.length -= 1; console.log(arr); // pop() 删除最后一个元素 arr.pop(); console.log(arr); //shift() 删除第一次元素 arr.shift(); console.log(arr); //删除任意位置的元素 的任意个数的元素 //arr.splice(1, 1); arr.splice(1, 2); console.log(arr); //运算符 delete 会把我们数组搞得稀疏, 不会真正删除 delete arr[2]; console.log(arr); </script>
-
6. 数组遍历
-
for 循环
-
for in
//循环 for (var i = 0; i < arr.length; i ++) { console.log(arr[i]); } console.log(""); //遍历的 另一种写法 for (var i in arr) { console.log(arr[i]); }
7.多维数组
8.数组的方法
-
join([间隔符号])
把数组的每个元素拼接成一个字符串 返回字符串 -
slice(start, end)
截取数组中的一部分, 返回一个新数组 -
concat(arr, arr....)
合并数组. 返回一个新数组 -
toString() 把数组转换为字符串
-
reverse()
翻转数组 副作用 -
sort()
排序 副作用 -
push() pop()
副作用 -
shift() unshift()
副作用<script> //创建数组 var arr = [100,200,300,400,500,600]; console.log(arr); //把数组 变成 字符串 console.log(arr.join()); console.log(arr.join("")); console.log(arr.join("-")); //截取数组中的一部分 console.log(arr.slice(1, 4)); //合并多个数组 console.log(arr.concat(["奶奶", "姥姥"])); console.log(arr.concat(["奶奶", "姥姥"], ["刘奶奶", "欧阳奶奶", "慕容奶奶"])); console.log(["大奶奶", "二奶奶"].concat(arr)) //翻转数组 副作用 arr.reverse(); console.log(arr); //splice 副作用 arr.splice(2, 2, "奶奶"); console.log(arr); //排序 arr.sort(); console.log(arr) console.log(arr.toString()); </script>
9.类数组对象
-
arguments
-
Elementcollection 元素的集合
document.getELementsByTagName()
element.getElementsByTagName()
<body> <ul id="mylist"> <li>同志交友</li> <li>同志交友</li> <li>同志交友</li> <li>同志交友</li> <li>同志交友</li> <li>同志交友</li> </ul> <button onclick="changeRed()">变红</button> <li>我也是li</li> <script> function changeRed(){ var ul = document.getElementById("mylist"); var lis = ul.getElementsByTagName("li"); for (var i = 0; i < lis.length; i ++) { //for (var i in lis) { lis[i].style.backgroundColor = "red"; } } </script> </body>
10.作为数组的字符串
-
字符串具有部分数组特性
-
字符串也有length属性 获取字符串的长度
-
也可以通过[索引值] 取出字符串中的一个字符
-
不可以用str[i]="值";来修改字符串中的字符!
<script> //创建字符串 var str = "hello,丽丽"; console.log(str); console.log("字符串长度:"+str.length); console.log(str[4]); str[4] = "A"; //无法修改 console.log(str); //把字符串中 每个字符 遍历出来 for (var i = 0; i < str.length; i ++) { console.log(str[i]); } </script>