10-30 03:16 阅读 74

前端基础整理-js

遍历数组的不同方法

for-of 语句 (ES6)

不同于forEach方法，它可以与break、continue和return配合使用。
提供了遍历所有数据结构的统一操作接口。

例子：

迭代数组

let iterable = [10, 20, 30];
for (let value of iterable) {
    value += 1;
    console.log(value);
}
// 11
// 21
// 31复制代码

迭代String

let iterable = "boo";
for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"复制代码

迭代Map

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let entry of iterable) {
  console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3复制代码

迭代Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);
for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3复制代码

注意: for of无法循环遍历对象

for-in

for-in 是为遍历对象属性而构建的

var obj = {a:1, b:2, c:3};
for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}
// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"复制代码

forEach()

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

const arr = ['red', 'green', 'blue'];
arr.forEach(function (element, index) {
  console.log(element); // red green blue
  console.log(index);   // 0 1 2
});复制代码

forEach() 本身是不支持的 continue 与 break 语句的，我们可以通过 [some]和 [every] 来实现。

使用 return 语句实现 continue 关键字的效果：

var arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
    if (item === 3) {
        return;
    }
    console.log(item);
});
结果：
// 1
// 2
// 4
// 5复制代码

传统的for循环语句

const cars=["BMW","Volvo","Saab","Ford"];
for (var i=0,len=cars.length; i<len; i++){
	console.log(cars[i])
}
结果：
// BMW
// Volvo
// Saab
// Ford复制代码

这是标准for循环的写法也是最传统的语句，字符串也支持，定义一个变量i作为索引，以跟踪访问的位置，len是数组的长度，条件就是i不能超过len。

`every方法`

every() 方法使用指定函数检测数组中的所有元素,它返回一个布尔值。：

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数组进行检测。

注意： every() 不会改变原始数组。

[1,2,3,4,5].every(function(i){
  if (i === 3) {
    return false
  } else {
    console.log(i)
    return true  //如果不写，默认是return false 结果为: 1
  }
})
结果： 1, 2复制代码

[32, 33, 16, 40].every(item => {
    return item < 35
})
结果：false复制代码

`some 方法`

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。

var arr = [1,2,3,4,5]
var result = arr.some(function (item,index) {
    return item > 3
})
结果：true复制代码

`filter 方法`

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

const words = [1, 3, 4, 8, 5, 2];
const result = words.filter(word => {
  word = word + 3
  return word > 6
});
console.log(result);  // > Array [4, 8, 5]
console.log(words)   // > Array [1, 3, 4, 8, 5, 2]复制代码

`map 方法`

// ES5写法：
const array1 = [1, 4, 9, 16];
const map1 = array1.map(function(item) {
    return item * 2
})
// ES6写法：
const map1 = array1.map(item => item * 2);
// [2, 8, 18, 32]复制代码

根据上述代码可以看出 map()不会改变原数组，会返回一个新数组。下面举一个我经常在敲代码时用map()实现的看起来改变了原数组的例子

const personList = [
    {name: 'aaa', age: 18},
    {name: 'bbb', age: 23},
    {name: 'ccc', age: 25}
]
// 看起来改变了原数组--修改（添加）对象数组中对象的某个属性
personList.map(item => {  //使用forEach()也可以实现  将map替换为forEach
    item.age += 1 // 修改
    item.gender = '男'  //添加
})
console.log(personList)
输出：
[
    {name: "aaa", age: 19, gender: "男"},
    {name: "bbb", age: 24, gender: "男"},
    {name: "ccc", age: 26, gender: "男"}
]复制代码

ES6系列数组方法

ES6 数组 find() 和 findIndex()

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

[1, 4, -5, 10].find((n) => n < 0)
// -5复制代码

上面代码找出数组中第一个小于 0 的成员

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10复制代码

上面代码中，find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。例子：精准搜索就用find：

const a = [1,2,3,4,5];
const result = a.filter( 
  item =>{
    return item === 3
  }
)复制代码

改进：

const a = [1,2,3,4,5];
const result = a.find( 
  item =>{
    return item === 3
  }
)复制代码

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2复制代码

ES6 数组填充fill()

fill方法使用给定值，填充一个数组。

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]复制代码

fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']复制代码

上面代码表示，fill方法从 1 号位开始，向原数组填充 7，到 2 号位之前结束。

注意:如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。

let arr = new Array(3).fill({name: "Mike"});
arr[0].name = "Ben";
arr
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

let arr = new Array(3).fill([]);
arr[0].push(5);
arr
// [[5], [5], [5]]复制代码

ES6 数组includes()

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true复制代码

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true复制代码

没有该方法之前，我们通常使用数组的indexOf方法，检查是否包含某个值。

if (arr.indexOf(el) !== -1) {
  // ...
}复制代码

indexOf方法有两个缺点，一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。二是，它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。

[NaN].indexOf(NaN)
// -1复制代码

includes使用的是不一样的判断算法，就没有这个问题。

[NaN].includes(NaN)
// true复制代码

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

如果没有找到匹配的字符串则返回 -1。

注意： indexOf() 方法区分大小写。

var str="Hello world, welcome to the universe.";
var n=str.indexOf("e",5)；
结果：14复制代码

`ES6 数组flat()`

数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]复制代码

上面代码中，原数组的成员里面有一个数组，flat()方法将子数组的成员取出来，添加在原来的位置。

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]复制代码

上面代码中，flat()的参数为2，表示要“拉平”两层的嵌套数组。

如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]复制代码

如果原数组有空位，flat()方法会跳过空位。

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]复制代码

例子：

const deps = {
'采购部':[1,2,3],
'人事部':[5,8,12],
'行政部':[5,14,79],
'运输部':[3,64,105],
}
let member = [];
for (let item in deps){
    const value = deps[item];
    if(Array.isArray(value)){
        member = [...member,...value]
    }
}
member = [...new Set(member)]复制代码

改进：

const deps = {
    '采购部':[1,2,3],
    '人事部':[5,8,12],
    '行政部':[5,14,79],
    '运输部':[3,64,105],
}
let member = Object.values(deps).flat(Infinity);
// [1, 2, 3, 5, 8, 12, 5, 14, 79, 3, 64, 105]复制代码

其中使用Infinity作为flat的参数，使得无需知道被扁平化的数组的维度。flat方法IE浏览器不兼容自己想到一个方法，可以用replace()替换方法，如：（\转译）

var str=[1,[2,3,[3,2]]]
console.log(JSON.parse( '['+JSON.stringify(str).replace(/[|]/g, "")+']'))
// [1, 2, 3, 3, 2]复制代码

`ES6 数组去重set()`

var demo = new Set([1,1,3,5,4,6]);
console.log([...demo]); // [1, 3, 5, 4, 6]复制代码

例子：合并两个数组，合并两个对象。

const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}复制代码

改进：

const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}

作者：H丽 ????(*^_^*)
链接：https://juejin.cn/post/7024535891222167566

前端基础整理-js

遍历数组的不同方法

`for-of` 语句 (ES6)

`for-in`

`forEach()`

传统的`for`循环语句

`every方法`

`some 方法`

`filter 方法`

`map 方法`

ES6系列数组方法

ES6 数组 find() 和 findIndex()

ES6 数组填充fill()

ES6 数组includes()

`ES6 数组flat()`

`ES6 数组去重set()`

前端基础整理-js

遍历数组的不同方法

for-of 语句 (ES6)

for-in

forEach()

传统的for循环语句

every方法

some 方法

filter 方法

map 方法

ES6系列数组方法

ES6 数组 find() 和 findIndex()

ES6 数组填充fill()

ES6 数组includes()

ES6 数组flat()

ES6 数组去重set()

`for-of` 语句 (ES6)

`for-in`

`forEach()`

传统的`for`循环语句

`every方法`

`some 方法`

`filter 方法`

`map 方法`

`ES6 数组flat()`

`ES6 数组去重set()`