数组中常用的方法总结

console.log(arr.copyWithin(1,6)); //[0,6,7,8,9,5,6,7,8,9]

var arr = [0,1,2,3,4,5,6,7,8,9];

console.log(arr.copyWithin(5)); //[0,1,2,3,4,0,1,2,3,4]

5、every() 测试数组中所有的元素是否都通过了指定函数的测试

• 参数：arr.every(callback[, thisArg]) 第一个参数是需要执行的的函数，第二个参数是this。callback被传入三个参数，元素值，元素索引，原数组。

• 返回值：Boolean，不会改变原数组

function theMax(element, index, array){

return (element >= 10);

}

function yuygg(element){

return 0 > element+this.a;

}

var passed = [12,3,4,5,53,54,22,45,2];

var o = {a: -100}

console.log(passed.every(theMax)); //false

console.log(passed.every(yuygg,o)); //true

6、fill() 用一个固定的值填充一个数组从起始到终止索引内的全部元素（不包括终止元素）

• 参数：arr.fill(value[,start[,end]])

• 返回值：修改后的数组，会改变原数组

var arr1 = [0,1,2,3,4,5,6,7,8];

console.log(arr1.fill(‘a’, 2,7)); //[0,1,‘a’,‘a’,‘a’,‘a’,‘a’,7,8]

var arr3 = [0,1,2,3,4,5,6,7,8];

console.log(arr3.fill(‘b’)); //[‘b’,‘b’,‘b’,‘b’,‘b’,‘b’,‘b’,‘b’,‘b’];

7、filter() 创建一个新数组，包含了通过测试的所有元素

• 参数：arr.filter(callback[,thisAge]); 第一个参数为执行函数，第二个是函数的this

callback被传入三个参数，元素值，元素索引，原数组

• 返回值：新数组，不会改变原来的数组

8、find() 返回数组中满足函数测试的第一个值

• 参数：arr.find(callback[, thisArg])

• 返回值：有一个符合则返回该值，反之返回undefined 不会改变原数组

var arr = [1,2,3,4,5,6];

function nfewr(element){

return element%2 == 0;

}

console.log(arr.find(nfewr)); //2

9、findIndex() 和find()有一些类似，该函数返回的是符合条件的索引

10、flat() 深度遍历数组，并将所有元素与遍历道德子数组中的元素合并为一个新元素返回

• 参数：depth 深度

• 返回值：返回一个新数组，不改变原有的数组

var m = [1,2,[3,4,[5,6,7]]];

console.log(m.flat()); //[1,2,3,4,[5,6,7]];

console.log(m.flat(3)); // [1,2,3,4,5,6,7]

11、flatMap() 将结果压缩成一个新的数组

• 参数: callback(currentValue)

• 返回值：返回一个新的数组，深度为1

var m = [1,2,3,4];

function fun1(currentValue){

return [[currentValue*2]];

}

console.log(m.flatMap(fun1)); //[[1],[2],[3],[4]]

var arr2 = [“你好呀”,“”",“一起出去玩吧！”];

console.log(arr2.flatMap((x)=>x.split(“”))); //[“你”, “好”, “呀”, “一”, “起”, “出”, “去”, “玩”, “吧”, “！”]

12、forEach() 对数组中的每个元素执行一次提供的函数

• 参数：arr.forEach(callback[, thisArg]) ;

• 返回值：undefined 不会改变原数组

var arr = [1,2,3,4];

function fun2(item){

console.log(item*2);

}

console.log(arr.forEach(fun2));

13、includes() 判断数组是否包含一个指定的值，如果存在，返回true，反之false

• 参数：arr.include(valueToFind[, fromIndex]) 第二个参数是从该位置开始查找

• 返回值：

var arr = [1,2,3,4,5];

console.log(arr.includes(8)); //false

console.log(arr.includes(1,3)); //false

高阶

1、 concat 用于连接俩个或俩个以上数组，并保留引用

var num1 = [1,2,3];

var num2 = [4,5,6];

var num3 = num1.concat(num2); //[1,2,3,4,5,6]

num1.push(5);

console.log(num4); // [1,2,3,4,5,6] 合并基本类型不会改变num3

var arr1 = [[1,2,3],4,5];

var arr2 = [5,6];

var arr3 = arr1.concat(arr2); // [[1,2,3],4,5,5,6];

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

[外链图片转存中…(img-t6Za2nTW-1719252510606)]

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-gG4LjRiA-1719252510608)]