千万不要只在嘴上聊鸿蒙了,手上也要动起来,用JS开发鸿蒙应用

6月2日鸿蒙操作系统的发布如蛟龙出水,好评如潮,国人热切盼望拥有自主开发的操作系统这一国之重器。更在将来能在移动端与安卓和IOS,在PC端与Windows,Linux,MacOS形成鼎力之势。

有诗为证“鸿鹄志远,一举千里;承蒙厚爱,不负期待”。

在“乱花渐欲迷人眼”的喧闹声中,在人人都想要安装鸿蒙系统的呼声中。不妨抽身出来,冷静思考,如何乘着这股东风,如何 能“大鹏一日同风起,扶摇直上九万里”。

这股东风吹来的机会就是“鸿蒙”系统的应用开发。具体而言,鸿蒙的应用开发框架采用的是JavaScrpt作为开发语言。

本文是系列JS课程的第一课。

JavaScript语言当下不仅是前端开发的唯一语言,更在后端开发,服务器应用等方面攻城略地,此刻更有了得“天时地利”的鸿蒙的加持,可以说是前途无量。

而最令人惊喜的是,JavaScript的著名前端框架REACT正在引领“函数式编程”这门神奇而古老的编程技术的文艺复兴。因此,坊间说法,JS是披着OOP面向对象语言的幌子,却是实打实的FP函数式编程的里子。

如果“面向对象编程”的Java和“面向过程编程”的C是刻板的机器思维模式,那么JavaScript的这一波“函数式编程”,将会把最符合人类直觉思维的编程模式,落实到应用开发之中。

函数式的编程思维从“数组”的操作开始。按照是否为纯函数和是否应用迭代方法,绘制四象限,将数组的所有操作方法归类如下:

PureFunctions Transform: reduce map flat concat,
flatMap, forEach,fill join, slice
Predicates:filter, find, findIndex indexOf, lastIndexOf
SideEffects Stack:push, pop splice

数组的纯函数操作分为两类,即数组变形(transform)与数组筛选(predicates)。 首先介绍数组变形的6种涉及迭代的方法和3个非迭代的方法:

  • 六种需要运行一次迭代的方法

// 1.maplet array = [31, 78, 97, 230];array.map(x=>Math.sqrt(x));// 2.reducearray.reduce((x,y)=>x+y, 0);// 3.flatlet array2 = ["apple", "orange", "pear", ["banana", "cherry"]];array2.flat;// 4.flatMaparray.flatMap(x=>[Math.log2(x)]);// 5.fillarray.forEach(val=>console.log(val)// 6.fillArray(10).fill(0);

  • 三种不需要迭代的方法:

> let array = [31, 78, 97, 230]undefined> array.join'31,78,97,230'> array.slice(2)[ 97, 230 ]> array.concat([4, 5], 19)[ 31, 78, 97, 230, 4, 5, 19]>

  • 函数式的逻辑判断方法

逻辑判断就是从数组中筛选满足条件的元素,单单靠着直觉就能想到find,includes等等。

> // 1.find> array.find(val=> val>30 && val<100)31> // 2.findIndex> array.findIndex(val=> val>30 && val<100)0> // 3.filter> array.filter(val => val>50 || val < 100)[ 31, 78, 97, 230 ]> // 4.includes> array.includes(230)true> // 5.every> array.every(val => val> 50)false> // 6.some> array.some(val => val > 60)true> // 7.indexOf> array.indexOf(78)> // 8.lastIndexOf> array.lastIndexOf(78)1

数组的非函数操作就是会产生副作用而变更原数组的方法,主要是数据操作方法。 首先看Stack栈操作,有推入栈和推出栈两种方法:

> // Stack> array.push(567)5> array[ 31, 78, 97, 230, 567 ]> array.pop567> array[ 31, 78, 97, 230 ]

其次是Queue队操作,排队和出列两种操作方法:

// Queue// 插入到队列之首> array.unshift(666)4> array[ 666, 78, 97, 230 ]// 取出队列首个元素> array.shift666> array[ 78, 97, 230 ]

接下来是无处不在的排序方法:

> array.sort((a, b) => a-b)[ 78, 97, 230 ]> array.reverse((a, b) => a-b)[ 230, 97, 78 ]

最后是特殊的splice方法。

将splice单独拿出来是因为其语法比较使人疑惑,其基本语法为:

let arrDeletedItems = arr.splice(start[, deleteCount[, item1[, item2[, ...]]]]) // 首先是插入元素,在指定index的前面插入。> array.splice(1, 0, 789)> array[ 230, 789, 97, 78 ]> array.splice(2, 0, [4, 5, 6])> array[ 230, 789, [ 4, 5, 6 ], 97, 78 ]// 其次是替换元素> array.splice(2, 1, [12, 34, 56])[ [ 4, 5, 6 ] ]> array[ 230, 789, [ 12, 34, 56 ], 97, 78 ]

最后提一句,JS的array方法没有直接删除元素的remove, 类似于elisp的

(remove 2 '(1 3 2 4));;(1 3 4)

需要拆解为两步才能完成,首先用indexOf找到index,然后再用splice删掉。

> array.indexOf(789)1> array.splice(1,1)[ 789 ]> array[ 230, [ 12, 34, 56 ], 97, 78 ]

以上为鸿蒙应用开发,从JavaScript入手学习的第一课,从函数式编程的两个维度,是否为纯函数(是否产生副作用)和是否迭代,绘制四象限作归类总结:

最后,一点心愿,写硬核技术文章耗费很多精力,然而流量却远远不及口水文章,作者的坚持需要你的支持和鼓励,有劳费心帮忙点赞转发加关注。

有任何问题,请在评论区留言,将会一一回复。

相关文章

发表于: 2021-06-09 04:24:25 PM
更多新闻请到脸书追踪我们:我的分享平台

Be the first to comment

Leave a Reply

Your email address will not be published.


*