总结一下工作当中经常使用的数组查找,遍历等等

查找

find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined

findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1

persons = [

    {

        name: '张三',

        gender: '男',

        age: 20

    },

    {

        name: '王小毛',

        gender: '男',

        age: 20

    },

    {

        name: '李四',

        gender: '男',

        age: 20

    }]

 

persons .find((element) => (element.name == '李四')); //返回的是{name: "李四", gender: "男", age: 20}这个元素

persons .findIndex((element)=>(element.name =='李四'));  //返回的是索引下标:2

 

遍历

for…of (是es6标准,用来遍历value值,遍历数组,不能遍历普通对象)

for...of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环,以替代 for...in 和 forEach() ,并支持新的迭代协议。for...of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等。

语法

for (variable of iterable) {

    statement

}

variable:每个迭代的属性值被分配给该变量。

iterable:一个具有可枚举属性并且可以迭代的对象。

 

 

普通对象不可迭代

for...of 循环仅适用于迭代。 而普通对象不可迭代。 我们来看一下:

const obj = { fname: 'foo', lname: 'bar' };

 for (const value of obj) { // TypeError: obj[Symbol.iterator] is not a function

    console.log(value);

}

在这里,我们定义了一个普通对象 obj ,并且当我们尝试 for...of 对其进行操作时,会报错:TypeError: obj[Symbol.iterator] is not a function。

 

我们可以通过将类数组(array-like)对象转换为数组来绕过它。该对象将具有一个 length 属性,其元素必须可以被索引。我们来看一个例子:

// object-example.jsconst obj = { length: 3, 0: 'foo', 1: 'bar', 2: 'baz' };

 const array = Array.from(obj);for (const value of array) {

    console.log(value);

}// Output:// foo// bar// baz

Array.from() 方法可以让我通过类数组(array-like)或可迭代对象来创建一个新的 Array(数组) 实例。

但是可以在新出来的对象类型上使用

var set = new Set();  

    set.add("a").add("b").add("d").add("c");  

    var map = new Map();  

    map.set("a",1).set("b",2).set(999,3);  

    for (let v of set) {  

        console.log(v);  

    }  

    console.log("--------------------");  

    for(let [k,v] of map) {  

        console.log(k,v);  

    }  

forEach

array.forEach(v=>{  

    console.log(v);  

});

array.forEach(function(v){  

    console.log(v);  

});

 

for in(for...in是es5标准,用来遍历key值,遍历对象和数组,但是一般不推荐遍历数组)

遍历对象

如果需要取得到数组或者对象的key值的时候可以使用for in

用for in不仅可以对数组,也可以对enumerable对象操作

var A = {a:1,b:2,c:3,d:"hello world"};  for(let k in A) {  

    console.log(k,A[k]);  

}

遍历数组

var array = [1,2,3,4,5,6,7];

 

 for(let index in array) {  

        console.log(index,array[index]);  

    };

 

for in总是得到对像的key或数组,字符串的下标

for...in 循环主要是为了遍历对象而生,不适用于遍历数组

for of和forEach一样,是直接得到值
for of不能对对象使用

for...of 循环可以用来遍历数组、类数组对象,字符串、Set、Map 以及 Generator 对象

for...in 循环不仅遍历数字键名,还会遍历手动添加的其它键,甚至包括原型链上的键。for...of 则不会这样

 

无论是 for...in 还是 for...of 都不能遍历出 Symbol 类型的值,遍历 Symbol 类型的值需要用 Object.getOwnPropertySymbols() 方法

 

{

  let a = Symbol('a')

  let b = Symbol('b')

 

  let obj = {

    [a]: 'hello',

    [b]: 'world',

    c: 'es6',

    d: 'dom'

  }

 

  for(let key in obj) {

    console.info(key + ' --> ' + obj[key])

  }

 

  /*

    c --> es6

    d --> dom

  */

 

  let objSymbols = Object.getOwnPropertySymbols(obj)

  console.info(objSymbols)    //  [Symbol(a), Symbol(b)]

  objSymbols.forEach(item => {

    console.info(item.toString() + ' --> ' + obj[item])

  })

 

  /*

    Symbol(a) --> hello

    Symbol(b) --> world

  */

 

  // Reflect.ownKeys 方法可以返回所有类型的键名,包括常规键名和Symbol键名

  let keyArray = Reflect.ownKeys(obj)

  console.log(keyArray)      //  ["c", "d", Symbol(a), Symbol(b)]

}

原因是:普通对象没有Symbol.iterator属性,如果一个对象拥有Symbol.iterator属性,那么就可以使用for...of遍历

// 下面的例子摘自 阮一峰老师的ES6入门第三版let obj = {

  data: [ 'hello', 'world' ],

  [Symbol.iterator]() {

    const self = this;

    let index = 0;

    return {

      next() {

        if (index < self.data.length) {

          return {

            value: self.data[index++],

            done: false

          };

        } else {

          return { value: undefined, done: true };

        }

      }

    };

  }}for (let value of obj) {

  console.log(value)}   // hello world// 类似数组的对象遍历  直接引用Array.prototype[Symbol.iterator]  // 普通对象部署数组的Symbol.iterator方法,并无效果let iterable = {

  0: 'a',

  1: 'b',

  2: 'c',

  length: 3,

  [Symbol.iterator]: Array.prototype[Symbol.iterator]};for (let item of iterable) {

  console.log(item); // 'a', 'b', 'c'}

 

 

 

 

 

for...of 循环可以与break、continue 和 return 配合使用,跳出循环

 

for(let item of arr) {

   if(item % 2 === 0) {

     break

   }

   console.log('item', item)

 }

forEach 循环无法中途跳出,break 命令或 return 命令都不能奏效

let arr = [1, 2, 3, 5, 9]

arr.forEach(item => {

  if(item % 2 === 0) {

    return

  }

  console.log('item', item)

})

/*

  item 1

  item 3

  item 5

  item 9

*/

 

for...in 循环不仅遍历数字键名,还会遍历手动添加的其它键,甚至包括原型链上的键。for...of 则不会这样

 let arr = [1, 2, 3]

arr.set = 'world'  // 手动添加的键

Array.prototype.name = 'hello'  // 原型链上的键

 

for(let item in arr) {

  console.log('item', item)

}

 

/*

  item 0

  item 1

  item 2

  item set

  item name

*/

 

for(let value of arr) {

  console.log('value', value)

}

 

/*

  value 1

  value 2

  value 3

*/

 

对于普通对象,没有部署原生的 iterator 接口,直接使用 for...of 会报错

var obj = {

   'name': 'Jim Green',

   'age': 12

 }

 

 for(let key of obj) {

   console.log('for of obj', key)

 }

 // Uncaught TypeError: obj is not iterable

可以使用 for...in 循环遍历键名

for(let key in obj) {

   console.log('for in key', key)

 }

 /*

   for in key name

   for in key age

 */

也可以使用 Object.keys(obj) 方法将对象的键名生成一个数组,然后遍历这个数组

for(let key of Object.keys(obj)) {

   console.log('key', key)

 }

 /*

   key name

   key age

 */

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章