杂货小铺之ES6+ 🍤 数组

es.png

• 数组遍历

📖 在 ES6 中新增了很多实用的原生 API，方便开发者对 Array 的操控性更强，如 for...of、from、of、fill、find、findIndex等

• ES5中数组遍历方式

// 定义一个数组
let arr = [1,2,3]

1. 🍬 for

for(let i = 0; i < arr.length; i++) {
  console.log(arr[i]); // 1 2 3
}

2. 🍬 forEach()
   📖 forEach没有返回值，只是针对每个元素调用func，但是不支持continue（跳过本次循环）和break（跳出循环）

arr.forEach(function(ele,index,array) {
  if(arr[i] == 2) {
    continue; // 报错
    break; // 报错
  }
  console.log(ele,index)
})

3. 🍬 map()
   📖 返回新的数组，每个元素为调用func的结果,不会改变原数组

let res = arr.map(function (val) {
  val += 1;
  return val;
  // console.log(val);
});
console.log(arr, res); // [1,2,3] [2,3,4]

4. 🍬 filter()
   📖 返回符合func条件的元素数组，并不会改变原数组

let res = arr.filter(function (val) {
  console.log(val);
  return val == 2;
});
console.log(res); // [2]

5. 🍬 some()
   📖 返回boolean，判断是否有元素符合func条件，只要有一个元素符合就返回true，并不会改变原数组

let res = arr.some(function (val) {
  console.log(val);
  return val == 2;
});
console.log(res); // true

6. 🍬 every()
   📖 返回boolean，判断每个元素都符合func条件，有一个不符合就返回false，并不会改变原数组，在every循环中不能使用break和continue会报错

let res = arr.every(function (val) {
  console.log(val);
 // if (val == 2) {
    // break;
 // }
  return val == 2;
});
console.log(res); // false

7. 🍬 reduce()
   📖 接收一个函数作为累加器

reduce(function(prev,cur,index,array){},'初始值')
// prev 上一次调用回调的返回值，第一次的时候相当于是初始值
// cur 当前正在处理的元素
// index 当前正在处理的元素的索引值
// array 原数组

7.1 🍡 累加

let res = arr.reduce(function (prev, cur, index, array) {
  return prev + cur;
}, 0);
console.log("sum", res); // sum 6

7.2 🍡 最大值

let max = arr.reduce(function (prev, cur) {
  return Math.max(prev, cur);
});
console.log("max", max); // max 3

7.3 🍡 去重

let arr = [1, 2, 3, 4, 3];
let res = arr.reduce(function (prev, cur) {
  prev.indexOf(cur) == -1 && prev.push(cur);
  return prev;
}, []);
console.log("res", res);

8. 🍬 for...in
   📖 不但遍历数组的每一个元素，而且会遍历原型下自定义的属性，所以for...in循环不能用于遍历数组，并且不能有return，不然会报错

Array.prototype.foo = function () {
  console.log("foo");
};
for (let index in arr) {
  console.log(index, arr[index]);
}

for...in.png

• ES6中数组遍历方式

1. 🍭 find
   📖 返回数组方法中符合条件的第一个元素的值，如果没有符合的返回undefined

let res = arr.find(function (val) {
  return val == 2;
});
console.log(arr, res); // [1,2,3] 2

2. 🍭 findIndex
   📖 返回数组方法中符合条件的第一个元素的索引，否则返回 -1

let res = arr.findIndex(function (val) {
  return val == 2;
});
console.log(arr, res); // [1,2,3] 1

3. 🍭 for...of
   📖 for...of支持break、continue、return，在功能上很接近for循环

for (item of arr) {
  console.log(item); // 1 2 3
}
// 等同于
for (item of arr.values()) {
  console.log(item); // 1 2 3
}
// 遍历索引
for (item of arr.keys()) {
 console.log(item); // 0 1 2
}
// 遍历索引和值
for (let [index, item] of arr.entries()) {
  console.log(index, item); // 0 1  1 2 2 3
}

• 数组扩展

• Array.from()

1. 🍢 伪数组转变成数组
   📖 伪数组具备两个特征，1. 按索引方式储存数据； 2. 具有length属性；

// DOM
let divs = document.getElementsByTagName("div");
console.log(divs); // HTMLCollection

let divs2 = document.getElementsByClassName("div");
console.log(divs2); // HTMLCollection

let divs3 = document.querySelectorAll(".xx");
console.log(divs3); // NodeList []

// 通过instanceof判断是不是数组
console.log(divs3 instanceof Array) // false

// arguments
function foo() {
  console.log(arguments instanceof Array) // false
}
foo(1,'hello',true)

🌻 ES5 - slice

let arr = Array.prototype.slice.call(divs3); //  [].slice.call(divs3)
console.log(arr); // []

let arr =  Array.prototype.slice.call(arguments) // [].slice.call(arguments);
console.log(arr); // [1,'hello',true]

🔎 :
基本原理是使用call将数组的api应用在新的对象上，换句话说是利用改变函数的上下文来间接使用数组的api

🌻 ES6 - Array.from()

let arrayLike = {
  0: "es6",
  1: "es7",
  2: "es8",
  length: 3,
};
let arr = Array.from(arrayLike);
console.log(arr); // ["es6", "es7", "es8"]

2. ✨✨✨ 其他用法 ✨✨✨
   Array.from(arrayLike,[,mapFn[,thisArg]])

参数	含义	必选
arrayLike	想要转换成数组的伪数组对象或可迭代对象	Y
mapFn	新数组中每个元素会执行该回调函数	N
thisArg	执行回调函数mapFn时this对象	N

初始化一个长度为5的数组，每个数组元素默认为1

// 🌈 之前的写法
let arr = Array(6).join(' ').split('').map(item => 1)
console.log(arr) //  [1, 1, 1, 1, 1]

// 🌈 Array.from
let arr = Array.from({length:5},function(){
  return 1
})
console.log(arr) //  [1, 1, 1, 1, 1]

• Array.of()
  📖 创建一个具有可变数量参数的新数组实例，而不考虑参数的数量和类型

1. Array.of()和Array构造函数的区别

let arr1 = Array.of(7); 
console.log(arr1); // [7]
let arr2 = Array.of(1, 2, 3); 
console.log(arr2); // [1,2,3]

let arr1 = Array(7); 
console.log(arr1); // [,,,,,,,] 指一个有7个空位(empty)的数组,而不是由7个undefined组成的数组
let arr2 = Array(1, 2, 3); 
console.log(arr2); // [1,2,3]

• Array.prototype.copyWithin()
  📖 在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组

let arr = [1,2,3,4,5];
arr.copyWithin(1,3)
console.log(arr) //  [1, 4, 5, 4, 5]

语法：arr.copyWithin(target, start = 0, end = this.length)

参数	含义	必选
target	从该位置开始替换数据。如果为负数，表示倒数	Y
start	从该位置开始读取数据，默认为0。如果为负数，表示从末尾开始计算	N
end	到该位置前停止读取数据，默认等于数组长度。如果为负数，表示从末尾开始计算	N

• Array.prototype.fill()
  📖 fill()方法用一个固定值填充一个数组从起始索引到终止索引的所有元素，但不包括终止索引。

let arr = [1, 2, 3, 4, 5];
arr.fill("hello", 1, 4);
console.log(arr); // [1,"hello","hello","hello",5]

🌻🌻🌻🌻🌻
// 初始化一个长度固定，元素为指定值的数组
let arr = Array(5).fill(1);
console.log(arr); // [1,1,1,1,1]

🔎 :
fill不具备遍历的功能，它是通过指定要操作的索引范围来进行。

语法：arr.fill(value[, start[, end]]

参数	含义	必选
value	用来填充数组元素的值	Y
start	起始索引，默认值为0	N
end	终止索引，默认值为 this.length	N

• Array.prototype.includes()
  📖 数组中是否包含某个元素，返回Boolean值

let arr = [1,2,3,NaN]

// ES5 - indexOf
console.log(arr.indexOf(1)); // 0
console.log(arr.indexOf(5)); // -1
console.log(arr.indexOf(NaN)); // -1
🌻🌻🌻🌻🌻
// includes
console.log(arr.includes(1)); // true
console.log(arr.includes(5)); // false
console.log(arr.includes(NaN)); // true

🔎 :
indexOf 不能检测NaN，includes可以检测

• Array.prototype.find()
  📖 返回数组中满足条件的第一个元素的值，否则返回undefined

let arr = [1, 2, 3, 4];

let found = arr.find(function (el) {
  return el > 2;
});
console.log(found); // 3

语法：arr.find(callback[, thisArg])

参数	含义	必选
callback	在数组每一项上执行的函数，接收三个参数，element、index、array	Y
thisArg	执行回调时用作this的对象	N

• Array.prototype.findIndex()
  📖 返回数组中满足条件的第一个元素的索引，否则返回-1。和find()是成对的,不同的是返回的是索引而不是值。

let arr = [1, 2, 3, 4];

let found = arr.findIndex(function (el) {
  return el > 2;
});
console.log(found); // 2

🚗💨 🚕💨 🚌💨 🚎💨 🚓💨 开心直通车今天正式开通啦~，给五彩缤纷的生活加点料，啦啦啦

哈哈哈.jpeg

滴滴滴~~💨