艺宵网 技术资讯 用JS开发鸿蒙应用实列

用JS开发鸿蒙应用实列

零、引言 6月2日鸿蒙操作系统的发布如蛟龙出水,好评如潮,国人热切盼望拥有自主开发的操作系统这一国之重器。更在…

零、引言

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

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

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

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

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

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

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

一、JavaScript 函数式开发入门

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

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

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

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

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

Categories

Iteration

Non-iteration

PureFunctions

Transform: reduce map flat

concat,

flatMap, forEach,fill

join, slice

Predicates:filter, find, findIndex

indexOf, lastIndexOf

SideEffects

Stack:push, pop

splice

Queue: unshift, shift

Sort: sort, reverse

二、数组的纯函数操作方法

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

  • 六种需要运行一次迭代的方法
// 1.map
let array = [31, 78, 97, 230];
array.map(x=>Math.sqrt(x));

// 2.reduce
array.reduce((x,y)=>x y, 0);

// 3.flat
let array2 = ["apple", "orange", "pear", ["banana", "cherry"]];
array2.flat();

// 4.flatMap
array.flatMap(x=>[Math.log2(x)]);

// 5.fill
array.forEach(val=>console.log(val)

// 6.fill
Array(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.pop()
567
> array
[ 31, 78, 97, 230 ]

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

// Queue
// 插入到队列之首
> array.unshift(666)
4
> array
[ 666, 78, 97, 230 ]
// 取出队列首个元素
> array.shift()
666
> 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入手学习的第一课,从函数式编程的两个维度,是否为纯函数(是否产生副作用)和是否迭代,绘制四象限作归类总结:

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

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

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

本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。http://www.yixao.net/tech/23557.html
Vedu

作者: Vedu

这个人很懒,什么都没有留下~

发表评论

联系我们

联系我们

15378714280

在线咨询: QQ交谈

邮箱: yixaonet@163.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部