刷前端面经笔记（十）

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'

注意：给pop参数传其他数字不起作用，也不报错。还是只删除最后一项；
对空数组使用pop()方法，不会报错，而是返回undefined
4）shift()方法移除数组中的第一个项并返回该项，同时数组的长度减1

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

注意：当传入多个参数时，是一次性插入。最终的数组中插入的元素的顺序和它们在参数列表中的 顺序一致；
在IE-7浏览器中，unshift()方法的返回值总是undefined
6）reserve()方法用于反转数组的顺序，返回经过排序之后的数组；而原来数组的顺序也发生改变。

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]]

9）slice()方法基于当前数组中的一个或多个项创建一个新数组，接受一个或两个参数，最后返回新数组，所以slice()不影响原数组。
slice(start,end)方法需要两个参数start和end，返回这个数组从start位置到end位置(不包含)的一个子数组，左闭右开。
注意：a.如果end为undefined或不存在，则返回从start位置到数组结尾的所有项；
b.如果没有参数，则返回原数组，即返回当前数组的一个浅拷贝；
10）splice()方法用于删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员，该方法会改变原数组。
splice()返回一个由删除元素组成的数组，或者如果没有删除元素就返回一个空数组
splice(start,number...)的第一个参数start指定了插入或删除的起始位置，第二个参数number指定了应该从数组中删除的元素的个数，如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。
11）indexOf(search,start)方法接收search和start两个参数，返回search首次出现的位置，如果没有找到则返回-1，start代表从start位置开始寻找。
12）lastIndexOf(search,start)方法从右向左查找。
接收search和start两个参数，返回search第一次出现的位置，如果没有找到则返回-1
13）reduce()方法需要两个参数，第一个是执行化简操作的函数，化简函数的任务就是用某种方法把两个值组合或化简为一个值，并返回化简后的值。

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]

27）Array.from()
对伪数组或可迭代对象(包括arguments Array,Map,Set,String…)转换成数组对象
语法Array.from(arrayLike, mapFn, thisArg)

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;
}

欢迎关注