Array 数组
1. 数组简介
- 数组的定义：
- 数组是一组数据的集合，在内存中是一段连续的内存空间。
- 数组的特点：
- 数组定义时可以无需指定数组长度
- 存储数据是无需指定具体类型，可以存储任意类型
2. 数组的创建方式
-
使用 new Array() 构造函数
-
<script> // 通过 new Array() 创建数组 var a = new Array(); console.log(a); // [] console.log(a instanceof Array); // true </script>
-
-
注意：括号里面参数可以有参数，若为一个数字，表示该数组的长度，如果为多个数字或者一个（多个）非数字表示的是传递数组中应该包含的值。
-
使用数组字面量
-
<script> // 通过字面量方式创建 var b = []; console.log(b); // [] console.log(b instanceof Array); // true </script>
-
3. 数组添加元素的方式
<script>
// 1. 在定义的时候给数组添加元素
var c = ["hello", "world", false, 10];
console.log(c); // ['hello', 'world', false, 10]
// 2. 通过 push 的方式进行添加
var d = new Array();
d.push("a", "b", "c");
console.log(d); // ['a', 'b', 'c']
</script>
4. 获取数组元素的个数
<script>
var a = [10, 20, 30, 4, 42, 41];
// 获取数组的长度 length 属性
console.log(a.length); // 6
</script>
5. 获取数组中的元素
<script>
var a = ["hello", "world", "JavaScript", "HTML", "CSS"];
// 获取数组中的某一个元素的时候需要数组的下标（位置） 下标是从0开始的
console.log(a[0]); // hello
console.log(a[1]); // world
// 通过下标既可以获取元素也可以修改元素的内容
a[1] = "Vue";
console.log(a[1]); // Vue
console.log(a); // ['hello', 'Vue', 'JavaScript', 'HTML', 'CSS']
</script>
6. 属性和方法的区别
<script>
// 1. 属性可以直接赋值 或者 获取值
// 2. 属性在使用（赋值） 通过 = 进行赋值
var a = ["a", "b", "c"];
a.length = 10;
console.log(a.length); // 10
console.log(a); // ['a', 'b', 'c', empty × 7]
// 方法(函数)只能被调用 通过调用的方式进行操作
// 3. 方法通过 ()
a.push(10); // 调用
</script>
7. 数组中的方法
7.1 join()
- join(separator)：将数组的元素组起一个字符串，以 separator 为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：及分隔符。
<script>
var a = ["a", "b", "c", "d"];
// 以传入的参数作为字符串的拼接方式 并且返回一个字符串
// 不传入参数 将会默认以逗号的方式进行拼接 并且返回一个字符串
var d = a.join();
console.log(d); // a,b,c,d
var b = a.join("-");
console.log(b); // a-b-c-d
var c = a.join("@");
console.log(c); // a@b@c@d
</script>
7.2 push() 和 pop()
-
push()：可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
<script> var a = ["a", "b", "c", "d"]; // 添加 可以传入任意数量的参数 并且返回数组的长度 var length = a.push("f", "e", "g", "z", "k"); // 返回数组的长度 console.log(length); // 9 console.log(a); // ['a', 'b', 'c', 'd', 'f', 'e', 'g', 'z', 'k'] </script> -
pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。
<script> var a = ["a", "b", "c", "d"]; // 删除 不接受参数 并且返回被移除的数据 var del = a.pop(); console.log(del); // d console.log(a); // ['a', 'b', 'c'] </script> -
注意：pop() 里面有没有参数，都是删除最后一项。
7.3 sort()
-
sort()：按升序排列元素 —— 即最小的值位于最前面，最大的值排在最后面。
-
在排序时，sort() 方法会调用每个元素的 toString() 转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值，sort() 方法比较的也是字符串。
<script> // 数组进行排序 转化成字符串 var a = [10, 2, 30, 22, 9, 7]; var b = a.sort((a, b) => { return a - b; }); console.log(b); // [2, 7, 9, 10, 22, 30] </script>
7.4 reverse()
-
reverse()：反转数组项的顺序。
<script> var a = [10, 30, 9, 7, 6, 20]; var b = a.reverse(); console.log(b); // [20, 6, 7, 9, 30, 10] </script>
7.5 concat()
-
concat()：将参数添加到原数组。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat() 方法传递参数的情况下，它只是复制当前数组并返回副本。
<script> // 数组的合并 返回一个新的数组 var a = ["a", "b", "c"]; var b = ["d", "e", "f"]; var c = a.concat(10, b); console.log(c); // ['a', 'b', 'c', 10, 'd', 'e', 'f'] // 不传递参数 将直接复制a var d = a.concat(); console.log(d); // ['a', 'b', 'c'] </script> -
注意：传入的不是数组，则直接把参数添加到数组后面，如果传入的是数组，则将数组中的各个项添加到数组中。
7.6 slice()
-
slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice() 方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情形下，slice() 方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项 —— 但不包括结束位置的项。
-
只设置了一个参数，则为起始下标，返回数组下标（包括下标）到数组最后
-
设置了两个参数，返回起始下标（包括下标）到终止下标（不包括终止下标）的数组
-
设置了两个参数，终止下标为负数，将负数加上数组长度来替换该位置的数
-
两个参数都是负数，都加上数组长度转换成正数
<script> var a = ["a", "b", "c", "d"]; // 当只有一个参数(起始位置) 返回从起始位置到数组结束的所有元素 组成一个新数组 var arr1 = a.slice(1); console.log(arr1); // ['b', 'c', 'd'] // 当只有两个参数 返回从start到end位置的所有元素 组成一个新的数组 但是不包含end位置上的元素 var arr2 = a.slice(1, 3); console.log(arr2); // ['b', 'c'] // 当有两个参数 end的值为负数 则会与数组的长度进行相加 然后在返回新的数组 var arr3 = a.slice(1, -2); // 相当于 var arr3 = a.slice(1, -2 + a.length); console.log(arr3); // ['b'] // 当有两个参数 start 和 end 都为负数 则都会与数组的长度相加 返回新的数组 var arr4 = a.slice(-3, -2); console.log(arr4); // ['b'] // 当strat为负数 var arr5 = a.slice(-3); console.log(arr5); // ['b', 'c', 'd'] </script>
7.7 splice()
-
splice()：很强大的数组方法，它有很多种用法，可以删除、插入和替换。
-
删除：可以删除任意数量的项，只需指定 2 个参数：第一个参数（删除位置），第二个参数（删除个数），第二个参数可选，没有会从下标开始删除到数组结束。
-
插入：第一个参数（插入位置），第二个参数（0），第三个参数（插入的任意数量的元素）。
-
替换：第一个参数（替换位置），第二个参数（删除的个数），第三个参数（插入任意数量的元素）。
<script> var a = ["a", "b", "c", "d"]; // 删除 a.splice(index, num) index下标 num删除的个数 当删除的个数为空，则删除开始到数组结束的位置 var b = a.splice(1, 2); console.log(b); // ['b', 'c'] console.log(a); // ['a', 'd'] var a1 = ["a", "b", "c", "d"]; var c = a1.splice(1); console.log(c); // ['b', 'c', 'd'] console.log(a1); // ['a'] // 插入 var a2 = ["a", "b", "c", "d"]; // 插入 a2.splice(index,0,元素1,元素2,...) var d = a2.splice(1, 0, "f", "g", "h"); console.log(d); // [] console.log(a2); // ['a', 'f', 'g', 'h', 'b', 'c', 'd'] // 替换 a3.splice(index,num,元素1,元素2,...) var a3 = ["a", "b", "c", "d"]; var e = a3.splice(1, 1, "n", "x"); console.log(e); // ['b'] 被替换的数组元素 console.log(a3); // ['a', 'n', 'x', 'c', 'd'] </script>
7.8 indexOf() 和 lastIndexOf()
-
indexOf()：接收两个参数：要查找的元素和（可选的）表示查找起点位置的索引。省略第二个参数从数组的开头（位置 0 ）开始向后查找。
-
lastIndexOf()：接收两个参数：要查找的元素和（可选的）表示查找起点位置的索引。省略第二个参数从数组的末尾开始向前查找。
<script> // indexOf('元素') 从头开始查找元素在本数组中第一次出现的位置 如果查到就返回对应的下标 查不到就返回-1 var a = ["a", "b", "c", "d"]; var cIndex = a.indexOf("c"); console.log(cIndex); // 2 var xIndex = a.indexOf("x"); console.log(xIndex); // -1 // lastIndexOf('元 素') 从末尾开始查找元素在本数组中第一次出现的位置 如果查到就返回对应的下标 查不到就返回-1 var b = ["o", "p", "y", "t"]; var yIndex = b.lastIndexOf("y"); console.log(yIndex); // 2 var zIndex = b.lastIndexOf("z"); console.log(zIndex); // -1 </script>
8. 数组的遍历方式
<script>
// 循环 重复的做一件事情
// var i = 0 赋初始值
// i > 10 做为循环的终止条件
// i++ 改变初始值
// 循环体 被循环的内容
for (var i = 0; i < 10; i++) {
console.log(i);
}
var a = ["a", "b", "c", "d"];
// 普通 for 循环遍历数组
for (var i = 0; i < a.length; i++) {
console.log(a[i]);
}
// 使用for-in遍历数组 a被遍历的数组 index下标 in从数组a中进行遍历
for (var index in a) {
console.log(a[index]);
}
// 遍历对象
var obj = {
name: "张三", // key:value key表示属性的名称 value表示属性值
age: 18,
sex: "男",
};
for (var key in obj) {
// console.log(key);
// 某些情况我们的属性值是动态的 不能通过.的方式进行获取或者赋值 则需要通过：对象[属性]
console.log(key + ":" + obj[key]);
}
</script>
9. 数组的迭代方法 - forEach()
-
ECMAScript 为数组定义了五个迭代方法，每个方法都接收两个参数：要在每一项上面运行的函数和运行该函数的作用域 —— 影响 this 的值。传入这些方法的函数会接收三个参数（元素，索引，数组本身）。
-
forEach() 对数组的每一项运行给定函数，该方法没有返回值。
<script> var array = ["a", "b", "c", "d", "e", "f"]; // forEach 遍历数组 对数组进行遍历 // forEach 需要一个函数作为参数 这个函数通常情况下叫做回调函数 // 这个回调函数会产生三个参数 // 第一个参数 item 是被遍历的元素 // 第二个参数 index 是下标 // 第三个参数 arr 是数组本身 array.forEach((item, index, arr) => { console.log(item, index, arr); }); </script>
10. 数组的迭代方法 - some() 和 every()
-
some() 对数组中的每一项运行给定函数，如果该函数对任一项返回 true，则返回 true
-
every() 对数组中的每一项运行都给定函数，如果该函数对每一项都返回 true，则返回 true
<script> var arr = [ { name: "张三", age: 20, }, { name: "李四", age: 18, }, { name: "王五", age: 22, }, { name: "赵六", age: 55, }, ]; // some 方法 // 只要有一个满足条件 则结果就为 true // 所有年龄都大于25 var result = arr.some((item, index, arr) => { return item.age > 25; }); console.log(result); // true // every 方法 // 只要有一个不满足条件 则结果就为 false // 所有年龄都大于25 var consequence = arr.every((item, index, arr) => { return item.age > 25; }); console.log(consequence); // false </script>
11. 数组的迭代方法 - filter()
-
filter()：对数组的每一项运行给定函数，返回该函数会返回 true 的元素组成的数组
-
注意：对新数组变化不会影响原数组的改变
<script> var arr = [ { name: "张三", age: 20, }, { name: "李四", age: 18, }, { name: "王五", age: 22, }, { name: "赵六", age: 55, }, ]; // .filter() 方法 返回符合条件的组成一个新的数组 // 得到年龄大于18的组成一个新的数组 var result = arr.filter((item, index, arr) => { return item.age > 18; }); console.log(result); </script>
12. 数组的迭代方法 - map()
-
map()：对数组的每一项运行给定函数，返回每次函数调用结果所组成的数组
-
可以对数组做集中处理
<script> var arr = [ { name: "张三", age: 20, }, { name: "李四", age: 18, }, { name: "王五", age: 22, }, { name: "赵六", age: 55, }, ]; // .map() 方法 可以对数组做批量处理 // 获得所有的姓名 var names = arr.map((item, index, arr) => { return item.name; }); console.log(names); // ['张三', '李四', '王五', '赵六'] // 所有年龄加1 var ages = arr.map((item, index, arr) => { item.age = item.age + 1; return item; }); console.log(ages); </script>
13. reduce() 和 reduceRight()
-
reduce() 和 reduceRight()，在两个方法都会迭代数组所有的元素，然后构建一个最终的值返回。
-
这两个方法都会接收两个参数：一个在每一项上面调用的函数和（可选）作为归并基础的初始值。
-
给 reduce 和 reduceRight 这两个方法的函数都会接收四个参数值：前一个值，当前值，索引，数组对象。
-
这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项。
-
reduceRight() 和 reduce() 使用一样，只不过是从后往前遍历。
<script> var arr = [ { name: "张三", age: 20, }, { name: "李四", age: 18, }, { name: "王五", age: 22, }, { name: "赵六", age: 55, }, ]; // .reduce() 方法 // 求出所有年龄的和 // 第一个参数是 pre 是上一次的计算结果 // 第二个参数是 el 数组的元素 // 第三个参数 index 是数组的下标 // 第四个参数 arr 是数组本身 var sum = arr.reduce((pre, el, index, arr) => { return (pre += el.age); }, 0); console.log(sum); </script>
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
