推荐文章:
VUE之VUEX常见面试题大全汇总–史上最全【vuex面试题】
JavaScript数组的常用方法总结:遍历,复制,反转,排序,添加,删除(前端常见面试题必考必问
20212022最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
前端面试题汇总资料: 需要资料的同学可以给我留言
正文:
1. Array.push()
向数组的末尾添加一个或多个元素,并返回新的数组长度。原数组改变。
一个:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=fruits.push("Kiwi");
console.log(fruits)//(5) ["Banana", "Orange", "Apple", "Mango", "Kiwi"]
console.log(x)//5 x是 新的数组长度
多个:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=fruits.push("Kiwi","Java");
console.log(fruits) //(6) ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Java"]
console.log(x) // 6 x是 新的数组长度
2. Array.unshift(),
向数组的开头添加一个或多个元素,并返回新的数组长度。原数组改变。
let arr = [1, 2, 3, 4, 5]
arr.unshift(6, 7)
console.log(arr) //[6, 7, 1, 2, 3, 4, 5]
console.log(arr.length) //7
VM509:3 (7) [6, 7, 1, 2, 3, 4, 5]
VM509:4 7
3.pop()
删除并返回数组的最后一个元素,若该数组为空,则返回undefined。原数组改变。
pop() 方法从数组中删除最后一个元素。
pop() 方法的返回值是已删除的项目。
let arr = [1, 2, 3, 4, 5]
let r=arr.pop()
console.log(arr) //[1, 2, 3, 4]
console.log(arr.length) //4
console.log(r)
VM561:3 (4) [1, 2, 3, 4]
VM561:4 4
VM561:5 5//删除的是5
4.Array.shift(),
删除数组的第一项,并返回第一个元素的值。若该数组为空,则返回undefined。原数组改变。
let arr = [1, 2, 3, 4, 5]
let r=arr.shift()
console.log(arr) //[2, 3, 4, 5]
console.log(arr.length) //4
console.log(r)
VM581:3 (4) [2, 3, 4, 5]
VM581:4 4
VM581:5 1
5.find()
find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行:
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组,函数是不会执行的。
注意: find() 并没有改变数组的原始值。
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
console.log(ages.find(checkAdult));
console.log(ages);
VM109:7 18
VM109:8 (4) [3, 10, 18, 20]
资料:
JavaScript find() 方法
6.Array.concat(arr1,arr2…),
合并两个或多个数组,生成一个新的数组。原数组不变。
let arr1 = [1, 2, 3]
arr2 = [4, 5]
let arr = arr1.concat(arr2)
console.log(arr)//[1, 2, 3, 4, 5]
VM590:4 (5) [1, 2, 3, 4, 5]
7.Array.join(),
将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号。
let arr = [1, 2, 3, 4, 5];
let str1 = arr.join('*')
let str2 = arr.join('-')
let str3 = arr.join('#')
console.log(str1)
console.log(str2)
console.log(str3)
VM739:5 1*2*3*4*5
VM739:6 1-2-3-4-5
VM739:7 1#2#3#4#5
8.Array.reverse(),
将数组倒序。原数组改变。
let arr=[1,2,3,4,5];
let newArr=arr. reverse();
console.log(newArr,arr)//newArr=[5,4,3,2,1]; arr=[5,4,3,2,1];
VM279:3 (5) [5, 4, 3, 2, 1] (5) [5, 4, 3, 2, 1]
9.Array.sort(),
对数组元素进行排序。按照字符串UniCode码排序,原数组改变。
默认:
let arr=[2,3,5,1,4];
let newArr=arr.sort();
console.log(newArr,arr)//newArr=[1,2,3,4,5]; arr r=[1,2,3,4,5]
VM263:3 (5) [1, 2, 3, 4, 5] (5) [1, 2, 3, 4, 5]
按照函数规则排序:
①从小到大
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
return a - b;
});
console.log(numbers);
②从大到小
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
return b - a;
});
console.log(numbers);
VM168:5 (5) [5, 4, 3, 2, 1]
③按照数组对象中的某个值进行排序
var arr = [
{name:'zopp',age:0},
{name:'gpp',age:18},
{name:'yjj',age:8}
];
function compare(property){
return function(a,b){
var value1 = a[property];
var value2 = b[property];
return value1 - value2;
}
}
console.log(arr.sort(compare('age')))
//打印结果:按照age排序
VM54:14
(3) [{…}, {…}, {…}]
0: {name: "zopp", age: 0}
1: {name: "yjj", age: 8}
2: {name: "gpp", age: 18}
length: 3
__proto__: Array(0)
10.Array.map(function),
var arr = ['a','b','c','d'];
arr.map(function(item,index,arr){ //参数含义同forEach
console.log(item);
console.log(index);
});
VM175:3 a
VM175:4 0
VM175:3 b
VM175:4 1
VM175:3 c
VM175:4 2
VM175:3 d
VM175:4 3
原数组的每一项执行函数后,返回一个新的数组。原数组不变。(注意该方法和forEach的区别)。
map和forEach的区别
map方法会返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
forEach方法返回值则永远是undefined。
11.Array.slice(start,end),
从start开始,end之前结束,不到end;如果不给end值,从start开始到数组结束。start可以给负值,-1表示数组最后位置,-2表示倒数第二个,以此类推,顾前不顾后。
在数组中添加删除或替换元素
splice();在任意位置添加或删除元素,返回删除或被替换的值,如果没有被删除或替换则返回空数组;
splice()方法会修改原数组的值;
只有一个值时,从当前位置删除到数组末尾
let arr=[1,2,3,4,5];
let num1=arr.splice(1)
console.log(num1,arr)//num1=[2,3,4,5];arr=[1];
VM390:3 (4) [2, 3, 4, 5] [1]
有两个值时,第一个值为删除的位置,第二个值为删除的个数;
let arr=[1,2,3,4,5]
let num1=arr.splice(2,3)//删除从索引值2开始的3个元素
console.log(num1,arr);// num1=[3,4,5],arr=[1,2]
VM183:3 (3) [3, 4, 5] (2) [1, 2]
有三个或者多个值时,第一个值为插入元素的位置,第二个值为替换的个数,后面的值都为插入的新元素;
let arr=[1,2,3,4,5]
let num2=arr.splice(2,1,6,7,8);//从索引值2开始替换掉1个元素,并且插入6,7,8
//如果第二个值为0,则不替换,直接插入6,7,8;
console.log(num2,arr);//被替换的值num2=[3]; arr=[1,2,6,7,8,4,5]
VM197:5 [3] (7) [1, 2, 6, 7, 8, 4, 5]
截取复制数组指定位置的内容
slice(开始位置,结束位置);第二个参数不写默认到尾部,只能从前往后截取;返回的值为截取到的内容形成的新数组;
let arr=[1,2,3,4,5]
let copyArr=arr.slice(); // slice()或者slice(0)都可以复制数组;
let newArr=arr.slice(1,3);//截取索引1到索引3(不包括3)的值;
console.log(newArr,arr,copyArr)//newArr=[2,3];arr=[1,2,3,4,5];
VM249:4 (2) [2, 3] (5) [1, 2, 3, 4, 5] (5) [1, 2, 3, 4, 5]
12.Array.splice(index,howmany,arr1,arr2…) ,
删除元素并添加元素,从index位置开始删除howmany个元素,并将arr1、arr2…数据从index位置依次插入。howmany为0时,则不删除元素。原数组改变。
参数 描述
index 必需。整数,指定在什么位置添加/删除项目,使用负值指定从数组末尾开始的位置。
howmany 可选。要删除的项目数。如果设置为 0,则不会删除任何项目。
arr1, …, arr2可选。要添加到数组中的新项目。
13.Array.forEach(function),
用于调用数组的每个元素,并将元素传递给回调函数。原数组不变。(注意该方法和map的区别,若直接打印Array.forEach,结果为undefined)。
var arr = [1, 3, 5, 13, 2];
var res = arr.forEach(function(item,index) {
console.log(`数组第${index+1}个元素是${item}`);
})
console.log(res);//forEach的返回值为undefined,
VM238:3 数组第1个元素是1
VM238:3 数组第2个元素是3
VM238:3 数组第3个元素是5
VM238:3 数组第4个元素是13
VM238:3 数组第5个元素是2
14.Array.filter(function),
过滤数组中,符合条件的元素并返回一个新的数组。
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
console.log(ages.filter(checkAdult))
VM57:6 (3) [32, 33, 40]
单一参数的单行箭头函数
如下段代码所示,很简单:
const fn= foo =>`${foo} world`;
这是箭头函数最简洁的形式,常用于用作简单的处理函数,如过滤。如下段代码所示:
let array=['a','bc','def','ghij'];
array=array.filter(item=>item.length>=2);
15.Array.every(function),
对数组中的每一项进行判断,若都符合则返回true,否则返回false。
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
every() 方法使用指定函数检测数组中的所有元素:
如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
如果所有元素都满足条件,则返回 true。
注意: every() 不会对空数组进行检测。
注意: every() 不会改变原始数组。
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
console.log(ages.every(checkAdult))
VM54:6 false
16.Array.some(function),
对数组中的每一项进行判断,若都不符合则返回false,否则返回true。
some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:
如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素,则返回false。
注意: some() 不会对空数组进行检测。
注意: some() 不会改变原始数组。
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
console.log(ages.some(checkAdult))
VM54:6 true
Array.every和Array.some的区别
方法区别
every() 每一项都返回true才返回true
some() 只要有一项返回true就返回true
17.Array.reduce(function),
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
let arr = [1, 2, 3, 4, 5]
const add = (a, b) => a + b
let sum = arr.reduce(add)
console.log(sum)
VM937:4 15
18.Array.isArray()
isArray() 方法用于判断一个对象是否为数组。
如果对象是数组返回 true,否则返回 false。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
console.log(Array.isArray(fruits))
VM78:3 true
19.Array.forEach()
var arr = [1, 3, 5, 13, 2];
var res = arr.forEach(function(item,index) {
console.log(`数组第${index+1}个元素是${item}`);
})
console.log(res);//forEach的返回值为undefined,
VM437:3 数组第1个元素是1
VM437:3 数组第2个元素是3
VM437:3 数组第3个元素是5
VM437:3 数组第4个元素是13
VM437:3 数组第5个元素是2
VM437:5 undefined //敲黑板——forEach()是没有返回值的!
20.Array.toString()
此方法将数组转化为字符串:
let arr = [1, 2, 3, 4, 5];
let str = arr.toString()
console.log(arr)
console.log(str)
VM680:3 (5) [1, 2, 3, 4, 5]
VM680:4 1,2,3,4,5
观察颜色:字符串和数字的颜色不同:
参考:
js数组常用方法整理
js中数组常用方法总结
js中forEach,for in,for of循环的用法和区别(一个比较神奇的例子)
JS中 reduce() 的用法
简述forEach()、map()、every()、some()和filter()的用法
自定义ES6提供的数组方法(forEach、filter、map、some、every、find、findIndex)