天秀!搞java的技术人写了本小说:《JavaScript百炼成仙》

前言

第一场,叶小凡赢得非常漂亮。这难免遭到了场外一些大弟子的嫉妒。

“哼,不过才赢了第一场,有什么好神气的。”

“就是,就是啊。不管怎么说,运算符毕竟还是属于比较基础的功夫。我看哪,这个叶小凡只是运气好,正好对这一块比较熟悉罢了。”

第一场结束,16进8,叶小凡成功晋级。第二场的题目,是一道计算题。用JavaScript计算1+2+…+100的值。就在对面还在埋头苦算的时候,叶小凡已经完成了代码。

var sum = 0;
for(var i = 1;i < 101;i++){
    sum = sum + i;
}
console.log(sum);

在对手震惊的目光中,叶小凡不慌不忙地开始解释。

“计算1+2+…+100的值,直接一个一个加肯定不行,太慢了,效率太低。因此我想到了用循环。for循环是一个不错的选择。for循环的格式,圆括号里面有三个表达式,当需要进行for循环的时候,就先执行表达式一。也就是var I = 1。然后执行表达式2,I < 101。表达式2是一个判断条件,和if语句判断有异曲同工之处。当表达式2的结果为布尔类型的true时,就认为符合进入循环的条件,于是接下来就回去执行{}中的内容。”

sum = sum + i;

“在{}里面,就是一个累加的操作,把每一次循环的i加到变量sum上去。当执行完这些代码后,才会去执行表达式3,也就是i++,这句话的意义是让i变量自增一个单位,好让i一直在慢慢变大,直到不符合进入循环的条件为止。”

听到这里,林元青微微点了点头。叶小凡继续说道,“我想这道题的考核要点就是对循环技术的了解程度。其实,这样一道题目也可以用while循环来做。”说着,叶小凡又重新打了一段代码:

var sum = 0;
var i = 0;
while(i < 101){
    sum += i;
    i++;
}
console.log(sum);

“while循环和for循环的不同之处,在于while循环只有一个判断的表达式,就好比刚才for循环中的表达式2。至于for循环的表达式3,已经放到{}中去了。表达式一则放到while循环之前去了。就有点类似于这样。”说完,叶小凡又写到,过程没有滞缓,完全行云流水,好像已经烂熟于心似的。

var sum = 0;
var i = 0;
for(;i < 101;){
    sum += i;
    i++;
}
console.log(sum);

嗯,做的不错,这一场,自然还是叶小凡胜了。”林元青宣布比赛结果。

“啥?又赢了,这也太轻松了吧。”叶小凡心中暗惊,也难怪,叶小凡平时都是在叶老的指点下,这种难度的题目实在是有点小儿科了。

叶小凡二连胜,八进四!

天秀

下一题的内容是JavaScript数组,比赛双方需要说出自己对于数组的理解,最后由掌尊林元青来判断谁可以胜出。听到这个题目,叶小凡差点笑出声了,关于数组,自己都不知道和叶老那个老怪“交流”多少回了。虽然不知道自己对于数组的掌握有多深,但是叶小凡依然有着十足的信心。于是,就在对面还在冥思苦想的时候,叶小凡已经滔滔不绝地讲述了起来。

“在JavaScript中,数组是一个非常灵活的类型。简单来说,数组就是一个容器,可以存放一个或者多个对象。当然了,这些对象的类型是没有限制的,不管它是什么,数组都可以存放。”叶小凡非常淡定地说道,中间没有丝毫停顿,好像这些话早已经融入自己的灵魂深处一样。

“喝!说得好像你很懂似的,姓叶的,你倒是先说说,数组该怎么创建吧!”对面弟子不屑一顾地说道,对于数组,他虽然不敢说非常精通,但是多少有点了解。更关键的是,自己可是比叶小凡早入门许久,当然不认为自己会比叶小凡这个新人差。他已经准备好了,计划随时打断叶小凡的讲述。

“数组有四种定义方式。”叶小凡随机讲到。

“什么,四种?笑死人了,我倒还是第一次听说,数组不就是一对中括号就定义了吗,哪来的四种?”对面弟子不屑一顾地笑了笑。

“你说的是用直接量定义数组。”叶小凡继续说道,“所谓直接量定义,就是用一对中括号来声明一个数组对象,就像这样:”

var arr = ["first", "second", "third"]; 
console.log(arr);

“得到的结果,就是生成了一个拥有三个元素的数组对象,对象的名字是arr。这种方法的好处是在定义数组的时候,就直接给这个数组做了初始化。除了这种方法,还有其他三种方法,我先来说第二种。”说着,叶小凡就打出一段代码流:

var a = new Array();

“这是采用构造函数的方式创建一个数组对象,在JavaScript中,每一个类型其实都有一个函数作为支撑,数组也不例外。在这个例子中,Array也叫作构造函数。和这第二种方法类似的,还有两种方法,也是采用构造函数的方法来创建一个数组对象的。”

var b = new Array(8); 
var c = new Array("first", "second", "third");

“这三种方式有着各自的区别,第一种是直接用构造函数创建一个空的数组,也就是说,这个数组里面什么都没有。数组天生就拥有一个length属性,我可以让这个a变量调用自身的length属性来验证这一点。”

var a = new Array(); 
console.log(a.length);

代码运行,众人看得清清楚楚,结果是一个“0”。

“相信各位也看到了,这段代码的结果是一个0,这表示当前的数组对象里面啥也没有。接下来看第二种方式。”

var b = new Array(8);

“这种方式和刚才那种有所不同,不同点就在于,它虽然也是创建一个数组,但是却在创建的同时,设置了一个初始的长度,大家看,Array是一个函数,new关键字表示在创建这个函数所表示的对象,因为是函数,所以自然是可以打括号的。没错,函数可以打括号,打括号的意思就是要去执行这个函数的函数体。函数是有参数的,这个8就是参数。在这个例子中,8就表示给数组对象添加一个初始化的长度,我依然可以用数组的length属性来验证这一点。”说着,叶小凡继续打出代码:

var b = new Array(8); 
console.log(b.length);

代码运行,众人看得清清楚楚,结果是一个“8”。

“相信各位也看到了,这段代码的结果是一个0,这表示当前的数组对象里面已经有8个元素了。那么问题来了,我并没有给这个数组添加任何东西,最起码,看起来没有。那么,这八个元素到底是什么呢?这个待会说,先看最后一种方式。”

var c = new Array("first", "second", "third");

“这一种方式在创建数组对象的同时,就给它赋予了初值。简单来说,就是创建数组的时候,就给它添加了三个元素。正因为如此,所以这个数组当前的length属性已经有值了,而且就是里面元素的个数:3!”

var c = new Array("first", "second", "third"); 
console.log(c.length);

代码运行,众人看得清清楚楚,结果是一个“8”。

“什么,叶小凡,你...竟然连函数都知道了!”对面弟子瞪大了眼睛,一脸的难以置信,要知道,在JavaScript初级阶段,函数可是一门了不起的法术了!虽然也有一些悟性好的弟子提前对函数有了一知半解,但是大部分初级弟子都是无法驾驭函数的。

“还是继续讲讲数组吧,刚才我一共说了创建数组的四种方式,第一种是用直接量来创建数组,剩下三种都是用构造函数来创建数组。怎么说呢,其实用起来的话,还是第一种方法最好用了,也是最简单的一种方式。”

“嗯,说得好,关于数组的创建,叶小凡说得算是比较通透了。”林元青也满意得点了点头。场外弟子又是一阵喧嚣。

“刚才你还说到数组的length属性,那是什么?”对面弟子收起了对叶小凡的轻视,皱着眉头问到。

“哦,你说的是length属性,数组只有一个属性,就是length,length表示的是数组所占内存空间的数目,而不仅仅是数组中元素的个数。比如说,我可以定义一个长度为8的数组,但是里面却只有一个元素。就好像刚刚的代码。”

var b = new Array(8);

“变量b指向一个数组,这个数组所占内存空间为8个单位,也就是说,有8个位置可以让这个数组存放别的元素。虽然我现在还没有给这个数组添加任何的元素,但是不代表这个数组没有长度,而这个长度就是数组的length属性。”

“那这个数组内部到底有什么?”

“这个数组内部就是8个空元素,没有东西,但是占据了内存。”说着,叶小凡打出一段代码来验证。

var b = new Array(8); 
console.log(b);

代码运行,众人看得清清楚楚,结果是[ <8 empty items> ]

“原来如此。”对面弟子也佩服起叶小凡来。

“数组作为一个对象,就有着很多内置的方法,接下来就说说那些有趣的方法吧。”

数组方法

“首先是push方法,它可以把一个元素添加到数组里面。把数组想象成一个长长的盒子,我如果想要给数组添加新的元素,就可以用这个push方法。”说着,叶小凡打出一段代码流:

var b = new Array(8); 
b.push("苹果");
b.push("香蕉");
b.push("牛油果");
console.log(b);

效果:

b005290d1f09079458be2a4a445fabc8.png

“如果直接用push方法,那么元素就会被添加到数组的尾部,而且,原来的8个位置无法去占用,就直接跟在后面了。”

“怎么会这样,那前面的8个位置难道就没有用了吗,这样岂不是很浪费?”对面弟子大感不解。

“用push方法确实没有办法做到,但是要利用前面8个位置,还是有办法的。就是用数组本身去写一个数据,比如这样。”说着,叶小凡打出一段代码流:

var b = new Array(8); 
b.push("苹果");
b.push("香蕉");
b.push("牛油果");
b[0] = "黄瓜";
console.log(b);

37fbc6fd93595a93a9d93b087cf98a0c.png

“大家请看,数组本身有写数据的能力,只要用数组变量加上一对中括号,然后在中括号里面写上对应的下标位置,就可以给对应的内存空间塞入数据啦。”

“当然了,如果我要修改某一个位置的数据,也是用同样的方法。”说着,叶小凡打出一段代码流:

var b = new Array(8); 
b.push("苹果");
b.push("香蕉");
b.push("牛油果");
b[0] = "黄瓜";
b[0] = "西瓜";
console.log(b);

0be88cf5e4ce79185ce1b2c2510ea754.png

“像这样,下标位置相同的地方,重复赋值,就可以实现修改数组元素的目的啦。”

“那怎么删除数组中的某一个数据呢?”对面弟子又问到。

“删除数据的话,需要用到数组的splice方法或者pop方法。”叶小凡想了一会,坚定地说道,“先说pop方法,这个方法可以删除数组尾端的那个元素。”说着,叶小凡打出一段代码流:

var b = new Array(8); 
b.push("苹果");
b.push("香蕉");
b.push("牛油果");
b[0] = "黄瓜";
b[0] = "西瓜";
b.pop();//删除最末尾的那个元素
console.log(b);

622774c0fe61bba8e844db130e5d94eb.png

“很显然,刚才数组最后一个位置的元素是牛油果,但是现在已经没有了。pop方法就是默认删除数组中最后一个元素。可以这么认为,先进入数组的后删除,后进入数组的先删除。刚才我说道,删除数组元素有两种方法,pop只是其中的一种,还有第二种,就是splice方法。splice()方法的作用是插入、删除或者替换一个数组元素,他不光会在原有的数组上进行修改,还会返回被处理掉的内容,因此这是一个功能强大,但是不容易使用的方法。splice()方法用前两个参数进行定位,余下的参数表示插入部分。”

“上面叫用前两个参数进行定位?”

“比如我现在有一个数组:【1,2,3,4,5】,splice方法的第一个参数代表需要操作的数组的起始位置,比如你要删除数组中的某一个元素,那么你得确定从数组中第几个元素开始删除。因为数组的下标位置默认从0开始,所以加入我要删除数字3的话,就需要确认从数组下标为2的地方开始删除。然后,spice方法第二个参数代表了要删除元素的格式,如果我只需要删除一个数组3,那么我只需要在第二个参数的地方填入1即可。”说着,叶小凡打出一段代码流:

var a = [1,2,3,4,5];
a.splice(2,1);
console.log(a);

结果:[ 1, 2, 4, 5 ]

“如果我要删除3和4两个数字,只需要把第二个参数替换成2就可以啦。”

var a = [1,2,3,4,5];
a.splice(2,2);
console.log(a);

结果:[ 1, 2, 5 ]

“那如果要把数字3替换成数字38,并且再在38的后面加一个元素66咋办?”对面弟子又问道。

“那也简单,我刚才说了,splice()方法用前两个参数进行定位,余下的参数表示插入部分。要把3替换成38,思路就是先把3删掉,然后再在后面加上一个38就可以了。后面要加66的话,就再多写一个参数66。”说着,叶小凡打出一段代码流:

var a = [1,2,3,4,5];
a.splice(2,1,38,66);
console.log(a);

结果:[ 1, 2, 38, 66, 4, 5 ]

全场寂静,谁都难以想象,叶小凡不过是一个新人,竟然能够对数组有这么高深的理解。这掌握得岂止是全面了?

过了好一会儿,对面弟子似乎不甘心,又问:“我以前见过有的师兄把数组转换成一种字符串,你会么?”

“你说的是数组的join方法吧,join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的,而这指定的分隔符就是join方法的参数。比如,还是刚才的例子,我可以把它里面所有的元素转化为用逗号分隔的字符串。”说着,叶小凡打出一段代码流:

var b = new Array(8); 
b.push("苹果");
b.push("香蕉");
b.push("牛油果");
b[0] = "黄瓜";
b[0] = "西瓜";
b.pop();//删除最末尾的

结果:西瓜,,,,,,,,苹果,香蕉

“因为中间那几个没有赋值,因此是空。”叶小凡补充了一句。

正当叶小凡还要介绍数组的其他方法时,林元青淡淡地说了一句:“可以了,这一局,叶小凡胜!”

叶小凡三绝连胜,进入决赛!

往期推荐

Redis分布式锁需要考虑的这些事!

Redis 面试题!精华!收藏一波 !

解决kafka 消息堆积问题的排查及调优

MySQL 的隔离级别和事务需要知道的

3行代码能写出8个接口!同事这样做的

Java 服务性能优化,提升QPS

API 接口文档平台,多人协作太顺手了

b3cb121093ef6d7e0af8a4a11bb90de0.gif

回复干货】获取精选干货视频教程

回复加群】加入疑难问题攻坚交流群

回复mat】获取内存溢出问题分析详细文档教程

回复赚钱】获取用java写一个能赚钱的微信机器人

回复副业】获取程序员副业攻略一份

b7797b56b654fe0e6275775912fcbb97.png

803aa10cfc9601bc81b5a763f5448eac.gif

戳这儿

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值