百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

17种面试前你需要知道的JavaScript 数组方法

ztj100 2024-11-25 00:38 14 浏览 0 评论

本文的重点是强调我选择在 JavaScript 中进行评估的主要原因之一:原生数组方法。在本文中,我将创建一个快速备忘录,以帮助您和我在未来的测试中取得好成绩。

提示:如果您正在准备编码面试,我真的鼓励您在 CodeWars 练习您的开发技能。那里的提示很容易成为我评估的提示之一。这非常相似。

说了这么多,让我们开始吧。

1、array.concat

let array1 = [1,2];
let array2 = [3,4];
let array3 = [5,6,7];
let array4 = array1.concat(array2, array3)
console.log(array4)// [1,2,3,4,5,6,7]

将两个或多个数组连接成一个数组。

您可以在 concat 方法中拥有无限数量的参数。

还可以这样做:

let array1 = [1,2];
let array2 = [3,4];
let array3 = [5,6,7];
let array4 = [...array1, ...array2]
console.log(array4);

2、array.length

var name = "Kyle";
console.log(name.length) // 4
var array = [1,2,3,4,5];
console.log(array.length); //5

用于获取数组或字符串的长度

3、array.join

let students = ["Anthony", "Beth", "Cersi" , "Dario", "Elizabeth", "Farrah"];
let welcomeMessage = "Hello " + students.join(" and ")
console.log(welcomeMessage);
/* PRINTS
Hello Anthony and Beth and Cersi and Dario and Elizabeth and Farrah
*/

将数组的元素连接在一起并将其转换为字符串

join方法的一个参数(分隔符)

例如,我们使用“和”来连接数组中的所有元素。你可以使用空格“”或逗号“,”或任何你想要的。

4、array.pop

let students = ["Anthony", "Beth", "Cersi" , "Dario", "Elizabeth", "Farrah"];
let removed = students.pop();
console.log(removed); //Farrah
console.log(students); //["Anthony", "Beth", "Cersi" , "Dario", "Elizabeth"]
students.pop();
console.log(students); //["Anthony", "Beth", "Cersi" , "Dario"]

移除数组最后的元素

该方法返回被移除的元素,这是可选的,您也可以单独使用 students.pop() 。

5、array.push

let students = ["Anthony", "Beth", "Cersi" , "Dario", "Elizabeth", "Farrah"];
students.push("George");
console.log(students);
/* Prints: ["Anthony", "Beth", "Cersi" , "Dario", "Elizabeth", "Farrah", "George]
*/

在数组末尾添加元素

6、array.shift

let students = ["Anthony", "Beth", "Cersi" , "Dario", "Elizabeth", "Farrah"];
students.shift();
console.log(students);
/*PRINTS:
["Beth", "Cersi" , "Dario", "Elizabeth", "Farrah"]
*/

删除数组最开始的元素。

7、array.unshift

let students = ["Anthony", "Beth", "Cersi" , "Dario", "Elizabeth", "Farrah"];
students.unshift("Zander");
console.log(students);
/*PRINTS:
["Zander", "Anthony", "Beth", "Cersi" , "Dario", "Elizabeth", "Farrah"]
*/

8、array.slice

var name = "Jennifer Aniston"
var firstName = name.slice(0,8);
console.log(firstName); //Jennifer
var array = [1,2,3,4,5,6,7];
console.log(array.slice(0,3)); //[1,2,3]
var array = ["Index 1", "Index 2", "Index 3", "Index 4"];
console.log(array.slice(1)); //[ 'Index 2', 'Index 3', 'Index 4' ]
  • 返回从开始索引到结束索引的元素(加一)
  • 不改变原始数组

切片方法的一个参数

  • 提取从给定索引开始直到数组末尾的元素。

切片方法的两个参数:(开始索引,结束索引+1)

  • 提取从给定索引(第一个参数)开始到给定索引(第二个参数)结束的元素
  • 由于我们要提取“Jennifer”,我们从索引 0 开始。Jennifer 的最后一个字母在索引 7 处。所以第二个参数将是 8

9、array.splice

let array1 = [1,2,3,6,7,6,7,8,9];
array1.splice(3, 6)
console.log(array1); //[ 1, 2, 3 ]

用于添加、删除或替换数组中的元素

拼接方法的两个参数

  • 第一个参数是要添加、删除或替换元素的索引
  • 第二个参数是要从第一个参数中提到的索引开始的数组中删除的元素数
  • 例如,我们想在第一个参数中定义的索引 3 处开始添加、删除或替换数组中的元素。(请记住,数组使用从零开始的索引)。我们将删除第二个参数中定义的 6 个元素。
let array1 = [1,2,3,6,7,6,7,8,9];
array1.splice(3, 2, 4, 5 )
console.log(array1); // [1,2,3,4,5,6,7,8,9]

拼接方法的三个或更多参数

  • 第一个参数是要添加、删除或替换元素的索引
  • 第二个参数是要从第一个参数中提到的索引开始的数组中删除的元素数
  • 剩余的参数(可以无限多)将从第一个参数中提到的索引开始插入到数组中
  • 例如,我们想在第一个参数中定义的索引 3 处开始添加、删除或替换数组中的元素。(请记住,数组使用从零开始的索引)。我们将删除第二个参数中定义的 2 个元素。这将使数组位于 [1,2,3,6,7,8,9]。然后,在第一个参数中定义的索引 3 处,我们将插入由其余参数指定的值。在这种情况下,我们有第三个和第四个参数。我们在索引 3 处插入这两个。显然,如果我们有第三、第四、第五、、、、、、、、和第二十个参数,我们将插入所有这些参数。

10、array.reverse

let array1 = [1,2,3,6,7,6,7,8,9];
console.log(array1.reverse()); // [ 9, 8, 7, 6, 7, 6, 3, 2, 1 ]

反转数组的顺序

11、array.sort()

//升序排序
let array1 = [5, 1, 8, 3];
array1.sort((a, b) =>  a-b);
console.log(array1) //[ 1, 3, 5, 8 ]
//递减数字排序
let array1 = [5, 1, 8, 3];
array1.sort((a, b) =>  b-a);
console.log(array1) //[ 8, 5, 3, 1 ]
//递减数字排序
let array1 = [5, 1, 8, 3];
array1.sort((a, b) =>  a-b).reverse();
console.log(array1) //[ 8, 5, 3, 1 ]
//升序字母排序
let array1 = ["apples", "carrots", "zendaya", "tapioca"];
array1.sort();
console.log(array1)
//降序字母排序
let array1 = ["apples", "carrots", "zendaya", "tapioca"];
array1.sort().reverse();
console.log(array1)

字符串方法

12、string.concat

let name = "Kyle";
let age = 21;
let city = "Los Angeles"
let sentence = name.concat(" is " , age , " years old and lives in ", city);
console.log(sentence);

将两个或多个字符串连接成一个字符串。

您可以在 concat 方法中拥有无限数量的参数。您也可以用 + 代替 ,它分隔每个字符串/变量

13、string.indexOf

let sentence = "Publish today on Medium";
console.log(sentence.indexOf("today")) //8

查找字符串第一次出现的索引

如果未找到字符串,则返回 -1

14、string.lastIndexOf

let sentence = "a dog went to a dog park on a tuesday night. ";
console.log(sentence.lastIndexOf("a ")); //28

查找字符串最后一次出现的索引

如果未找到字符串,则返回 -1

15、string.split

let name = "Kyle DeGuzman";
let nameArray = name.split(" ");
console.log(nameArray) //['Kyle', 'DeGuzman']
let alphabet = "abcdefghijklmnopqrstuv";
let alphabetArray = alphabet.split("");
console.log(alphabetArray) //['a','b','c','d','e','f','g','h'....]
let favoriteThings = "Raindrops on Roses, Whiskers on Kittens, Bright Copper Kettles, Warm Woolen Mittens, Brown Paper Packages Tied Up With String";
let favoriteThingsArray = favoriteThings.split(",");
console.log(favoriteThingsArray)

将字符串转换为数组

拆分方法的一个参数(分隔符)

  • 分隔符定义了在字符串中进行切割的位置
  • 例如,第一个分割在空间上进行切割。因此,结果在每个空间都被拆分。
  • 例如,第二次拆分在“”处进行了剪切,基本上在每个字符之间。
  • 例如,只要有逗号,第三个拆分就会进行切割。

16、string.toLowerCase()

let name = "kYle";
let name = name.toLowerCase();  
console.log(name); //kyle
let string = ("triumph").toLowerCase();  
console.log(string); //triumph

将字符串中的所有字母转换为小写

如果您正在测试用户输入的字符串,这非常棒。

例如:

if (input == "apple"){
...
}

所以如果用户输入Apple、aApple、appLE等,它们将是无效的。

if (input.toLowerCase() == "apple"){
}

这是一个更好的方法

17、string.toUpperCase()

let name = "kYle";
let name = name.toUpperCase();  
console.log(name); //KYLE
let string = ("triumph").toUpperCase();  
console.log(string); //TRIUMPH

将字符串中的所有字母转换为大写

18、string.trim

let firstName = "Kyle\n\n\n\n";
let lastName = "Deguzman      ";
console.log(firstName + lastName);
console.log(firstName.trim() + lastName).

从字符串的左侧和右侧删除空格。

总结

以上就是我今天整理的18个关于JavaScript数组的方法,希望你能从这个清单列表中学习到新知识,如果你觉得我今天的内容对你有帮助的话,请记得点赞我,关注我,并将它分享给你身边的朋友,也许能够帮助到他。

当然,这个清单列表也只是其中的一部分而已,如果你还有要补充的知识内容,欢迎你在留言区给我留言。

最后,感谢你的阅读,祝编程愉快!

来源: web前端开发

相关推荐

Vue 技术栈(全家桶)(vue technology)

Vue技术栈(全家桶)尚硅谷前端研究院第1章:Vue核心Vue简介官网英文官网:https://vuejs.org/中文官网:https://cn.vuejs.org/...

vue 基础- nextTick 的使用场景(vue的nexttick这个方法有什么用)

前言《vue基础》系列是再次回炉vue记的笔记,除了官网那部分知识点外,还会加入自己的一些理解。(里面会有部分和官网相同的文案,有经验的同学择感兴趣的阅读)在开发时,是不是遇到过这样的场景,响应...

vue3 组件初始化流程(vue组件初始化顺序)

学习完成响应式系统后,咋们来看看vue3组件的初始化流程既然是看vue组件的初始化流程,咋们先来创建基本的代码,跑跑流程(在app.vue中写入以下内容,来跑流程)...

vue3优雅的设置element-plus的table自动滚动到底部

场景我是需要在table最后添加一行数据,然后把滚动条滚动到最后。查网上的解决方案都是读取html结构,暴力的去获取,虽能解决问题,但是不喜欢这种打补丁的解决方案,我想着官方应该有相关的定义,于是就去...

Vue3为什么推荐使用ref而不是reactive

为什么推荐使用ref而不是reactivereactive本身具有很大局限性导致使用过程需要额外注意,如果忽视这些问题将对开发造成不小的麻烦;ref更像是vue2时代optionapi的data的替...

9、echarts 在 vue 中怎么引用?(必会)

首先我们初始化一个vue项目,执行vueinitwebpackechart,接着我们进入初始化的项目下。安装echarts,npminstallecharts-S//或...

无所不能,将 Vue 渲染到嵌入式液晶屏

该文章转载自公众号@前端时刻,https://mp.weixin.qq.com/s/WDHW36zhfNFVFVv4jO2vrA前言...

vue-element-admin 增删改查(五)(vue-element-admin怎么用)

此篇幅比较长,涉及到的小知识点也比较多,一定要耐心看完,记住学东西没有耐心可不行!!!一、添加和修改注:添加和编辑用到了同一个组件,也就是此篇文章你能学会如何封装组件及引用组件;第二能学会async和...

最全的 Vue 面试题+详解答案(vue面试题知识点大全)

前言本文整理了...

基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时

今天给大家分享的是Vue3聊天实例中的朋友圈的实现及登录验证和倒计时操作。先上效果图这个是最新开发的vue3.x网页端聊天项目中的朋友圈模块。用到了ElementPlus...

不来看看这些 VUE 的生命周期钩子函数?| 原力计划

作者|huangfuyk责编|王晓曼出品|CSDN博客VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化。可以分为:创建、挂载、更新、销毁四个模块...

Vue3.5正式上线,父传子props用法更丝滑简洁

前言Vue3.5在2024-09-03正式上线,目前在Vue官网显最新版本已经是Vue3.5,其中主要包含了几个小改动,我留意到日常最常用的改动就是props了,肯定是用Vue3的人必用的,所以针对性...

Vue 3 生命周期完整指南(vue生命周期及使用)

Vue2和Vue3中的生命周期钩子的工作方式非常相似,我们仍然可以访问相同的钩子,也希望将它们能用于相同的场景。...

救命!这 10 个 Vue3 技巧藏太深了!性能翻倍 + 摸鱼神器全揭秘

前端打工人集合!是不是经常遇到这些崩溃瞬间:Vue3项目越写越卡,组件通信像走迷宫,复杂逻辑写得脑壳疼?别慌!作为在一线摸爬滚打多年的老前端,今天直接甩出10个超实用的Vue3实战技巧,手把...

怎么在 vue 中使用 form 清除校验状态?

在Vue中使用表单验证时,经常需要清除表单的校验状态。下面我将介绍一些方法来清除表单的校验状态。1.使用this.$refs...

取消回复欢迎 发表评论: