、ES5中數組操作方法：filter() 過濾數組也是一個常用的操作，它用于遍歷Array把某些元素過濾掉，然后把剩余的元素組成一個新數組返回（不改變原數組）。

例如：過濾奇數，保留偶數：

var arr = [1, 2, 3, 4, 5, 6];
var brr = arr.filter(function (value) {
    return value%2 == 0;  //遍歷數組，返回值為true保留并復制到新數組，false則過濾掉
});
console.log(brr);  //[2, 4, 6]

二、ES6中 includes( ) 方法：用來判斷一個 數組/字符串 是否包含一個指定的值，如果是返回 true，不是返回false。

var arr = [1, 2, 3];
var str = 'abcd';
console.log(arr.includes(2));//true
console.log(arr.includes(4));//false
console.log(str.includes('a'));//true
console.log(str.includes('e'));//false

簡單實現模糊查找：

首先引入vue.js文件：

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

html代碼：

<div id="box">
    <input type="text" v-model="keyword"/>
    <ul>
        <li v-for="value in fSearch">
            <p>{{value}}</p>
        </li>
    </ul>
</div>

js代碼：

現代 Web 應用程序中，實現高效的搜索功能是至關重要的。無論您正在開發電子商務網站、博客平臺還是其他類型的應用，幫助用戶快速找到所需信息都是一個關鍵功能。Fuse.js 是一個強大的 JavaScript 庫，它提供了靈活的模糊搜索和文本匹配功能，使您能夠輕松實現出色的搜索體驗。

什么是 Fuse.js？

Fuse.js 是一個輕量級的 JavaScript 庫，專注于實現模糊搜索和文本匹配功能。它采用近似字符串匹配算法，能夠在大型數據集中快速找到匹配項，同時還支持高級的搜索選項和自定義配置。

安裝 Fuse.js

您可以使用 npm 或 yarn 安裝 Fuse.js：

npm install fuse.js
# 或者
yarn add fuse.js

基本用法示例

讓我們從一個基本示例開始，介紹 Fuse.js 的基本用法。假設我們有一個包含多個書籍的數組，并希望通過書名進行模糊搜索。

// 導入 Fuse.js
const Fuse = require('fuse.js');

// 示例數據 - 一個包含多個對象的數組
const books = [
  { title: 'JavaScript: The Good Parts' },
  { title: 'Eloquent JavaScript' },
  { title: 'JavaScript: The Definitive Guide' },
  { title: 'Learning JavaScript Design Patterns' },
  { title: 'You Don’t Know JS' },
];

// 創建 Fuse.js 實例并配置搜索選項
const options = {
  keys: ['title'], // 搜索的鍵，這里只搜索 'title' 屬性
};

const fuse = new Fuse(books, options);

// 執行模糊搜索
const result = fuse.search('JavaScript');

// 輸出搜索結果
console.log(result);

在這個示例中，我們首先導入了 Fuse.js 庫。然后，我們創建了一個包含多個書籍對象的數組 books。接下來，我們創建了 Fuse.js 實例，配置了搜索選項，指定了要搜索的鍵（在這里是 'title' 屬性）。最后，我們使用 search 方法執行模糊搜索，將 'JavaScript' 作為搜索詞傳遞給它，并輸出搜索結果。

搜索結果將是一個包含匹配的書籍對象的數組，匹配程度由默認的閾值控制。

高級用法示例

Fuse.js 不僅僅支持基本的模糊搜索，還提供了豐富的高級選項，以滿足各種需求。以下是一些高級用法示例：

自定義搜索選項

您可以配置 Fuse.js 實例的各種選項，以滿足您的需求。例如，您可以指定匹配閾值、搜索鍵的權重、排序規則等。

const options = {
  keys: ['title', 'author'], // 多個搜索鍵
  threshold: 0.6, // 閾值控制匹配的敏感度
  shouldSort: true, // 是否對結果進行排序
  location: 0, // 匹配的位置，0 表示開頭匹配
  distance: 100, // 搜索的最大距離
  minMatchCharLength: 2, // 最小匹配字符長度
};

自定義搜索函數

您還可以定義自定義的搜索函數，以便更精確地控制搜索邏輯。例如，您可以實現一個自定義的搜索函數來處理特殊的搜索需求。

const customSearchFunction = (pattern, options) => {
  // 自定義搜索邏輯
  // 返回匹配項的數組
};

const fuse = new Fuse(data, { customSearch: customSearchFunction });

高級示例：實時搜索

Fuse.js 可以與用戶界面實現實時搜索交互，例如在輸入框中動態顯示搜索結果。

// 監聽輸入框變化
const inputElement = document.getElementById('searchInput');
inputElement.addEventListener('input', (event) => {
  const searchTerm = event.target.value;
  
  // 執行模糊搜索
  const result = fuse.search(searchTerm);
  
  // 更新搜索結果顯示
  renderSearchResults(result);
});

在這個示例中，我們監聽輸入框的變化事件，每次輸入框內容變化時都執行模糊搜索，并更新搜索結果的顯示。

實戰應用：Fuse.js 與 React 實現實時聯想功能

在這個實際應用示例中，我們將探討如何使用 Fuse.js 與 React 來實現一個實時聯想功能，以提供更好的用戶搜索體驗。我們將創建一個 React 組件，其中包含一個輸入框，用戶在輸入時會實時獲得與其輸入相關的搜索建議。

步驟 1：安裝 Fuse.js 和 React

首先，確保您的 React 項目已經配置并運行。然后，安裝 Fuse.js 和必要的依賴：

npm install fuse.js

步驟 2：創建 React 組件

創建一個 React 組件，用于接受用戶的輸入并顯示搜索建議。以下是一個示例組件的基本結構：

import React, { useState } from 'react';
import Fuse from 'fuse.js';

const SearchSuggestions = ({ data }) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  // 創建 Fuse.js 實例并配置搜索選項
  const options = {
    keys: ['name'], // 搜索的鍵
    threshold: 0.4, // 閾值控制匹配的敏感度
  };

  const fuse = new Fuse(data, options);

  // 處理輸入框變化
  const handleInputChange = (event) => {
    const { value } = event.target;
    setSearchTerm(value);

    // 執行模糊搜索
    const result = fuse.search(value);

    // 更新搜索建議
    setSuggestions(result);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="搜索..."
        value={searchTerm}
        onChange={handleInputChange}
      />
      <ul>
        {suggestions.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default SearchSuggestions;

步驟 3：使用 Fuse.js 進行實時搜索

在上面的代碼中，我們創建了一個名為 SearchSuggestions 的 React 組件。該組件包含一個輸入框和一個顯示搜索建議的列表。當用戶輸入內容時，我們使用 Fuse.js 執行模糊搜索，并根據搜索結果更新建議列表。

首先，我們創建了一個 Fuse.js 實例，并配置了搜索選項。然后，我們在輸入框的 onChange 事件處理程序中執行模糊搜索，將搜索結果存儲在 suggestions 狀態中，并在列表中渲染這些建議。

步驟 4：在應用中使用組件

現在，您可以在您的 React 應用中使用 SearchSuggestions 組件。將數據傳遞給組件，以供搜索建議使用。例如：

import React from 'react';
import ReactDOM from 'react-dom';
import SearchSuggestions from './SearchSuggestions';

const data = [
  { name: 'JavaScript: The Good Parts' },
  { name: 'Eloquent JavaScript' },
  { name: 'JavaScript: The Definitive Guide' },
  { name: 'Learning JavaScript Design Patterns' },
  { name: 'You Don’t Know JS' },
];

ReactDOM.render(
  <SearchSuggestions data={data} />,
  document.getElementById('root')
);

這將在您的應用中渲染一個包含實時聯想功能的搜索輸入框。

小結

通過結合使用 Fuse.js 和 React，您可以輕松實現實時聯想功能，提供更好的搜索體驗。這個實際應用示例為您展示了如何創建一個 React 組件，將 Fuse.js 與之集成，以便用戶在輸入時獲得相關的搜索建議。這種功能對于各種 Web 應用程序，尤其是電子商務網站和博客平臺，都是非常有用的。

掌握了這個示例后，您可以根據自己的項目需求進一步定制和優化搜索功能，以提高用戶體驗。Fuse.js 和 React 的結合使用為開發高效的搜索功能提供了有力的工具。

總結

Fuse.js 是一個功能強大的 JavaScript 庫，可用于實現高效的模糊搜索和文本匹配功能。它提供了豐富的配置選項和高級功能，使您能夠適應各種搜索需求。無論您正在開發電子商務網站、博客平臺還是其他類型的應用，使用 Fuse.js 可以幫助用戶快速找到所需信息，提升用戶體驗。

了解更多關于 Fuse.js 的詳細信息，請訪問官方文檔：Fuse.js 官方文檔。

Fuse.js 是一個不可或缺的工具，如果您的應用需要搜索功能，不妨考慮集成它，為用戶提供更好的搜索體驗。

English version

Implementing Efficient Fuzzy Search with Fuse.js

In modern web applications, implementing efficient search functionality is crucial. Whether you are developing an e-commerce website, a blog platform, or any other type of application, helping users quickly find the information they need is a key feature. Fuse.js is a powerful JavaScript library that provides flexible fuzzy search and text matching capabilities, making it easy to deliver an excellent search experience.

What Is Fuse.js?

Fuse.js is a lightweight JavaScript library focused on implementing fuzzy search and text matching functionality. It employs approximate string matching algorithms, allowing it to quickly find matches within large datasets while also supporting advanced search options and custom configurations.

Installing Fuse.js

You can install Fuse.js using npm or yarn:

npm install fuse.js
# or
yarn add fuse.js

Basic Usage Example

Let's start with a basic example to introduce the fundamental usage of Fuse.js. Suppose we have an array containing multiple books, and we want to perform a fuzzy search based on the book titles.

// Import Fuse.js
const Fuse = require('fuse.js');

// Sample data - an array containing multiple objects
const books = [
  { title: 'JavaScript: The Good Parts' },
  { title: 'Eloquent JavaScript' },
  { title: 'JavaScript: The Definitive Guide' },
  { title: 'Learning JavaScript Design Patterns' },
  { title: 'You Don’t Know JS' },
];

// Create a Fuse.js instance and configure search options
const options = {
  keys: ['title'], // Keys to search, here we only search the 'title' property
};

const fuse = new Fuse(books, options);

// Perform a fuzzy search
const result = fuse.search('JavaScript');

// Output search results
console.log(result);

In this example, we first import the Fuse.js library. Then, we create an array named books containing multiple book objects. Next, we create a Fuse.js instance, configure search options by specifying the keys to search (in this case, the 'title' property), and execute a fuzzy search using the search method, passing 'JavaScript' as the search term. Finally, we output the search results.

The search results will be an array containing matching book objects, with the degree of matching controlled by the default threshold.

Advanced Usage Examples

Fuse.js not only supports basic fuzzy search but also provides rich advanced options to meet various requirements. Here are some advanced usage examples:

Custom Search Options

You can configure various options for a Fuse.js instance to meet your specific needs. For example, you can specify the matching threshold, weights for search keys, sorting rules, and more.

const options = {
  keys: ['title', 'author'], // Multiple search keys
  threshold: 0.6, // Threshold controls matching sensitivity
  shouldSort: true, // Whether to sort the results
  location: 0, // Location of the match, 0 represents the start of the string
  distance: 100, // Maximum distance for searching
  minMatchCharLength: 2, // Minimum character length for a match
};

Custom Search Function

You can also define custom search functions for precise control over the search logic. For instance, you can implement a custom search function to handle specific search requirements.

const customSearchFunction = (pattern, options) => {
  // Custom search logic
  // Return an array of matching items
};

const fuse = new Fuse(data, { customSearch: customSearchFunction });

Advanced Example: Real-Time Search

Fuse.js can interactively power real-time search in a user interface, such as dynamically displaying search results as the user types in an input box.

// Listen for input changes
const inputElement = document.getElementById('searchInput');
inputElement.addEventListener('input', (event) => {
  const searchTerm = event.target.value;
  
  // Perform a fuzzy search
  const result = fuse.search(searchTerm);
  
  // Update the display of search results
  renderSearchResults(result);
});

In this example, we listen for input changes in an input box. Each time the input changes, we perform a fuzzy search and update the display of search results accordingly.

Practical Application: Implementing Real-Time Suggestions with Fuse.js and React

In this practical application example, we will explore how to use Fuse.js in conjunction with React to implement real-time suggestions, providing users with an enhanced search experience. We will create a React component that includes an input box, and users will receive search suggestions related to their input in real-time.

Step 1: Install Fuse.js and React

First, ensure that your React project is configured and running. Then, install Fuse.js and the necessary dependencies:

npm install fuse.js

Step 2: Create a React Component

Create a React component that accepts user input and displays search suggestions. Here is the basic structure of a sample component:

import React, { useState } from 'react';
import Fuse from 'fuse.js';

const SearchSuggestions = ({ data }) => {
  const [searchTerm, setSearchTerm] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  // Create a Fuse.js instance and configure search options
  const options = {
    keys: ['name'], // Keys to search
    threshold: 0.4, // Threshold controls matching sensitivity
  };

  const fuse = new Fuse(data, options);

  // Handle input changes
  const handleInputChange = (event) => {
    const { value } = event.target;
    setSearchTerm(value);

    // Perform a fuzzy search
    const result = fuse.search(value);

    // Update search suggestions
    setSuggestions(result);
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={handleInputChange}
      />
      <ul>
        {suggestions.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default SearchSuggestions;

Step 3: Perform Real-Time Search with Fuse.js

In the provided code, we created a React component named SearchSuggestions. This component includes an input box and a list to display search suggestions. When the user enters text, we use Fuse.js to perform a fuzzy search and update the suggestion list based on the search results.

First, we create a Fuse.js instance and configure search options, specifying the key to search ('name' property) and the matching threshold. Then, in the input box's onChange event handler, we execute the fuzzy search, passing the input value to it, and update the suggestions based on the search results.

Step 4: Use the Component in Your Application

Now, you can use the SearchSuggestions component in your React application. Pass the relevant data to the component for search suggestions. For example:

import React from 'react';
import ReactDOM from 'react-dom';
import SearchSuggestions from './SearchSuggestions';

const data = [
  { name: 'JavaScript: The Good Parts' },
  { name: 'Eloquent JavaScript' },
  { name: 'JavaScript: The Definitive Guide' },
  { name: 'Learning JavaScript Design Patterns' },
  { name: '

You Don’t Know JS' },
];

ReactDOM.render(
  <SearchSuggestions data={data} />,
  document.getElementById('root')
);

This will render a search input box with real-time suggestions in your application.

Conclusion

By combining Fuse.js and React, you can easily implement real-time suggestion functionality, enhancing the search experience for your users. This practical application example demonstrates how to create a React component, integrate Fuse.js, and provide users with relevant search suggestions as they type. This functionality is valuable for various web applications, particularly e-commerce websites and blog platforms.

Once you've mastered this example, you can further customize and optimize the search functionality based on your project's requirements. The combination of Fuse.js and React offers powerful tools for developing efficient search features.

Summary

Fuse.js is a powerful JavaScript library for implementing efficient fuzzy search and text matching functionality. It offers rich configuration options and advanced features to accommodate various search needs. Whether you are developing an e-commerce website, a blog platform, or any other type of application, using Fuse.js can help users quickly find the information they need, enhancing their user experience.

For more detailed information about Fuse.js, please visit the official documentation: Fuse.js Official Documentation.

Fuse.js is an indispensable tool, and if your application requires search functionality, consider integrating it to provide users with a better search experience.

使用 Fuse.js 實現高效的模糊搜索
原文鏈接：https://juejin.cn/post/7322655035698642996