六、JS数组[Array]
ES5/数组
什么是数组？
字面理解就是 数字的组合
其实不太准确，准确的来说数组是一个 数据的集合
也就是我们把一些数据放在一个盒子里面，按照顺序排好
1
[1， 'HJ', true, { name: "特兰克斯" }, [666]]; // 可以有 数字、字符串、布尔值、对象、数组
创建一个数组
语法：数组就是一个
[]，在[]里面存储着各种各样的数据，按照顺序依次排好1
2
3
4/* 字面量的方式创建一个数组 */
var arr = []; // 创建一个空数组
var brr = [1, 2, 3]; // 创建一个有内容的数组1
2
3
4
5/* 使用 `js` 的内置构造函数 `Array` 创建一个数组 */
var arr1 = new Array(); // 创建一个空数组
var arr2 = new Array(10); // 创建一个长度为 10 的数组
var arr3 = new Array(1, 2, 3); // 创建一个有内容的数组
数组的长度 length
length: 长度的意思，数组里面有多少个成员，length就是多少1
2var arr = ["小明", "小红", "小樱"]; // 创建一个数组
console.log(arr.length); // 3
数组的索引
索引，也叫做下标，是指一个数据在数组里面排在第几个的位置
注意： 在所有的语言里面，索引都是从 0 开始的，在
js里面也一样，数组的索引从 0 开始1
2
3
4// 创建一个数组
var arr = ["小明", "小樱"];
console.log(arr[0]); // 小明
console.log(arr[1]); // 小樱
数据类型之间存储的区别（栈内存&堆内存）
- 既然我们区分了基本数据类型和复杂数据类型，那么他们之间就一定会存在一些区别，他们最大的区别就是在存储上的区别，我们的存储空间分成两种 栈 和 堆
- 栈： 主要存储基本数据类型的内容
- 堆： 主要存储复杂数据类型的内容
基本数据类型在内存中的存储情况
var num = 100，在内存中的存储情况直接在 栈空间 内有存储一个数据
1
2
3
4
5
6
7/* 基本数据类型在内存追踪存储情况： */
）在栈内存中开辟一个存储空间，把数据存储倒空间中
/* 复杂数据类型在内存中存储情况： */
）在堆里面开辟一个存储空间
）把数据存储到存储空间内
）把存储空间的地址赋值给栈里面的变量
数据类型之间的比较
基本数据类型是 值 之间的比较
1
2
3var num = 1;
var str = "1";
console.log(num == str); // true复杂数据类型是 地址 之间的比较
1
2
3
4var obj1 = { name: "Jack" };
var obj2 = { name: "Jack" };
console.log(obj1 == obj2); // false- 因为我们创建了两个对象，那么就会在 堆空间 里面开辟两个存储空间存储数据（两个地址）
- 虽然存储的内容是一样的，那么也是两个存储空间，两个地址
- 复杂数据类型之间就是地址的比较，所以
obj1和obj2两个变量的地址不一样 - 所以我们得到的就是
false
数组的常用方法（API）
push、pop、shift、unshift、slice、splice、concat、join、sort、reverse、every、some、filter、map、forEach、reduce、indexOf、lastIndexOf、lastIndexOf
push是用来在数组的末尾追加一个元素1
2
3var arr = ["小明", "小红"];
arr.push("小樱");
console.log(arr); // ['小明', '小红', '小樱']pop是用来删除数组末尾的一个元素1
2
3var arr = ["小明", "小红", "小樱"];
arr.pop("小樱");
console.log(arr); // ['小明', '小红']shift是在数组的最前面添加一个元素1
2
3var arr = ["小明", "小红"];
arr.shift("小樱");
console.log(arr); // ['小樱', '小明', '小红']unshift是在数组的最前面删除一个元素1
2
3var arr = ["小明", "小红"];
arr.unshift("小樱");
console.log(arr); // ['小明', '小红']slice用于截取数组的某些内容，不会改变原数组，返回一个新数组- 语法：
slice(从哪一个索引位置开始，截取多少个)
1
2
3
4var arr = ["孙悟空", "贝吉塔", "特兰克斯", "比克大魔王"];
var newArray = arr.slice(); // ['孙悟空', '贝吉塔', '特兰克斯', '比克大魔王']
var newArray = arr.slice(0); // ['孙悟空', '贝吉塔', '特兰克斯', '比克大魔王']
var newArray = arr.slice(0, 2); // ['孙悟空', '贝吉塔']- 语法：
splice用于截取数组的某些内容，会改变原数组- 语法：
splice(从哪一个索引位置开始，截取多少个，替换的新元素)（第三个参数可以不写）
1
2
3
4
5
6var arr = ["孙悟空", "贝吉塔", "特兰克斯", "比克大魔王"];
arr.splice(); // []
arr.splice(0); // ['孙悟空', '贝吉塔', '特兰克斯', '比克大魔王']
arr.splice(0, 2); // ['孙悟空', '贝吉塔']
arr.splice(2, 1, "孙悟饭"); // ['孙悟空', '贝吉塔', '孙悟饭', '比克大魔王']
arr.splice(2, 1); // ['孙悟空', '贝吉塔', '孙悟饭']- 语法：
concat用于拼接合并数组，不会改变原数组1
2
3var arr = ["孙悟空"];
var brr = ["贝吉塔"];
var res = arr.concat(brr); // ['孙悟空', '贝吉塔']join用于把数组里面的每一项内容链接起来，变成一个字符串。不会改变原数组1
2
3
4var arr = ["html", "css", "js"];
var res1 = arr.toString(); // html,css,js
var res2 = arr.join(","); // html,css,js
var res3 = arr.join("|"); // html|css|jssort是用来给数组排序的，会改变原数组1
2var arr = [1, 2, 3, 5, 4];
var res = arr.sort((a, b) => a - b); // [1, 2, 3, 4, 5]reverse是用来反转数组使用的，会改变原数组1
2var arr = [1, 2, 3, 4, 5];
var res = arr.reverse(); // [5, 4, 3, 2, 1]every是用于数组判断元素中全部为真才返回 true，否则返回 false1
2
3
4
5
6
7
8
9var arr = [
{ name: "小明", age: 18 },
{ name: "小红", age: 19 },
{ name: "小英", age: 20 },
];
var status = arr.every(function (item, index, arr) {
return item.age > 17;
});
console.log(status); // truesome是用于数组判断元素中有一真就返回 true，否则返回 false1
2
3
4
5
6
7
8
9var arr = [
{ name: "小明", age: 18 },
{ name: "小红", age: 19 },
{ name: "小英", age: 20 },
];
var status = arr.some(function (item, index, arr) {
return item.age >= 20;
});
console.log(status); // truefilter，是用于指定条件过滤出数组想要的数据1
2
3
4
5
6
7
8
9var arr = [
{ name: "小明", age: 18 },
{ name: "小红", age: 19 },
{ name: "小英", age: 20 },
];
var res = arr.filter(function (item, index, arr) {
return item.age > 19;
});
console.log(res); // [{ name: "小英", age: 20 }]map，用于映射数组的每一项，可对每一项进行操作1
2
3
4
5
6
7
8
9
10
11/* 应用场景一：只想要名称和年龄 */
var arr = [
{ name: "小明", age: 18, sex: "男" },
{ name: "小红", age: 19, sex: "女" },
{ name: "小英", age: 20, sex: "女" },
];
var res = arr.map(function (item, index, arr) {
const { name, age } = item;
return { name, age };
});
console.log(res); // [ { name: "小明", age: 18 },...以此类推]forEach，用于遍历数组的每一项1
2
3
4
5
6var arr = ["前端", "后端"];
var brr = [];
arr.forEach((item, index, arr) => {
brr.push(item);
});
console.log(brr); // ['前端', '后端']reduce，方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55/* 应用场景：成绩求和 */
var arr = [
{ name: '张三', scoped: 50 },
{ name: '李四', scoped: 60 },
{ name: '王五', scoped: 70 }
]
const scopedSum = arr.reduce((total, currentValue, currentIndex, array) => {
return total += currentValue.scoped
}, 0)
console.log(scopedSum);
/* 应用场景： 统计某个值数组中出现的次数 */
var arr = [1, 2, 3, 4, 5, 6, 5, 7, 8, 9]
function arrayCount(array, item) {
return array.reduce((total, cur) => {
total += item == cur ? 1 : 0
return total;
}, 0)
}
console.log(arrayCount(arr, 5));
/* 应用场景：查看商品中价格最高的那个商品 */
var cart = [
{ name: 'iphone', price: 12000 },
{ name: 'imac', price: 5000 },
{ name: 'ipad', price: 3600 }
]
function maxPrice(goods) {
return goods.reduce(function(pre, cur) {
return pre.price > cur.price ? pre : cur;
})
}
console.log(maxPrice(cart
/* 应用场景：获取价格超过1万元商品的名称 */
var carts = [
{ name: 'iphone', price: 12000 },
{ name: 'imac', price: 25000 },
{ name: 'ipad', price: 3600 }
];
const goodsRes = carts.reduce((arr, cur) => {
if (cur.price > 10000) arr.push(cur);
return arr;
}, []).map((item) => item.name)
console.log('超过1W元的商品：', goodsRes);
/* 应用场景：数组去重 */
var repeArray = ['html', 'css', 'js', 'vue', 'js']
var repeNewArr = repeArray.reduce((arr, cur) => {
if (arr.includes(cur) === false) {
arr.push(cur);
}
return arr;
}, [])
console.log(repeNewArr);indexOf，用来找到数据中某一项的索引下标，找的内容不存在返回-11
2
3var arr = ["html", "css", "js", "node", "vue"];
var index1 = arr.indexOf("js"); // 2
var index2 = arr.indexOf("java"); // -1lastIndexOf，用来找到数组中某一项最后出现的索引下标，找的内容不存在返回 -11
2
3var arr = ["html", "css", "js", "node", "vue", "js"];
var index = arr.lastIndexOf("js"); // 5
var index = arr.lastIndexOf("java"); // -1
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 HJ BLOG！
