版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
欢迎大家去我的个人技术博客看看，点赞收藏注册的都是好人哦~
https://xiaowu.xyz
一、数组的拓展方法
关于数组的拓展方法，我们需要关心两个地方。
1. 方法的返回值
2. 是否改变原数组 (有的是直接改变原数组 有的是形成新的数组)
数组中 元素的 增删改 查
push() 在数组尾部添加一个或多个元素
返回值 新增元素后数组的长度
是否改变原数组 改变
var list = [54, 68, 46, 75, 36, 20, 65, 11, 79, 45];
console.log(list); // [54, 68, 46, 75, 36, 20, 65, 11, 79, 45]
var result = list.push("x", "y", "z"); // 可以使用数组的递增赋值来实现list[list.length]
console.log(result); // 13
console.log(list); // [54, 68, 46, 75, 36, 20, 65, 11, 79, 45, "x", "y", "z"]
unshift() 在数组头部添加一个或多个元素
返回值 新增元素后数组的长度
是否改变原数组 改变
var list = [54, 68, 46, 75, 36, 20, 65, 11, 79, 45];
console.log(list);
var result = list.unshift("x", "y", "z");
console.log(result); // 13
console.log(list); // ["x", "y", "z", 54, 68, 46, 75, 36, 20, 65, 11, 79, 45]
pop() 删除数组尾部的元素
返回值 被删除的元素
是否改变原数组 改变
var list = [54, 68, 46, 75, 36, 20, 65, 11, 79, 45];
console.log(list);
var result = list.pop();
console.log(result); // 45
console.log(list); // [54, 68, 46, 75, 36, 20, 65, 11, 79]
shift() 删除数组首部的元素
返回值 被删除的元素
是否改变原数组 改变
var list = [54, 68, 46, 75, 36, 20, 65, 11, 79, 45];
console.log(list);
var result = list.shift();
console.log(result); // 54
console.log(list); // [68, 46, 75, 36, 20, 65, 11, 79, 45]
splice() 增删改
删除
splice(startIndex,n) 从下标为 startIndex的位置开始 删除n 个元素
返回值 被删除的元素 形成新的的数组
是否改变原数组 改变
var list = [54, 68, 46, 75, 36, 20, 65, 11, 79, 45];
console.log(list);
var result = list.splice(5, 2);
console.log(result); // 54
console.log(list); // [68, 46, 75, 36, 20, 65, 11, 79, 45]
新增
splice(startIndex,0,item1,item2,item3 ... itemN) 从下标为 startIndex的位置开始 删除0 个元素,再增加一个或多个元素
返回值 []
是否改变原数组 改变
var list = [54, 68, 46, 75, 36, 20, 65, 11, 79, 45];
console.log(list);
var result = list.splice(5, 0, "x", "y");
console.log(result); // []
console.log(list); // [54, 68, 46, 75, 36, "x", "y", 20, 65, 11, 79, 45]
修改
splice(startIndex,n,item1,item2,item3 ... itemN) 从下标为 startIndex的位置开始 删除n 个元素,再增加一个或多个元素
返回值 被删除的元素 形成新的的数组
是否改变原数组 改变
var list = [54, 68, 46, 75, 36, 20, 65, 11, 79, 45];
console.log(list);
var result = list.splice(5, 1, 50);
console.log(result); // [20]
console.log(list); // [54, 68, 46, 75, 36, 50, 65, 11, 79, 45]
slice(startIndex,endIndex) [startIndex,endIndex) 数组的裁切 (将数组中的某一段 拿出来)
startIndex 起始下标 startIndex默认为0
endIndex 结束下标 endIndex 默认值是length
返回值 被裁切的元素形成的新数组
是否改变原数组 不改变
var list = [54, 68, 46, 75, 36, 20, 65, 11, 79, 45];
console.log(list);
var result = list.slice(3, 6);
console.log(list.slice()); // [54, 68, 46, 75, 36, 20, 65, 11, 79, 45]
console.log(result); // [75, 36, 20]
console.log(list); // [54, 68, 46, 75, 36, 20, 65, 11, 79, 45]
concat() 数组的拼接/合并 (如果参数是单个元素 直接拼接到新数组中去 如果参数是数组的话,会把数组的元素合并到新数组中)
返回值 拼接后形成的新数组
是否改变原数组 不改变
var list = [54, 68, 46, 75, 36, 20, 65, 11, 79, 45];
console.log(list);
var arr = ["a", "b", "c"];
var result = list.concat("x", "y", arr);
console.log(result); // [54, 68, 46, 75, 36, 20, 65, 11, 79, 45, "x", "y", "a", "b", "c"]
console.log(list); // [54, 68, 46, 75, 36, 20, 65, 11, 79, 45]
reverse() 数组的翻转/反转
返回值 反转后的原数组
是否改变原数组 改变
var list = ["a", "b", "c", "d", "e", "f"];
console.log(list);
var result = list.reverse();
console.log(result); // ["f","e","d","c","b","a"];
console.log(list); // ["f", "e", "d", "c", "b", "a"]
includes() 包含 判断数组中是否包含某个元素 包含返回 true 不包含返回 false
var list = ["a", "b", "c", "d", "e", "f"];
var result = list.includes("f1"); // false
console.log(result);
console.log(list);
indexOf() 包含 判断数组中是否包含某个元素 包含就返回该元素的下标 不包含返回 -1
var list = ["a", "b", "c", "d", "e", "f"];
var result = list.indexOf("f1"); // -1
console.log(result);
console.log(list);
join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
返回值 拼接后的字符串
是否改变原数组 不改变
var arr = new Array(3);
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
console.log(arr.join(',')) //George,John,Thomas
数组的方法进阶：
sort() 数组的排序
1. 字符排序
2. 纯数字排序
var list = [5, 1, 8, 3, "a", 11, "B", 22, " ", 0, "今天", 12, 36, "A", 44, 4];
console.log(list); // [5, 1, 8, 3, "a", 11, "B", 22, " ", 0, "今天", 12, 36, "A", 44, 4]
1. 字符/字母 排序 跟数字的大小没有关系 跟 ASCII码表有关
" " 32
0 48
A 65
a 97
var list = [5, 1, 8, 3, "a", 11, "B", 22, " ", 0, "今天", 12, 36, "A", 44, 4];
var result = list.sort();
console.log(result); // [" ", 0, 1, 11, 12, 22, 3, 36, 4, 44, 5, 8, "A", "B", "a", "今天"]
console.log(list); // [" ", 0, 1, 11, 12, 22, 3, 36, 4, 44, 5, 8, "A", "B", "a", "今天"]
2.纯数字排序
var list = [5, 1, 8, 3, 11, 22, 12, 36, 44, 4];
var result = list.sort(function (a, b) {
// console.log(a, b);
return b - a;
// return a-b; 从小到大排
// return b-a; 从大到小排
})
console.log(result); // [44, 36, 22, 12, 11, 8, 5, 4, 3, 1]
forEach 遍历数组
var list = [5, 9, 26, 3, 86, 52, 7, 5, 15, 48];
list.forEach(function (item, index, array) {
// item 每次循环的当前元素
// index 每次循环的下标
// array 原数组
console.log(index, item, array);
})
map 遍历数组 回调函数可以设置一个返回值 map 会将 回调函数的返回值 存到一个新的数组中 返回出来
返回一个新数组
var list = [5, 9, 26, 3, 86, 52, 7, 5, 15, 48];
var result = list.map(function (item, index, array) {
console.log(index, item, array);
return item + index;
});
console.log(result); // [5, 10, 28, 6, 90, 57, 13, 12, 23, 57]
筛选
filter 遍历数组 回调函数可以返回一个条件 把满足条件的数据 筛选出来 放到一个新数组中
var list = [5, 9, 26, 3, 86, 52, 7, 5, 15, 48, 0];
var result = list.filter(function (item, index, array) {
return item < 50;
})
console.log(result); // [5, 9, 26, 3, 7, 5, 15, 48, 0]
some 遍历数组 回调函数可以返回一个条件 只要有一个元素满足该条件 则返回true 都不满足返回false
var list = [5, 9, 26, 3, 86, 52, 7, 5, 15, 48, 0];
var result = list.some(function (item, index) {
return item >= 60;
})
console.log(result); // true
every 遍历数组 回调函数可以返回一个条件 所有的条件都满足才会返回true 只要有一个不满足则返回false
var list = [5, 9, 26, 3, 86, 52, 7, 5, 15, 48, 0];
var result = list.every(function (item, index) {
return item >= 1;
})
console.log(result); // false
判断数组是否是数组
1、instanceof 判断对应数据是否是通过 构造函数 Array 创造出来的 (说法不准确) 是 返回 true 不是 返回false
console.log(arr instanceof Array); // true
console.log(document instanceof Array); // false
console.log("" instanceof Array); // false
console.log([] instanceof Array); // true
2. Array.isArray() 构造函数的静态方法 (构造函数本身 Array 自己调用) 是 返回 true 不是 返回false
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(1)); // false
console.log(Array.isArray(document)); // false