大家好,我是小材鸟,本篇博客将带你了解javascrpit数组所有方法,如果觉得本篇对你有帮助 的话,可以给博客点一个👍吗?谢谢🌹
定义数组
new Array(1,2,3,4,5,6,7,89,9) var a = [1,2,3,4,5,6,7,8,9]
数组中的方法:
push() | 向数组的最后添加一个或多个元素 | 返回数组的长度 |
unshift() | 向数组的开头添加一个或多个元素 | 返回新数组的长度 |
pop() | 删除数组的最后一位 | 返回被删除的数据 |
shift() | 移出数组的第一项 | 返回被删除的数据 |
reverse() | 反转数组的元素 | 返回反转后的新数组 |
sort() | 以字母的顺序对数组进行排序 | 返回新数组 |
splice() | 数组任意位置增删改 | 返回删除数据所组成的数组 |
concat() | 通过合并现有数组来创建一个新数组 | 返回合并后的数组 |
join() | 用特定的字符,将数组拼接成一个字符串 | 返回拼接后的字符串 |
slice() | 剪切指定位置的数组 | 被剪切的元素形成的数组 |
toString() | 将数组转换为字符串 | 字符串 |
valueOf() | 查询数组原始值 | 数组的原始值 |
indexOf() | 查询某个元素在数组中第一次数显的位置 | 存在该返回元素,返回下标,不存在则返回-1 |
lastIndexOf() | 反向查询数组某个元素在数组中第一次出现的位置 | 存在该元素,返回下表,不存在则-1 |
forEach | 遍历数组,每次循环中执行传入的回调函数 | 无返回值 |
map() | 遍历数组,每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组 | 有/自定义 |
filter() | 筛选出满足条件的元素放到新数组中 | 满足条件的元素组成的新数组 |
every() | 判断数组中所有的元素是否满足某个条件 | 全部满足返回true,只要有不满足的则返回false |
some() | 判断数组中是否存在,满足某个条件的元素 | 只要有一个满足则true,反之false |
reduce() | 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中 | 最终操作的结果 |
reduceRight() | 用法同reduce,只不过时从右向左 | 同reduce |
includes() | 判断一个数组是否包含一个指定的值 | 是返回true,否则false |
arrary.from() | 接收伪数组,返回对应的真数组 | 对应的真数组 |
find() | 返回满足条件的第一个函数,不存在则返回undefined | 满足条件第一个元素下标,不存在=>-1 |
fill() | 用给定值填充一个数组 | 新数组 |
flat() | 用于将嵌套的数组拉平,变成一堆的数组 | 返回一个新数组 |
flatMap() | flat()和map()的组合版,先通过map()返回一个新数组,再将数组拉平 | 返回新数组 |
var arr = [1, 2, "c"];
var rel = arr.push("A", "B");
console.log(arr); // [1, 2, "c", "A", "B"]
console.log(rel); // 5 (数组长度)
var arr = [1, 2, "c"];
var rel = arr.unshift("A", "B");
console.log(arr); // [ "A", "B",1, 2, "c"]
console.log(rel); // 5 (数组长度)
var arr = [1, 2, "c"];
var rel = arr.pop();
console.log(arr); // [1, 2]
console.log(rel); // c
var arr = [1, 2, 3, "a", "b", "c"];
var rel = arr.reverse();
console.log(arr); // ["c", "b", "a", 3, 2, 1]
console.log(rel); // ["c", "b", "a", 3, 2, 1]
var arr = ["a","b", "c"];
var rel = arr.shift();
console.log(arr); // ['b', "c"]
console.log(rel); // a
var arr1 = [10, 1, 5, 2, 3];
arr1.sort();
console.log(arr1);
//10,1,2,3,5,因为是根据unicode编码排序的所以不稳定
//重写sort方法
var arr = [10, 1, 5, 2, 3];
arr.sort(function (a, b) {
return a - b;
});
console.log(arr);
//1,2,3,5,10
var arr = ["a", "b", "c", 2, 3, 6];
var rel = arr.splice(2, 1, "add1", "add2");
console.log(arr); //原数组
//["a","b","add1","add2",2,3,6]
console.log(rel); //新数组
//["c"]
splice(index,howmany,item1,...,itemX)
//index:必须。整数,规定添加/删除项目的位置,可以用负数指定从结尾处起始
//howmany:必须,要删除的项目数量。如果设置为0,则不会删除项目
//item1...,item2:可选。向数组添加的新项目
var arr1 = [1, 2, 3];
var arr2 = ["a", "b", "c"];
var arr3 = ["A", "B", "C"];
var rel = arr1.concat(arr2, arr3);
console.log(arr1); //原数组
//[1,2,3]
console.log(rel); //新数组
//[1,2,3,"a","b","c","A","B","C"]
var list = ["a", "b", "c", "d"];
var result = list.join("-"); //"a-b-c-d"
var result = list.join("/"); //"a/b/c/d"
var result = list.join(""); //"abcd"
var result = list.join(); // a,b,c,d
var list = ["a", "b", "c", "d"];
var result = list.slice(1, 3);
console.log(result); // ["b", "c"]
//startIndex:起始下标,默认0
//endIndex:终止下标 默认值length,可以接收负数
var list = ["a", "b", "c", "d"];
var rel = list.toString();
console.log(rel); // a,b,c,d (字符串类型)
//直接将数组转换为字符串,并且返回转换后的新数组,不改变原数组,与join();方法不添加任何参数 相同.
var list = [1, 2, 3, 4];
var rel = list.valueOf();
console.log(list); // [1, 2, 3, 4]
console.log(rel); // [1, 2, 3, 4]
//返回数组的原始值(一般情况下其实就是数组自身)
var list = [1, 2, 3, 4];
var index = list.indexOf(4); //3
var index = list.indexOf("4"); //-1
console.log(index);
//查询某个元素在数组中第一次出现的位置 存在该元素,返回下标,不存在 返回 -1 (可以通过返回值 变相的判断是否存在该元素)
var list = [1, 2, 3, 4];
var index = list.lastIndexOf(4); //3
var index = list.lastIndexOf("4"); //-1
console.log(index);
//查询某个元素在数组中最后一次出现的位置 (或者理解为反向查询第一次出现的位置) 存在该元素,返回下标,不存在 返回 -1 (可以通过返回值 变相的判断是否存在该元素)
var list = [32, 93, 77, 53, 38, 87];
var res = list.forEach(function (item, index, array) {
console.log(item, index, array);
});
console.log(res);
//遍历数组,每次循环中执行传入的回调函数 。(注意: forEach() 对于空数组是不会执行回调函数的。) 没有返回值,或理解为返回值为undefined,不改变原数组.
//item:每次循环的当前元素, index:当前项的索引, array:原始数组;数组中有几项,那么传递进去的匿名回调函数就需要执行几次;
var list = [32, 93, 77, 53, 38, 87];
var sum = 0;
list.forEach(function (item) {
sum += item;
});
console.log(sum);
//380,计算总和的方法
var list = [32, 93, 77, 53, 38, 87];
var res = list.map(function (item, index, array) {
return item + 5 * 2;
});
console.log("原数组", list);
//[32, 93, 77, 53, 38, 87]
console.log("新数组", res);
//[42,103,87,63,48,97]
//map中参数为(v,k)
//遍历数组, 每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组 ,
//同forEach() 方法,但是map()方法有返回值,可以return出来;
var list = [32, 93, 77, 53, 38, 87];
var resList = list.filter(function (item, index, array) {
return item >= 60; // true || false
});
console.log(resList);
//[93,77,87]
//遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,把满足条件的元素筛选出来放到新数组中.
var list = [32, 93, 77, 53, 38, 87];
var result = list.every(function (item, index, array) {
console.log(item, index, array);
return item >= 50;
});
console.log(result);
//flase
//遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,全都满足返回true 只要有一个不满足 返回false => 判断数组中所有的元素是否满足某个条件
var list = [32, 93, 77, 53, 38, 87];
var result = list.some(function (item, index, array) {
return item >= 50;
});
console.log(result);
//true
//遍历数组, 每次循环时执行传入的回调函数,回调函数返回一个条件,只要有一个元素满足条件就返回true,都不满足返回false => 判断数组中是否存在,满足某个条件的元素
var arr = [2, 3, 4, 5];
var sum = arr.reduce(function (prev, item, index, array) {
return prev + item;
});
console.log(arr, sum);
//[2,3,4,5],14
//遍历数组, 每次循环时执行传入的回调函数,回调函数会返回一个值,将该值作为初始值prev,传入到下一次函数中, 返回最终操作的结果;
//reduce(callback,[initialValue])
//callback (执行数组中每个值的函数,包含四个参数)
//1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
//2、currentValue (数组中当前被处理的元素)
//3、index (当前元素在数组中的索引)
//4、array (调用 reduce 的数组)
//initialValue (作为第一次调用 callback 的第一个参数。)
let site = ['runoob', 'google', 'taobao'];
site.includes('runoob');
// true
site.includes('baidu');
// false
//用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
var all = {
0: "张飞",
1: "28",
2: "男",
3: ["率土", "鸿图", "三战"],
length: 4,
};
var list = Array.from(all);
console.log(list, Array.isArray(list));
["张飞","28","男",array(3)]
//将一个类数组对象或者可遍历对象转换成一个真正的数组
var list = [55, 66, 77, 88, 99, 100];
var res= list.find(function (item, index, array) {
return item > 60;
});
console.log(res); //66
//遍历数组 每次循环 执行回调函数,回调函数接受一个条件 返回满足条件的第一个元素,不存在则返回undefined
var list = [55, 66, 77, 88, 99, 100];
var index = list.findIndex(function (item, index, array) {
console.log(item, index, array);
return item > 60;
});
console.log(index); // 1
//遍历数组,执行回调函数,回调函数接受一个条件,返回满足条件的第一个元素下标,不存在则返回-
console.log(Array(100).fill(1).map((v,k)=>k+1).forEach(b=>a+=b))
//[1,2...,99,100]
//填充空数组,利用填充后的数组下标,达到生成100个数字
//finll(value,start,end)
//用给定值填充一个数组,将指定位置的元素全部替换为value
var list = [1, 2, [3, 4, [5]]];
var arr = list.flat(); // 默认拉平一次
console.log("拉平一次", arr);
//[1,2,3,4,array(1)]
var arr = list.flat(2); // 拉平2次
console.log("拉平两次", arr);
//[1,2,3,4,5]
//用于将嵌套的数组"拉平",变成一维的数组。该方法返回一个新数组,对原数据没有影响。
var list = [55, 66, 77, 88, 99, 100];
var newArr = list.map(function (item, index) {
return [item, index];
});
console.log("Map方法:", newArr);
//arrary(6):[55,0],[66,1],[77,2],[88,3],[99,4],[100,5]
var newArr = list.flatMap(function (item, index) {
return [item, index];
});
console.log("flatMap方法:", newArr);
//[55,1,66,1,77,2,88,3,99,4,100,5]
// flat()和map()的组合版 , 先通过map()返回一个新数组,再将数组拉平( 只能拉平一次 )
//map返回的新数组中会带着原数组下标
function unique(arr) {
let obj = {}
//定义一个空对象
let res = arr.filter(item => {
if (obj.hasOwnProperty(typeof item + item)) {//obj.hasOwnProperty检测这个属性是否在该对象中
//
return false
} else {//如果不在该对象中则在该对象中创建一个这样的属性,以便下次遇见相同的值,就可以跳过
obj[typeof item + item] = true
return true
}
})
return res
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0,'a', 'a',{},{}];
console.log(unique(arr))