刷前端面经笔记（十）

1.数组方法

1） join() 把数组上午所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

该方法只接收一个参数，用作分隔符的字符串，然后返回包含所有数组项的字符串，如果不给 join() 方法传入任何值，则使用逗号作为分隔符。

var a = [1,2,3];
console.log(a.join());//'1,2,3'
console.log(a.join(' '));//'1 2 3'
console.log(a.join(''));//'123'
var b = new Array(10);
b.join('-');//'---------'，9个连字符组成的字符串

注意：如果 join() 方法的参数是 undefined ，标准浏览器以逗号为分隔符返回字符串，而IE7-浏览器以 "undefined" 为分隔符返回字符串；

如果数组中某一项的值是 null 或者 undefined ，则该值在 join() 方法返回的结果中以空字符串表示。

2） push() 方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并且返回修改后数组的长度。

var a = [];
console.log(a,a.push(1));//[1] 1
console.log(a,a.push('a'));//[1,'a'] 2
console.log(a,a.push(true, {}));//[1,'a',true,{}] 4
console.log(a,a.push([5,6]));//[1,'a',true,{},[5,6]] 5

3） pop() 方法从数组末尾移除最后一项，减少数组的 length ，然后返回移除的项。

var a = ['a', 'b', 'c'];
console.log(a,a.pop()); // ['a', 'b'] 'c'

var a = ['a', 'b', 'c'];
console.log(a,a.shift());//['b', 'c'] 'a'
var arr6 = [1];
console.log(arr6,arr6.shift()); //[] 1

注意：对空数组使用 shift() 方法，不会报错，而是返回 undefined
5） unshift() 方法在数组前面添加任意个项并返回新数组长度。

var a = ['a', 'b', 'c'];
console.log(a,a.unshift('x')); //['x', 'a', 'b', 'c'] 4

var array = [1,2,4,3,5];
console.log(array,array.reverse());//[5,3,4,2,1] [5,3,4,2,1]
var array = ['str',true,3];
console.log(array,array.reverse());//[3,true,'str'] [3,true,'str']

7） sort() 按照字符编码的顺序进行排序。 sort() 方法会调用每个数组项的 toString() 方法，然后比较得到的字符串排序，返回经过排序之后的数组，而原数组顺序也发生改变。

var array = [2,1,4,3,5];
console.log(array,array.sort());//[1,2,3,4,5] [1,2,3,4,5]
var array = ['3str',3,2,'2'];
console.log(array,array.sort());//[2, "2", 3, "3str"] [2, "2", 3, "3str"]

注意：如果数组包含 undefined 元素，它们会被排到数组的尾部；

arrayObject.sort(sortby) 参数可选。规定排序顺序。必须是函数。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0 ，如果第一个参数应该位于第二个之后则返回一个正数。

8） concat() 方法基于当前数组中的所有项创建一个新的数组，先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。所以 concat() 不影响原数组。

// 如果不给concat()方法传递参数时，它只是复制当前的数组；
var arr = [1,2,3];
console.log(arr,arr.concat()); //[1,2,3] [1,2,3]

// 如果参数是一个或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中；
console.log(arr,arr.concat([6,7,8],[77,33,44]));
//[1, 2, 3] [1, 2, 3, 6, 7, 8, 77, 33, 44]
var arr1 = [4,5,6];
console.log(arr,arr.concat(arr1)); //[1,2,3] [1,2,3,4,5,6]

// 如果传递的值不是数组，这些值就会被简单地添加到结果数组的末尾。console.log(arr,arr.concat(4,5));//[1,2,3] [1,2,3,4,5]
console.log(arr,arr.concat(4,[5,[6,7]]));
//[1,2,3] [1, 2, 3, 4, 5, [6,7]]

浅拷贝

如果不提供参数， concat() 方法返回当前数组的一个浅拷贝。

// 该方法实际只复制了数组的第一维。
// 数组第一维存放的是第二维的引用，而第二维才是实际存放他们的内容
var numbers = [1,2];
var newNumbers = numbers.concat();
console.log(numbers,newNumbers);//[1,2] [1,2]
numbers[0] = 0;
console.log(numbers,newNumbers);//[0,2] [1,2]
var numbers = [[1,2]];
var newNumbers = numbers.concat();
console.log(numbers,newNumbers);//[[1,2]] [[1,2]]
numbers[0][0] = 0;
console.log(numbers,newNumbers);//[[0,2]] [[0,2]]

var total = [0, 1, 2, 3].reduce(function(sum, value) {
  return sum + value;
}, 0);
// total is 6

reduceRight() 则从右到左执行对应的化简函数

14） map() 方法对数组中的每一项运行给定的函数，返回每次函数调用的结果组成的数组，

map 方法还可以接受第二个参数，表示回调函数执行时this所指向的对象。

15） forEach() 方法对数组中的每一项运行给定的函数，这个方法没有返回值。本质上和 for 循环迭代数组一样。如果需要有返回值，一般使用 map 方法。

forEach() 方法除了接受一个必须的回调函数参数，第二个参数还可以接受一个可选的上下文参数（改变回调函数里面的this指向）

array.forEach(callback(currentValue, index, array){
    //do something
}, this)

16） filter() 方法对数组中的每一项运行给定的函数，返回该函数会返回 true 的项组成的数组。该方法常用于查询符合条件的所有数组项。

filter() 方法还可以接受第二个可选的上下文参数（改变回调函数里面的 this 指向）

var arr= [1,10,20,30]
var brr = arr.filter((item)=>{
    return item>10;
})
//[20,30]

17） some() 方法对数组中的每一项运行给定函数，如果该函数对任一项返回 true ，则返回 true 。并且当且仅当数值中的所有元素调用判定函数都返回 false ，它才返回 false
注意：在空数组上调用 some() 方法会返回 false

const isBiggerThan10 = (element, index, array) => {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  
// false

[12, 5, 8, 1, 4].some(isBiggerThan10); 
// true

18） every() 方法对数组中的每一项运行给定函数，如果函数对每一项都返回 true ，则返回 true ；只要有一项返回 false ，则返回 false
19） fill() 方法，用一个固定值填充一个数组中起始索引到终止索引内的全部元素

arr.fill(value, start, end)
var numbers = [1, 2, 3]
numbers.fill(1);
// results in [1, 1, 1]

20） find() 方法返回数组中满足提供的测试函数的第一个元素的值

function isBigEnough(element) {
    return element >= 15;
    }
    [12, 5, 8, 130, 44].find(isBigEnough); // 130

21） findIndex() 方法返回数组中满足提供的测试函数的一个元素的索引

function isBigEnough(element) {
  return element >= 15;
}
[12, 5, 8, 130, 44].findIndex(isBigEnough); 
//'3'

22） includes() 方法用来判断一个数组是否包含一个指定的值，如果是，则返回 true ，如果没有则返回 false

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

23） toLocaleString() 方法返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号"，"）隔开

var number = 1337;
var date = new Date();
var myArr = [number, date, "foo"];
var str = myArr.toLocaleString(); 
console.log(str); 
// 输出 "1,337,2019/2/15 下午8:32:24,foo"

24） copyWithin(target,start,end) 方法浅复制数组的一部分到同一数组的另一个位置

25） Array.isArray() 方法用于确定传递的值是否是一个 Array

Array.isArray([]) => true;
    Array.isArray({}) => false;

26） Array.of()

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

arrayLike
想要转换成数组的伪数组对象或可迭代对象。

mapFn (可选参数)

如果指定了该参数，新数组中的每个元素会执行该回调函数。

thisArg (可选参数)

可选参数，执行回调函数 mapFn 时 this 对象。

返回值

一个新的数组实例

2.数组降维

方法一：

function flattenDeep(arr) {
        arr = "" + arr;  // 或者arr = arr.toString();

        arr = arr.split(",");
        arr = arr.map(Number)
        return arr;
    }
flattenDeep([1, [[2],[3, [4]], 5]]);

方法二：

function flattenDeep(arr) {
    if(!Array.isArray(arr))
        return [arr];
    return arr.reduce((prev,cur) => {        
        return [...prev, ...flattenDeep(cur)];
    },[]);
}

flattenDeep([1, [[2], [3, [4]], 5]]);

方法三：

function flattenDeep(arr){
    while(arr.some(item=>Array.isArray(item)){
        arr = [].concat(...arr);
    }
    return arr;
}