vue社区之---前端面试(前端中的那些方法)

简介: vue社区之---前端面试(前端中的那些方法)

原生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);

结果:

18

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

结果:

18

💨💨注意:只找到满足条件的第一个元素


JavaScript 有几种类型

基本数据类型

undefined、null、boolean、number、string、symbol(es6的新数据类型)

引用数据类型

object、array、function(统称为object)

new 操作符具体干了什么?

首先是创建实例对象{}

this 变量引用该对象,同时还继承了构造函数的原型

其次属性和方法被加入到 this 引用的对象中

并且新创建的对象由 this 所引用,最后隐式的返回 this







目录
相关文章
|
17天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
17天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
22天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
23天前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
29天前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
82 4
|
17天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
|
24天前
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react?有了大模型-例如通义灵码辅助编码,就不用纠结了!vue用的多选react,react用的多选vue
本文比较了Vue和React两大前端框架,从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行,但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用,适合中小型项目;React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议,强调了多框架学习的重要性,认为技术问题已不再是选型的关键,熟悉各框架的最佳实践更为重要。
|
30天前
|
JSON 前端开发 JavaScript
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
101 0
|
30天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
127 2
|
30天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
37 0