菜鸟到大神的上位历程,即学即用走向人生巅峰

    在JavaScript中,创建数组可以使用Array构造函数,或者使用数组直接量[],后者是首选方法。Array对象继承自Object.prototype,对数组执行typeof操作符返回object而不是array。然而,[] instanceof Array也返回true。也就是说,类数组对象的实现更复杂,例如strings对象、arguments对象,arguments对象不是Array的实例,但有length属性,并能通过索引取值,所以能像数组一样进行循环操作。
  在本文中,我将复习一些数组原型的方法,并探索这些方法的用法。
  循环:.forEach
  判断:.some和.every
  区分.join和.concat
  栈和队列的实现:.pop, .push, .shift,和 .unshift
  模型映射:.map
  查询:.filter必备基础技能
 
  前端技能汇总(https://github.com/JacksonTian/fks)这个项目详细记录了前端工程师牵涉到的各方面知识。在具备基本技能之后可以在里面找到学习的方向,完善技能和知识面。
 
  frontend-dev-bookmarks(https://github.com/dypsilon/frontend-dev-bookmarks)是老外总结的前端开发资源。覆盖面非常广。包括各种知识点、工具、技术,非常全面。
 
  以下是个人觉得入门阶段应该熟练掌握的基础技能:
  HTML4,HTML5语法、标签、语义
  CSS2.1,CSS3规范,与HTML结合实现各种布局、效果
  Ecma-262定义的javascript的语言核心,原生客户端javascript,DOM操作,HTML5新增功能
  一个成熟的客户端javascript库,推荐jquery
  一门服务器端语言:如果有服务器端开发经验,使用已经会的语言即可,如果没有服务器端开发经验,熟悉Java可以选择Servlet,不熟悉的可以选PHP,能实现简单登陆注册功能就足够支持前端开发了,后续可能需要继续学习,最基本要求是实现简单的功能模拟,
  HTTP
  在掌握以上基础技能之后,工作中遇到需要的技术也能快速学习。
 
  基本开发工具
 
  恰当的工具能有效提高学习效率,将重点放在知识本身,在出现问题时能快速定位并解决问题,以下是个人觉得必备的前端开发工具:
  文本编辑器:推荐Sublime Text,支持各种插件、主题、设置,使用方便
  浏览器:推荐Google Chrome,更新快,对前端各种标准提供了非常好的支持
  调试工具:推荐Chrome自带的Chrome develop tools,可以轻松查看DOM结构、样式,通过控制台输出调试信息,调试javascript,查看网络等
  辅助工具:PhotoShop编辑图片、取色,fireworks量尺寸,AlloyDesigner对比尺寸,以及前面的到的Chrome develop tools,
  翻墙工具:lantern, 壁虎漫步
 
  学习方法和学习目标
 
  方法:
  入门阶段反复阅读经典书籍的中文版,书籍中的每一个例子都动手实现并在浏览器中查看效果
  在具备一定基础之后可以上网搜各种教程、demo,了解各种功能的实际用法和常见功能的实现方法
  阅读HTML,CSS,Javascript标准全面完善知识点
  阅读前端牛人的博客、文章提升对知识的理解
  善用搜索引擎
 
  目标:
  熟记前面知识点部分的重要概念,结合学习经历得到自己的理解
  熟悉常见功能的实现方法,如常见CSS布局,Tab控件等。
 
  入门之路
  以下是入门阶段不错的书籍和资料
  HTML先看《HTML & CSS: Design and Build Websites》1-9章,然后《HTML5: The Missing Manual》1-4章。
  CSS先看《CSS: The Missing Manual》,然后《CSS权威指南》
  javascript先看《javascript高级程序设计》,然后《javascript权威指南》
  HTTP看HTTP权威指南
  在整个学习过程中HTML CSS JavaScript会有很多地方需要互相结合,实际工作中也是这样,一个简单的功能模块都需要三者结合才能实现。
  动手是学习的重要组成部分,书籍重点讲解知识点,例子可能不是很充足,这就需要利用搜索引擎寻找一些简单教程,照着教程实现功能。以下是一些比较好的教程网址
  可以搜索各大公司前端校招笔试面试题作为练习题或者他人总结的前端面试题还有个人总结的面试题(带参考答案)
  http://code.tutsplus.com有各种各样的教程
  MDN也有很多教程,更重要的是里面有详细的文档,需要查找某个功能时在Google搜索:xxx site:https://developer.mozilla.org
  http://www5rocks.com/zh/也有很多优质教程
  http://www.sitepoint.com/
  http://alistapart.com/
  原生javascript是需要重点掌握的技能,在掌握原生javascript的基础上推荐熟练掌握jQuery,在实际工作中用处很大,这方面的书籍有《Learning jQuery》或者去jQuery官网
  建一个https://github.com/账号,保存平时学习中的各种代码和项目。
  有了一定基础之后可以搭建一个个人博客,记录学习过程中遇到的问题和解决方法,方便自己查阅也为其他人提供了帮助。也可以去http://www.cnblogs.com/或者http://www.csdn.net/这样的网站注册账号,方便实用
  经常实用Google搜索英文资料应该经常找到来自http://stackoverflow.com/的高质量答案,与到问题可以直接在这里搜索,如果有精力,注册一个账号为别人解答问题也能极大提高个人能力。
  经典书籍熟读之后,可以打开前面必备基础技能部分的链接。认真读对应标准,全面掌握知识
 
  继续提高
  有了前面的基础之后,前端基本算是入门了,这时候可能每个人心中都有了一些学习方向,如果还是没有。 可以参考前面必备技能部分提到的那两个项目,从里面选一些进行发展学习。以下是一些不错的方面:
  Grunt:前端自动化工具,提高工作效率
  less css:优秀的CSS预处理器
  bootstrap:优秀的CSS框架,对没有设计师的团队很不错,与less结合使用效果完美
  requirejs:AMD规范的模块加载器,前端模块化趋势的必备工具
  Node.js:JavaScript也可以做后台,前端工程师地位更上一步
  AngularJS:做Single Page Application的好工具
  移动端web开发:智能手机的普及让移动端的流量正在逐步赶超PC端
  Javascript内存管理:SPA长期运行需要注意内存泄露的问题
  High Performance JavaScript(Build Faster Web Application Interfaces)
  Best Practices for Speeding Up Your Web Site:重要技能
 
  一些个人经历
  LingyuCoder的学习经历
  上面的大神都总结得差不多了,我这里就胡扯一些吧
 
  工具
  chrome dev tools:前端开发调试利器,着重注意几个功能:
  console(废话)
  elements:元素样式调整,很常用
  sources:代码中添加断点,单步调试,以及单步调试过程中查看内存中的对象
  watch expression:通过表达式查看当前内存中的值
  call stack:查看调用栈,开启async,可以看异步调用栈(这个非常有用,尤其是ajax调试的时候)
  scope variables:作用域链上的变量,非常有用
  network:抓包查看每个请求,非常重要,前后端联调必备
  timeline:分析渲染、js执行等等各个阶段,性能优化利器
  emulation:模拟移动端环境,mobile页面开发必备
 
  一些插件:
  liveload: 修改页面后自动刷新,不用按F5
  dimensions:直接在页面上测量的利器
  livestyle:css样式修改后自动起效果,不需要刷新,elements修改后也能同步到代码中
  image tool:测量,取色
  UC二维码:移动端调试扫码必备
  pagespeed,YSlow:页面性能分析和优化插件
  马克飞象:优秀的在线markdown编辑器,快速写周报,做记录
  sublime text2:编码方便,插件多,速度快,性能好
  emmet:提升html编码速度必备
  sublimelinter + 各种语言的lint和hint:代码纠错
  一些snippets:自动补全,提升开发效率
  Intellij IDEA和WebStorm:集成开发环境,集成了各种功能,开发比sublime要方便,但会比较吃性能
  Mark Men:测量、取色、标注利器,拿到视觉稿之后第一个打开的软件
  GFW Fucker:我用红杏,可以的话买个虚拟服务器当梯子
  iHosts:非常优秀的hosts管理软件,轻松修改hosts,开发调试必备
  Charles:Mac 平台最好用的抓包分析工具
  Rythem:AlloyTeam出品的代理抓包软件,非常轻量,安装简单,移动端(真机)开发调试很好用
  Wunderlist:一个非常不错的Todo List,任务、需求多的时候管理起来很方便
 
  技能
 
  前端的技能其实除了JavaScript(包括NodeJS)、HTML、CSS以外,还有很多。其实前端的技能树很大,这里只能列一些我开发中见到的说一说
 
  语言基础
  JavaScript:
  作用域链、闭包、运行时上下文、this
  原型链、继承
  NodeJS基础和常用API
 
  CSS:
  选择器
  浏览器兼容性及常见的hack处理
  CSS布局的方式和原理(盒子模型、BFC、IFC等等)
  CSS 3,如animation、gradient、等等
 
  HTML:
  语义化标签
  进阶
 
  JavaScript:
  异步控制(Promise、ES6 generator、Async)
  模块化的开发方式(AMD、CMD、KMD等等)
  JavaScript解释器的一些相关知识
  异步IO实现
  垃圾回 收
  事件队列
  常用框架使用及其原理
 
  jQuery:基于选择器的框架,但个人认为不能叫框架,应该算工具库,因为不具备模块加载机制,其中源码很适合阅读钻研
 
  AngularJS/Avalon等MVVM框架:着重理解MVVM模式本身的理念和双向绑定的实现,如何解耦
 
  underscore:优秀的工具库,方便的理解常用工具代码片段的实现
 
  polymer/React: 组件化开发,面向未来,理解组件化开发的原理
 
  CSS和HTML:主要是CSS3的特性和HTML5的特性,以及浏览器处理的流程和绘制原理
 
  DOM树、CSSOM树、渲染树的构建流程及页面渲染的过程
 
  解析HTML、CSS、JavaScript时造成的阻塞
  HTML5相关
  SVG及矢量图原理
  Canvas开发及动画原理(帧动画)
  Video和Audio
  flex box布局方式
  icon fonts的使用
 
  常用NodeJs的package:
  koa
  express
  underscore
  async
  gulp
  grunt
  connect
  request
 
  一些理念:
  响应式Web
  优雅降级、渐进增强
  dont make me think
  网页可用性、可访问性、其中的意义
  SEO搜索引擎优化,了解搜索引擎的原理
  SPA的好处和问题
 
  性能优化:
  减少请求数量(sprite、combo)
  善用缓存(application cache、http缓存、CDN、localstorage、sessionstorage,备忘录模式)
  减少选择器消耗(从右到左),减少DOM操作(DOM和JavaScript解释器的分离)
  CSS的回流与重绘
 
  项目
  版本管理:首推Git,用过Git都不会想用SVN了
  Git:本地版本管理的机制
  SVN:远程中心的版本管理机制
  自动化构建:主要就是less、模板、coffee等的预处理以及对代码压缩和合并
  Gulp:基于流构建,速度快、模块质量好
  Grunt:独立任务构建,速度慢,配置蛋疼,灵活性高
  预处理和模板引擎
  less:语法简单,但功能有限
  jade、ejs、velocity等模板引擎,各有各的长处
  coffee:python工程师最爱,我没用过
  环境搭建:主要是将线上代码映射到本地,并在本地启动一个demo服务器,至于模拟数据的mock,见仁见智了
  本地代理:ihosts
  自动化测试:在业务较为稳定的情况下,可以通过自动化测试来减少测试的事件,但需求较多的时候,维护测试用例的成本会很高,可能用自动化测试会起到反效果
  jasmine
  mocha
  生态系统
  npm
  bower
  spm
  搭建一个属于自己的博客
  git pages
  hexo
  jekyll
 
  未来
  Web Componets:面向未来的组件化开发方式
  HTML模板
  Shadow DOM
  Custom Elements
  HTML Import
  移动端Native开发:这也是需要了解的,以后前端工程师会经常地和webview打交道,也要了解native开发
 
  其他
  有些东西不是考敲码就能弄好的,我参与实习的时候感受到了很多,这些是我遇到的也是我感觉自己做的不好的地方
  对于业务的思考:我个人这方面非常欠缺,所以放在最前面,在敲码前要多思考业务
  交流和沟通能力:这个非常重要,前端同时需要与项目经理、产品、交互、后台打交道,沟通不善会导致很多无用功,延缓项目
  知识管理、时间管理:input和output的平衡,output是最好的input。如何做好分享,参与社区,做好交流,作好记录
  对新技术的渴望,以及敢于尝试
 
  入门书
  入门可以通过啃书,但书本上的东西很多都已经过时了,在啃书的同时,也要持续关注技术的新动态。这里推几本我觉着不错的书:
  《JavaScript高级编程》:可以作为入门书籍,但同时也是高级书籍,可以快速吸收基础,等到提升再回来重新看
  《JavaScript权威指南》:不太适合入门,但是必备,不理解的地方就去查阅一下,很有帮助
  《编写可维护的JavaScript》和:
  《Node.js开发指南》:不错的Nodejs入门书籍
  《深入浅出Node.js》:Nodejs进阶书籍,必备
  《JavaScript异步编程》:理解JS异步的编程理念
  《JavaScript模式》和《JavaScript设计模式》:JavaScript的代码模式和设计模式,将开发思维转变到JavaScript,非常好的书
  《JavaScript框架设计》:在用轮子同时,应当知道轮子是怎么转起来的,讲解很详细,从源码级别讲解框架的各个部分的实现,配合一个现有框架阅读,可以学到很多东西
  《Dont make me think》:网页设计的理念,了解用户行为,非常不错
  《CSS禅意花园》:经久不衰的一部著作,同样传递了网页设计中的理念以及设计中需要注意的问题
  《高性能JavaScript》和《高性能HTML5》:强调性能的书,其中不只是性能优化,还有很多原理层面的东西值得学习
  《HTML5 Canvas核心技术》:我正在读的一本书,对于canvas的使用,动画的实现,以及动画框架的开发都非常有帮助
  《HTTP权威指南》:HTTP协议相关必备,前端开发调试的时候也会经常涉及到其中的知识
  《响应式Web设计》:技术本身不难,重要的是响应式网页的设计理念,以及移动先行的思想
  《JavaScript语言精粹》:老道的书,也是普及JavaScript的开发思维的一本好书,非常适合入门
 
  一些不错的网站
  github:没啥好说的,多阅读别人的源码,多上传自己的源码,向世界各地的大牛学习
  codepen:感受前端之美的必选之地,里面有很多酷炫的效果和优秀的插件
  HTML5中国:业内更新频率最高,每日提供最新资讯和实践干货
  echojs:快速了解js新资讯的网站
  stackoverflow和segmentfault:基本上各种问题都能在上面获得解答
  google web fundamentals:每篇文章都适合仔细阅读
  static files:开放的CDN,很好用
  iconfont:阿里的矢量图标库,非常不错,支持CDN而且支持项目
  html5 rocks: 一个不错的网站,很多浏览器的新特性以及前沿的技术,都能在这上面找到文章
  css tricks:如何活用CSS,以及了解CSS新特性,这里可以满足你
  JavaScript 秘密花园 JavaScript初学必看,非常不错
  w3cplus:一个前端学习的网站,里面的文章质量都挺不错的
  node school:一个不错的node学习网站
  learn git branch:一个git学习网站,交互很棒
  前端乱炖:一个前端文章分享的社区,有很多优秀文章
  正则表达式:一个正则表达式入门教程,非常值得一看
  阮一峰的博客和张鑫旭的博客:快速了解某些知识的捷径,但是如果需要深挖,还需要其他的资源
  各路大牛的博客:这个太多了,就不贴了,知乎上有很全的
  各种规范的官方网站,不懂得时候读规范
  排序:.sort
  计算:.reduce和.reduceRight
  复制:.slice
  强大的.splice
  查找:.indexOf
  操作符:in
  走近.reverse




  循环:.forEach
  这是JavaScript中最简单的方法,但是IE7和IE8不支持此方法。
  .forEach 有一个回调函数作为参数,遍历数组时,每个数组元素均会调用它,回调函数接受三个参数:
  value:当前元素
  index:当前元素的索引
  array:要遍历的数组
  此外,可以传递可选的第二个参数,作为每次函数调用的上下文(this).
1
['_', 't', 'a', 'n', 'i', 'f', ']'].forEach(function (value, index, array) {
2
    this.push(String.fromCharCode(value.charCodeAt() + index + 2))
3
}, out = [])
4
out.join('')
5
// <- 'awesome'


  后文会提及.join,在这个示例中,它用于拼接数组中的不同元素,效果类似于out[0] + ” + out[1] + ” + out[2] + ” + out[n]。
  不能中断.forEach循环,并且抛出异常也是不明智的选择。幸运的事我们有另外的方式来中断操作。


  判断:.some和.every
  如果你用过.NET中的枚举,这两个方法和.Any(x => x.IsAwesome) 、 .All(x => x.IsAwesome)类似。
  和.forEach的参数类似,需要一个包含value,index,和array三个参数的回调函数,并且也有一个可选的第二个上下文参数。MDN对.some的描述如下:
  some将会给数组里的每一个元素执行一遍回调函数,直到回调函数返回true。如果找到目标元素,some立即返回true,否则some返回false。回调函数只对已经指定值的数组索引执行;它不会对已删除的或未指定值的元素调用。
1
max = -Infinity
2
satisfied = [10, 12, 10, 8, 5, 23].some(function (value, index, array) {
3
    if (value > max) max = value
4
    return value < 10
5
})
6
console.log(max)
7
// <- 12
8
satisfied
9
// <- true


  注意,当回调函数的value < 10时,中断函数循环。.every的运行原理和.some类似,但回调函数是返回false而不是true。


  区分.join和.concat
  .join和.concat 经常混淆。.join(separator)以separator作为分隔符拼接数组元素,并返回字符串形式,如果没有提供separator,将使用默认的,。.concat会创建一个新数组,作为源数组的浅拷贝。
  .concat常用用法:array.concat(val, val2, val3, valn)
  .concat返回一个新数组
  array.concat()在没有参数的情况下,返回源数组的浅拷贝。
  浅拷贝意味着新数组和原数组保持相同的对象引用,这通常是好事。例如:
1
var a = { foo: 'bar' }
2
var b = [1, 2, 3, a]
3
var c = b.concat()
4
console.log(b === c)
5
// <- false
6
b[3] === a && c[3] === a
7
// <- true


  栈和队列的实现:.pop, .push, .shift和 .unshift
  每个人都知道.push可以再数组末尾添加元素,但是你知道可以使用[].push(‘a’, ‘b’, ‘c’, ‘d’, ‘z’)一次性添加多个元素吗?
  .pop 方法是.push 的反操作,它返回被删除的数组末尾元素。如果数组为空,将返回void 0 (undefined),使用.pop和.push可以创建LIFO (last in first out)栈。
01
function Stack () {
02
    this._stack = []
03
}
04
Stack.prototype.next = function () {
05
    return this._stack.pop()
06
}
07
Stack.prototype.add = function () {
08
    return this._stack.push.apply(this._stack, arguments)
09
}
10
stack = new Stack()
11
stack.add(1,2,3)
12
stack.next()
13
// <- 3
14
相反,可以使用.shift和 .unshift创建FIFO (first in first out)队列。
15
 
16
function Queue () {
17
    this._queue = []
18
}
19
Queue.prototype.next = function () {
20
    return this._queue.shift()
21
}
22
Queue.prototype.add = function () {
23
    return this._queue.unshift.apply(this._queue, arguments)
24
}
25
queue = new Queue()
26
queue.add(1,2,3)
27
queue.next()
28
// <- 1
29
Using .shift (or .pop) is an easy way to loop through a set of array elements, whiledraining the array in the process.
30
list = [1,2,3,4,5,6,7,8,9,10]
31
while (item = list.shift()) {
32
    console.log(item)
33
}
34
list
35
// <- []


  模型映射:.map
  .map为数组中的每个元素提供了一个回调方法,并返回有调用结果构成的新数组。回调函数只对已经指定值的数组索引执行;它不会对已删除的或未指定值的元素调用。
  Array.prototype.map 和上面提到的.forEach、.some和 .every有相同的参数格式:.map(fn(value, index, array), thisArgument)
1
values = [void 0, null, false, '']
2
values[7] = void 0
3
result = values.map(function(value, index, array){
4
    console.log(value)
5
    return value
6
})
7
// <- [undefined, null, false, '', undefined × 3, undefined]


  undefined × 3很好地解释了.map不会对已删除的或未指定值的元素调用,但仍然会被包含在结果数组中。.map在创建或改变数组时非常有用,看下面的示例:
01
// casting
02
[1, '2', '30', '9'].map(function (value) {
03
    return parseInt(value, 10)
04
})
05
// 1, 2, 30, 9
06
[97, 119, 101, 115, 111, 109, 101].map(String.fromCharCode).join('')
07
// <- 'awesome'
08
// a commonly used pattern is mapping to new objects
09
items.map(function (item) {
10
    return {
11
        id: item.id,
12
        name: computeName(item)
13
    }
14
})


  查询:.filter
  filter对每个数组元素执行一次回调函数,并返回一个由回调函数返回true的元素组成的新数组。回调函数只会对已经指定值的数组项调用。
  通常用法:.filter(fn(value, index, array), thisArgument),跟C#中的LINQ表达式和SQL中的where语句类似,.filter只返回在回调函数中返回true值的元素。
1
[void 0, null, false, '', 1].filter(function (value) {
2
    return value
3
})
4
// <- [1]
5
[void 0, null, false, '', 1].filter(function (value) {
6
    return !value
7
})
8
// <- [void 0, null, false, '']


  排序:.sort(compareFunction)
  如果没有提供compareFunction,元素会被转换成字符串并按照字典排序。例如,”80″排在”9″之前,而不是在其后。
  跟大多数排序函数类似,Array.prototype.sort(fn(a,b))需要一个包含两个测试参数的回调函数,其返回值如下:
  a在b之前则返回值小于0
  a和b相等则返回值是0
  a在b之后则返回值小于0
1
[9,80,3,10,5,6].sort()
2
// <- [10, 3, 5, 6, 80, 9]
3
[9,80,3,10,5,6].sort(function (a, b) {
4
    return a - b
5
})
6
// <- [3, 5, 6, 9, 10, 80]


  计算:.reduce和.reduceRight
  这两个函数比较难理解,.reduce会从左往右遍历数组,而.reduceRight则从右往左遍历数组,二者典型用法:.reduce(callback(previousValue,currentValue, index, array), initialValue)。
  previousValue 是最后一次调用回调函数的返回值,initialValue则是其初始值,currentValue是当前元素值,index是当前元素索引,array是调用.reduce的数组。
  一个典型的用例,使用.reduce的求和函数。
1
Array.prototype.sum = function () {
2
    return this.reduce(function (partial, value) {
3
        return partial + value
4
    }, 0)
5
};
6
[3,4,5,6,10].sum()
7
// <- 28


  如果想把数组拼接成一个字符串,可以用.join实现。然而,若数组值是对象,.join就不会按照我们的期望返回值了,除非对象有合理的valueOf或toString方法,在这种情况下,可以用.reduce实现:
01
function concat (input) {
02
    return input.reduce(function (partial, value) {
03
        if (partial) {
04
            partial += ', '
05
        }
06
        return partial + value
07
    }, '')
08
}
09
concat([
10
    { name: 'George' },
11
    { name: 'Sam' },
12
    { name: 'Pear' }
13
])
14
// <- 'George, Sam, Pear'


  复制:.slice
  和.concat类似,调用没有参数的.slice()方法会返回源数组的一个浅拷贝。.slice有两个参数:一个是开始位置和一个结束位置。
  Array.prototype.slice 能被用来将类数组对象转换为真正的数组。
1
Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })
2
// <- ['a', 'b']
3
这对.concat不适用,因为它会用数组包裹类数组对象。
4
 
5
Array.prototype.concat.call({ 0: 'a', 1: 'b', length: 2 })
6
// <- [{ 0: 'a', 1: 'b', length: 2 }]


  此外,.slice的另一个通常用法是从一个参数列表中删除一些元素,这可以将类数组对象转换为真正的数组。
01
function format (text, bold) {
02
    if (bold) {
03
        text = '<b>' + text + '</b>'
04
    }
05
    var values = Array.prototype.slice.call(arguments, 2)
06
    values.forEach(function (value) {
07
        text = text.replace('%s', value)
08
    })
09
    return text
10
}
11
format('some%sthing%s %s', true, 'some', 'other', 'things')


  强大的.splice
  .splice 是我最喜欢的原生数组函数,只需要调用一次,就允许你删除元素、插入新的元素,并能同时进行删除、插入操作。需要注意的是,不同于`.concat和.slice,这个函数会改变源数组。
1
var source = [1,2,3,8,8,8,8,8,9,10,11,12,13]
2
var spliced = source.splice(3, 4, 4, 5, 6, 7)
3
console.log(source)
4
// <- [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ,13]
5
spliced
6
// <- [8, 8, 8, 8]


  正如你看到的,.splice会返回删除的元素。如果你想遍历已经删除的数组时,这会非常方便。
01
var source = [1,2,3,8,8,8,8,8,9,10,11,12,13]
02
var spliced = source.splice(9)
03
spliced.forEach(function (value) {
04
    console.log('removed', value)
05
})
06
// <- removed 10
07
// <- removed 11
08
// <- removed 12
09
// <- removed 13
10
console.log(source)
11
// <- [1, 2, 3, 8, 8, 8, 8, 8, 9]


  查找:.indexOf
  利用.indexOf 可以在数组中查找一个元素的位置,没有匹配元素则返回-1。我经常使用.indexOf的情况是当我有比较时,例如:a === ‘a’ || a === ‘b’ || a === ‘c’,或者只有两个比较,此时,可以使用.indexOf:['a', 'b', 'c'].indexOf(a) !== -1。
  注意,如果提供的引用相同,.indexOf也能查找对象。第二个可选参数用于指定开始查找的位置。
01
var a = { foo: 'bar' }
02
var b = [a, 2]
03
console.log(b.indexOf(1))
04
// <- -1
05
console.log(b.indexOf({ foo: 'bar' }))
06
// <- -1
07
console.log(b.indexOf(a))
08
// <- 0
09
console.log(b.indexOf(a, 1))
10
// <- -1
11
b.indexOf(2, 1)
12
// <- 1


  如果你想从后向前搜索,可以使用.lastIndexOf。
  操作符:in
  在面试中新手容易犯的错误是混淆.indexOf和in操作符:
1
var a = [1, 2, 5]
2
1 in a
3
// <- true, but because of the 2!
4
5 in a
5
// <- false


  问题是in操作符是检索对象的键而非值。当然,这在性能上比.indexOf快得多。
1
var a = [3, 7, 6]
2
1 in a === !!a[1]
3
// <- true


  走近.reverse
  该方法将数组中的元素倒置。
1
var a = [1, 1, 7, 8]
2
a.reverse()
3
// [8, 7, 1, 1]
  .reverse 会修改数组本身。

www.wangzhanjianshegs.com


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值