JS思维之路菜鸟也能有大能量(1)--模拟push
因为本系列文章属于思维类,所以不做基础方法的讲解。
任务:首先我定义了一个变量var arr = [0,1,2,3,4,5];我现在想模拟push方法在这个数组的5后面加东西,我们应该怎么做?给你5分钟思考,在思考之前请不要往下看。
分析:我们是想往这个数组的最后面添加东西对吧,关键点就在于我们如何才能找到元素最后的位置。先不去考虑最后一个位置,我们先来想想我们平时是怎么样访问一个数组的内容的,是不是这样arr[n],对不对,假如我们访问一个大于这个数组的索引,那么就是undefined,简单来说就是没有这个索引的话就是undefined,如果我们将这个数组的索引一直加1那么如果出现undefined是不是就是我们要找的位置,虽然这种方式可以,但是我有一个更好的方法就是利用length属性,length属性可以获取到这个数组的长度,那么这个长度就是这个数组的索引+1,刚好我们就是要往这个索引上添加内容。
代码:
var arr = [0,1,2,3,4,5];
arr.length 获取这个数组的最后位置
任务:现在我们获取到了数组的最后位置就可以给它添加内容了,那么怎么添加呢?给谁添加,怎么去添加。
分析:现在回想一下往一个数组里面添加内容有哪些方式?获取到的这个长度就是我们要添加的位置。
arr[arr.length] = value;
合成:
var arr = [0,1,2,3,4,5];
function Push(value){
arr[arr.length] = value;
}
Push(6);
console.log(arr); //[0, 1, 2, 3, 4, 5, 6]
任务:虽然现在可以往里面添加内容了,但是每次只能添加一个,怎么办呢?
分析:突然好想念我的老朋友for,对这位老朋友可以帮我们完成一些重复的事情,那我们快请他来帮帮忙吧。
代码:
for(var i=0;i<?;i++)
分析:我们应该怎么写这个for?i到底小于多少呢?是不是就是我们添加几位就是几啊?那么我们到底要添加多少位呢?好像我们确实不知道,但是却有一位老朋友知道,他就是arguments,它可以获取到我们传入的参数,并且它是一个伪数组,意味着它也可以像数组一样使用length属性获取我们传入的实参长度。
代码:
for(var i=0;i<arguments.length;i++){}
分析:那么现在问题来了,我们把什么内容添加到哪里去,再回到我们任务,我们是不是想在某个数组的最后一个位置添加我们传进来的内容,对我们穿进来的,那么怎么获取我们传进来的内容呢,我们好像说过arguments可以获取它的内容。
代码:
var arr = [0,1,2,3,4,5];
function Push(){
for(var i=0;i<arguments.length;i++){
arr[arr.length] = arguments[i];
}
}
Push(6,7,8);
完成。
课外扩展:有基础的朋友
ok,虽然这样已经完成了任务,但是现在的问题是,这段代码只能为arr这个数组服务,如果我们想为所以的数组提供这个功能就需要给Array的原型添加这个方法。
var arr = [0,1,2,3,4,5];
Array.prototype.Push = function(){
for(var i=0;i<arguments.length;i++){
this[this.length] = arguments[i];
}
} arr.Push(1,2,3)
把里面的arr修改成this,this表示谁调用就是谁,如果你想了解更多关于this的内容,可以看彻底理解js中this的指向,不必硬背这篇文章。
如果你有好的建议可以和我联系,期待下次和你见面。
JS思维之路菜鸟也能有大能量(1)--模拟push的更多相关文章
- JS思维之路菜鸟也能有大能量(2)--模拟数组合并concat
我们有两个这样的数组 var arr1 = [1,2,3]; var arr2 = [4,5,6]; 任务:合并成这样,请至少提供两种思路. var arr1 = [1,2,3,4,5,6]; 思路一 ...
- JS思维之路菜鸟也能有大能量-序幕
准备写一类关于Js的开发思想的文章,这系列文章需要有一定的js基础,在这里不会去说太多的js基础知识,因为这系列文章不是写基础东西,而是一种编程思想,如果你还是js新手,那么建议你有一定基础后再看. ...
- [JS]Cookie精通之路
[JS]Cookie精通之路 转http://blog.163.com/neu_pdh1983/blog/static/572407020077310528915/ 发布:Cary 媒体:www.Ju ...
- [js高手之路] es6系列教程 - 对象功能扩展详解
第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...
- [js高手之路]从原型链开始图解继承到组合继承的产生
基于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 f ...
- [js高手之路]原型对象(prototype)与原型链相关属性与方法详解
一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...
- [js高手之路]设计模式系列课程-发布者,订阅者重构购物车
发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房 ...
- [js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表
所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理, ...
- [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解
接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...
随机推荐
- JAVA学习Swing章节JPanel和JScrollPane面板的简单学习
package com.swing; import java.awt.Container; import java.awt.GridLayout; import javax.swing.JButton ...
- MAC电脑操作快捷键
注:command即苹果键,也有人称为花键.ctrl即control键.escape即键盘左上角的esc键.space空格键. 屏幕捕捉快捷键 动作:保存到-快捷键 全屏捕捉-桌面(.pdf文件):c ...
- 使用6to5,让今天就来写ES6的模块化开发!
http://es6rocks.com/2014/10/es6-modules-today-with-6to5/?utm_source=javascriptweekly&utm_medium= ...
- 删除windows系统中以前的设备(比如以前的网卡)或驱动的方法
1.在“开始”菜单单击“运行”,然后在“运行”对话框中输入“CMD”命令打开命令提示符窗口:2.在提示符窗口中输入“Set devmgr_show_nonpresent_devices=1”并回车:3 ...
- SQL 游标使用实例
IF EXISTS(SELECT *FROM sysobjects WHERE name='sp_ContestSubmit') DROP PROC sp_ContestSubmit GO -- == ...
- 直接使用提交过来的类来更新字段EntityState.Modified并过滤null值的方法
public T Update<T>(T entity) where T : ModelBase { var set = this.Set<T>(); set.Attach(e ...
- elasticsearch-cn-out-of-box
elasticsearch-cn-out-of-box https://github.com/hangxin1940/elasticsearch-cn-out-of-box 为elasticsearc ...
- Tomcat不能自动编译JSP文件问题的一种解决方法
今天碰到一个非常奇怪的问题,机器环境是JDK8.Tomcat8,把jQuery MiniUI ( for Java Eclipse)下载后导入到Eclipse中,首页可以显示,但运行操作数据库的页面出 ...
- java对过反射调用方法
public class InvokeTester { public InvokeTester() { } String str; public InvokeTester(String str) ...
- Android网络访问库 - Retrofit学习(1)基础
Retrofit是什么 Retrofit是一个类型安全的HTTP客户端,支持Android和Java.它是Square公司开源的项目,当前版本2.0. 在实际开发中,我们Retrofit配合OKHTT ...