JS数组
1. 什么是数组？
具有相同类型（或者不同类型）的数据有序集合，每个值叫做一个元素，而每个元素在数组中有一个位置，以数字表示，称为索引/下标。js的数组是无类型的，数组元素可以是任意类型，同一个数组中的不同元素可能是对象或数组。
2. 创建数组
创建一个数组，有三种方法。
-
构造函数方式：
var arr=new Array(); arr[0]="a"; arr[1]="b"; arr[2]="c"; -
简洁方式:
var arr=new Array("a","b","c");注意:空数组的长度 var arr = new Array(3);如果是数字是数组的长度，如果是非数字那么则是一个一个元素。
-
字面量定义方式:常用
var arr=["a","b","c"]; var arr=[];// 空数组
3. 访问数组
通过指定数组名以及索引号码，你可以访问某个特定的元素。
var name=arr[0];
以下实例修改了数组 arr的第一个元素:
arr[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("玛莎拉蒂") // "玛莎拉蒂" 值的索引值
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);
//功能：翻转数组
//参数：无
//返回值：返回翻转后的原数组
//这个方法影响原数组
//把数组再转化为字符串 和字符串方法 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一致；起始位置和结束位置，不包含结束位置的元素
// 如果只传一个代表起始位置，一直到结束。两个位置都可以使用负数
// 返回值：返回截取的元素形成的新数组
//这个方法对原数组没有影响
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码）
// 如果要按照升序降序去排，需要传一个参数是函数
// 这个函数有两个形参
//返回值：排好序的原数组
//这个方法对原数组有影响
//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);
//功能：将数组对象转化为字符串
//参数：无
//返回值：把数组的中括号去掉，其余加引号形成字符串返回
10. ES5数组新方法
10.1 forEach
forEach() 方法对数组的每个元素执行一次提供的函数。功能等同于for循环.
应用场景：为一些相同的元素，绑定事件处理器！强调的是数组中每一项都要遍历
作用：
- 1.只能是用来遍历
- 2.一旦开始了遍历就停不下来
- 3.返回值是undefined 这个undefined对于我们来说没有用
需求：遍历数组[‘红浪漫’,‘天上人间’,‘云水谣’,‘金紫荆’,‘好利’]
var arr = ['红浪漫','天上人间','云水谣','金紫荆','好利'];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
arr.forEach(function(element, index, array){
console.log(element, index, array);
});
10.2 map
map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
需求：遍历数组，求每一项的平方存在于一个数组中
作用：
- 1.可以循环遍历数组中的每一项数据
- 2.可以对循环遍历到的每一项数据进行操作
- 3.重点应用场景: 对数组中的每一项数据进行操作,比如：给每数组中的每一项添加一个相同的样式
var arr = [1,2,3,4,5]; // 1 4 9 16 25
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
//返回值：一个新数组，每个元素都是回调函数的结果。
var newArray = arr.map(function(element, index, array){
return element * element;
});
console.log(newArray);//[1,4,9,16,25]
10.3 filter
filter用于过滤掉“不合格”的元素
返回一个新数组，如果在回调函数中返回true，那么就留下来，如果返回false，就扔掉
需求：遍历数组，将数组中工资超过5000的值找出来[1000, 5000, 20000, 3000, 10000, 800, 1500]
作用:
- 1.可以循环遍历数组中的每一项
- 2.可以对循环遍历到的数据进行判断
- 3.当条件成立时,使用了return true后会将满足条件的那一项存到一个新的数组当中
- 4.重点应用场景:根据条件过滤数组中的数据
var salary = [1000, 5000, 20000, 3000, 10000, 800, 1500];
//第一个参数：element，数组的每一项元素
//第二个参数：index，数组的下标
//第三个参数：array，正在遍历的数组
//返回值：一个新数组，存储了所有返回true的元素
var result = salary.filter(function(element, index, array){
if(element >= 5000) {
return false;
}else {
return true;
}
});
console.log(result);//[ 5000, 20000,10000]
10.4 some
some用于遍历数组，如果有至少一个满足条件，就返回true，否则返回false。
**需求：遍历数组，查找数组中的某条数据 比如：查找[10, 20, 30, 40, 50, 60] 中的30
作用:
- 1.可以用来循环遍历数组中的每一项
- 2.在回调函数中进行条件判断，如果return true执行之后，会阻止后续代码的遍历执行
- 3.重点应用场景: 条件成立时不再执行后续的循环 比如，注册邮箱时如果有某个人名字注册了就不能再注册了
// 查找数组有没有30 如果有，就不要再向下遍历了
var nums = [10, 20, 30, 40, 50, 60]
nums.some(function (item, index, arr) {
// console.log(item,index,arr);
if (item == 30) {
return true
}
console.log(item);
})
10.5 every
every用于遍历数组，只有当所有的元素返回true，才返回true，否则返回false。
需求：遍历数组，判断整体是否都满足条件
作用：
- 1.可以对数组中的每一项进行遍历，但是只打印第一项
- 2.对数组中的每一项进行判断，都满足条件则返回true,如果有一项不满足条件则返回false
- 3.应用场景：重点是强调整体的一个处理结果，比如，某地区所有人健康码是否都为绿码
// every 比如说: 考试完成之后,判断一下成绩当中是否有不及格的 如果都满足条件则返回true,有一个不满足条件则返回false
// var score = [100,99,96,93,65,74,41,25,62,18];
var score = [100,99,62,25,88];
var flag = score.every(function(item,index,arr){
// console.log(item,index,arr);
return item > 60
})
console.log(flag);
10.6 reduce
reduce()方法对数组中的每个元素执行一个由您提供的reducer函数，将其结果汇总为单个返回值
语法：reduce(callback, initValue)
callback: 每个元素都会执行一次的回调函数
initValue: 初始值
callback的4个参数
- prev： 上一次的值，第一次为初始值
- item: 当前值
- index: 下标
- arr: 数组
案例：计算数组所有值的和
var nums = [10, 20, 30, 40, 50, 60]
var res = nums.reduce(function (prev, item) {
return prev + item
}, 0)
console.log(res);
在 JavaScript 中，reduce() 是数组的一个非常强大的方法，它能够对数组中的所有元素执行一个累积操作，最终返回一个值。reduce() 方法接收一个回调函数作为参数，这个回调函数会被依次应用到数组中的每个元素，回调函数的返回值会传递给下一个元素的操作，最终返回单一的结果。
语法：
array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
callback：一个函数，它将在数组的每个元素上执行，并接收四个参数：accumulator：累加器，它保存着上一次调用回调函数时返回的值，或者是初始值。currentValue：当前元素的值。index：当前元素的索引（可选）。array：正在遍历的数组（可选）。
initialValue：可选参数，指定初始值。如果提供了这个值，accumulator会以initialValue开始。如果没有提供，则数组中的第一个元素将作为初始值，currentValue会从第二个元素开始。
示例 1：求数组元素的和
最简单的使用场景是将数组中的所有数值加起来：
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(sum); // 15
- 在这个例子中，
reduce()方法对数组中的每个元素执行加法操作，累加结果保存在accumulator中。 0是initialValue，即累加器的初始值。没有它，accumulator会默认为数组的第一个元素（此时currentValue会是第二个元素）。
示例 2：数组元素求积
reduce() 还可以用来进行其他累积操作，如求积：
const numbers = [1, 2, 3, 4];
const product = numbers.reduce((accumulator, currentValue) => {
return accumulator * currentValue;
}, 1);
console.log(product); // 24
- 初始值是
1，因为乘法的初始值应该是1。
示例 3：扁平化嵌套数组
reduce() 可以用于将多维数组扁平化成一维数组：
const arrays = [
[1, 2, 3],
[4, 5],
[6, 7]
];
const flattened = arrays.reduce((accumulator, currentValue) => {
return accumulator.concat(currentValue);
}, []);
console.log(flattened); // [1, 2, 3, 4, 5, 6, 7]
- 这里的
reduce()将每个子数组合并到一个新的数组中，最终返回一个包含所有元素的一维数组。
示例 4：统计数组中元素的出现次数
可以使用 reduce() 来统计数组中每个元素的出现次数：
const words = ['apple', 'banana', 'apple', 'orange', 'banana', 'banana'];
const count = words.reduce((accumulator, currentValue) => {
// 如果累加器中没有该元素，初始化为 0
if (accumulator[currentValue]) {
accumulator[currentValue]++;
} else {
accumulator[currentValue] = 1;
}
return accumulator;
}, {});
console.log(count);
// { apple: 2, banana: 3, orange: 1 }
- 在这个例子中，
accumulator是一个对象，用来记录每个单词出现的次数。
示例 5：不传入 initialValue
如果没有传入 initialValue，reduce() 会使用数组的第一个元素作为初始值，currentValue 从第二个元素开始。
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
});
console.log(sum); // 10
- 在这个例子中，
accumulator最初是1（数组的第一个元素），currentValue从2开始。
reduce() 方法的特点
- 不可变性：
reduce()不会修改原数组，它会生成一个新的值。 - 初始值的选择：如果没有提供
initialValue，那么reduce()会以数组的第一个元素作为初始值，并从数组的第二个元素开始迭代。 - 多次调用：
reduce()在处理每个数组元素时，会将上一次返回的值作为accumulator，一直迭代到数组的最后一个元素。
总结
reduce() 是一种非常灵活的数组操作方法，它可以用于聚合数组中的数据、计算统计值、进行复杂的转换和累积等。在处理一些复杂的数组问题时，reduce() 方法常常能够提供简洁和高效的解决方案。
扫一扫
1433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
