查找
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
*/