本文介绍了JS中数组的获取方式，包括通过Array构造函数、直接定义和Array.from()。详细讲解了数组的合并、切片、遍历、删除、添加等操作，如concat、slice、for循环、forEach、map、filter、reduce等方法的使用，并提醒了遍历中防止数组越界和使用indexOf检查元素存在的技巧。
文中必有不正确or不恰当的地方，目前的水平仅如此，可以喷这篇文章，但请别喷作者谢谢。文中如有错误的地方，愿意的话请告知作者 感激不尽！
一个知识的小复习：<a href=javascript:;>查看</a>伪协议
数组
- 一 如何获得数组（注意事项）
- 数组的操作 1合并数组 2切数组或拷贝数组(意思是只要其中的一部分)
- 二 数组的增删改查
- 2.1删除数组：
- 2.11 删除开头数组
- 2.12 第二种删除末尾元素
- 2.13 第三种删除中间/以及添加元素
- 2.14 .splice 技能扩展用法：替换数据。
- 2.15 .splice 技能扩展用法：添加数据
- 2.2 遍历数组，也叫查数组。
- 2.21 使用for循环来遍历数组
- 2.22 网抑云时间~通过forEach来回调数组，额这个是高级用法，不会用的话，也不用强行来用，只是使用这个方法逼格会更高也更方便！
- 2.23 查看数组。
- 2.24 添加数组。
- 2.241、map 变换数组 还能替换数组
- 2.242、filter 数组变少的时候用 我只要数组中的偶数。
- 2.243、reduce 多变一
- 第一种计算。
- 第二种筛选+计算。
一 如何获得数组
如何获得数组：3种方式：
- 第一种：var num = new Array(1,2,3);
- 第二种：最常用的：var num =[1,2,'a',true]; 这括号里面可以装任何的东西。只不过各个
- 数据之间要有逗号隔开。
注意：当数组中，只有1个数字的时候呢，他是长度，多个数字的时候他是数据！谁说的呢，MDN说的！好吧！- 第二个注意点：在数组中
只有字符串这个概念，怎么说呢看下面的内容！ - 简单来说(可能是错误的理解)，{ }大括号就是构造函数，[ ]中括号就是创建数组。
- 看到没，这个a居然有key值！而且这些数字都带引号。
- 还可以通过添加对象的方式添加进来：还是比较神奇的！！
- 第3种方式：
- Array.from() 通过此方法可转换数组，如何判断这个玩意是否是数组，太简单了，就看这个东西，属性里面有没有数组的方法。例如：push shift 啊 等等一系列：看下图
- 图一：这是一个完美的数组对象。
- 图二：这个是一个构造函数。他里面并不是数组，简单来说(可能是错误的理解)，
- { }大括号就是构造函数，[ ]中括号就是创建数组。
- 图三：那我就是想，哎，我就是要把这个玩意变成数组怎么办嘞？嘿嘿好办得很哦，直接使用Array.from();就行了！
数组的操作：
- 1、合并数组！就是把2个数组合并成为一个新的数组 使用 .concat()技能
- /本身就是连接的意思/ /kang cat/
- .concat()技能解析：逗号之前是第一个数组的变量名，括号中是第二个数组数组的变量名。
2、切数组/拷贝数组 只要其中的一部分：使用：slice技能
- slice 就是切面包。想象一下切面包的样子！切了之后呢，是不是面包都在啊，除非你偷吃！
- 所以slice 并不会改变原来的数组数据。
- 但是呢如果取0呢？那你不就是不切面包咯，哈哈！整个独吞！
- 所以就是会拷贝数组数据。所以这个方法一般用于拷贝数组。
访问数组：
这个数组是从0开始的！比如 有一个数组[1,2,'a'] 数组里面的1对应的是 数组0下标，2是1下标，依次类推。当然了，也不需要你数，但是要知道这点，因为一般都是用，数组名(点).length/len k si/ (本身就是长度的意思) 来遍历数组的
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建/遍历数组</title>
<script>
// 创建一个数组，在里面随便放点东西！
var num4 = [1, 2, 3, 11, '无处可藏']
// 然后通过循环获取数组，使用关键字length
/*
怎么理解这句话呢？首先num4.length是自动识别数组里面有多少个数 这个数是从0开始的。
i你想一开始是不是等于0 num4[0]是不是1 然后一直往下，直到num[4]='无处可藏'
就没有其他的数据可以取了，然后结束。*/
for (var i = 0; i < num4.length; i++) {
console.log(num4[i]);
}
</script>
</head>
<body>
</body>
</html>
如何创建数组 end
二 数组的增删改查
- 2.1 删除数组：
- 目前最好用的三种方法：
- 2.11 第一种删除开头元素
- 使用.shift()技能！
- 现在想删除a这个数组，发动技能.shift
- 注意括号里面什么都没有 括号里面什么都没有 括号里面什么都没有
- 因为他只会删除第一个数组，没有其余的效果了！
- 2.12 第二种删除末尾元素
- 使用 .pop()技能
- 现在想删除c这个数组，发动技能.pop
- 注意括号里面什么都没有 括号里面什么都没有 括号里面什么都没有
- 因为他只会删除最后一个数组，没有其余的效果了！
- 2.13 第三种删除中间/以及添加元素
- 使用.splice 粘连处断开！技能
- 现在想删除数组中的234，发动技能.splice
- 技能解析，第一个数字是从什么地方开始，第二个数字删几个！
- 所以.splice(0,5)这个意思就是，从 下标0开始删5个 所以1-5都不在了
- 2.14 .splice 技能扩展用法：替换数据。
- 第一个数字是从什么地方开始，第二个数字删几个！第三个就是替换什么。
- 使用的时候要注意，字符串要用引号引起来。
- 2.15 .splice 技能扩展用法：添加数据。
- 添加素组就很简单咯，你要在哪添加数组，
- 就在第一个数字写添加位置，第二个数字是0，第三个数字开始写添加的内容。
- 当然还有一种邪恶之法：只要在原来的数组的地方删除也是可以的，同志怕这是要996的节奏哦！
2.2 遍历数组
2.21 通过for循环来遍历数组
这别说明一下，这个i并不是数组的值，而是对应的数组、数值。是下标0到下标4，5个下标。
而且是` `这个符号而不是''符号！
而arr[i]才是这个数组的值，之前就说过，(错误的理解)[ ]中括号是数组的一个标识。
- 至于这个$符号，在JQ中哈，他一般是什么嘞，就是document.getElementById 这玩意。
- 但是嘞目前不晓得是什么，但是重点并不是这个，重点是！arr1[i]是数组值。
2.22 网抑云时间~通过forEach来 回调数组，额这个是高级用法，不会用的话，也不用强行来用，只是使用这个方法逼格会更高。
- 这个方法啊原来是这样写的
arr.forEach(function(arr) {console.log(arr);});但是呢为了直观呢，写成上面那个鬼样子，原理是什么呢？我目前说不清楚。只知道怎么用是可以的，然后呢这个function(这里的内容是随意的。) - console.log(
这里是，function里面是什么就是什么) - 非常的高端，非常的大气上档次。
- 那么这个function 里面最多只有任意的3中参数，是任意的，但是呢只能写3个。
- 第一个是值。
- 第二个是他们对应的下标。
- 第三个是他们本身所在的数组集合。
- 一张图来说明这个鬼玩意
- 啊这个呢！为了方便理解呢，我用中文来写，其实这里是任意的内容。
加深网抑云的状态！我们还可以这样写！
就是没有function了哎，变成=>箭头指向。
为了延长网抑云的持续时间，我们问一个致命的问题，就是这两者之间有什么区别！？哈哈我只能说这二者的区别，就是几乎没用任何的区别！是的是的！
- 但是呢！还是有区别的：就是当这个for循环中有 break 和 continue 的时候有区别。
- 因为forEach 不支持 break 和 continue。
- 本质上，for是关键字，而function是函数，for是块级作用域，function是函数作用域。
一张图来说明！
那么这个状态下，就不能用forEach了，因为forEach没有break 和 continue 的功能。
2.23 查看数组
- 查看数组呢，就是要注意一个问题：防止数组越界！什么情况下数组会越界呢？
- 一张图，解决你的难题：
- 因为 当 i 等于 自身的时候，是大于本身数组长度的，所以会越界！数组只能是length-1
- 解决的办法吗！就是不要写等号咯！
- 查看某个元素是否在同一个数组里：使用index.Of技能 注意 注意！这个O是大写，O是大写。
- 一张图，解决你的难题。
当这个返回值不为-1的时候呢就是代表它在下标几。
2.24 添加数组
数组的变换三个技能：
2.241、map 变换数组: /替换数组
如何变换数组？！
- 一张图解决 你的难题：
如何替换数组？！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
//这个题是练习map方法。使用 arr.map 把 0 变成'周日'，把 1 变成'周一'，以此类推
<script>
let arr = [0, 1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 6]
//function那里写成num 也是可以的 =>
let arr2 = arr.map(function(num) {
let week = {
0: '周日',
1: '周一',
2: '周二',
3: '周三',
4: '周四',
6: '周六'
}
return week[num]
})
console.log(arr2) // ['周日', '周一', '周二', '周二', '周三', '周三', '周三', '周四', '周四', '周四', '周四','周六']
</script>
</body>
</html>
2.242、filter 数组变少的时候用 例如：我只要数组中的偶数。
- 一张 图解决 你的 难题。
这个是不是有点像三元运算符？！是的，三元运算符怎么理解这个就怎么理解。也可以简写的。就是不要问号后面的东西。
2.243、reduce 多变1 一般是指计算。
第一种计算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num = [1, 2, 3, 4, 5, 6];
let sum = 0;
let one = num.reduce((sum, num2) => {
return sum + num2
}, 0);
console.log(one);
//这串代码 和 这样的for 循环是 等价的。
for (let i = 0; i < num.length; i++) {
sum += num[i];
}
console.log('sum的值是' + sum);
</script>
</body>
</html>
第二种筛选并计算。
第一种解法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [1, 2, 3, 4, 5, 6];
//筛选步骤 之前的数是空数组 而 现在的数是arr数组。
//之前的数 和 现在的数，是可以写任意的变量。
let one = arr.reduce((之前的数, 现在的数) =>
之前的数.concat(现在的数 % 2 === 0 ? 现在的数 : []), [])
console.log('筛选出来的数是' + one);
// 计算步骤
// item 呢 是 one[] 这个数组。这个数组之前筛选过了所以里面只有2 4 6
//sum和item，是可以写任意的变量。
let sum2 = one.reduce((sum, item) => {
return sum + item
},0)//最后的这个0 等价于sum=0
console.log('计算出的总和为' + sum2);
</script>
</body>
</html>
第二种解法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let scores = [95, 91, 59, 55, 42, 82, 72, 85, 67, 66, 55, 91]
let sum2 = scores.reduce((sum, n) => {
return n % 2 === 1 ? sum + n : sum
}, 0)
console.log(sum2) // 奇数之和：598
</script>
</body>
</html>
5866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
