Использование функции find в js_find в js
Во-первых, позвольте мне кратко представить, что такое ES6. Возможно, многие люди слышат об этом впервые. Мы все знаем, что H5 — это стандарт нового поколения для HTML. Аналогично, ES6 — это стандарт нового поколения для JavaScript. это ECMAScript 6.0 или сокращенно ES6. На самом деле это не какая-то загадочная вещь. Выпущен в июне 2015 года.
Сегодня мы поговорим об очень полезном методе js — find() в сочетании с новыми возможностями ES6.
Интерфейс сегодня отличается от того, что было раньше,Раньше все, что требовалось от внешнего интерфейса, — это возможность рисовать страницы.,Но теперь просто уметь рисовать страницы уже недостаточно.,Теперь интерфейсная часть все еще должна иметь возможность обрабатывать данные.,А данные анализа необходимо классифицировать и обработать. На самом деле улучшились не возможности фронтенда, а языковые характеристики фронтенда. Ладно, больше не жалуюсь! Теперь давайте просто поговорим о его Сценариях использования!
Сценарии использования
Если мы получаем данные, предоставленные серверной частью, нам необходимо получить всю информацию о первом элементе данных, который соответствует условиям. Есть два способа добиться этого. Первый способ — обработать данные непосредственно на серверной части. Мы запрашиваем их через ajax. Это очень распространенная практика получения возвращаемых данных, которая оказывает большую нагрузку на бэкэнд. Приведем пример:
/**
* aim csdn-блог - использование find()
* author clearlove
* date 18-08-06
*
*/
var stu = [
{
name: 'Ван'эр',
gender: 'мужской',
age: 20
},
{
name: «собачьи остатки»,
gender: 'мужской',
age: 20
},
{
name: 'Сяохуа',
gender: 'мужской',
age: 20
},
{
name: «Джон Доу»,
gender: 'женский',
age: 25
},
{
name: «Джон Доу»,
gender: 'мужской',
age: 26
}
]Мы получаем такой набор пользовательских данных, тогда нам нужно знать первого человека по имени Ли Си. Для внутренней обработки нам нужно написать оператор SQL, аналогичный следующему.
select *from stu where name = (select top1 name from stu where ...);（Кто знает?,я давно не писал,Наверное это sql） Такой SQL запрашивает данные, а затем отправляет их во внешний интерфейс. Нет сомнений в том, что этот метод работает, но мы все знаем, что сама обработка данных на самом деле оказывает большую нагрузку на сервер. Возможно, люди, которые пишут серверную часть, имеют глубокое понимание объема данных. небольшой, это нормально, но когда объем данных большой, Пользователю требуется несколько секунд, чтобы запросить фрагмент данных.,Излишне говорить, что опыт,И когда много параллелизма,Также могут быть простои, когда к нему одновременно получают доступ множество людей.,Поэтому лучший способ — чтобы бэкэнд предоставил нам все данные напрямую.,Размещаем данные на странице,Я уже писал о веб-хранилище,Если вам интересно, вы можете посмотреть,После того как мы получим данные,Непосредственно запрашивайте данные страницы, когда пользователи выполняют поиск.,Первый быстрый, а второй оказывает небольшую нагрузку на сервер.。 Давайте поговорим о том, как использовать интерфейс для обработки этой логики. Прежде всего, мы получили все данные, и я поместил их прямо в js для тестирования. Чтобы добиться упомянутого ранее эффекта, сегодня нам нужно использовать метод find() нашего главного героя.
Для чего используется find()?
Метод find() возвращает первый элемент массива, соответствующий условиям тестовой функции. В противном случае верните неопределенное Несколько моментов, на которые следует обратить внимание в этой статье: ① Первый элемент. ②. Функция тестирования
Так как же его использовать?
Давайте напишем пример ниже, чтобы увидеть эффект
Исходный код
<!--
aim csdn-блог - использование find()
author clearlove
date 18-08-06
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/find_testcodes.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style type="text/css">
table{border: 2px solid black;margin-top: 2rem;}
table thead tr td{width: 5rem;height: 3rem;border: 1px solid #000000;}
table tbody tr td{width: 5rem;height: 3rem;border: 1px solid #000000;}
</style>
</head>
<body>
<input type="text" name="" id="info" value="" />
<input type="button" name="" id="" значение = «запрос» onclick="serch()" />
<table>
<thead><tr><td>Имя</td><td>пол</td><td>возраст</td></tr></thead>
<tbody id="show"></tbody>
</table>
</body>
<script type="text/javascript">
var infos;
function serch(){
infos = $("#info").val();
var codeinfo = stu.find((element) => (element.name == infos));
var tbody = '<tr><td>'+codeinfo.name+'</td><td>'+codeinfo.gender+'</td><td>'+codeinfo.age+'</td></tr>';
$("#show").append(tbody);
}
</script>
</html> var infos;
function getStu(element){
console.log(infos);
return element.name == infos;
}
function serch(){
infos = $("#info").val();
var codeinfo = stu.getStu();
var tbody = '<tr><td>'+codeinfo.name+'</td><td>'+codeinfo.gender+'</td><td>'+codeinfo.age+'</td></tr>';
$("#show").append(tbody);
}var infos;
function serch(){
infos = $("#info").val();
var codeinfo = stu.find((element) => (element.name == infos));
var tbody = '<tr><td>'+codeinfo.name+'</td><td>'+codeinfo.gender+'</td><td>'+codeinfo.age+'</td></tr>';
$("#show").append(tbody);
}
Если вам понравится, вы можете общаться вместе!
Заявление об авторских правах: Содержание этой статьи добровольно предоставлено пользователями Интернета, а мнения, выраженные в этой статье, представляют собой только точку зрения автора. Данный сайт лишь предоставляет услуги по хранению информации, не имеет никаких прав собственности и не несет соответствующей юридической ответственности. Если вы обнаружите на этом сайте какое-либо подозрительное нарушение авторских прав/незаконный контент, отправьте электронное письмо, чтобы сообщить. После проверки этот сайт будет немедленно удален.
Издатель: Лидер стека программистов полного стека, укажите источник для перепечатки: https://javaforall.cn/182062.html Исходная ссылка: https://javaforall.cn
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
Идеальная интеграция Cursor и DeepSeek API
DeepSeek V3 снижает затраты на обучение больших моделей
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
Cloud Native｜Практика: установка Dashbaord для K8s, графика неплохая
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
Центр конфигурации————Накос
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
[Зона легкого облачного игрового сервера] Управление игровыми архивами
