一、JS数组
1. 什么是数组？
具有相同类型（或者不同类型）的数据有序集合 ，每个值叫做一个元素，而每个元素在数组中有一个位置，以数字表示，称为索引/下标。js的数组是无类型的，数组元素可以是任意类型，同一个数组中的不同元素可能是对象或数组。
2. 创建数组
创建一个数组，有三种方法。
-
构造函数方式：
var myCars=new Array(); myCars[0]="奥迪"; myCars[1]="宝马"; myCars[2]="奔驰"; -
简洁方式:
var myCars=new Array("沃尔沃","保时捷","奥拓");注意:空数组的长度 var myCars=new Array(3);如果是数字是数组的长度，如果是非数字那么则是一个一个元素。
-
字面量定义方式:常用
var myCars=["凯迪拉克","宝骏","QQ"]; var myCars=[]; //空数组
3. 访问数组
通过指定数组名以及索引号码，你可以访问某个特定的元素。
var name=myCars[0];
以下实例修改了数组 myCars 的第一个元素:
myCars[0]="雪佛兰";
4. 遍历数组
遍历数组:利用循环获取数组中每个元素的值
var arr = ['周杰伦', '蔡依林', '侯佩岑', '田馥甄','张三'];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
5. 数组方法和属性
-
使用数组对象预定义属性和方法：
var x=myCars.length // myCars 中元素的数量 var y=myCars.indexOf("玛莎拉蒂") // "玛莎拉蒂" 值的索引值 -
成员访问符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>什么是属性？什么是方法</title> </head> <body> <script> var arr = ['北京', '上海', '广州', '深圳']; console.log(arr); //length是每个数组自带的属性，表示数组的长度 console.log(arr.length); //访问属性的时候不加() //indexOf()是每个数组自带的方法，查找元素在数组中的位置 console.log(arr.indexOf('广州')); /* 成员访问符： . 点号 点号后面必须跟一个有效的js标识符(变量名的命名规范) 点号后面不能解析变量 [] 中括号 点号能干的，[]都能干； 点号不能干的，[]还是能干； */ console.log(arr['length']); console.log(arr['indexOf']('深圳')); // console.log(arr.0); //报错 console.log(arr[0]); console.log(arr[ 1+1 ]); var n = 3; console.log(arr.n); //不会把n解析成3 console.log(arr[n]); //[]里面的内容不加引号，会被当成变量，会把n解析成3 </script> </body> </html>
6. 数组的增删改查
6.1 增
-
从数组的尾部添加一个元素
var arr = [0,1,2,3,4,5]; arr[arr.length] = 6; -
从数组的头部添加一个元素
var arr = [1,2,3,4,5]; for(var i = arr.length-1;i>=0;i--){ //把当前索引中的值复制给下一个索引 arr[i+1]=arr[i]; } arr[0] = '哈哈'; -
从数组的中间(某个索引值的位置)添加一个元素
var arr = [0,1,2,3,4,5]; for(var i = arr.length-1;i>=3;i--){ //把当前索引中的值复制给下一个索引 arr[i+1]=arr[i]; } arr[3] = '哈哈';
6.2 删
-
从数组的尾部删除一个元素
var arr = [0,1,2,3,4,5]; arr.length--; arr.length -= 1; -
从数组的头部删除一个元素
var arr = [0,1,2,3,4,5]; for (var i = 1; i < arr.length; i++) { // 把当前索引中的值复制给上一个索引 arr[i-1] = arr[i]; } arr.length--; console.log(arr); -
从数组的中间(某个索引值)删除一个元素
var arr = [0,1,2,3,4,5]; for (var i = 3; i < arr.length; i++) { //把当前索引中的值复制给上一个索引 arr[i-1] = arr[i]; } arr.length--; console.log(arr);
6.3 改
var arr = [0,1,2,3,4,5];
arr[0] = 8;
console.log(arr);
6.4 查
var arr = [0,1,2,3,4,5];
console.log(arr[0]);
案例：将元素为3的元素修改为300；
7. 案例练习
-
对数组进行求和
var arr = [6, 7, 8, 9,10]; -
输出数组中最大的值
var arr2 = [1, 2, 3, 0, 5]; // 最大值 // 默认认为数组的一个元素是当前最大值 var max = arr2[0]; for (var i = 1; i < arr2.length; i++) { // max比后面的小 if (max < arr2[i]) { max = arr2[i]; } } console.log(max);案例：最小值，平均数
-
将数组中所有元素和|拼接成一个新的字符串
eg:'周杰伦|蔡依林|侯佩岑|田馥甄|张三
var arr3 = ['周杰伦', '蔡依林', '侯佩岑', '田馥甄', '张三']; var sum = ''; for (var i = 0; i < arr3.length-1; i++) { sum += arr3[i]+'|'; } sum+=arr3[arr3.length-1]; console.log(sum); -
反向遍历
var arr4 = ['周杰伦', '蔡依林', '侯佩岑', '田馥甄', '张三']; for(var i = arr4.length-1;i>=0;i--){ console.log(arr4[i]); } -
动态按序从尾部插入数组元素
var arr7 = []; // arr7.length 0 arr7[arr7.length] = '哈哈'; // arr7.length 1 arr7[arr7.length] = '呵呵'; // arr7.length 2 arr7[arr7.length] = '嘿嘿'; console.log(arr7); -
去掉数组中元素的值是0的,重新生成一个新数组
var arr5 = [5,0,4,2,0,8,0,9]; var newArr = []; for (var i = 0; i < arr5.length; i++) { if(arr5[i] != 0){ //插入新数组 newArr[newArr.length] =arr5[i]; } } console.log(newArr); -
翻转数组
-
在新数组当中翻转
var arr = [1,2,3,4,5,6]; var newArr = []; for(var i = arr.length - 1; i >= 0; i--){ newArr[newArr.length] = arr[i]; } console.log(newArr);
-
-
在原数组上进行翻转—》非常重要
var arr = [1,2,3,4,5,6]; // i 0 4 // i 1 3 // i 2 2 console.log(arr); for(var i = 0; i < arr.length/2; i++){ var temp = arr[i]; arr[i] = arr[arr.length - 1 - i]; arr[arr.length - 1 - i] = temp; } console.log(arr);
思考：如果arr.length没有除以2那么会发生什么情况？？？
-
合并数组，原生实现
-
合并在新数组当中
var arr1 = [1,3,5,7,9]; var arr2 = [2,4,6,8,10]; //1、合并在新数组当中 var newArr = []; for(var i = 0; i < arr1.length; i++){ //在把arr1内部的数据添加到newArr当中 newArr[newArr.length] = arr1[i]; } for(var i = 0; i < arr2.length; i++){ //在把arr1内部的数据添加到newArr当中 newArr[newArr.length] = arr2[i]; } console.log(newArr); -
在原数组上进行合并
for(var i = 0; i < arr1.length; i++){ arr2[arr2.length] = arr1[i]; } console.log(arr2);
-
-
数组去重
var arr = [1,2,3,4,1,1,2,1,3,2,4]; //去重完成 [1,2,3,4] //数组去重都是在新数组当中去重的； var newArr = []; var flag = true; for(var i = 0; i < arr.length; i++){ //从arr数组当中拿数 for(var j = 0; j < newArr.length; j++){ //拿新的数组当中的值和老数组拿的值进行比较 //而且从原数组当中拿的值，必须和新数组当中所有的值比较完成，才知道有没有 if(arr[i] == newArr[j]){ //代表着新数组内部有这个值； flag = false; break; } } //break出来的，代表新数组当中有这个值 if(flag){ newArr[newArr.length] = arr[i]; } flag = true;//重置标志位 } console.log(newArr); -
冒泡排序
<script>
var arr = [6,5,3,1,2,4];
for (var i = 0; i < arr.length-1; i++) {
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>
8. 多维数组
//一维数组
var arr = [1,2,3,4,5];
console.log(arr[2]);
//二维数组 一维数组当中的元素，又是一个一维数组
var arrTwo = [[1,2],[3,4],[5,6]];
console.log(arrTwo[1][1]);//4
//三维数组
var arrThree = [
[[1,2],[3,4]],
[[5,6],[7,8]],
[[9,10],[11,12]]
]
console.log(arrThree[2][0][1]);
9. 数组方法
var arr = [1,2,3,4];
//数组增删改查
//从末尾增
var result = arr.push(100,200,300,[1,2,3]);
console.log(result);
console.log(arr);
//功能：从数组的末尾增加一个或者多个
//参数：增加的元素
//返回值：返回加入元素后数组的新长度
//这个方法对原数组有影响
//从末尾去删
var result = arr.pop();
console.log(result);
console.log(arr);
//功能：从数组的末尾删除一个
//参数：无
//返回值：返回删除的那一个元素
//这个方法对原数组有影响
//从头部增
var result = arr.unshift(100,200,300,[1,2,3]);
console.log(result);
console.log(arr);
//功能：从数组的头部增加一个或者多个
//参数：增加的元素
//返回值：返回加入元素后数组的新长度
//这个方法对原数组有影响
//从头部去删
var result = arr.shift();
console.log(result);
console.log(arr);
//功能：从数组的头部删除一个
//参数：无
//返回值：返回删除的那一个元素
//这个方法对原数组有影响
//增删改一体化
//这个方法根据参数的不同，有不同的功能
//这个方法我们大家先当作删除去理解
//删除
var result = arr.splice(1,2);
console.log(result);
console.log(arr);
//功能：从数组的任意位置删除任意个元素
//参数：两个 第一个代表从哪开始，第二个代表删除几个
//返回值：返回删除的元素组成的新数组
//这个方法对原数组有影响
//增加
var result = arr.splice(2,0,400,500,600);
console.log(result);
console.log(arr);
//功能：从数组的任意位置添加任意多个元素
//参数：多个 第一个代表从哪开始，第二个代表删除0个，后面的代表新增的元素
//返回值：返回删除的元素组成的新数组，最终是空数组
//这个方法对原数组有影响
//修改
var result = arr.splice(1,1,1000,2000);
console.log(result);
console.log(arr);
//功能：修改数组当中任意的元素
//参数：多个 第一个代表从哪开始，第二个代表删除几个，后面的代表新增的元素
//返回值：返回删除的元素组成的新数组
//这个方法对原数组有影响
//翻转数组
var result = arr.reverse();
console.log(result);
console.log(arr);
console.log(result == arr);
//功能：翻转数组
//参数：无
//返回值：返回翻转后的原数组
//这个方法影响原数组
arr = [18,2,10,9,88,66,22];
var result = arr.sort(function(a,b){
return b - a;
});
console.log(result);
console.log(arr);
console.log(result === arr);
//功能：对数组进行排序
//参数：如果不写，默认把每个元素转化为字符串进行排序（按照Unicode码）
// 如果要按照升序降序去排，需要传一个参数是函数
// 这个函数有两个形参
//返回值：排好序的原数组
//这个方法对原数组有影响
//把数组再转化为字符串 和字符串方法 split是一个逆运算
var result = arr.join('');
//功能：以指定的字符串为连接符，将数组元素连接成一个字符串
//参数：如果不传，默认以逗号为连接符，将元素连接成字符串
// 如果传的是正常字符串，那么以这个字符串为连接符将元素连接成字符串
// 如果传的是空串，那么直接将字符串连接成字符串，中间没有任何连接
//返回值：返回连接好的字符串
//这个方法对原数组没有影响
console.log(result);
console.log(arr);
//concat
var result = arr.concat([100,200,300]);
console.log(result);
console.log(arr);
console.log(arr === result);
//功能：在数组的末尾拼接元素
//参数：可以不写，相当于复制一个数组
// 也可以写一个或者多个值，会把这些值拼接到数组末尾
// 也可以写数组，会先把数组拆开，把元素拼接到数组末尾
//返回值：返回拼接好的新数组
//这个方法对原数组没有影响
//slice
var result = arr.slice(1,3);
console.log(result);
console.log(arr);
//功能：在数组当中截取部分元素形成新数组
//参数：和字符串方法slice一致；起始位置和结束位置，不包含结束位置的元素
// 如果只传一个代表起始位置，一直到结束。两个位置都可以使用负数
//返回值：返回截取的元素形成的新数组
//这个方法对原数组没有影响
//fill() 填充数组，使用指定的内容填充数组
arr.length = 100;
arr.fill(1); //100个1
console.log(arr);
//valueOf 是Object的原型当中的
//返回数组实例对象。
var result = arr.valueOf()
console.log(result);
console.log(arr);
console.log(result === arr);
var o = new String('111');
console.log(typeof o);
var s = o.valueOf();
console.log(typeof s);
//功能：获取数组对象的基本值，数组实例对象。
//参数：无
//返回值：返回原数组，因为数组是非包装对象，所以它是没有基本值
//toString
var result = arr.toString()
console.log(result);
console.log(arr);
//功能：将数组对象转化为字符串
//参数：无
//返回值：把数组的中括号去掉，其余加引号形成字符串返回
//对象/数组在参与数学运算的时候会发生隐式转换，会：
//1. 调用 valueOf() 看得到的值是不是基本数据类型，如果是，就使用
//2. 如果 valueOf() 得到的不是基本数据类型，则调用toString()方法，看是不是基本数据类型
//3. 如果前面2不都得不到基本数据类型，则报错！
console.log(Number(arr));
console.log(arr.valueOf());
console.log(arr.toString());
console.log(arr + 1); //先valueOf()得到数组，再toString()得到'1,2,3,4'
console.log(arr - 1); //NaN
console.log(arr * 1); //NaN
console.log(arr / 1); //NaN
10. ES5中新增的方法
var arr = [12,312,3,213,12,3,21];
//forEach()遍历数组，需要传递一个function
//function有3个参数
// 第1个是数组里面的每个元素
// 第2个是元素的下标
// 第3个是当前操作的数组
//可以只写1个，位置是固定的
//没有返回值，默认是undefined
var res = arr.forEach(function(item, index, arr) {
console.log(item);
});
console.log(res);
//将每个数字乘以5，并返回一个新的数组
var arr = [1,2,3,4,5];
//map()遍历数组，需要传递一个function
//function有3个参数
// 第1个是数组里面的每个元素
// 第2个是元素的下标
// 第3个是当前操作的数组
//可以只写1个，位置是固定的
//可以将function里面return的东西组成一个新的数组作为返回值
var newArr = arr.map(function(item, index, arr) {
return item * 5;
});
//箭头函数，ES6阶段再学
// newArr = arr.map(item => item*5);
console.log(newArr);
//将薪资1w以下的去除，返回一个新的数组
var arr = [12000, 8000, 15000, 18000, 13800];
//filter() 过滤数组，需要传递一个function
//function有3个参数
// 第1个是数组里面的每个元素
// 第2个是元素的下标
// 第3个是当前操作的数组
//可以只写1个，位置是固定的
//可以将function里面return true;的东西组成一个新的数组作为返回值
newArr = arr.filter(function(item, index, arr) {
console.log(item);
// if (item >= 10000) return true;
return item >= 10000;
});
console.log(newArr);
//判断数组里面有没有薪资刚好1w的
var arr = [12000, 80000, 15000, 18000, 13800];
//some() 判断数组里面是否有满足条件的，需要传递一个function
//function有3个参数
// 第1个是数组里面的每个元素
// 第2个是元素的下标
// 第3个是当前操作的数组
// 可以只写1个，位置是固定的
//返回的是一个布尔值，不写return，默认得到false
//挨个遍历数组中的值，判断其中是否有满足条件的
//在function里面return true后就停止遍历(break)
//使用场景：通常用来检测数组里面是否有某个值
flag = arr.some(function(item, index, arr) {
// console.log(item);
// return true; //一旦返回true，后面的就不用遍历了
return item === 10000;
});
console.log(flag);
//判断数组里面是不是所有人的年龄都大于等于18
//every() 判断数组里面是否所有元素都满足条件，需要传递一个function
//function有3个参数
// 第1个是数组里面的每个元素
// 第2个是元素的下标
// 第3个是当前操作的数组
// 可以只写1个，位置是固定的
//返回的是一个布尔值，不写return，默认得到false
//挨个遍历数组中的值，判断其中所有的元素是否满足条件
//在function里面return false后就停止遍历(break)
flag = arr.every(function(item, index, arr) {
return item >= 18;
});
console.log(flag);
//reduce()方法，也会对数组进行遍历，与之前的forEach等不同的是：
//reduce的每次遍历，都可以拿到上一次遍历的结果
var arr = [1,2,3,4,5];
/*
prev item
1 2 3
3 3 6
6 4 10
10 5 15
*/
//求和：没有为prev设置初始值，默认会将第1个元素的值给prev，所以循环是从第2个元素开始
var res = arr.reduce(function(prev, item, index, arr) {
// console.log(prev, item);
return prev + item;
});
console.log(res);
console.log('-------------');
/*
prev item
0 1 1
1 2 3
3 3 6
6 4 10
10 5 15
*/
var res = arr.reduce(function(prev, item, index, arr) {
console.log(prev, item);
return prev + item;
}, 0); //给prev设置了一个初始值0
console.log(res);
练习： 请使用reduce()方法将数组去重，返回一个新数组
888
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
