掌握 JavaScript 数组倒序的艺术 (掌握javascript基础 初入宗门)

引言

在 JavaScript 中，数组是一种有序集合，它存储着一组元素，每个元素都可以通过其索引访问。有时，我们需要以相反的顺序遍历数组，这被称为倒序。本文将探讨 JavaScript 中倒序数组的各种方法，从基本方法到更高级的技术。

基本方法

reverse() 方法

最简单的方法是使用内置的 reverse() 方法。此方法将数组中的元素原地反转，这意味着它会修改原始数组。

const numbers = [1, 2, 3, 4, 5];
numbers.reverse(); // [5, 4, 3, 2, 1]

slice() 方法

slice() 方法可以创建数组的副本，并从指定的开始和结束索引之间提取元素。我们可以通过将 start 参数设置为 -1 并将 end 参数设置为 0 来倒序提取元素。

const numbers = [1, 2, 3, 4, 5];
const reversed = numbers.slice(-1, 0); // [5, 4, 3, 2, 1]

更高级的方法

for 循环

我们可以使用 for 循环手动遍历数组并将其元素存储在另一个数组中，但这样做比较繁琐。

const numbers = [1, 2, 3, 4, 5];
const reversed = [];
for (let i = numbers.length - 1; i >= 0; i--) {reversed.push(numbers[i]);
}

Array.from()

Array.from() 方法可以将类数组对象（如 NodeList 或 Set ）转换为数组。我们可以使用 Array.from() 和 entries() 方法来倒序获取数组的键值对，然后使用 map() 方法提取值。

const numbers = [1, 2, 3, 4, 5];
const reversed = Array.from(numbers.entries()).map(([index, value]) => value).reverse(); // [5, 4, 3, 2, 1]

spread 运算符 (...)

spread 运算符可以将数组展开为单个元素。我们可以使用 spread 运算符和 reverse() 方法来创建数组的新副本，而不会修改原始数组。

const numbers = [1, 2, 3, 4, 5];
const reversed = [...numbers].reverse(); // [5, 4, 3, 2, 1]

性能考虑

在选择倒序数组的方法时，需要考虑性能。对于较小的数组，基本方法（如 reverse() ）通常最快。对于较大的数组，更高级的方法（如 Array.from() 或 spread 运算符）可能更有效率，因为它们不会修改原始数组。

总结

JavaScript 提供了多种方法来倒序数组，从基本方法到更高级的技术。选择最适合你的方法取决于数组的大小、性能要求以及个人偏好。通过理解这些方法，你可以熟练地处理 JavaScript 中的倒序数组。

学javascript需要什么基础

基础的话，最需要的就是计算机基础，还有一些编程的基础。 真的，基础很重要，不需要掌握到特别清楚的程度，不过至少要知道你编写代码的时候是在做些什么。 找一本好的入门书，推荐 head first javascript。

清华出品，必属精品

清华大学出版的编程届的修仙秘籍

作者将编程语言知识点与修仙故事相融合.通过比式的方式作为某个知识点的场景引出从JavaScript的基础入手， 贯穿DOM，Vue，，ES6，不仅让读者了解前端知识本身，还代入了该场景下的心情，难怪让不少程序员热血沸腾、着迷其中。

在该书的简介中，作者写道：这是一本讲解JavaScript编程语言的技术书籍，只不过，本书采用了一种全新的写作手法。

如果你厌倦了厚厚的、如同字典般的编程书籍，不妨尝试有一下新的口味!通过本书，你可以领悟到JavaScript的函数七重关秘籍；通过本书，你可以轻松学会使用j Query操作DOM对象； 通过本书，你可以学会目前流行的Vue基础语法；通过本书，你还可以学会最新的ES6常用语法。本书可作为JavaScript初学者人门的趣味读物。

目录

第1章掌握JavaScript基础

1.1初入宗门

1.2直接量

1.3变量的声明

1.4数据类型

1.5基础考核

1.6叶老

1.7对象数据类型

1.8对象的取值

1.9循环遍历的奥妙

1.10对象内容的遍历

1.11外门小比

1.12 JavaScript运算符

1.13语惊四座

1.14秀

1.15天秀

1.16数组方法

1.17蒂花之秀

1.18函数七重关之一(函数定义)

1.19 JavaScript编译原理

1.20函数七重关之二(作用域)

1.21函数七重关之三(参数传递)

1.22西数七重关之四(闭包)

1.23函数七重关之五(自执行函数)

1.24函数七重关之六(“new”一个函数)

1.25函数七重关之七(回调函数

第2章基础考核

2.1赵牛

2.2林涛

2.3变量和简单数据类型

2.4精度问题

2.5化浮为整

2.6函数的三大要义

2.7add函数完成

2.8函数调试

2.9 index Of方法

2.. 10 replace方法

2.11重新开始

第3章j Query和DOM

3.1预备知识

3.2简南

3.3j Query选择器

3.4使用j Query操作DOM

第4章Vue的妙处

4.1我要去做任务

4.2壮士出征

4.3Vue数据绑定

4.4Vue第一式一一简单数据绑定

4.5Vue第二式一一灵活有趣的事件绑定

4.6Vue第三式一一条件语句

4.7Vue第四式一-循环语句

4.8Vue第五式-一属性绑定

4.9Vue第六式--Vue组件开发

4.10Vue第七式一一计算属性

4.11Vue第八式一一监听属件

4.12Vue第九式一—过滤器

4.13叶小凡的战果

第5章Vue-cl项目

5.1Nodejs安装

5.2使用n pm发布模块

5.3使用n pm安装模块

5.4使用Vue-ci搭建项目

第6章ES6语法

6.1全新的变量定义

6.2变量的解构赋值

6.3字符串升级

6.4 Proxy代理

6.5强化后的数组

6.6强化后的函数

6.7更加灵活多变的对象保存以上内容为图片>

6.8 promise对象和async函数

1.1初入宗门

乐阳村处于脚本大陆东部的边缘地带，其民风淳朴，村民日西而作、日落而息。某一日清晨，所有村民都来到了村口，正在为一个十五六岁的少年送行。只见那个少年虽然身体瘦弱，可是目中却绽放出异彩·身躯虽不壮实倒也挺拔。

“叶小凡，你是我们全村人的骄傲，是百年来唯一具备修行

JavaScript甲等资质的孩子!马上会有千鹤派的大人来接你， 今后你一定要认真修行，给我们全村的人争光!”

他叫叶小凡几天前通过了修行资质的检验，符合了修行

JavaScript的资质

“千鹤派!“叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派在脚本大陆是数一数二的大门派，每个宗门弟子都能够修炼一种神奇的功法一-JavaScript， 修成之后， 其威力之大， 足以翻山倒海，称霸一方天地!

不多时气风云变化，一道长虹降下，瞬问变为一人。他身穿一件玄青色的玉锦衣服.腰间绑着一根白色螭纹革带一头黑发，有着一双清澈明亮的眼眸，身形顾长，当真是气宇轩昂、温文尔雅。

“你就是叶小儿?“男子淡淡开口神识一扫，惊讶地发现比了的修行资质意为甲笔，眼中闪过三丝惊讶。

“在下林元青，千鹤派青山掌尊，你既然通过了考校，便具备

了修炼资质，你随我即刻上山，不得有误。

叶小凡便告别众人在林元青的术法之下随即化为一道长虹飞天而去，留下了一脸惊讶的村民千鹤派分为三大院，分别为青山院，绿水院以及神秘的女冰院。每个院都有一个堂首，林元青赫然便是青山院的堂尊!堂尊地位之高，仅次于大长老，大长老之上，又有太上大长。几乎只是一两次呼吸的时间，林元青已经带着叶小凡来到了千鹤派的青山院。叶小凡两眼一防佛上一刻还在机口，下一刻就看到了千鹤派的阁楼。

“这里是...?叶小凡一辈子都没有见过如此宏伟的建筑，忍不住开口。一想到今后可以在这里修行，更是兴奋，哈哈，我叶小凡今后一定能突破层层障碍， 成为Java Scr lip t一代大师!

Web前端工程师应该知道的提高JavaScript技能的技巧!

今天小编要跟大家分享的文章是关于Web前端工程师应该知道的提高JavaScript技能的技巧!熟悉web前端工作的小伙伴都知道，JavaScript是前端工程师的必备技能。 JavaScript是一种复杂的语言。 如果是你是高级或者初级web开发人员，了解它的基本概念非常重要。 本篇文章小编就为大家介绍几种提高JavaScript技能的技巧，下面让我们一起来看一看吧!01、变量赋值(值vs引用)理解JavaScript如何给变量赋值可以帮助我们减少一些不必要的bug。 如果你不理解这一点，可能很容易地编写被无意中更改值的代码。 JavaScript总是按照值来给变量赋值。 这一部分非常重要：当指定的值是JavaScript的五种基本类型之一(即Boolean，null，undefined，String和Number)时，将分配实际值。 但是，当指定的值是Array，Function或Object时，将分配对内存中对象的引用给变量。 在以下代码段中，使用var1对var2进行赋值。 由于var1是基本类型(String)，因此var2的值等于var1的String值，并且可以认为此时与var1完全不同。 因此，重新赋值var2对var1没有影响。 letvar1=Mystring;letvar2=var1;var2=Mynewstring;(var1);//(var2);//Mynewstring接着，与对象赋值进行比较。 letvar1={name:Jim}letvar2=var1;=John;(var1);//{name:John}(var2);//{name:John}如果你期望它会像原始类型赋值那样，很可能会出问题!如果你创建了一个无意中会改变对象的函数，就会出现一些非预期的行为。 02、闭包闭包是一个重要的JavaScript模式，可以私有访问变量。 在本例中，createGreeter返回一个匿名函数，这个函数可以访问参数greeting(在这里是“Hello”)。 在后续的调用中，sayHello将有权访问这个greeting!functioncreateGreeter(greeting){returnfunction(name){(greeting+,+name);}}constsayHello=createGreeter(Hello);sayHello(Joe);//Hello,Joe在更真实的场景中，你可以设想一个初始函数apiConnect(apiKey)，它返回一些使用APIkey的方法。 在这种情况下，apiKey只需要提供一次即可。 functionapiConnect(apiKey){functionget(route){returnfetch(`${route}?key=${apiKey}`);}functionpost(route,params){returnfetch(route,{method:POST,(params),headers:{Authorization:`Bearer${apiKey}`}})}return{get,post}}constapi=apiConnect(my-secret-key);//(#/get-endpoint);(#/post-endpoint,{name:Joe});03、解构JavaScript参数解构可以从对象中干中提取所需属性的常用方法。 constobj={ame:Joe,food:cake}const{name,food}=obj;(name,food);//Joecake如果要以其他名称提取属性，可以使用如下方式：constobj={ame:Joe,food:cake}const{name:myName,food:myFood}=obj;(myName,myFood);//Joecake解构经常也用于直接用于提取传给函数的参数。 如果你熟悉React，可能已经见过这个：constperson={ame:Eddie,age:24}functionintroduce({name,age}){(`Im${name}andIm${age}yearsold!`);}(introduce(person));//ImEddieandIm24yearsold!04、展开运算ES6的一个常用之一的特性就是展开(...)运算符了,在下面的例子中，不能应用于arr数组，因为它不将数组作为参数，但它可以将各个元素作为参数传入。 展开运算符...可用于提取数组的各个元素。 constarr=[4,6,-1,3,10,4];constmax=();(max);//1005、剩余参数剩余参数语法和展开语法看起来的一样的，不同的是展开语法是为了结构数组和对象;而剩余参数和展开运算符是相反的，剩余参数收集多个元素合成一个数组。 functionmyFunc(){(args[0]+args[1]);}myFunc(1,2,3,4);//3restparameters和arguments的区别是伪数组，包含所有的实参2.剩余参数是标准的数组，可以使用数组的方法06、数组方法JavaScript数组方法通常可以提供令人难以置信的、优雅的方法来执行所需的数据转换。 作为StackOverflow的贡献者，我经常看到关于如何以某种方式操纵对象数组的问题，这往往也是数组方法的完美用例。 map、filter、reduceJavaScript数组方法map、filter和reduce容易混淆，这些都是转换数组或返回聚合值的有用方法。 map：返回一个数组，其中每个元素都使用指定函数进行过转换。 constarr=[1,2,3,4,5,6];constmapped=(el=>el+20);(mapped);//[21,22,23,24,25,26]filter：返回一个数组，只有当指定函数返回true时，相应的元素才会被包含在这个数组中。 constarr=[1,2,3,4,5,6];constfiltered=(el=>el===2||el===4);(filtered);//[2,4]reduce:按函数中指定的值累加constarr=[1,2,3,4,5,6];constreduced=((total,current)=>total+current);(reduced);//21find,findIndex,indexOffind：返回与指定条件匹配的第一个实例，如果查到不会继续查找其他匹配的实例。 constarr=[1,2,3,4,5,6,7,8,9,10];constfound=(el=>el>5);(found);//6再次注意，虽然5之后的所有元素都满足条件，但是只返回第一个匹配的元素。 当你发现匹配项时，通常会中断for循环，在这种情况下，这实际上非常有用。 findIndex：这与find几乎完全相同，但不是返回第一个匹配元素，而是返回第一个匹配元素的索引。 constarr=[Nick,Frank,Joe,Frank];constfoundIndex=(el=>el===Frank);(foundIndex);//1indexOf：与findIndex几乎完全相同，但它不是将函数作为参数，而是采用一个简单的值。 当w你需要更简单的逻辑并且不需要使用函数来检查是否存在匹配时，可以使用此方法。 constarr=[Nick,Frank,Joe,Frank];constfoundIndex=(Frank);(foundIndex);//1push,pop,shift,unshiftpush：这是一个相对简单的方法，它将一个项添加到数组的末尾。 它就地修改数组，函数本身会返回添加到数组中的项。 letarr=[1,2,3,4];constpushed=(5);(arr);//[1,2,3,4,5](pushed);//5pop:这将从数组中删除最后一项。 同样，它在适当的位置修改数组，函数本身返回从数组中删除的项。 letarr=[1,2,3,4];constpopped=();(arr);//[1,2,3](popped);//4shift:从数组中删除第一项。 同样，它在适当的位置修改数组。 函数本身返回从数组中删除的项。 letarr=[1,2,3,4];constshifted=();(arr);//[2,3,4](shifted);//1unshift:将一个或多个元素添加到数组的开头。 同样，它在适当的位置修改数组。 与许多其他方法不同，函数本身返回数组的新长度。 letarr=[1,2,3,4];constunshifted=(5,6,7);(arr);//[5,6,7,1,2,3,4](unshifted);//7splice,slicesplice：通过删除或替换现有元素和/或添加新元素来更改数组的内容，此方法会修改了数组本身。 下面的代码示例的意思是：在数组的位置1上删除0个元素，并插入b。 letarr=[a,c,d,e];(1,0,b)slice：从指定的起始位置和指定的结束位置之前返回数组的浅拷贝。 如果未指定结束位置，则返回数组的其余部分。 重要的是，此方法不会修改数组，而是返回所需的子集。 letarr=[a,b,c,d,e];constsliced=(2,4);(sliced);//[c,d](arr);//[a,b,c,d,e]sortsort：根据提供的函数对数组进行排序。 这个方法就地修改数组。 如果函数返回负数或0，则顺序保持不变。 如果返回正数，则交换元素顺序。 letarr=[1,7,3,-1,5,7,2];constsorter=(firstEl,secondEl)=>firstEl-secondEl;(sorter);(arr);//[-1,1,2,3,5,7,7]07、Generators(生成器)生成器是一种特殊的行为，实际上是一种设计模式，我们通过调用next()方法来遍历一组有序的值。 想象一下，例如使用遍历器对数组[1,2,3,4,5]进行遍历。 第一次调用next()方法返回1，第二次调用next()方法返回2，以此类推。 当数组中的所有值都返回后，调用next()方法将返回null或false或其它可能的值用来表示数组中的所有元素都已遍历完毕。 function*greeter(){yieldHi;yieldHowareyou?;yieldBye;}constgreet=greeter();(());//(());//Howareyou?(());//(());//undefined使用生成器生成无限个值：function*idCreator(){leti=0;while(true)yieldi++;}constids=idCreator();(());//(());//(());//2//etc...08、恒等运算符(===)与相等运算符(==)大家一定要知道JavaScript中的恒等运算符(===)和相等运算符(==)之间的区别!==运算符在比较值之前会进行类型转换，而===运算符在比较之前不会进行任何类型转换。 (0==0);//(0===0);//false09、对象比较我看到JavaScript新手所犯的错误是直接比较对象。 变量指向内存中对象的引用，而不是对象本身!实际比较它们的一种方法是将对象转换为JSON字符串。 这有一个缺点：对象属性顺序不能保证!比较对象的一种更安全的方法是引入专门进行深度对象比较的库(例如，lodash的isEqual)。 下面的对象看起来是相等的，但实际上它们指向不同的引用。 constjoe1={name:Joe};constjoe2={name:Joe};(joe1===joe2);//false相反，下面的计算结果为true，因为一个对象被设置为与另一个对象相等，因此指向相同的引用(内存中只有一个对象)。 constjoe1={name:Joe};constjoe2=joe1;(joe1===joe2);//true相反，以下计算结果为true，因为一个对象设置为等于另一个对象，因此指向相同的引用(内存中只有一个对象)。 constjoe1={name:Joe};constjoe2=joe1;(joe1===joe2);//true10、回调函数很多人都被JavaScript回调函数吓倒了!他们很简单，举个例子。 函数作为回调传递给myFunc。 它在setTimeout完成时执行。 functionmyFunc(text,callback){setTimeout(function(){callback(text);},2000);}myFunc(Helloworld!,);//Helloworld!11、Promises一旦你理解了JavaScript回调，很快就会发现自己陷入了“回调地狱”中。 这个时候可以使用promise,将异步逻辑包装在promise中，成功时resolve或在失败时reject使用“then”来处理成功的情况，使用catch来处理异常。 constmyPromise=newPromise(function(res,rej){setTimeout(function(){if(()<0.9){returnres(Hooray!);}returnrej(Ohno!);},1000);});(function(data){(Success:+data);})(function(err){(Error:+err);});//()returnslessthan0.9thefollowingislogged://Success:Hooray!//()returns0.9orgreaterthefollowingislogged://Error:Onno!12、Async/Await在掌握了promise的用法后，你可能也会喜欢asyncawait，它只是一种基于promise的“语法糖”。 在下面的示例中，我们创建了一个async函数，并awaitgreeterpromise。 constgreeter=newPromise((res,rej)=>{setTimeout(()=>res(Helloworld!),2000);})asyncfuncti

若对本页面资源感兴趣，请点击下方或右方图片，注册登录后

搜索本页相关的【资源名】【软件名】【功能词】或有关的关键词，即可找到您想要的资源

如有其他疑问，请咨询右下角【在线客服】，谢谢支持！