Быстрая шпаргалка для разработчиков JavaScript и Flutter

Как разработчик React/React Native, который в последнее время больше работает с Flutter, я сталкивался со случаями, когда я использовал JavaScript, но мне нужно было найти эквивалент Dart.

В этом посте я поделюсь списком распространенных методов JavaScript и их эквивалентным методом в файлах Flutter Dart.

1. JSON.stringify и JsonEncoder().convert

В JavaScript, если вы хотите преобразовать объект в строку JSON, вы должны использовать:

JSON.stringify(yourObject)

В Dart, если вы import 'dart:convert';, вы можете использовать следующий код для преобразования вашего yourObject в строку:

JsonEncoder().convert(yourObject)

2. JSON.parse и JsonDecoder().convert

В JavaScript для преобразования JSON в объект мы будем использовать следующий код:

JSON.parse(yourJson)

В Dart просто импортируйте 'dart:convert' и вы можете использовать:

JsonDecoder().convert(yourJson)

3. array.push и list.add

Манипулирование массивами или списками — огромная часть любого языка программирования. Обычная часть этой обработки данных включает добавление чего-либо в массив/список.

В JavaScript, чтобы добавить 'hello' в массив, вы должны использовать:

array.push('hello')

В Dart мы бы использовали:

list.add(‘hello’)

4. array.splice и list.sublist

Еще одним полезным инструментом при работе с массивами/списками является удаление из них элемента. Скажем, например, вы хотели удалить 'Jan' из ['Jan', 'March', 'April'].

JavaScript использует следующий код для удаления элемента one (второй аргумент) в первом индексе (первый аргумент)

array.splice(0, 1)

В Dart вы бы написали это так:

list.sublist(1, 3)

Это возвращает новый список в диапазоне индексов (1 и 3).

Да, в нашем списке нет элемента с индексом 3. Это все еще работает, потому что второй аргумент не является включающим (это означает, что он не будет включать элемент с индексом 3, а будет включать любые индексы ниже него.

5. array.splice и list.removeAt

В дополнение к возможности использовать list.sublist в Dart, если вы пытаетесь просто удалить один элемент из списка, все, что вам нужно, это индекс этого элемента, и вы можете использовать list.removeAt(itemIndex).

Для JavaScript splice используется таким же образом. как #4.

6. array.length > 0 и list.isNotEmpty

Полезно проверить, пуст массив или нет. В JavaScript вы бы просто сделали:

array.length > 0

В Dart вы бы написали это как

list.isNotEmpty

7. array.length === 0 и list.isEmpty

Помимо проверки наличия чего-либо в массиве, вы можете проверить, пуст ли он.

В JavaScript вы бы написали

array.length === 0

В Дарте:

list.isEmpty

8. parseInt и int.parse

Если вы хотите преобразовать строку в целое число в JavaScript, вы должны использовать:

parseInt('123')

В Дарте:

int.parse('123')

9.parseFloat и double.parse

В JavaScript число с плавающей запятой — это десятичное или дробное число.

В Dart этот тип числа называется двойным.

Итак, как и parseInt и int.parse, вы просто используете parseFloat(‘1.23’) для JavaScript. double.parse('1.23') используется Dart для преобразования строки с десятичным числом в число (или, точнее, в двойное).

10. array.some и list.any

В JavaScript array.some перебирает массив и выполняет функцию обратного вызова (передается в качестве аргумента some) на каждой итерации, чтобы оценить, соответствует ли какой-либо элемент массива определенным критериям. Он возвращает либо истину, либо ложь. Он работает так же в дартс, за исключением того, что он называется any.

Например, если вы хотите узнать, есть ли в массиве [1, 2, 3, 4, 5, 6, 7] какие-либо элементы, превышающие 5:

В JavaScript:

var some = array.some(x=>x > 5)

В Дарте:

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

11. array.findIndex и list.indexWhere

JavaScript использует findIndex для поиска первого индекса элемента, который удовлетворяет предоставленному обратному вызову.

indexWhere делает то же самое в Dart, но выглядит немного иначе. См. ниже.

var notes = ['do', 're', 'mi', 're'];
JavaScript
notes.findIndex(x=>x.indexOf("r") > -1) // 1
Dart
notes.indexWhere((note) => note.startsWith('r')); // 1

Бонус: в Dart вы также можете передать аргумент после функции, чтобы указать начальный индекс. См. ниже.

notes.indexWhere((note) => note.startsWith('r'), 2); // 3
//this one find the index of the first item that satisfies the callback but the starting point is the second index. This is why the result is 3 and not 1.

Общие методы

1. array.indexOf() и list.indexOf()

И в JavaScript, и в Dart indexOf — это метод, используемый для поиска индекса предоставленного значения в массиве или списке.

Оба они возвращают -1, если элемент не может быть найден в массиве. Если задан массив/список с именем authors, и JavaScript, и Dart могут использовать indexOf таким образом.

var authors = ['Edgar Allen Poe', 'JK Rowling', 'Ernest Hemingway']
authors.indexOf('JK Rowling') // 1

2. toString и toString

В JavaScript вы использовали бы toString() для преобразования значения другого типа данных в строку. Он работает с целыми числами, числами с плавающей запятой, логическими значениями, массивами и объектами (вроде). Я говорю «отчасти потому, что если бы вы выполнили toStringS с объектом, вы бы получили следующее.

var x = {id: 1}
console.log(x.toString())
=> '[object Object]'

Для массива вы получите все элементы массива и запятые, но не квадратные скобки. Вы можете использовать метод в dart, за исключением того, что вы можете прикрепить toString непосредственно к значению, чего вы не можете сделать в JavaScript. См. ниже.

Dart
String test = 1.toString() // '1'
JavaScript
var x = 1.toString() // Uncaught SyntaxError: Invalid or unexpected token

3. array.every и list.every

В отличие от some или any, вы должны использовать every, чтобы определить, соответствуют ли every элемента в массиве определенным критериям, а не только some из них. every принимает функцию обратного вызова, которая должна выполняться для каждого элемента, так же как some и any.

4. map, forEach, filter, find, etc.

Все вышеперечисленные методы являются общими для JavaScript и Dart, за исключением нескольких различий в синтаксисе. См. ниже при использовании map для массива test, который равен [1, 2, 3, 4, 5].

JavaScript:

test.map(x=>x*2)

Дарт:

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

У вас есть что-то, что вы хотите добавить в список? Дай мне знать в комментариях!

Обновите бесплатную подписку на Medium и получайте неограниченное количество статей без рекламы от тысяч авторов в самых разных изданиях. Это партнерская ссылка, и часть вашего членства помогает мне получать вознаграждение за контент, который я создаю.

Вы также можете подписаться по электронной почте и получать уведомления, когда я публикую что-то новое!

Спасибо!