js的一些总结

最近突然发现之前写得好多代码都是一坨屎啊==

比如在数组中我使用(for .. in)去遍历，才发现自己的一些错误，在vue页面中使用了json.parse的类似操作。。

以后要好好的学习啊，不能再犯一些低级小错误了。

一、数组常见的15种操作

1.遍历数组

（1）方法一：

for...of循环

const numbers = [1, 3, 5];

for (const num of numbers) {
  console.log(num);
}
// 1
// 3
// 5

可以使用break语句可以停止遍历

（2）方法二：

for循环

const numbers = [1, 3, 5];

for (let i; i < numbers.length; i++) {
  console.log(numbers);
}
// 1
// 3
// 5

可以随时使用break语句停止遍历。

（3）方法三：

array.forEach()方法

array.forEach(callback)方法通过在每个数组项上调用callback函数来遍历数组项。

在每次遍历中，都使用以下参数调用callback(item [, index [, array]])：当前遍历项，当前遍历索引和数组本身。

const numbers = [1, 3, 5];

numbers.forEach(function callback(item, index) {
  console.log(value, index);
});
// 1, 0
// 2, 1
// 5, 2

不能中断array.forEach()迭代。

2.数组的映射，得到新数组，不改变原素组

（1）Array.map()方法

array.map(callback) 方法通过在每个数组项上使用callback调用结果来创建一个新数组。

在每个遍历中的callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身，并应该返回新项。

例：每个数组元素加1

const numbers = [1, 3, 5];

const newNumbers = numbers.map(function increment(number) {
  return number + 1;
});

newNumbers; // => [2, 4, 6]

array.map()创建一个新的映射数组，而不改变原始数组。

（2）Array.from方法

Array.from(arrayLike[, callback])方法通过在每个数组项上使用callback 调用结果来创建一个新数组。

在每个遍历中callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身并且应该返回新项。

例：

const numbers = [1, 3, 5];

const newNumbers = Array.from(numbers,
  function increment(number) {
    return number + 1;
  }
);

newNumbers; // => [2, 4, 6]

Array.from()创建一个新的映射数组，而不改变原始数组。
Array.from()更适合从类似数组的对象进行映射。

3.数组的简化

Array.reduce() 方法

array.reduce(callback[, initialValue])通过调用callback 函数来将数组简化为一个值。

在每次遍历中的callback(accumulator, item[, index[, array]])使用用参数调用的:累加器，当前项，索引和数组本身且应该返回累加器。

例：数组求和

const numbers = [2, 0, 4];

function summarize(accumulator, number) {
  return accumulator + number;
}

const sum = numbers.reduce(summarize, 0);

4.数据的连接

（1）array.concat() 方法

array.concat(array1[, array2, ...])将一个或多个数组连接到原始数组。

const arr1 = ['1', '2'];
const arr2 = ['3', '4'];

const newArr = arr1.concat(arr2);

newArr; // => ['1', '2', '3', '4']

（2）利用数组的展开操作符来得到新数组

[...array1, ...array2]

const arr1 = ['1', '2'];
const arr2 = ['3', '4'];

const numbers = [...arr1, ...arr2];

numbers; // => ['1', '2', '3', '4']

5.获取数组的片段

array.slice() 方法

array.slice([fromIndex [，toIndex]])返回数组的一个片段，该片段从fromIndex开始，以toIndex结尾（不包括toIndex本身）。fromIndex可选参数默认为0，toIndex可选参数默认为array.length。

const numbers = [1, 2, 3, 4];

const arr1 = names.slice(0, 2);
const arr2 = names.slice(2);

arr1; // => [1, 2]
arr2; // => [3, 4]

array.slice()创建一个新数组，而不改变原始数组。

猜你喜欢