Js遍曆數組總結

  • 2020 年 3 月 28 日
  • 筆記

Js遍曆數組總結

遍曆數組的主要方法為for、forEach、map、for in、for of

for

var arr = [1,2,3,4,5];  var n = arr.length; // 直接取長度，避免每次循環都讀取arr對象的屬性  for(let i=0; i<n; ++i ){      console.log(arr[i]);  }  // 1 2 3 4 5    //循環體也可以這麼寫  for(let i=0, len=arr.length; i<len; ++i ){      console.log(arr[i]);  }  // 1 2 3 4 5

forEach

Array.prototype.forEach()
arr.forEach(callback(currentValue [, index [, array]])[, thisArg])
callback 為數組中每個元素執行的函數，該函數接收一至三個參數
currentValue 數組中正在處理的當前元素
index 可選 數組中正在處理的當前元素的索引
array 可選 正在操作的數組
thisArg 可選 當執行回調函數callback時，用作this的值
注意如果使用箭頭函數表達式來傳入callback，thisArg參數會被忽略，因為箭頭函數在詞法上綁定了this值
注意如果想在遍歷執行完之前結束遍歷，那麼forEach與map並不是好的選擇

var arr = [1,2,3,4,5];  var obj = { a: 1 }; // 定義obj為了演示this用  arr.forEach( function(currentValue,index,array) {      console.log("當前值",currentValue);      console.log("當前值索引",index);      console.log("當前處理數組",array);      console.log("當前this指向",this);      console.log("結束一次回調，無需返回值");      console.log("");  },obj);  /*      當前值 1      當前值索引 0      當前處理數組 (5)[1, 2, 3, 4, 5]      當前this指向 {a: 1}      結束一次回調，無需返回值        當前值 2      當前值索引 1      當前處理數組 (5)[1, 2, 3, 4, 5]      當前this指向 {a: 1}      結束一次回調，無需返回值        ...........  */  // forEach使用頻率較高，但是性能不如普通for循環

map

Array.prototype.map()
arr.map(callback(currentValue [, index [, array]])[, thisArg])
callback 為數組中每個元素執行的函數，該函數接收一至三個參數
currentValue 數組中正在處理的當前元素
index 可選 數組中正在處理的當前元素的索引
array 可選 正在操作的數組
thisArg 可選 當執行回調函數callback時，用作this的值
注意如果使用箭頭函數表達式來傳入callback，thisArg參數會被忽略，因為箭頭函數在詞法上綁定了this值
注意map回調函數return的結果組成了新數組的每一個元素，原數組被映射成對應新數組

var arr = [1,2,3,4,5];  var obj = { a: 1 }; // 定義obj為了演示this用  var newArr = arr.map( function(currentValue,index,array) {      console.log("當前值",currentValue);      console.log("當前值索引",index);      console.log("當前處理數組",array);      console.log("當前this指向",this);      console.log("");      return currentValue + 10; // 將arr值加10返回成為新數組  },obj);  console.log(newArr); // [11, 12, 13, 14, 15]  /*      當前值 1      當前值索引 0      當前處理數組 (5)[1, 2, 3, 4, 5]      當前this指向 {a: 1}        當前值 2      當前值索引 1      當前處理數組 (5)[1, 2, 3, 4, 5]      當前this指向 {a: 1}        ...........  */  //這種方式也是用的比較廣泛的，但性能不如forEach

for in

// 此方法遍曆數組效率非常低，主要是用來循環遍歷對象的屬性    // 遍曆數組  var arr = [1,2,3,4,5];  for(item in arr){      console.log(arr[item]);  }  // 1 2 3 4 5  // 數組遍歷時需注意，數組索引只是具有整數名稱的枚舉屬性，並且與通用對象屬性相同。  // 不能保證for ... in將以任何特定的順序返回索引。  // for ... in循環語句將返回所有可枚舉屬性，包括非整數類型的名稱和繼承的那些。  // 因為迭代的順序是依賴於執行環境的，所以數組遍歷不一定按次序訪問元素。  // 因此當迭代訪問順序很重要的數組時，最好用整數索引去進行for循環    // 遍歷對象  var obj = {a:1,b:2};  for(item in obj){      console.log(obj[item]);  }  // 1 2  // for ... in是為遍歷對象屬性而構建的

for of

for of為ES6新增，其在可迭代對象包括Array，Map，Set，String``TypedArray，arguments對象等等上創建一個迭代循環，調用自定義迭代鉤子，並為每個不同屬性的值執行語句。

var arr = [1,2,3,4,5];  for (let value of arr) {      console.log(value);  }  // 1 2 3 4 5

operate

Array.prototype還提供了對於數組的判斷與過濾操作，every()、some()、find()、findIndex()、filter()

var arr = [1,2,3,4,5];    // arr.everymap(callback(currentValue [, index [, array]])[, thisArg])  // every() 方法測試一個數組內的所有元素是否都能通過某個指定函數的測試。它返回一個布爾值。  console.log(arr.every( (currentValue ) => {      return currentValue > 1;  })) // false    console.log(arr.every( (currentValue ) => {      return currentValue > 0;  })) // true    // arr.some(callback(element[, index[, array]])[, thisArg])  // some() 方法測試數組中是不是至少有1個元素通過了被提供的函數測試。它返回的是一個Boolean類型的值。  console.log(arr.some( (currentValue ) => {      return currentValue > 1;  })) // true    console.log(arr.some( (currentValue ) => {      return currentValue > 6;  })) // false    // arr.find(callback(element[, index[, array]])[, thisArg])  // find() 方法返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined。  console.log(arr.find( (currentValue ) => {      return currentValue > 2;  })) // 3    console.log(arr.find( (currentValue ) => {      return currentValue > 6;  })) // undefined    // arr.findIndex(callback(element[, index[, array]])[, thisArg])  // findIndex()方法返回數組中滿足提供的測試函數的第一個元素的索引，否則返回-1。  console.log(arr.findIndex( (currentValue ) => {      return currentValue > 2;  })) // 2    console.log(arr.findIndex( (currentValue ) => {      return currentValue > 6;  })) // -1    // arr.filter(callback(element[, index[, array]])[, thisArg])  // filter() 方法創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。  console.log(arr.filter( (currentValue ) => {      return currentValue > 2;  })) // [3, 4, 5]

參考

https://blog.csdn.net/function__/article/details/79555301  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

VirMach 便宜 VPS

QNews

QNews