Hướng dẫn find first value in array javascript - tìm giá trị đầu tiên trong javascript mảng

Phương thức find() trả về phần tử đầu tiên trong mảng được cung cấp thỏa mãn chức năng thử nghiệm được cung cấp. Nếu không có giá trị thỏa mãn chức năng kiểm tra, undefined sẽ được trả về.

Thử nó

  • Nếu bạn cần chỉ số của phần tử tìm thấy trong mảng, hãy sử dụng findIndex().index of the found element in the array, use findIndex().
  • Nếu bạn cần tìm chỉ mục của một giá trị, hãy sử dụng indexOf(). (Nó tương tự như findIndex(), nhưng kiểm tra từng phần tử cho sự bình đẳng với giá trị thay vì sử dụng hàm thử nghiệm.)index of a value, use indexOf(). (It's similar to findIndex(), but checks each element for equality with the value instead of using a testing function.)
  • Nếu bạn cần tìm nếu một giá trị tồn tại trong một mảng, hãy sử dụng
    const inventory = [
      { name: "apples", quantity: 2 },
      { name: "bananas", quantity: 0 },
      { name: "cherries", quantity: 5 },
    ];
    
    function isCherries(fruit) {
      return fruit.name === "cherries";
    }
    
    console.log(inventory.find(isCherries));
    // { name: 'cherries', quantity: 5 }
    
    1. Một lần nữa, nó kiểm tra từng phần tử cho sự bình đẳng với giá trị thay vì sử dụng hàm thử nghiệm.exists in an array, use
    const inventory = [
      { name: "apples", quantity: 2 },
      { name: "bananas", quantity: 0 },
      { name: "cherries", quantity: 5 },
    ];
    
    function isCherries(fruit) {
      return fruit.name === "cherries";
    }
    
    console.log(inventory.find(isCherries));
    // { name: 'cherries', quantity: 5 }
    
    1. Again, it checks each element for equality with the value instead of using a testing function.
  • Nếu bạn cần tìm nếu bất kỳ phần tử nào thỏa mãn chức năng kiểm tra được cung cấp, hãy sử dụng
    const inventory = [
      { name: "apples", quantity: 2 },
      { name: "bananas", quantity: 0 },
      { name: "cherries", quantity: 5 },
    ];
    
    function isCherries(fruit) {
      return fruit.name === "cherries";
    }
    
    console.log(inventory.find(isCherries));
    // { name: 'cherries', quantity: 5 }
    
    2.

Cú pháp

// Arrow function
find((element) => { /* … */ } )
find((element, index) => { /* … */ } )
find((element, index, array) => { /* … */ } )

// Callback function
find(callbackFn)
find(callbackFn, thisArg)

// Inline callback function
find(function(element) { /* … */ })
find(function(element, index) { /* … */ })
find(function(element, index, array){ /* … */ })
find(function(element, index, array) { /* … */ }, thisArg)

Thông số

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
3

Chức năng để thực thi trên mỗi giá trị trong mảng.

Hàm được gọi với các đối số sau:

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
4

Phần tử hiện tại trong mảng.

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
5

Chỉ số (vị trí) của phần tử hiện tại trong mảng.

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
6

Mảng mà

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
7 đã được gọi.

Cuộc gọi lại phải trả về một giá trị sự thật để chỉ ra một yếu tố phù hợp đã được tìm thấy.

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
8 Tùy chọnOptional

Đối tượng sử dụng là

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
9 bên trong
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
3.

Giá trị trả về

Phần tử đầu tiên trong mảng thỏa mãn chức năng thử nghiệm được cung cấp. Nếu không, undefined được trả lại.

Sự mô tả

Phương thức

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
7 thực thi hàm
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
3 một lần cho mỗi chỉ mục của mảng cho đến khi
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
3 trả về giá trị sự thật. Nếu vậy,
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
7 ngay lập tức trả về giá trị của phần tử đó. Nếu không,
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
7 trả về undefined.

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
3 được gọi cho mọi chỉ mục của mảng, không chỉ các chỉ số có giá trị được gán. Các khe trống trong các mảng thưa thớt hoạt động giống như undefined.

Nếu một tham số

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
8 được cung cấp cho
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
7, nó sẽ được sử dụng làm giá trị
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
9 bên trong mỗi lần gọi của
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
3. Nếu nó không được cung cấp, thì undefined được sử dụng.

Phương pháp

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
7 không làm biến đổi mảng mà nó được gọi, nhưng hàm được cung cấp cho
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
3 có thể. Nếu vậy, các yếu tố được xử lý bởi
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
7 được đặt trước khi gọi đầu tiên của
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
3. Vì vậy:

  • const inventory = [
      { name: "apples", quantity: 2 },
      { name: "bananas", quantity: 0 },
      { name: "cherries", quantity: 5 },
    ];
    
    function isCherries(fruit) {
      return fruit.name === "cherries";
    }
    
    console.log(inventory.find(isCherries));
    // { name: 'cherries', quantity: 5 }
    
    3 sẽ không truy cập bất kỳ yếu tố nào được thêm vào mảng sau khi cuộc gọi đến
    const inventory = [
      { name: "apples", quantity: 2 },
      { name: "bananas", quantity: 0 },
      { name: "cherries", quantity: 5 },
    ];
    
    function isCherries(fruit) {
      return fruit.name === "cherries";
    }
    
    console.log(inventory.find(isCherries));
    // { name: 'cherries', quantity: 5 }
    
    7 bắt đầu.
  • Các yếu tố được gán cho các chỉ mục đã được truy cập hoặc các chỉ mục bên ngoài phạm vi, sẽ không được truy cập bởi
    const inventory = [
      { name: "apples", quantity: 2 },
      { name: "bananas", quantity: 0 },
      { name: "cherries", quantity: 5 },
    ];
    
    function isCherries(fruit) {
      return fruit.name === "cherries";
    }
    
    console.log(inventory.find(isCherries));
    // { name: 'cherries', quantity: 5 }
    
    3.
  • Nếu một phần tử hiện có, chưa được liên kết của mảng được thay đổi bởi
    const inventory = [
      { name: "apples", quantity: 2 },
      { name: "bananas", quantity: 0 },
      { name: "cherries", quantity: 5 },
    ];
    
    function isCherries(fruit) {
      return fruit.name === "cherries";
    }
    
    console.log(inventory.find(isCherries));
    // { name: 'cherries', quantity: 5 }
    
    3, giá trị của nó được chuyển cho
    const inventory = [
      { name: "apples", quantity: 2 },
      { name: "bananas", quantity: 0 },
      { name: "cherries", quantity: 5 },
    ];
    
    function isCherries(fruit) {
      return fruit.name === "cherries";
    }
    
    console.log(inventory.find(isCherries));
    // { name: 'cherries', quantity: 5 }
    
    3 sẽ là giá trị tại thời điểm
    const inventory = [
      { name: "apples", quantity: 2 },
      { name: "bananas", quantity: 0 },
      { name: "cherries", quantity: 5 },
    ];
    
    function isCherries(fruit) {
      return fruit.name === "cherries";
    }
    
    console.log(inventory.find(isCherries));
    // { name: 'cherries', quantity: 5 }
    
    7 truy cập chỉ mục của phần tử đó.
  • Các yếu tố là
    // Declare array with no elements at indexes 2, 3, and 4
    const array = [0, 1, , , , 5, 6];
    
    // Shows all indexes, not just those with assigned values
    array.find((value, index) => {
      console.log("Visited index ", index, " with value ", value);
    });
    // Visited index 0 with value 0
    // Visited index 1 with value 1
    // Visited index 2 with value undefined
    // Visited index 3 with value undefined
    // Visited index 4 with value undefined
    // Visited index 5 with value 5
    // Visited index 6 with value 6
    
    // Shows all indexes, including deleted
    array.find((value, index) => {
      // Delete element 5 on first iteration
      if (index === 0) {
        console.log("Deleting array[5] with value ", array[5]);
        delete array[5];
      }
      // Element 5 is still visited even though deleted
      console.log("Visited index ", index, " with value ", value);
    });
    // Deleting array[5] with value 5
    // Visited index 0 with value 0
    // Visited index 1 with value 1
    // Visited index 2 with value undefined
    // Visited index 3 with value undefined
    // Visited index 4 with value undefined
    // Visited index 5 with value undefined
    // Visited index 6 with value 6
    
    5 vẫn được truy cập.

CẢNH BÁO: Sửa đổi đồng thời loại được mô tả trong đoạn trước thường xuyên dẫn đến mã khó hiểu và thường phải tránh (ngoại trừ trong các trường hợp đặc biệt). Concurrent modification of the kind described in the previous paragraph frequently leads to hard-to-understand code and is generally to be avoided (except in special cases).

Phương pháp find() là chung chung. Nó chỉ mong đợi giá trị

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
9 sẽ có thuộc tính
// Declare array with no elements at indexes 2, 3, and 4
const array = [0, 1, , , , 5, 6];

// Shows all indexes, not just those with assigned values
array.find((value, index) => {
  console.log("Visited index ", index, " with value ", value);
});
// Visited index 0 with value 0
// Visited index 1 with value 1
// Visited index 2 with value undefined
// Visited index 3 with value undefined
// Visited index 4 with value undefined
// Visited index 5 with value 5
// Visited index 6 with value 6

// Shows all indexes, including deleted
array.find((value, index) => {
  // Delete element 5 on first iteration
  if (index === 0) {
    console.log("Deleting array[5] with value ", array[5]);
    delete array[5];
  }
  // Element 5 is still visited even though deleted
  console.log("Visited index ", index, " with value ", value);
});
// Deleting array[5] with value 5
// Visited index 0 with value 0
// Visited index 1 with value 1
// Visited index 2 with value undefined
// Visited index 3 with value undefined
// Visited index 4 with value undefined
// Visited index 5 with value undefined
// Visited index 6 with value 6
8 và các thuộc tính được khóa.

Ví dụ

Tìm một đối tượng trong một mảng bởi một trong các thuộc tính của nó

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }

Sử dụng chức năng mũi tên và phá hủy

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

const result = inventory.find(({ name }) => name === "cherries");

console.log(result); // { name: 'cherries', quantity: 5 }

Tìm một số nguyên tố trong một mảng

Ví dụ sau tìm thấy một phần tử trong mảng là số nguyên tố (hoặc trả về undefined nếu không có số nguyên tố):

function isPrime(element, index, array) {
  let start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
console.log([4, 5, 8, 12].find(isPrime)); // 5

Sử dụng Find () trên các mảng thưa thớt

Các khe trống trong các mảng thưa thớt được truy cập và được đối xử giống như undefined.

// Declare array with no elements at indexes 2, 3, and 4
const array = [0, 1, , , , 5, 6];

// Shows all indexes, not just those with assigned values
array.find((value, index) => {
  console.log("Visited index ", index, " with value ", value);
});
// Visited index 0 with value 0
// Visited index 1 with value 1
// Visited index 2 with value undefined
// Visited index 3 with value undefined
// Visited index 4 with value undefined
// Visited index 5 with value 5
// Visited index 6 with value 6

// Shows all indexes, including deleted
array.find((value, index) => {
  // Delete element 5 on first iteration
  if (index === 0) {
    console.log("Deleting array[5] with value ", array[5]);
    delete array[5];
  }
  // Element 5 is still visited even though deleted
  console.log("Visited index ", index, " with value ", value);
});
// Deleting array[5] with value 5
// Visited index 0 with value 0
// Visited index 1 with value 1
// Visited index 2 with value undefined
// Visited index 3 with value undefined
// Visited index 4 with value undefined
// Visited index 5 with value undefined
// Visited index 6 with value 6

Gọi Find () trên các đối tượng không phải là

Phương thức find() đọc thuộc tính

// Declare array with no elements at indexes 2, 3, and 4
const array = [0, 1, , , , 5, 6];

// Shows all indexes, not just those with assigned values
array.find((value, index) => {
  console.log("Visited index ", index, " with value ", value);
});
// Visited index 0 with value 0
// Visited index 1 with value 1
// Visited index 2 with value undefined
// Visited index 3 with value undefined
// Visited index 4 with value undefined
// Visited index 5 with value 5
// Visited index 6 with value 6

// Shows all indexes, including deleted
array.find((value, index) => {
  // Delete element 5 on first iteration
  if (index === 0) {
    console.log("Deleting array[5] with value ", array[5]);
    delete array[5];
  }
  // Element 5 is still visited even though deleted
  console.log("Visited index ", index, " with value ", value);
});
// Deleting array[5] with value 5
// Visited index 0 with value 0
// Visited index 1 with value 1
// Visited index 2 with value undefined
// Visited index 3 with value undefined
// Visited index 4 with value undefined
// Visited index 5 with value undefined
// Visited index 6 with value 6
8 của
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function isCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
9 và sau đó truy cập vào từng chỉ mục số nguyên.

const arrayLike = {
  length: 3,
  0: 2,
  1: 7.3,
  2: 4,
};
console.log(
  Array.prototype.find.call(arrayLike, (x) => !Number.isInteger(x)),
); // 7.3

Thông số kỹ thuật

Sự chỉ rõ
Thông số kỹ thuật ngôn ngữ Ecmascript # sec-array.prototype.find
# sec-array.prototype.find

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Làm thế nào để tôi tìm thấy giá trị đầu tiên trong một mảng?

Alternativly, bạn cũng có thể sử dụng hàm reset () để có phần tử đầu tiên. Hàm RESET () đặt con trỏ bên trong của một mảng thành phần tử đầu tiên của nó và trả về giá trị của phần tử mảng đầu tiên hoặc sai nếu mảng trống.use the reset() function to get the first element. The reset() function set the internal pointer of an array to its first element and returns the value of the first array element, or FALSE if the array is empty.

Làm thế nào bạn có được phần tử thứ nhất trong một mảng trong JavaScript?

Mảng JavaScript là một biến chứa nhiều giá trị tại một thời điểm.Các phần tử đầu tiên và cuối cùng được truy cập bằng cách sử dụng chỉ mục và giá trị đầu tiên được truy cập bằng chỉ mục 0 và phần tử cuối cùng có thể được truy cập thông qua thuộc tính độ dài có một giá trị hơn chỉ mục mảng cao nhất.the first value is accessed using index 0 and the last element can be accessed through length property which has one more value than the highest array index.

Chỉ mục đầu tiên trong một mảng là gì?

Lưu ý: Trong hầu hết các ngôn ngữ lập trình, chỉ mục mảng đầu tiên là 0 hoặc 1 và các chỉ mục tiếp tục thông qua các số tự nhiên.0 or 1, and indexes continue through the natural numbers.

Làm thế nào để bạn tìm thấy một phần tử trong một mảng?

Nếu bạn cần chỉ mục của phần tử tìm thấy trong mảng, hãy sử dụng FindIndex () ..
Nếu bạn cần tìm chỉ mục của một giá trị, hãy sử dụng indexof ().....
Nếu bạn cần tìm nếu một giá trị tồn tại trong một mảng, hãy sử dụng bao gồm ().....
Nếu bạn cần tìm nếu bất kỳ phần tử nào thỏa mãn chức năng kiểm tra được cung cấp, hãy sử dụng một số () ..