本文详细介绍了JavaScript数组的基础操作，包括字面量和new关键字创建、添加与删除元素、数据类型分类、浅拷贝与深拷贝、常用数组方法如length、push、pop、unshift、shift、splice、indexOf、join、concat、reverse和slice，以及去重算法和排序技巧。
2.数组对象
-
数组：存储数据的容器，可以存储任意数据类型，也可以存储多个
2.1创建数组
-
字面量创建
// 1.字面量创建 var arr1 = ["1", "2", "3"]; console.log(arr1);
-
使用new关键创建
// 2.使用new关键字创建
var arr2 = new Array("1", "2", "3");
console.log(arr2);
-
数组的添加
// 3.获取数组中的内容 数组[下标] 下标是从0开始 console.log(arr1[0]);//"1" console.log(arr1[1]);//"2" // 4.通过下标的添加 数组[下标] = 值 arr1[3] = "哈哈"; console.log(arr1);//['1', '2', '3', '哈哈'] arr1[6] = "嘻嘻"; console.log(arr1);//['1', '2', '3', '哈哈', empty × 2, '嘻嘻']
-
==注意事项==
-
注意1：如果只有1个且类型为number的元素,代表创建长度为n的空数组
-
注意2：arr1.属性名 = 属性值
-
// 5.注意事项 // 注意1：如果只有1个且类型为number的元素,代表创建长度为n的空数组 var arr3 = new Array(3); console.log(arr3);// [empty × 3] // 注意2：arr1.属性名 = 属性值 arr1.name = "zs"; console.log(arr1.name);
2.2数据分类依据
typeof检测数据类型 基本数据类型：数据结构比较单一，数据是存储在变量中的 number类型的数据 number string类型的数据 string boolean类型的数据 boolean undefined undefined null object 复杂数据类型：数据的结构比较复杂 变量中存储的是内存地址 内存地址才会指向数据，如果共用一个内存地址，会出现一改全改的问题 object类型数据 object array类型的数据 object funtion函数 function
-
所存在的问题
<script> // 基本数据类型 var a = 10; var b = a; b = 20; console.log(a, b);//10,20 // 复杂数据类型 var arr1 = ["嘻嘻", "哈哈", "呵呵"]; var arr2 = arr1; arr2[2] = "滴滴滴滴滴滴滴"; console.log(arr1, arr2);// ["嘻嘻", "哈哈", "滴滴滴滴滴滴滴"] ["嘻嘻", "哈哈", "滴滴滴滴滴滴滴"] </script>
2.3深浅拷贝
==深浅拷贝问题只针对于复杂数据类型==
-
浅拷贝
// 1.浅拷贝 会出现一改全改的问题 var arr1 = ["嘻嘻", "哈哈", "呵呵"]; var arr2 = arr1; arr2[2] = "滴滴滴滴滴滴滴"; console.log(arr1, arr2);// ["嘻嘻", "哈哈", "滴滴滴滴滴滴滴"] ["嘻嘻", "哈哈", "滴滴滴滴滴滴滴"]
-
深拷贝
// 2.深拷贝
var arr1 = ["嘻嘻", "哈哈", "呵呵"];
var arr2 = [];
// 通过for循环将arr1中的内容复制过去
for (var i = 0; i < 3; i++) {// i = 0 1 2
arr2[i] = arr1[i];
}
arr2[2] = "dididididiidd";
console.log(arr1, arr2);// ["嘻嘻", "哈哈", "呵呵"] ["嘻嘻", "哈哈", "dididididiidd"]
2.4数组的方法
length
-
获取数组的长度
数组的添加的删除
push
-
语法：数组.push(数据1，数据2，数据3.....)
-
作用：在数组的尾部添加一个或者多个数据 并且返回最新数组的长度
pop
-
语法：数组.pop()
-
作用： 在数组的尾部删除一个元素 返回被删除的数据
unshift
-
语法：数组.unshift(数据1，数据2，数据3....)
-
作用：在数组的头部添加一个或者多个数据 并且返回最新数组的长度
shift
-
语法：数组.shift()
-
作用： 在数组的头部删除一个元素 返回被删除的数据
// 1.数组.push() 在数组的尾部添加一个或者多个数据 并且返回最新数组的长度
var len = arr.push("哈哈", "嘻嘻");
console.log(len);//6
console.log(arr);// [1, 2, 3, 4, '哈哈', '嘻嘻']
var len1 = arr.push("6", [true, false]);
console.log(len1);// 8
console.log(arr);//[1, 2, 3, 4, '哈哈', '嘻嘻',"6",[true,false]]
// 2.数组.pop() 在数组的尾部删除一个元素 返回被删除的数据
var arr = [1, 2, 3, 4];
var len = arr.pop();
console.log(len);//4
console.log(arr);//[1,2,3]
// 3.数组.unshift() 在数组的头部添加一个或者多个数据 并且返回最新数组的长度
var arr = [1, 2, 3, 4];
var len = arr.unshift(5, 6);
console.log(len);//6
console.log(arr);//[5,6,1,2,3,4];
// 4.数组.shfit() 在数组的头部删除一个元素 返回被删除的数据
var arr = [1, 2, 3, 4];
var len = arr.shift();
console.log(len);//1
console.log(arr);//[2,3,4];
splice
-
语法：数组.splice(start,count,items)
-
作用：删除数组中一串连续的数组元素，被删除的元素会组成一个新的数组返回，使用items替换被删除的元素
-
参数
-
start：开始删除的下标
-
count：删除的个数
-
items：替换的内容
-
var arr = [1, 2, 3, 4]; // var arr1 = arr.splice(2);//如果不传count 删除到最后 // console.log(arr1);//[3 4] // console.log(arr);//[1, 2] // var arr1 = arr.splice(1, 2); // console.log(arr1);//[2,3] // console.log(arr);//[1,4] var arr1 = arr.splice(1, 2, "嘻嘻"); console.log(arr1);//[2,3] console.log(arr);//[1,"嘻嘻",4]
indexOf
-
indexof:查找元素在数组中首次出现的位置 如果找到则是返回下标位置 找不到返回-1
//7.indexof:查找元素在数组中首次出现的位置 如果找到则是返回下标位置 找不到返回-1 var arr = [1, 2, 3, 4]; var res = arr.indexOf(1); console.log(res);//0
join
-
数组.join(组合标识) 数组根据组合标识组成一个新的字符串
// 8.join和字符串对象中split是搭配使用的
// 字符串.split(分割标识) 字符串根据分割标识 将数据分割出来并组成一个新的数组
var str = "123456"; //
var newStr = str.split("");
console.log(newStr);//['1', '2', '3', '4', '5', '6']
// 数组.join(组合标识) 数组根据组合标识组成一个新的字符串
var arr = [1, 2, 3, 4];
var res = arr.join("");
console.log(res);//1234;
concat
-
数组.concat()：将多个元素或者数组组成一个新的数组
// 10.concat 将多个数组或者元素组合成一个新的数组 var arr = ["19", true, false, undefined] var arr1 = arr.concat(10, 20, [30, 40]); console.log(arr1);//["19",true,false,undefined,10,20,30,40]
reverse
-
数组.reverse()：数组反转
// 9.reverse 反转数组 var arr = ["10", true, false, undefined]; var arr1 = arr.reverse(); console.log(arr1);
slice
-
slice(start,end) 截取数组中一连串的元素并且组成一个新的数组返回 包含开始不包含结束下标
var arr = [1, 2, 3, 4];
// var arr1 = arr.slice(0, 2);
// console.log(arr1);//[1,2]
var arr1 = arr.splice(2)
console.log(arr1);//[3,4]
-
==数组的大部分方法都会改变原数据，字符串的方法不会改变原字符串==
2.5算法
2.5.1数组去重
-
indexOf去重
// indexof去重
var arr = [1, 2, 3, 4, 5, 1, 2, 1, 1, 6, 7, 8, 6, 9];
// indexOf：查找元素在数组中首次出现的下标位置 如果找不到则是返回-1
var newArr = [];
for (var i = 0; i < arr.length; i++) {
//什么时候将元素push到newArr？当前这个元素在newArr中找不到的时候会push进去
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i]);
}
}
console.log(newArr);
-
splice去重
// splice去重
/* 当前元素依次和后面的元素做比较 如果相等，就将重复元素删除 */
var arr = [1, 1, 2, 3, 4, 5, 1, 2, 1, 1, 6, 7, 8, 6, 9];
for (var i = 0; i < arr.length; i++) { // i = 0 1
for (var j = i + 1; j < arr.length; j++) {// j = 1 2
if (arr[i] === arr[j]) {
arr.splice(j, 1);
j--;
}
}
}
console.log(arr);
2.5.2选择排序
-
拿一个元素，和后面所有的元素做比较 如果后面的元素比较小，就交换位置
// 选择排序：拿一个元素依次和后面的元素做比较 如果后面的元素比较小 就交换位置
var arr = [1,4,3,8,5]
for (var i = 0; i < arr.length; i++) {// i = 0 1 2 3 4
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] > arr[j]) {
var temp = arr[i]
arr[i] = arr[j]
arr[j] = temp;
}
}
}
console.log(arr);
2.5.3冒泡排序
-
相邻的两个元素比较 如果后面比较小就交换位置
<script>
var arr = [10, 15, 8, 0, 2]
/*
i = 0 结束 4 arr.length-1-i
i = 1 结束 3
i = 2 结束 2
i = 3 结束 1
*/
// 冒泡排序:相邻的两个元素进行比较 如果后面的元素比较小就交换位置
for (var i = 0; i < arr.length - 1; i++) {// i = 0 1 2 3
for (var j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
</script>
454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
