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

相关文章
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
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
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
使用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
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: <form id="form" method="post" action="http:&#x2...
2017-03-06
回到顶部