Быстрая шпаргалка для разработчиков 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()
для преобразования значения другого типа данных в строку. Он работает с целыми числами, числами с плавающей запятой, логическими значениями, массивами и объектами (вроде). Я говорю «отчасти потому, что если бы вы выполнили toString
S с объектом, вы бы получили следующее.
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 и получайте неограниченное количество статей без рекламы от тысяч авторов в самых разных изданиях. Это партнерская ссылка, и часть вашего членства помогает мне получать вознаграждение за контент, который я создаю.
Вы также можете подписаться по электронной почте и получать уведомления, когда я публикую что-то новое!
Спасибо!