Javascript метод .find()

Polyfill

本方法在ECMAScript 6规范中被加入,可能不存在于某些实现中。你可以通过以下代码来补充 。


// https://tc39.github.io/ecma262/#sec-array.prototype.find
if (!Array.prototype.find) {
  Object.defineProperty(Array.prototype, 'find', {
    value: function(predicate) {
     // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
      if (typeof predicate !== 'function') {
        throw new TypeError('predicate must be a function');
      }

      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
      var thisArg = arguments;

      // 5. Let k be 0.
      var k = 0;

      // 6. Repeat, while k < len
      while (k < len) {
        // a. Let Pk be ! ToString(k).
        // b. Let kValue be ? Get(O, Pk).
        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
        // d. If testResult is true, return kValue.
        var kValue = o;
        if (predicate.call(thisArg, kValue, k, o)) {
          return kValue;
        }
        // e. Increase k by 1.
        k++;
      }

      // 7. Return undefined.
      return undefined;
    }
  });
}

瀏覽器相容性

The compatibility table in this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js
Chrome Full support 45 Edge Full support 12 Firefox Full support 25 IE No support No Opera Full support 32 Safari Full support 8 WebView Android Full support 45 Chrome Android Full support 45 Firefox Android Full support 4 Opera Android Full support 32 Safari iOS Full support 8 Samsung Internet Android Full support 5.0 nodejs Full support 4.0.0

Associative Arrays

Many programming languages support arrays with named indexes.

Arrays with named indexes are called associative arrays (or hashes).

JavaScript does not support arrays with named indexes.

In JavaScript, arrays always use numbered indexes.  

Example

var person = []; person = «John»; person = «Doe»; person = 46;var x = person.length;     // person.length will return 3var y = person;         // person will return «John»

WARNING !! If you use named indexes, JavaScript will redefine the array to a standard object. After that, some array methods and properties will produce incorrect results.

 Example:

var person = []; person = «John»; person = «Doe»; person = 46;var x = person.length;     // person.length will return 0var y = person;         // person will return undefined

Polyfill

Bu metod ECMAScript 2015 spesifikasyonuna eklenmiştir ve tüm JavaScript implementasyonlarında kullanıma hazır olmayabilir. Fakat,  aşağıdaki kod parçacığı ile  polyfill yapabilirsiniz:

// https://tc39.github.io/ecma262/#sec-array.prototype.find
if (!Array.prototype.find) {
  Object.defineProperty(Array.prototype, 'find', {
    value: function(predicate) {
     // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
      if (typeof predicate !== 'function') {
        throw new TypeError('predicate must be a function');
      }

      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
      var thisArg = arguments;

      // 5. Let k be 0.
      var k = 0;

      // 6. Repeat, while k < len
      while (k < len) {
        // a. Let Pk be ! ToString(k).
        // b. Let kValue be ? Get(O, Pk).
        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
        // d. If testResult is true, return kValue.
        var kValue = o;
        if (predicate.call(thisArg, kValue, k, o)) {
          return kValue;
        }
        // e. Increase k by 1.
        k++;
      }

      // 7. Return undefined.
      return undefined;
    }
  });
}

Eğer  desteği bulunmayan tamamen eskimiş JavaScript motorları için ihtiyacınız varsa, metodlarını polyfill yapmamanız en doğrusudur, çünkü bu metodlar numaralandırılabilir olmayan metodlardır.

Tarayıcı uyumluluğu

The compatibility table in this page is generated from structured data. If you’d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js
Chrome Full support 45 Edge Full support 12 Firefox Full support 25 IE No support No Opera Full support 32 Safari Full support 8 WebView Android Full support 45 Chrome Android Full support 45 Firefox Android Full support 4 Opera Android Full support 32 Safari iOS Full support 8 Samsung Internet Android Full support 5.0 nodejs Full support 4.0.0

Create A Search Bar

Step 1) Add HTML:

<div class=»topnav»>  <a class=»active» href=»#home»>Home</a>  <a href=»#about»>About</a>  <a href=»#contact»>Contact</a>  <input type=»text» placeholder=»Search..»></div>

Step 2) Add CSS:

/* Add a black background color to the top navigation bar */.topnav {  overflow: hidden;  background-color: #e9e9e9;}/* Style the links inside the navigation bar */.topnav a {  float: left;  display: block;  color: black;  text-align: center;  padding: 14px 16px;  text-decoration: none;  font-size: 17px;}/* Change the color of links on hover */.topnav a:hover {   background-color: #ddd;  color: black;}/* Style the «active» element to highlight the current page */.topnav a.active {   background-color: #2196F3;  color: white;}/* Style the search box inside the navigation bar */.topnav input {  float: right;  padding: 6px;  border: none;  margin-top: 8px;  margin-right: 16px;   font-size: 17px;}/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */@media screen and (max-width: 600px) {  .topnav a, .topnav input {    float: none;    display: block;    text-align: left;    width: 100%;    margin: 0;    padding: 14px;  }  .topnav input {    border: 1px solid #ccc;  }}

How to Recognize an Array

A common question is: How do I know if a variable is an array?

The problem is that the JavaScript operator returns «»:

var fruits = ; typeof fruits;    // returns object

The typeof operator returns object because a JavaScript array is an object.

Solution 1:


To solve this problem ECMAScript 5 defines a new method :

Array.isArray(fruits);   // returns true

The problem with this solution is that ECMAScript 5 is not supported in older browsers.

Solution 2:

To solve this problem you can create your own function:

function isArray(x) {  return x.constructor.toString().indexOf(«Array») > -1;}

The function above always returns true if the argument is an array.

Or more precisely: it returns true if the object prototype contains the word «Array».

Solution 3:

The operator returns true if an object is created by a given constructor:

var fruits = ;fruits instanceof Array;   // returns true

Avoid new Array()

There is no need to use the JavaScript’s built-in array constructor Array().

Use instead.

These two different statements both create a new empty array named points:

var points = new Array();     // Bad var points = [];              // Good 

These two different statements both create a new array containing 6 numbers:

var points = new Array(40, 100, 1, 5, 25, 10); // Bad var points = ;          // Good

The keyword only complicates the code. It can also produce some unexpected results:


var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

What if I remove one of the elements?

var points = new Array(40);  // Creates an array with 40 undefined elements !!!!!

Örnekler

Aşağıdaki örnekte  metodu kullanılarak, değerlerin bir dizideki konumları bulunuyor.

var array = ;
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

Bir öğenin tüm konumlarını bulma

var indices = [];
var array = ;
var element = 'a';
var idx = array.indexOf(element);
while (idx != -1) {
  indices.push(idx);
  idx = array.indexOf(element, idx + 1);
}
console.log(indices);
// 

Bir öğenin dizide olup olmadığını öğrenme ve diziyi güncelleme

function updateVegetablesCollection (veggies, veggie) {
    if (veggies.indexOf(veggie) === -1) {
        veggies.push(veggie);
        console.log('New veggies collection is : ' + veggies);
    } else if (veggies.indexOf(veggie) > -1) {
        console.log(veggie + ' already exists in the veggies collection.');
    }
}

var veggies = ;

updateVegetablesCollection(veggies, 'spinach'); 
// New veggies collection is : potato,tomato,chillies,green-papper,spinach
updateVegetablesCollection(veggies, 'spinach'); 
// spinach already exists in the veggies collection.

Performance

Today 2020.01.07 I perform tests on MacOs HighSierra 10.13.6 on Chrome v78.0.0, Safari v13.0.4 and Firefox v71.0.0 for 15 chosen solutions. Conclusions

  • solutions based on , and surprisingly (K,N,O) are slowest on all browsers
  • the es6 (F) is fast only on chrome
  • the solutions based on (C,D) and (G,H) are quite-fast on all browsers on small and big arrays so probably they are best choice for efficient solution
  • the solutions where index decrease during loop, (B) is slower probably because the way of CPU cache works.
  • I also run test for big array when searched element was on position 66% of array length, and solutions based on (C,D,E) gives similar results (~630 ops/sec — but the E on safari and firefox was 10-20% slower than C and D)

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Searching in array

Now let’s cover methods that search in an array.

The methods arr.indexOf, arr.lastIndexOf and arr.includes have the same syntax and do essentially the same as their string counterparts, but operate on items instead of characters:

  • – looks for starting from index , and returns the index where it was found, otherwise .
  • – same, but looks for from right to left.
  • – looks for starting from index , returns if found.

For instance:

Note that the methods use comparison. So, if we look for , it finds exactly and not the zero.

If we want to check for inclusion, and don’t want to know the exact index, then is preferred.

Also, a very minor difference of is that it correctly handles , unlike :

Imagine we have an array of objects. How do we find an object with the specific condition?


Here the arr.find(fn) method comes in handy.

The syntax is:

The function is called for elements of the array, one after another:

  • is the element.
  • is its index.
  • is the array itself.

If it returns , the search is stopped, the is returned. If nothing found, is returned.

For example, we have an array of users, each with the fields and . Let’s find the one with :

In real life arrays of objects is a common thing, so the method is very useful.

Note that in the example we provide to the function with one argument. That’s typical, other arguments of this function are rarely used.

The arr.findIndex method is essentially the same, but it returns the index where the element was found instead of the element itself and is returned when nothing is found.

The method looks for a single (first) element that makes the function return .

If there may be many, we can use arr.filter(fn).

The syntax is similar to , but returns an array of all matching elements:

For instance:


С этим читают