JavaScript学习日记 : Day21 - 数组方法(一)

在前端的日常开发中，数组使用的频率非常高，所以充分熟悉各种常见的方法後，能提升工作的效率。

1. 基本语法

数组有三种创建的方法:

//第一种 []
var arr0 = [element0, element1, ..., elementN]
//第二种 构造函数
var arr1 = new Array(element0, element1[, ...[, elementN]])
//第三种 构造函数
var arr2 = new Array(arrayLength)

2. 遍历数组

我们时常会需要对一个array进行遍历，进而针对每个元素进行操作。

1. for

某些情况下会使用for --- 当循环满足某种条件下，跳出循环，或是跳出本次循环进入下一个循环。

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (let i = 0; i < arr.length; i++) {
  // 当 i == 3 时，跳过此次循环进入下次
  if (i == 3) continue;
  console.log(arr[i]);
  // 当 i > 7 时，跳出循环
  if (i > 7) break;
}

// 0
// 1
// 2
// 4
// 5
// 6
// 7
// 8

2. forEach

语法如下

arr.forEach(callback[, thisArg]);

参数说明:

• currentValue : 当前的值
• index : 可选，当前的索引
• array : 可选，forEach正在操作的数组
• thisArg : 可选，当执行callback时，this的值

let a = 123;
let b = {a:456};
(function() {
  let arr = [0, 1, 2];
  arr.forEach(function(item){
    console.log(this.a);// 这里是指向b.a
  },b);//b作为thisArg参数传入後，this就指向了b
})();

// 456
// 456
// 456

注意，如果使用箭头函数来传入thisArg参数会被忽略，因为箭头函数绑订了this值。

let a = 123;
let b = {a:456};
(function() {
  let arr = [0, 1, 2];
  arr.forEach((item)=>{
    console.log(this.a);// 这里是window.a
  },b);//这里把b作为thisArg参数传入之後，本来this应该指向b，但因为使用了箭头函数表达式，this固定指向包含此函数的外层作用域（也即匿名函数）的this，也就是window
})();

//>> 123
//>> 123
//>> 123

3. map

map与forEach相似，只是map会返回一个新的数组，数组内的每一个element都是callback function return的值，所以可以用一个变数去接map的返回值。

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const arr1 = arr.map(item => item + 1);
console.log(arr1);
// [1,2,3,4,5,6,7,8,9,10]

const arr2 = arr.map(item => {item + 1});// 如果没有return任何的值
console.log(arr2);
//输出一个皆是undefined的数组
//>> [undefined, undefined, …… undefined]

4. for..in与for..of

for..in是遍历数组的索引，而for...of是遍历数组的值。for..of遍历的只是数组内属性的值，而不包含数组的原型属性跟方法。

Array.prototype.getLength = function () {
   return this.length;
}
let arr = [1, 2, 4, 5, 6, 7]
arr.name = "ownArray";
console.log("for...of");
for (let value of arr) {
   console.log(value);
}
console.log("for...in");
for (let key in arr) {
   console.log(key);
}

//  for...of
//  1
//  2
//  4
//  5
//  6
//  7
//  for...in
//  0
//  1
//  2
//  3
//  4
//  5
//  name
//  getLength

可以发现，for..in是可以遍历到原型上的属性和方法，如果不想遍历原型的属性和方法，可以在循完内部使用hasOwnProperty方法判断某属性是否为该object的属性。

Array.prototype.getLength = function () {
   return this.length;
}
let arr = [1, 2, 4, 5, 6, 7]
arr.name = "ownArray";
console.log("for...in");
for (let key in arr) {
   if(arr.hasOwnProperty(key))
      console.log(key);
}
//  for...in
//  0
//  1
//  2
//  3
//  4
//  5
//  name

与forEach不同，for..of与for..in都可以使用break,continue,return等语句。