Làm cách nào để chuyển một tham số bổ sung cho hàm gọi lại trong phương thức .filter () của Javascript?

Tôi muốn so sánh từng chuỗi trong Mảng với một chuỗi đã cho. Cách triển khai hiện tại của tôi là:

function startsWith(element) {
    return element.indexOf(wordToCompare) === 0;
}
addressBook.filter(startsWith);

Hàm đơn giản này hoạt động, nhưng chỉ vì ngay bây giờ wordToCompare đang được đặt làm biến toàn cục, nhưng tất nhiên tôi muốn tránh điều này và chuyển nó dưới dạng tham số. Vấn đề của tôi là tôi không chắc chắn cách định nghĩa startWith () để nó chấp nhận một tham số bổ sung, bởi vì tôi không thực sự hiểu cách các tham số mặc định mà nó nhận được truyền. Tôi đã thử tất cả các cách khác nhau mà tôi có thể nghĩ ra và không có cách nào trong số đó hiệu quả.

Nếu bạn cũng có thể giải thích cách các tham số được truyền cho các hàm gọi lại 'tích hợp sẵn' (xin lỗi, tôi không biết thuật ngữ nào tốt hơn cho các hàm này) hoạt động tốt

Thực hiện startsWithchấp nhận từ để so sánh và trả về một hàm sau đó sẽ được sử dụng làm hàm lọc / gọi lại:

function startsWith(wordToCompare) {
    return function(element) {
        return element.indexOf(wordToCompare) === 0;
    }
}

addressBook.filter(startsWith(wordToCompare));

Một tùy chọn khác sẽ là sử dụng Function.prototype.bind ^[MDN] (chỉ khả dụng trong trình duyệt hỗ trợ ECMAScript 5, hãy nhấp vào liên kết để có miếng đệm cho các trình duyệt cũ hơn) và "sửa" đối số đầu tiên:

function startsWith(wordToCompare, element) {
    return element.indexOf(wordToCompare) === 0;
}

addressBook.filter(startsWith.bind(this, wordToCompare));

Tôi không thực sự hiểu cách truyền các tham số mặc định mà nó cần

Không có gì đặc biệt về nó. Tại một số điểm, filterchỉ cần gọi lệnh gọi lại và chuyển phần tử hiện tại của mảng. Vì vậy, đó là một hàm gọi một hàm khác, trong trường hợp này là lệnh gọi lại mà bạn chuyển làm đối số.

Đây là một ví dụ về một chức năng tương tự:

function filter(array, callback) {
    var result = [];
    for(var i = 0, l = array.length; i < l; i++) {
        if(callback(array[i])) {  // here callback is called with the current element
            result.push(array[i]);
        }
    }
    return result;
}

Tham số thứ hai của bộ lọc sẽ đặt giá trị này bên trong lệnh gọi lại.

arr.filter(callback[, thisArg])

Vì vậy, bạn có thể làm điều gì đó như:

function startsWith(element) {
    return element.indexOf(this) === 0;
}
addressBook.filter(startsWith, wordToCompare);

Đối với những người đang tìm kiếm một giải pháp thay thế ES6 bằng cách sử dụng các hàm mũi tên, bạn có thể làm như sau.

let startsWith = wordToCompare => (element, index, array) => {
  return element.indexOf(wordToCompare) === 0;
}

// where word would be your argument
let result = addressBook.filter(startsWith("word"));

Phiên bản cập nhật sử dụng bao gồm :

const startsWith = wordToCompare => (element, index, array) => {
  return element.includes(wordToCompare);
}

function startsWith(element, wordToCompare) {
    return element.indexOf(wordToCompare) === 0;
}

// ...
var word = "SOMETHING";

addressBook.filter(function(element){
    return startsWith(element, word);
});

Bạn có thể sử dụng chức năng mũi tên bên trong bộ lọc, như sau:

result = addressBook.filter(element => element.indexOf(wordToCompare) === 0);

Các hàm mũi tên trên MDN

Biểu thức hàm mũi tên có cú pháp ngắn hơn so với biểu thức hàm và liên kết từ vựng với giá trị this (không ràng buộc giá trị this, đối số, super hoặc new.target của riêng nó). Hàm mũi tên luôn ẩn danh. Các biểu thức hàm này phù hợp nhất cho các hàm không phải là phương thức và chúng không thể được sử dụng làm hàm tạo.

Đối với bất kỳ ai thắc mắc tại sao chức năng mũi tên béo của họ bị bỏ qua [, thisArg], ví dụ: tại sao

["DOG", "CAT", "DOG"].filter(animal => animal === this, "DOG") trả lại []

đó là bởi vì thisbên trong các hàm mũi tên đó bị ràng buộc khi hàm được tạo và được đặt thành giá trị thistrong phạm vi bao trùm rộng hơn, nên thisArgđối số bị bỏ qua. Tôi đã giải quyết vấn đề này khá dễ dàng bằng cách khai báo một biến mới trong phạm vi cha:

let bestPet = "DOG"; ["DOG", "CAT", "DOG"].filter(animal => animal === bestPet); => ["DOG", "DOG"]

Đây là liên kết đến một số bài đọc khác: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this

dựa trên câu trả lời retailRaven và https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

tôi đã làm nó theo 2 cách khác nhau. 1) sử dụng cách chức năng. 2) bằng cách sử dụng nội tuyến.

//Here  is sample codes : 

var templateList   = [
{ name: "name1", index: 1, dimension: 1 }  ,
{ name: "name2", index: 2, dimension: 1 }  ,
{ name: "name3", index: 3, dimension: 2 }  ];


//Method 1) using function : 

function getDimension1(obj) {
                if (obj.dimension === 1) // This is hardcoded . 
                    return true;
                else return false;
            } 

var tl = templateList.filter(getDimension1); // it will return 2 results. 1st and 2nd objects. 
console.log(tl) ;

//Method 2) using inline way 
var tl3 = templateList.filter(element => element.index === 1 || element.dimension === 2  ); 
// it will return 1st and 3rd objects 
console.log(tl3) ;

Có một cách dễ dàng để sử dụng chức năng bộ lọc, truy cập tất cả các tham số và không quá phức tạp hóa nó.

Trừ khi thisArg của callback được đặt thành một bộ lọc phạm vi khác không tạo phạm vi riêng của nó và chúng ta có thể truy cập các tham số trong phạm vi hiện tại. Chúng tôi có thể đặt 'this' để xác định một phạm vi khác để truy cập các giá trị khác nếu cần, nhưng theo mặc định, nó được đặt thành phạm vi được gọi từ đó. Bạn có thể thấy điều này được sử dụng cho phạm vi Angular trong ngăn xếp này .

Sử dụng indexOf đang đánh bại mục đích của bộ lọc và tăng thêm chi phí. Bộ lọc đã đi qua mảng, vậy tại sao chúng ta cần lặp lại nó một lần nữa? Thay vào đó chúng ta có thể biến nó thành một hàm thuần túy đơn giản .

Đây là một tình huống sử dụng trong một phương thức lớp React trong đó trạng thái có một mảng được gọi là các mục và bằng cách sử dụng bộ lọc, chúng ta có thể kiểm tra trạng thái hiện có:

checkList = (item) => {  // we can access this param and globals within filter
  var result = this.state.filter(value => value === item); // returns array of matching items

  result.length ? return `${item} exists` : this.setState({
    items: items.push(item) // bad practice, but to keep it light
  });
}