前端面试题（第一弹）——数组

前言提示

找数组的某一项使用find方法，但注意如果多个item条件成立，只返回第一项。
找数组的多项符合条件使用filter，返回数组，不改变元数组。

keys()、values()、entries()

在ES6中，Array的原型上暴露了三个方法keys()、values()、entries(),它们分别返回索引的迭代器、数组元素的迭代器、索引/值对的迭代器。

var arr = ["a","b","c","d"];
var arrKey = arr.entries();

console.log(arrKey);
// Array Iterator {}

const b =  Array.from(arrKey);
//通过from方法可以将迭代器实例化为数组

console.log(b);
// (4) [Array(2), Array(2), Array(2), Array(2)]
//0: (2) [0, 'a']
//1: (2) [1, 'b']
//2: (2) [2, 'c']
//3: (2) [3, 'd']

//通过es6的结构赋值和遍历很容易拆分键值对
var arri = []
var arre = []
for (const [index,elements] of b) {
    arri.push(index)
    arre.push(elements)
}

console.log(arri)
// (4) [0, 1, 2, 3]

console.log(arre)
// (4) ['a', 'b', 'c', 'd']

Array 方法

tostring()

var arr = [1,2,3,4];
var a = arr.toString();
console.log(a)
console.log(typeof a) 
 // 1,2,3,4
 // string

push() pop() shift() unshift()

var arr = ["b","c","d"];
arr.push("e");
arr.unshift("a")
console.log(arr)
(5) ['a', 'b', 'c', 'd', 'e']

var arr = ["a","b","c","d"];
var item1 = arr.pop()
var item2 = arr.shift()
console.log(arr)
console.log(item)
console.log(item2)
 // (2) [ 'b', 'c']
 // "d"
 // "a"

reverse() sort()

var arr = ["a","b","c"];
var rArr = arr.reverse(); 
console.log( rArr ) 
// (3) ['c', 'b', 'a']

//sort 方法会按照数值的字符串形式排序
var arr = [1,15,20,30,4];
var arr2 = arr.sort();
console.log(arr2);
//(5) [1, 15, 20, 30, 4]

//所以我们在使用sort方法排序时 需要传入一个function
var arr = [1,15,20,30,4];

function compare(value1,value2) {
    if(value1 > value2) {
        return 1 ;
    }else if (value1 < value2) {
        return -1 ;
    }else {
        return 0;
    } 
}
var arr2 = arr.sort(compare);
console.log(arr2);
// (5) [1, 4, 15, 20, 30]

slice() 和 splice()

slice() 用来切分数组已达到截取效果，参数一个或两个（为索引值）

var arr = [1,2,3,4,5];
var result = arr.splice(1);
console.log(result)

// (4) [2, 3, 4, 5]
undefined
var arr = [1,2,3,4,5];
var result = arr.splice(1,3);
console.log(result)

// (3) [2, 3, 4]

splice()可以传入两个或者多个参数，splice（one，two，three…）one：开始位置 two：删除个数 three…
插入的新Element 可以是多个。通过这个方法可以完成数组删除、插入、替换的功能。

var arr = ["red","black","blue"];
var spliceResult = arr.splice(0,1,"yellow","pink")
console.log(arr);
console.log(spliceResult);
// (4) ['yellow', 'pink', 'black', 'blue']
// ['red']

indexOf() lastIndexOf() includes()

var numbers = [1,2,3,4,5,4,3,2];
var arr1 = numbers.indexOf(3);
var arr2 = numbers.lastIndexOf(3);
var booL = numbers.includes(6);
console.log(arr1)
console.log(arr2)
console.log(booL)
 //2
// 6
 //false

filter() find() findIndex() fill()

find() 返回的是符合的第一个元素，findIndex（）返回的是此元素的索引值 传入的是function

var arr = [1,2,3,4];
var result =  arr.find((item,index,array) => item > 2)
var result2 =  arr.findIndex((item,index,array) => item > 2)

console.log(result)
console.log(result2)
// 3
// 2

filter（） 传入的必须是function，可以用简单的箭头函数内部写逻辑条件

var arr = [2,2,1,2,3,4];
var result = arr.filter((item)=> item > 2 );
console.log(result)
// (2) [3, 4]

fill() 用来填充数组

var arr = new Array(5);
var result = arr.fill(3);
console.log(result)
// (5) [3, 3, 3, 3, 3]

every() some() forEach() map()

every() some()用来判断数组，返回boolean

var arr = [1,2,3,5,8,6];
alert( arr.some((item) => item > 6))  //true
alert(arr.every((item) => item > 6))  //false

forEach() map()

var arr = [1,2,3,5,8,6];
alert( arr.map((item) => item * 2))
//2,4,6,10,16,12
arr.forEach((item) => console.log(item))
//依次输出

循环方法for in 和 for of 的区别

for in 和 for of 都可以循环数组，for in 输出的是数组的index下标，而for of 输出的是数组的每一项的值。

const arr = [a,b,c,d]
 
// for ... in
for (const key in arr){
    console.log(key) // 输出 0,1,2,3
    }
 
// for ... of
for (const key of arr){
    console.log(key) // 输出 a,b,c,d
    }

for in 可以遍历对象，for of 不能遍历对象，只能遍历带有iterator接口的，例如Set,Map,String,Array

const object = { name: 'lx', age: 23 }
    // for ... in
    for (const key in object) {
      console.log(key) // 输出 name,age
      console.log(object[key]) // 输出 lx,23
    }
 
    // for ... of
    for (const key of object) {
      console.log(key)
   // 报错 Uncaught TypeError: object is not iterable

————————————————

const list = [{ name: 'lx' }, { age: 23 }]
    for (const val of list) {
      console.log(val) // 输出{ name: 'lx' }, { age: 23 }
      for (const key in val) {
        console.log(val[key]) // 输出 lx,23
      }
    }

总结：for in适合遍历对象，for of适合遍历数组。for in遍历的是数组的索引，对象的属性，以及原型链上的属性。

数组扁平化 + 去重的几种方法

数组扁平化

第一种 递归

var  result = [];
function arrFlat(arr) {
    for (const item of arr) {
        if(Array.isArray(item)) {
            arrFlat(item)
        }else {
            result.push(item)
        }
    }
    return result;
}
arrFlat([1,2,[3,[4]]])
// [1, 2, 3, 4]

第二种：arr原生方法flat() 加infinity 表示多层扁平

不加的话默认就是只能将二维嵌套的数组进行扁平化

[1,2,[3,[4]]].flat(Infinity);
//(4) [1, 2, 3, 4]

第三种： es6的扩展运算符能将二维数组变为一维

利用这个特点我们可以实现对数组的扁平化

[].concat(...[1, 2, 3, [4, 5]]); 
 // [1, 2, 3, 4, 5]
 
function arrFlat (arr) {
    while (arr.some((item) => Array.isArray(item))) {
        arr = [].concat(...arr)
    }
    return arr;
}
arrFlat([1,2,[3,[4]]])
//(4) [1, 2, 3, 4]

第四种： 利用toString() split() map()

[1,2,[3,[4]]].toString()
//'1,2,3,4'

'1,2,3,4'.split(",")
//(4) ['1', '2', '3', '4']

['1', '2', '3', '4'].map((item) => Number(item))
//(4) [1, 2, 3, 4]
function arrFlat (arr) {
    return arr.toString().split(",").map((item) => Number(item));
}

第五种： 利用reduce（）

function flatten(arr) {  
    return arr.reduce((result, item)=> {
        return result.concat(Array.isArray(item) ? flatten(item) : item);
    }, []);
}
flatten([1,2,[3,[4]]])
//(4) [1, 2, 3, 4]

数组去重

1.利用includes() 方法 不包含返回-1特性 + 迭代

function removeDuplicates (arr) {
   let result= []
   for( let item of arr) {
    	result.includes(item) ? result : result.push(item)
   }
   return result;
}

2.使用双层for循环的方法

function removeDuplicates (arr) {
	let result = [];
	for (let i =0; i<arr.length; i++) {
		let flag = true
	  for (let j =0; i<arr.length; j++) {
	    result[i] === arr[i] ? flag = false : flag
	  }
	  if(flag) { result.push(arr[i]) }
	}
	return result;
}

3.for + indexof

var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
    // 数组去重：
   
    function newArrFn (arr) {
      let newArr = []
      for(let item of arr){
        newArr.indexOf(item) === -1 ? newArr.push(item) : newArr
      };
      return newArr
    }
    console.log(newArrFn(arr));

4.for + sort

var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
    // 数组去重：
	function compare (num1,num2) {
		if(num1 > num2) {
		    return 1;
		}else if (num1 < num2) {
		   return -1;
		}else {
		   return 0;
        }
	}
	
    function newArrFn (arr) {
      arr = arr.sort(compare )
      let newArr = []
      for(let i = 0;i<arr.length;i++){
        arr[i] === arr[i-1] ? newArr : newArr.push(arr[i])
      };
      return newArr
    }
    console.log(newArrFn(arr));

5.Set

var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
    function newArrFn (arr) {
      // .new Set方法，返回是一个类数组，需要结合 ...运算符或者form（）方法，转成真实数组
      return ([...new Set(arr)])
      //return (Array.from(new Set(arr)) )
    }
    console.log(newArrFn(arr));

6.filter + indexOf

var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
    // 数组去重：
    // filter 过滤 配合 indexOf 查找元素
    // indexOf()方法 返回的是第一项查找到的值
    function newArrFn (arr) {
      return arr.filter((item, index) => 
        arr.indexOf(item) === index
      )
    }
    console.log(newArrFn(arr));

数组常见问题

随机排序

var child = [-3,1,5,10,100,1000];
 function a () {
    return Math.random() - 0.5
}
child.sort(a);
console.log(child)

数组值求和

var a=[4,5,6,7,8]
//item代表一次回调的值 初始值为0
//cart代表当前元素的值
//index当前下标
//arr原数组
var num=a.reduce((item,cart,index,arr)=>{
    return item+=cart
},0)
//初始值为0

console.log(num) //输出为30

从数组中获取随机值

var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”];

var randomColor = colors[(Math.floor(Math.random() * (color.length)))]

数组转对象

let fruits = ["banana", "apple", "orange", "watermelon"];

let fruitsObj = {...fruits};

console.log(fruitsObj) // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”}

映射数组

let friends = [
    { name: 'John', age: 22 },
    { name: 'Peter', age: 23 },
    { name: 'Mark', age: 24 },
    { name: 'Maria', age: 22 },
    { name: 'Monica', age: 21 },
    { name: 'Martha', age: 19 },
]

let friendsNames = Array.from(friends, ({name}) => name)

console.log(friendsNames) //returns ["John", "Peter", "Mark", "Maria", "Monica", "Martha"]