前端JS面试题----数组相关

常用的数组方法

数组的基本操作，可从用于增删查、用于排序、用于迭代(遍历)几个方面进行记忆

增加元素

• push() 向数组中添加元素

let colors = ["yellow"]; 
colors.push("red", "green"); // 添加元素
console.log(colors ) // [ 'yellow','red', 'green' ]

• unshift() 向数组开头添加元素

let colors = ["yellow"]; 
colors.unshift("red", "green"); // 从数组开头位置处添加
console.log(colors ); // [ 'red', 'green', 'yellow' ]

• splice()(开始位置，要删除元素的数量，插入的元素) 传入三个参数，该方法既可用于添加元素，也可以删除元素。

let num1 = [1,2,3,4,5]
let num2 = [1,2,3,4,5]
let num3 = [1,2,3,4,5]
num1.splice(0,2) // 返回[1,2]
num2.splice(3) // 返回[4,5]
num3.splice(2,1,'h','i') //返回[3]，原数组nums3为[1,2,'h','i',4,5]

• concat() 数组的拼接，不会影响原始数组

let colors = ["red", "green"];
let colors2 = colors.concat("yellow", ["black"]);
console.log(colors); // ["red", "green"]
console.log(colors2); // ["red", "green", "yellow", "black"]

注意：push()、unshift()、splice()方法均在原数组上直接修改，concat()则不会改变原始数组。

删除元素

• pop() 删除数组的最后一项元素
• shift() 删除数组的第一项元素
• splice() (开始位置，删除的元素数量)，返回被删除的元素
• slice() 删除数组中的一个或者多个元素，并构成新的数组返回

let colors = ["red", "green", "blue", "yellow", "purple"];
let colors2 = colors.slice(1);
let colors3 = colors.slice(1, 4);
console.log(colors)   // [ 'red', 'green', 'blue', 'yellow', 'purple' ]
console.log(colors2); //[ 'green', 'blue', 'yellow', 'purple' ]
console.log(colors3); // [ 'green', 'blue', 'yellow' ]

注意：pop()、shift()、splice()方法均在原数组上直接修改，slice()则不会。

查找元素

• indexOf() 返回要查找的元素在数组中的位置，如果没有找到返回-1

 let numbers = [1,2,3,4,5,4,3,2,1]
 numbers.indexOf(4) //3

• includes() 判断数组中是否含有查找的元素，找到返回true，否则返回false

 let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
 numbers.includes(4) // true

• find() 返回第一个匹配的元素
  • 参数 (currentValue, index, arr)，其中currentValue为必需的，当前元素；index为可选，当前元素的索引值；arr为可选，当前元素所属的数组对象

 const people = [
     {
         name: "Matt",
         age: 27
     },
     {
         name: "Nicholas",
         age: 29
     }
 ];
 people.find((element, index, array) => element.age < 28) // // {name: "Matt", age: 27}

注意：indexOf()、includes()、find() 方法不会改变原始数组

排序方法

数组有两个方法可以用来对元素重新排序：

• reverse() 将数组进行反转
• sort() 接受一个比较函数，用于判断哪个值应该排在前面

 function compare(value1, value2) {
     if (value1 < value2) {
         return -1;
     } else if (value1 > value2) {
         return 1;
     } else {
         return 0;
     }
 }
 let values = [0, 1, 5, 10, 15];
 values.sort(compare);
 alert(values); // 0,1,5,10,15

注意：sort()、reverse() 方法会改变原始数组

转换方法

常见的转换方法有：join()

• join()方法接收一个参数，即字符串分隔符

let colors = ["red", "green", "blue"];
alert(colors.join(",")); // red,green,blue
alert(colors.join("||")); // red||green||blue

注意：join()方法不会改变原始数组

迭代（遍历）方法

常用来迭代数组的方法(都不改变原数组)有如下：

• some()
  • 对数组每一项都运行传入的函数，如果有一项函数返回 true ，则这个方法返回 true

  let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
  let someResult = numbers.some((item,index,array)=>item>2);
  console.log(someResult) // true
  

• every()
  • 对数组每一项都运行传入的函数，如果对每一项函数都返回 true ，则这个方法返回 true

  let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
  let everyResult = numbers.every((item, index, array) => item > 2);
  console.log(everyResult) // false
  

• forEach()
  • 对数组的每一项都运行传入的函数，没有返回值

  let numbers = [1,2,3,4,5,4,3,2,1]
  numbers.forEach((item,index,array)=>{
    //执行某些操作
  })
  

• filter()
  • 对数组每一项都运行传入的函数，函数返回true的项会组成数组之后返回

  let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
  let filterResult = numbers.filter((item, index, array) => item > 2);
  console.log(filterResult); // 3,4,5,4,3
  

• map()
  • 对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组

  let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
  let mapResult = numbers.map((item, index, array) => item * 2);
  console.log(mapResult) // 2,4,6,8,10,8,6,4,2
  

• reduce()

---

坚持每天复习一点点js的内容。