分享15 个 JavaScript 代码示例及其 Dart 对应代码。

简介: 本文对比了React/React Native中的JavaScript语法与Flutter中的Dart语法,帮助开发者快速上手Flutter。内容涵盖JSON处理、数组操作、类型转换、条件判断等常见功能,如`JSON.stringify`与`JsonEncoder().convert`,`array.push`与`list.add`,`parseInt`与`int.parse`等,并提供了15个JavaScript与Dart代码示例对照。这对于从JavaScript转向Dart的开发者尤其有用。

做为 开发过React/React Native 的工程师,在刚开始接触Flutter 开发的时候,一定会遇到这种情况,对于某个功能你能很熟练使用特定Javascript语法去完成,但是对于Flutter 开发,对应的Dart的语法又是什么?往往要再翻开Dart文档去寻找对应的语法。在此分享15 个 JavaScript 代码示例及其 Dart 对应代码。

JSON.stringify 和 JsonEncoder().convert
在 JavaScript 中,如果要将对象转换为 JSON 字符串,可以使用:

JSON.stringify(yourObject)
在 Dart 中,只需导入'dart:convert'即可使用:

import 'dart:convert';

JsonEncoder().convert(yourObject)

JSON.parse和JsonDecoder().convert
在 JavaScript 中将 JSON 转换为对象,会使用以下代码:

JSON.parse(yourJson)
在 Dart 中,只需导入'dart:convert'即可使用:

import 'dart:convert';
//代码效果参考:

JsonDecoder().convert(yourJson)
https://shenzhen.92demo.com/sitemap
array.push和list.add
在 JavaScript 中,要添加'hello'到数组中,可以使用

array.push('hello')
在 Dart 中,这样使用,

list.add('hello')

array.splice和list.sublist
在 JavaScript 中,数组删除第一个元素(索引值为0)

array.splice(0, 1)
在Dart中, 返回索引范围(1 和 3)内的新列表

list.sublist(1, 3)

array.splice和list.removeAt
array.splice与#4点一样
在Dart中, 删除索引值为itemIndex的值

list.removeAt(itemIndex)

array.length > 0和list.isNotEmpty
检查数组是否为空

array.length > 0
Dart里,是这样

list.isNotEmpty

array.length === 0和list.isEmpty
检查数组是否为空

array.length === 0
Dart里,是这样

list.isEmpty

parseInt和int.parse
在 JavaScript 中将字符串转换为整数,可以使用

parseInt('123')
在Dart里,是这样

int.parse('123')

parseFloat 和 double.parse
双精度浮点数的使用如下:

parseFloat('1.23')
在Dart里,是这样
//代码效果参考:https://wuzhong.92demo.com/sitemap

double.parse('1.23')

array.some 和 list.any
在 JavaScript 中,array.some()方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的。
例如,如果想查看数组[1, 2, 3, 4, 5, 6, 7]是否有任何大于 5 的数字:

var some = array.some(x=>x > 5)
在Dart,是这样的,

array.any((x)=>x > 5);

array.findIndex和list.indexWhere
Javascript的array.findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
Dart用的是list.indexWhere,只是用法不一样
var notes = ['do', 're', 'mi', 're'];
// JavaScript
notes.findIndex(x=>x.indexOf("r") > -1) // 1
// Dart
notes.indexWhere((note) => note.startsWith('r')); // 1
「Tip」 在 Dart 中,还可以在函数后面传递一个参数来提供起始索引。如下:

notes.indexWhere((note) => note.startsWith('r'), 2 ); // 3

array.indexOf() 和 list.indexOf()
在 JavaScript 和 Dart 中,indexOf是一种用于在数组或列表中查找索引位置的方法。没有则返回-1
var author = ['Edgar Allen Poe', 'JK Rowling', 'Ernest Hemingway']
author.indexOf('JK Rowling') // 1

toString
在 JavaScript 中,会使用toString()将另一种数据类型的值转换为字符串。它适用于整数、浮点数、布尔值、数组和对象。对于对象的话会得到以下结果:
var x = {id: 1}
console.log(x.toString())
=> '[object Object]'
但是两者会有一定的差别,如下:

// Dart
String test = 1.toString() // '1'
// JavaScript
var x = 1.toString() // 未捕获的语法错误:无效或意外的标记

array.every 和 list.every
every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。用法与上面array.some 和 list.any相似
https://dehong.92demo.com/sitemap
map, forEach, filter, find等
除了语法上的一些差异之外,上述所有方法都在 JavaScript 和 Dart 之间共享。当map用于test等于的数组时,请参见如下[1, 2, 3, 4, 5]。
Javascript:

// 其他类似
test.map(x=>x*2)
Dart:

est.map((x)=>x*2)

相关文章
|
25天前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
120 58
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
221 2
|
12天前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
29 3
原生js炫酷随机抽奖中奖效果代码
|
17天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
174 4
|
19天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
69 6
|
15天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
45 1
|
1月前
|
JavaScript 前端开发 开发者
如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。
【10月更文挑战第9天】随着前端开发技术的发展,代码规范和格式化工具变得至关重要。本文介绍如何在 VSCode 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升团队协作效率和代码质量。通过安装插件、配置 ESLint 和 Prettier,以及设置 VSCode,实现代码实时检查和格式化,确保代码风格一致。
27 2
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。
【10月更文挑战第8天】本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查并自动格式化 Vue.js 代码,提升代码质量和团队协作效率。通过安装 VSCode 插件、配置 ESLint 和 Prettier,实现代码规范检查和自动格式化,确保代码风格一致,提高可读性和维护性。
68 2
|
30天前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理、应用与代码演示
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理、应用与代码演示