Advanced JS Notebook

2018-10-12 admin

Basic arrays

The arrays in JS is similar with those in python with use square brackets []. Some predefined methods are listed below:

var li = [1, 2, 3, 4, 5];

//shift()
var first_of_li = li.shift(); //removes the first element and returns that element
console.log(li) //>> [2, 3, 4, 5]

//pop()
var last_of_li = li.pop(); //removes the last element and returns that element
console.log(li) //>> [2, 3, 4]
var new_length = li.push(6, 7, 8); //adds items to the end and returns the new lenght of that array
console.log(li) //>> [2, 3, 4, 6, 7, 8]

//concat()
var merged_li = li.concat([9, 10]);//concatenate two arrays without changging them

//sort()
//sorts the elements of an array in place and returns the array. The default sort order is according to string Unicode code points.
var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months) //>> ["Dec", "Feb", "Jan", "March"]
var array1 = [1, 30, 4, 21];
array1.sort();
console.log(array1) //>> [1, 21, 30, 4]

Advanced arrays

Instead of using forEach which simply loop an array but does nothing to its elements, map, filter and reduce are way more convenient.

map

It iterates elements and applying the operations to each of them, in the expectation that the operations return elements. e.g.:

/* double the elements in array */

var array = [5, 2, 10, 26];
var mapArray = array.map(ele => ele * 2);//shortform of 'array.map(ele => {return ele*2;})' coz there is only a single line

//using forEach
var double = [];
var mapArray = array.forEach(ele => {double.push(ele * 2);});

filter

As its name suggests, it filters elements with conditions. As with map, it has to return something.

/* find the elements > 5 in an array */
var array = [5, 2, 10, 26];
var filterArray = array.filter(ele => ele > 5);//shortform of 'array.filter(ele => {return ele > 5;})'

reduce

It is another powerful function which you can even use to do ‘map’ and ‘filter’. It use an ‘accumulator’ to store the results caused in the body of the function.

/* sum all the elements of an array */
var array = [5, 2, 10, 26];
var reduceArray = array.reduce((accumulator, ele) => ele + accumulator, 0);//shortform for 'array.reduce((accumulator, ele) => {return ele + accumulator;}, 0)

原文链接:https://segmentfault.com/a/1190000016663767

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42531.html

文章标题:Advanced JS Notebook

相关文章
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"&gt...
2017-02-17
NodeJS参考手册pdf版
下载地址:Nodejs参考手册PDF版下载 ...
2015-11-12
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
使用jspdf生成pdf报表
由于前台html已经动态生成报表,而且,前台有一个功能,一个date range组件,当你拖动的时候,报表会在不提交到后台的情况下动态变化。 因此需要用到js生成生报表: 用到的组件: jquery.js jspdf.js canvg.js...
2017-03-25
AngularJS vs. jQuery,看看谁更胜一筹
很多Web开发新手都会有这样的疑问“我应该使用什么开发框架呢,如何快速学会Web开发呢?”这个问题其实没有一个统一的正确答案,其中讨论最多的就是AngularJS和jQuery的差别。这两者的之间的比较很微妙,有时就像拿苹果和橘子在作比较,...
2015-11-12
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
回到顶部