vue社区之---前端面试（前端中的那些方法）

不良使

已于 2022-06-26 15:40:09 修改

阅读量1k

点赞数 44

分类专栏：前端文章标签：前端 vue.js javascript

于 2022-05-10 23:17:15 首次发布

本文链接：https://blog.csdn.net/qq_46906413/article/details/124698761

版权

前端专栏收录该内容

6 篇文章 14 订阅

订阅专栏

在这里插入图片描述 🍖🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖
🍖🍖
🍖🍖🍖
🍖🍖🍖🍖 作者：不良使
🍖🍖🍖🍖🍖 潜力创作新星华为云享专家
🍖🍖🍖🍖🍖🍖 博客记录学习的思路，项目和错误,寻找志同道合的朋友
🍖🍖🍖🍖🍖🍖🍖 如果觉得有帮助记得一键三连 ┗|｀O′|┛ 嗷~~
🍖🍖🍖🍖🍖🍖🍖🍖
🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖🍖 🍖🍖🍖🍖🍖🍖🍖

🍓🍓简介

你打开了这篇文章，恭喜你，你已经成功了一半了。可能有很多人很困惑，我感觉什么都会，又感觉什么都不会。写项目时什么都能写出来，可是面试又显得很吃力，该怎么办。下面就来总结一下前端面试知识大全（部分），助力面试一次通过。

🍓🍓原生js

💖💖数组方法

💥💥1. push（）

push（）方法可把参数指定的元素依次添加到数组的末尾，并返回添加元素后的数组长度。
🥙🥙1）新元素将添加在元素末尾
🥙🥙2）改变数组长度
例子：

var people= ['张三','李四','王五'];
people.push('赵云')

结果：

张三,李四,王五,赵云

难道这只有在尾部添加元素吗，显示不是，下面看看unshift () 方法

💥💥2. unshift ()

unshift () 方法可把参数指定的元素依次添加到数组的前面，并返回添加元素后的数组长度。该方法必须至少有一个参数

<script type="text/javascript">
var arr =['张三','李四','王五']
document.write(arr + "<br />")
document.write(arr.unshift("赵云") + "<br />")
document.write(arr)
</script>

结果：

赵云,张三,李四,王五

💥💥3. pop()

pop() 方法可弹出（删除）数组最后一个元素，并返回弹出的元素。

<script type="text/javascript">
var people = new Array();
scripts[0] = "张三";
scripts[1] = "李四";
scripts[2] = "王五";
document.write(scripts.join(" <br> "));
document.write("<br>--使用pop()方法后的结果--<br>");
scripts.pop();
document.write(scripts.join(" <br> "));
</script>

结果：

张三,李四

上面push()和unshift () 一前一后，pop()自然有与之对应的函数了。下面来看看shift()

💥💥4. shift()

shift() 方法可删除数组第一个元素，并返回删除的元素。

var people= ['张三','李四','王五','赵云'];
fruits.shift()

结果：

李四,王五,赵云

💥💥5. splice()

splice() 方法功能比较强，它可以实现删除指定数量的元素、替换指定元素以及在指定位置添加元素。增加&&替换
功能强大,详情请看 splice用法

💥💥6. slice()

slice() 方法返回包含从数组对象中的第 index1～index2-1 之间的元素的数组。index2 参数可以省略，省略时表示返回从 index1 位置开始一直到最后位置的元素。需要注意的是，该方法只是读取指定的元素，并不会对原数组作任何修改。

var arr=['aa','bb','cc','dd','ee','ff'];
    var data=arr.slice(2,4);

结果：

["cc", "dd"]

就像python中的切片一样。
语法：slice(参数1，参数2)
💘💘参数1：从何处开始选取（截取数组单元起始位置的索引下标）
💘💘参数2：从何处结束选取（截取数组单元结束位置的索引下标）

💥💥7. sort()

sort() 方法用于按某种规则排序数组：当方法的参数为空时，按字典序（即元素的 Unicode 编码从小到大排序顺序）排序数组元素；当参数为一个匿名函数时，将按匿名函数指定的规则排序数组元素。

var arr1 = [10,1,5,2,3];
    arr1.sort(function(a, b) {
        return a - b;
    });
    console.log(arr1);

结果：

[1,2,3,5,10]

💢💢注意：sort()方法会直接对Array进行修改，它返回的结果仍是当前Array。

💥💥8. concat()

concat() 将参数指定的数组和当前数组连成一个新数组。

var Array= ["hello", "word"];
var ArrayItem= ["java", "C++", "C#"];
var ArrayData= ["name"];
var children = Array.concat(ArrayItem,ArrayData);

结果：

hello,word,java,C++,C#,name

拼接数组，相当于python中的extend

💥💥9. reverse()

reverse() 方法可返回当前数组倒序排序形式。（翻转数组）

var arr = ['tsw', 'liyu', 'bbq'];

console.log(arr.reverse()); //['tsw', 'liyu', 'bbq']
console.log(arr); // ['tsw', 'liyu', 'bbq']

💥💥10. join()

join() 方法可将数组内各个元素按参数指定的分隔符连接成一个字符串。参数可以省略，省略参数时，分隔符默认为“逗号”。

<script type="text/javascript">
var arr = new Array()
arr[0] = "张三"
arr[1] = "李四"
arr[2] = "王五"

document.write(
arr.join()
)
</script>

结果：

张三,李四,王五

💥💥10.forEach()

forEach() 方法用于对数组的每个元素执行一次回调函数。
🐱‍🚀🐱‍🚀1.forEach()方法用于调用数组的每个元素，并将元素传递给回调函数。
🐱‍🚀🐱‍🚀2.forEach()有三个参数，第一个是function()函数，第二个是对象；
🐱‍🚀🐱‍🚀3.函数里面有三个参数，第一个是数组的每一项值（必选），第二个是数组下标（可选），第三个是原数组（可选）
🐱‍🚀🐱‍🚀4.forEach()第二个参数对象，使第一个参数函数的this指向对象
🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹🌹✨
forEach函数使用方法

💥💥11. filter()

filter() 方法用于创建一个新的数组，其中的元素是指定数组中所有符合指定函数要求的元素。

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
let res = nums.filter((num) => {
  return num > 3;
});
console.log(res);

结果：

[4，5，6, 7, 8, 9, 10]

💥💥12.map()

map() 方法用于创建一个新的数组，其中的每个元素是指定数组的对应元素调用指定函数处理后的值。（映射函数）

var array1 = [1,4,9,16];
const map1 = array1.map(x => x *2);
console.log(map1);

结果：

[2,4,18,32]

💥💥13. reduce()

reduce() 用于使用回调函数对数组中的每个元素进行处理，并将处理进行汇总返回。

const arr = [2, 0, 1, 9, 6];
// 数组求和
const total = arr.reduce((prev, item) => {
    return prev + item;
});
console.log('total:' + total);

结果：

💥💥14.find()

find() 用于获取使回调函数值为 true 的第一个数组元素。如果没有符合条件的元素，将返回 undefined。

var ages = [3, 10, 18, 20];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.find(checkAdult);
}