2.02.24 数组API
1.数组API
1.概念
2.常用API
Array.isArray(obj) 用于确定传递的值是否是一个 Array,返回布尔值。类似于isNaN()
Array.isArray([1, 2, 3]); // true
Array.isArray({foo: 123}); // false
Array.isArray("foobar"); // false
Array.isArray(undefined); // false
1.数组的插入与删除元素(会修改原数组)
push push(参数列表)
往数组尾部插入一个或多个元素,并返回该数组的新长度。会修改原数组 语法:
var animals = ['pigs', 'goats', 'sheep'];
var count = animals.push('cows');
console.log(count); // 4
console.log(animals); // ["pigs", "goats", "sheep", "cows"]
pop
删除数组最后一个元素,返回删除的元素,此方法更改数组的长度。会修改原数组 语法:
var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
console.log(plants.pop()); // "tomato"
console.log(plants); // ["broccoli", "cauliflower", "cabbage", "kale"]
plants.pop();
console.log(plants); // ["broccoli", "cauliflower", "cabbage"]
unshift unshift(参数列表)
方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。会修改原数组 语法:
var array1 = [1, 2, 3];
console.log(array1.unshift(4, 5));// 5
console.log(array1); // [4, 5, 1, 2, 3]
shift
方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。会修改原数组 语法:
var array1 = [1, 2, 3];
const firstElement = array1.shift();
console.log(array1);// [2, 3]
console.log(firstElement);// 1
2.数组的裁切
slice slice(start [, end] );
返回数组的片段或子数组,从start开始到end(不包括end所对应的元素) 如果省略end参数,则截取到数组的最后一项。不会影响原数组 语法:
var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2)); // ["camel", "duck", "elephant"]
console.log("animals => "+ animals); // animals => ant,bison,camel,duck,elephant
console.log(animals.slice(2, 4)); // ["camel", "duck"]
console.log(animals.slice(1, 5)); // ["bison", "camel", "duck", "elephant"]
console.log("" +animals.slice(-4, -2));//["bison", "camel"] 负数的话会倒着切,从最后一个元素为-1开始数起
splice splice(start [,length [, 参数列表]]);
数组裁切:从数组的start下标裁切,裁切length 个 元素。该方法会影响原数组,返回值为切下来的数组 语法:
1.一个参数 只有一个参数,则作为开始下标,切到数组结束
var arr=["0李白","1赵云","2露娜","3典韦","4鲁班","5安琪拉","6牛魔王"];
var i =arr.splice(2);
console.log("i=> "+i); //i=> 2露娜,3典韦,4鲁班,5安琪拉,6牛魔王
console.log("arr=> "+arr); //arr=> 0李白,1赵云
2.两个参数 由两个参数,第一个参数作为下标,第二个参数作为裁切的元素个数
var arr=["0李白","1赵云","2露娜","3典韦","4鲁班","5安琪拉","6牛魔王"];
var i =arr.splice(2,3);
console.log("i=> "+i); //i=> 2露娜,3典韦,4鲁班
console.log("arr=> "+arr); //arr=> 0李白,1赵云,5安琪拉,6牛魔王
3.多个参数 如果有多个参数,用其他参数替换被切割的元素
var arr=["0李白","1赵云","2露娜","3典韦","4鲁班","5安琪拉","6牛魔王"];
var i =arr.splice(2,3,"妲己","小乔");
console.log("i=> "+i); //i=> 2露娜,3典韦,4鲁班
console.log("arr=> "+arr); //arr=> 0李白,1赵云,妲己,小乔,5安琪拉,6牛魔王
var arr=["0李白","1赵云","2露娜","3典韦","4鲁班","5安琪拉","6牛魔王"];
var i =arr.splice(2,0,"妲己","小乔");
console.log("i=> "+i); //i=>
console.log("arr=> "+arr); //arr=> 0李白,1赵云,妲己,小乔,2露娜,3典韦,4鲁班,5安琪拉,6牛魔王
4.负数的情况
var arr=["0李白","1赵云","2露娜","3典韦","4鲁班","5安琪拉","6牛魔王"];
var i = arr.splice(-2,2);
console.log("i=> "+i); //i=> 5安琪拉,6牛魔王
console.log("arr=> "+arr); //arr=> 0李白,1赵云,2露娜,3典韦,4鲁班
var arr=["0李白","1赵云","2露娜","3典韦","4鲁班","5安琪拉","6牛魔王"];
var i = arr.splice(-2,-2);
console.log("i=> "+i); //i=>
console.log("arr=> "+arr); //arr=> 0李白,1赵云,2露娜,3典韦,4鲁班,5安琪拉,6牛魔王
3.查找元素(不会影响数组)
indexOf indexOf(要查找的元素[,指定下标]);
从数组中查找指定元素,找得到返回下标,找不到返回-1 ,给了指定下标就从指定下标开始查找元素,该方法不会影响原数组。如果提供的索引值为负数,则将其作为距数组末尾的偏移量。注意:如果提供的索引为负数,则仍然从前向后搜索数组。 (与string的API不一样,stringAPI中,索引值为负数,等价于索引值=0) 语法:
var arr = ["貂蝉", "王昭君", "貂蝉", "大乔", "小乔", "西施"];
console.log("arr =>", arr);
// 1 indexOf(要查找的元素[, 指定下标]) 从数组中查找指定元素, 找得到返回下标, 找不到返回-1
// 从数组中, 查找"小乔", 找得到返回下标
var i = arr.indexOf("小乔");
console.log("i =>", i); // i => 4
// 从数组中, 查找"司马懿", 找不到返回-1
var j = arr.indexOf("司马懿");
console.log("j =>", j); //j => -1
console.log("arr =>"+ arr); //arr =>貂蝉,王昭君,貂蝉,大乔,小乔,西施
// 2 如果指定下标(可以为负数), 则从指定的下标开始 从前往后查找元素
i = arr.indexOf("貂蝉", 3);
console.log("i =>", i);// i => -1
lastIndexOf lastIndexOf(要查找的元素[,指定下标]);
从后往前在数组中查找指定元素,找得到返回下标,找不到返回-1 ,给了指定下标就从指定下标开始从后往前在查找元素。该方法不会影响原数组。如果提供的索引值为负数,则将其作为距数组末尾的偏移量。注意:如果提供的索引为负数,则仍然从前向后搜索数组。 (与string的API不一样,stringAPI中,索引值为负数,等价于索引值=0) 语法:
var arr = ["貂蝉", "王昭君", "貂蝉", "大乔", "小乔", "西施"];
console.log("arr =>", arr);
// 1 lastIndexOf(要查找的元素[, 指定下标]); 从后往前在数组中查找指定元素, 找得到返回它在数组中的下标, 找不到返回-1
// 从后往前, 在数组中, 查找"王昭君", 找得到返回它在数组中的下标
var i = arr.lastIndexOf("王昭君");
console.log("i =>", i); // i => 1
// 从后往前, 在数组中, 查找"司马懿", 找不到返回-1
var j = arr.indexOf("司马懿");
console.log("j =>", j); //j => -1
// 2 如果指定下标, 则从指定的下标开始, 从后往前查找指定元素
i = arr.lastIndexOf("小乔", 3);
console.log("i =>", i); //i => -1
// 3 从后找与从前找的区别
i = arr.indexOf("貂蝉")
j = arr.lastIndexOf("貂蝉")
console.log("i =>", i); // i => 0
console.log("j =>", j); // j => 2
4.其他
sort([回调函数])
方法用原地算法对数组的元素进行排序,并返回排序后的数组。 他会影响原数组 他可以给一个回调函数作为参数,回调函数用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。如果指明了回调函数,那么数组会按照调用该函数的返回值排序。
回调函数:把函数作为参数传递,这样的函数就是回调函数 语法:
var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);// ["Dec", "Feb", "Jan", "March"]
var months = ['March', 'Jan', 'Feb', 'Dec'];
var i=months.sort();
console.log(i);// ["Dec", "Feb", "Jan", "March"]
var array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);//[1, 100000, 21, 30, 4]
var array2 = [1, 30, 4, 21, 100000];
array1.sort(function (a, b) {
return a - b;
// a > b 返回值大于零 a放在后面
// a < b 返回值小于零 a放在前面
// 该函数保证数字小的排在前面 实现 数字数组升序排列
});
console.log(array2); // [1,4,21,30, 100000]
var array3 = [1, 30, 4, 21, 100000];
array1.sort(function (a, b) {
return b - a;
// a > b 返回值小于零 a放在前面
// a < b 返回值大于零 a放在后
// 该函数保证数字大的排在前面从而实现数字数组降序序排列
});
console.log(array3); // [100000, 30, 21, 4, 1]
//复杂数据结构:
var data = [
{name:"学生1",score:90},
{name:"学生2",score:60},
{name:"学生3",score: 80},
{name:"学生4",score:70},
{name:"学生5",score:85}
];
//比如:取出学生2的分数?
// data[1].score ;// 60
//思考一下:如何根据学生分数进行排序?
data.sort( function(a,b){
return a.score - b.score;
})
console. log(data);
//可以通过下面的做法打乱数组顺序:
var arr = [10, 30,40, 50, 60,70];
arr.sort (function(){
//根据随机小数和0.5相减的结果作为条件打乱原数组arr的顺序。
//每一次输出的数组顺序都不一样
return Math.random() - 0.5;
})
//控制台输出
console.log("arr => "+ arr);
join(参数)
join(连接符)数组连接成字符串 有返回值 不会影响原数组 语法:
var arr = ["俄罗斯","乌克兰","三个方向","高达"];
console.log("arr => " + arr); //arr => 俄罗斯,乌克兰,三个方向,高达
// (1) join() 把数组的每一项连接成字符串,默认以逗号作为连接符
var i = arr.join();
console.log("i =>", i); //i => 俄罗斯,乌克兰,三个方向,高达
// (2) join("连接符") 用连接符把数组的每项连接成字符串
var j = arr. join("--");
console.log("j =>",j); //j => 俄罗斯--乌克兰--三个方向--高达
console.log("arr => " + arr); //arr => 俄罗斯,乌克兰,三个方向,高达
reverse()
反转 有返回值,返回被反转过后的新数组 会影响原数组 语法:
var arr= [1,2,1,3,8];
var i = arr.reverse();
console.log(arr); // [8, 3, 1, 2, 1]
console.log(i); // [8,3,1, 2,1]
concat()
连接一个或多个数组 有返回值,会返回连接后的新数组 不影响原数组 语法:
var arr1 = ["甲", "乙", "丙", "丁"];
var arr2 = ["辰", "巳", "午", "未"];
var arr3 = ["临", "兵", "斗", "者"];
var i=arr1.concat(arr2);
console.log("arr1 => " +arr1); //arr1 => 甲,乙,丙,丁
console.log("i => " +i); //i => 甲,乙,丙,丁,辰,巳,午,未
i=arr1.concat(arr2,arr3,"不","知","到");
console.log("i => " +i); //i => 甲,乙,丙,丁,辰,巳,午,未,临,兵,斗,者,不,知,到
5.数组的枚举
forEach( fn(数组项, 下标,原数组) )循环数组
没有返回值 不影响原数组 参数为一个函数(回调函数) 语法:
var arr = ["g","z","2","2", "0", "5"];
console.log("arr =>",arr);
var res = arr.forEach( function (v, i, arr) {
// console.log("v =>",v); // 数组的每一项 控制台返回:v => g v => z v => 2 v => 2 v => 0 v => 5
// console.log("i =>", i);//数组的下标 控制台返回:i => 0 i => 1 i => 2 i => 3 i => 4 i => 5
console.log("arr =>", arr); //原数组 控制台打印6次 ['g', 'z', '2', '2', '0', '5']
})
console. log(res); //undefind
console.log("arr =>",arr);//['g', 'z', '2', '2', '0', '5']
filter( fn(数组项,下标,原数组) )过滤
有返回值 不影响原数组 参数为一个函数(回调函数) 过滤函数:在回调函数中做测试, 测试通过(返回 true)的被保留,不通过的不保留,返回保留下来的元素组成的新数组 语法:
var arr = [3, 60, 5, 19, 33, 42];
console.log("原数组 =>", arr);
var i = arr.filter( function(v, i, arr){
// 过滤的逻辑,这里写一切你想要的逻辑
if(v % 2 == 0){
// 返回true的元素 表示通过测试, 会被保留下来
return true;
}
} )
console.log("arr =>", arr); // [3, 60, 5, 19, 33, 42]
console.log("i =>", i); // [60, 42]
map( fn(数组项,下标,原数组) )映射
有返回值 不影响原数组 参数为一个函数(回调函数) 映射函数: 用数组的每一项, 在回调函数中做处理, 返回处理过后的新数组 语法:
var arr = [3, 60, 5, 19, 33, 42];
var i = arr.map( function(v,i,arr){
// 映射的逻辑,这里写一切你想要的逻辑
return v*2;
})
// 返回被处理后的新数组
console.log(i);[6, 120, 10, 38, 66, 84]
2.理解回调函数
回调函数:把函数作为参数传递,这样的函数就是回调函数 要知道函数作为参数传过去,函数本身不会运行,要等接受该函数参数的方法去调用该函数,该函数才会生效
// 自己封装一个forEach函数
//封装myForEach(数组,回调函数)
function myForEach(array, fn){
for(var i=0; i<array.length; i++){
fn(array[i], i, array);
}
}
// 调用方法
myForEach(arr, function(a,b,c){
console.log(a);
console.log(b);
console.log(c);
})