Javascript 轮回和迭代

轮回

在Javascript中数组轮回运用for轮回,跟其他的言语非常相似。

//数组轮回
var array = [1,2,3,4,5];
for(var i = 0; i < array.length; i++){
    console.log(array[i]);
}

//对象轮回
var obj = {a:1,b:2,c:3};
for(var i in obj){
    console.log(i+':'+obj[i]);
}

迭代

在ES5中新增了几种迭代要领(forEach, every, filter, map, some)。依据文档显现,这些要领都含有两个参数:

callback

    为数组中每一个元素实行的函数,该函数吸收三个参数:

    currentValue(当前值)

        数组中正在处置惩罚的当前元素。

    index(索引)

        数组中正在处置惩罚的当前元素的索引。

    array

        要领正在操纵的数组。

thisArg可选

    可选参数。当实行回调 函数时用作this的值(参考对象)。

forEach

轮回遍历数组。forEach 要领按升序为数组中含有效值的每一项实行一次callback 函数,那些已删除(运用delete要领等状况)或许未初始化的项将被跳过(但不包括那些值为 undefined 的项)。

forEach 遍历的局限在第一次挪用 callback 前就会肯定。挪用forEach 后添加到数组中的项不会被 callback 接见到。假如已存在的值被转变,则通报给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。假如已接见的元素在迭代时被删除了(比方运用 shift()) ,以后的元素将被跳过 。

forEach() 为每一个数组元素实行callback函数;不像 map() 或许 reduce() ,它老是返回 undefined 值,而且不可链式挪用。典范用例是在一个链的末了实行副作用。

没有办法中断或许跳出 forEach 轮回,除了抛出一个非常。假如你须要如许,运用forEach()要领是毛病的,你能够用一个简朴的轮回作为替换。

简朴运用

下面的代码会为每一个数组元素输出一行纪录:

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}

// 注重索引2被跳过了,由于在数组的这个位置没有项
[2, 5, ,9].forEach(logArrayElements);

// a[0] = 2
// a[1] = 5
// a[3] = 9

[2, 5,"" ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 
// a[3] = 9

[2, 5, undefined ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9


let xxx;
// undefined

[2, 5, xxx ,9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = undefined
// a[3] = 9

运用thisArg

从每一个数组中的元素值中更新一个对象的属性:

function Counter() {
    this.sum = 0;
    this.count = 0;
}

Counter.prototype.add = function(array) {
    array.forEach(function(entry) {
        this.sum += entry;
        ++this.count;
    }, this);
    //console.log(this);
};

var obj = new Counter();
obj.add([1, 3, 5, 7]);

obj.count; 
// 4 === (1+1+1+1)
obj.sum;
// 16 === (1+3+5+7)

假如数组在迭代时被修正了,则其他元素会被跳过

下面的例子输出”one”, “two”, “four”。当抵达包括值”two”的项时,全部数组的第一个项被移除了,这致使一切剩下的项上移一个位置。由于元素 “four”如今在数组更前的位置,”three”会被跳过。 forEach()不会在迭代之前建立数组的副本。

var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
  console.log(word);
  if (word === "two") {
    words.shift();
  }
});
// one
// two
// four

every

测试数组中一切元素是不是都经由过程指定函数的测试,如有一项停止并返回false。

every 要领为数组中的每一个元素实行一次 callback 函数,直到它找到一个使 callback 返回 false(示意可转换为布尔值 false 的值)的元素。假如发现了一个如许的元素,every 要领将会马上返回 false。不然,callback 为每一个元素返回 true,every 就会返回 true。callback 只会为那些已被赋值的索引挪用。不会为那些被删除或历来没被赋值的索引挪用。

every 不会转变原数组。

every 遍历的元素局限在第一次挪用 callback 之前就已肯定了。在挪用 every 以后添加到数组中的元素不会被 callback 接见到。假如数组中存在的元素被变动,则他们传入 callback 的值是 every 接见到他们那一刻的值。那些被删除的元素或历来未被赋值的元素将不会被接见到。

every 和数学中的”一切”相似,当一切的元素都相符前提才返回true。别的,空数组也是返回true。(空数组中一切元素都相符给定的前提,注:由于空数组没有元素)。

检测一切数组元素的大小

检测数组中的一切元素是不是都大于 10。

function isBigEnough(element, index, array) {
  return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true
var a = [1, 2, 3,, 4].every (function(value){
console.log(value)
   return value       
})//1,2,3,4
console.log(a)//true
a = [1, 2, 3, undefined,4].every (function(value){
console.log(value)
   return value       
})//1,2,3,undefind
console.log(a)//false

filter

运用指定的函数测试一切的元素,建立并返回一个包括一切经由过程测试的元素的新数组。假如没有经由过程测试则返回空数组。

filter 为数组中的每一个元素挪用一次 callback 函数,并应用一切使得 callback 返回 true 或等价于 true 的值的元素建立一个新数组。callback 只会在已赋值的索引上被挪用,关于那些已被删除或许从未被赋值的索引不会被挪用。那些没有经由过程 callback 测试的元素会被跳过,不会被包括在新数组中。

filter 不会转变原数组,它返回过滤后的新数组。

filter 遍历的元素局限在第一次挪用 callback 之前就已肯定了。在挪用 filter 以后被添加到数组中的元素不会被 filter 遍历到。假如已存在的元素被转变了,则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或历来未被赋值的元素不会被遍历到。

运用 filter 建立了一个新数组,该数组的元素由原数组中值大于 10 的元素构成。

var a = [1, 2, 3, 7,4].filter(function(value){
   return value > 4      
})
console.log(a)//[7]

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

map

为数组每一项(不包括经由过程某些要领删除或许未定义的项,值定义为undefined的项除外)实行一个指定函数,返回一个新数组,每一个元素都是回调函数的效果。

map 要领会给原数组中的每一个元素都按顺序挪用一次  callback 函数。callback 每次实行后的返回值(包括 undefined )组合起来构成一个新数组。 callback 函数只会在有值的索引上被挪用;那些历来没被赋过值或许运用 delete 删除的索引则不会被挪用。

map 不修正挪用它的原数组自身(固然能够在 callback 实行时转变原数组)。

运用 map 要领处置惩罚数组时,数组元素的局限是在 callback 要领第一次挪用之前就已肯定了。在 map 要领实行的过程当中:原数组中新增添的元素将不会被 callback 接见到;若已存在的元素被转变或删除了,则它们的通报到 callback 的值是 map 要领遍历到它们的那一时候的值;而被删除的元素将不会被接见到。

下面的代码建立了一个新数组,值为原数组中对应数字的平方根:

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

运用 map 从新格式化数组中的对象

以下代码将一个包括对象的数组用以建立一个包括新从新格式化对象的新数组。

var kvArray = [{key: 1, value: 10}, 
               {key: 2, value: 20}, 
               {key: 3, value: 30}];

var reformattedArray = kvArray.map(function(obj) { 
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});

// reformattedArray 数组为: [{1: 10}, {2: 20}, {3: 30}], 

// kvArray 数组未被修正: 
// [{key: 1, value: 10}, 
//  {key: 2, value: 20}, 
//  {key: 3, value: 30}]

some

测试数组中某些元素是不是经由过程指定函数的测试,如有一项停止轮回返回true。

some 为数组中的每一个元素实行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。假如找到了如许一个值,some 将会马上返回 true。不然,some 返回 false。callback 只会在那些”有值“的索引上被挪用,不会在那些被删除或历来未被赋值的索引上挪用。

some 被挪用时不会转变数组。

some 遍历的元素的局限在第一次挪用 callback. 时就已肯定了。在挪用 some 后被添加到数组中的值不会被 callback 接见到。假如数组中存在且还未被接见到的元素被 callback转变了,则其通报给 callback 的值是 some 接见到它那一刻的值。

测试数组元素的值

下面的例子检测在数组中是不是有元素大于 10。

function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

运用箭头函数测试数组元素的值

[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true

推断数组元素中是不是存在某个值

var fruits = ['apple', 'banana', 'mango', 'guava'];

function checkAvailability(arr, val) {
  return arr.some(function(arrVal) {
    return val === arrVal;
  });
}

checkAvailability(fruits, 'kela');   // false
checkAvailability(fruits, 'banana'); // true

将恣意值转换为布尔范例

var TRUTHY_VALUES = [true, 'true', 1];

function getBoolean(value) {
  'use strict';
   
  if (typeof value === 'string') { 
    value = value.toLowerCase().trim();
  }

  return TRUTHY_VALUES.some(function(t) {
    return t === value;
  });
}

getBoolean(false);   // false
getBoolean('false'); // false
getBoolean(1);       // true
getBoolean('true');  // true
    原文作者:绿水青山
    原文地址: https://segmentfault.com/a/1190000015946127
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞