js的一些总结

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

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

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

学习网址：https://mp.weixin.qq.com/s/SPXdwnfHCyGVevBPpkGTvw

一、数组常见的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()创建一个新数组，而不改变原始数组。

6.数组的拷贝

（1） 展开操作符

拷贝数组的一种简单方法是使用展开运算符：const clone = [... array]

如下所示，拷贝 colors 数组：

const colors = ['white', 'black', 'gray'];
const clone = [...colors];
clone; // => ['white', 'black', 'gray']colors === clone; // => false 

[...array] 创建一个浅拷贝。

（2） array.concat()方法

[].concat(array)是另一种拷贝数组的方法。

const colors = ['white', 'black', 'gray'];
const clone = [].concat(colors);
clone; // => ['white', 'black', 'gray']colors === clone; // => false

提示：[].concat(array) 创建一个浅拷贝。

（3） array.slice() 方法

array.slice())是另一种拷贝数组的方法。

 例：

const colors = ['white', 'black', 'gray'];
const clone = colors.slice();
clone; // => ['white', 'black', 'gray']colors === clone; // => false

提示：colors.slice() 创建一个浅拷贝。 

7. 查找数组
（1）array.includes() 方法

array.includes(itemToSearch [，fromIndex])返回一个布尔值，array 是否包含itemToSearch。可选参数fromIndex，默认为0，表示开始搜索的索引。

如下所示：判断2和99是否存在于一组数字中：

const numbers = [1, 2, 3, 4, 5];
numbers.includes(2); // => truenumbers.includes(99); // => false

（2） array.find() 方法

array.find(predicate) 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

如下所示，找到数组中的第一个偶数：

const numbers = [1, 2, 3, 4, 5];
function isEven(number) { return number % 2 === 0;}
const evenNumber = numbers.find(isEven);
evenNumber; // => 2
7.3 array.indexOf() 方法

（3）array.indexOf()方法

array.indexOf(itemToSearch[, fromIndex]) 返回array中第一个出现的itemToSearch的索引。默认为0的可选参数fromIndex表示开始搜索的索引。

如下所示，找到Catwoman的索引：

const names = ['Batman', 'Catwoman', 'Joker', 'Bane'];
const index = names.indexOf('Catwoman');
index; // => 1

提示：如果找不到该项，则array.indexOf(itemToSearch)返回-1

（4）array.findIndex()方法

array.findIndex(predicate)是使用predicate函数查找索引的替代方法。

8. 查询数组
(1) array.every() 方法

如果每个项都通过predicate 检查，则array.every(predicate)返回true。

在每个遍历predicate(item[, index[, array]])上，用参数调用predicate 函数:当前遍历项、索引和数组本身。

如下所示，确定数组是否只包含偶数：

const evens = [0, 2, 4, 6];const numbers = [0, 1, 4, 6];
function isEven(number) { return number % 2 === 0;}
evens.every(isEven); // => truenumbers.every(isEven); // => false
8.2 array.some() 方法 

（2）array.some()方法

如果每个项只要一下通过predicate 检查，则array.every(predicate)返回true。

在每个遍历predicate(item[, index[, array]])上，用参数调用predicate 函数:当前遍历项、索引和数组本身。

如下所示：确定数组是否至少包含一个偶数：

const numbers = [1, 5, 7, 10];const odds = [1, 3, 3, 3];
function isEven(number) { return number % 2 === 0;}
numbers.some(isEven); // => trueodds.some(isEven); // => false

9. 数组的过滤
（1）array.filter() 方法

array.filter(predicate)方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

在每个遍历predicate(item[, index[, array]])上，用参数调用predicate 函数:当前遍历项、索引和数组本身。

如下所示：将一个数组过滤为仅包含偶数：

const numbers = [1, 5, 7, 10];
function isEven(number) { return number % 2 === 0;}
const evens = numbers.filter(isEven);
evens; // => [10]

提示：array.filter() 创建一个新数组，而不改变原始数组。

10. 数组的插入
（1）array.push() 方法

array.push(item1 [...，itemN]) 方法将一个或多个项追加到数组的末尾，并返回新的长度。

如下所示，在names 数组的末尾添加 'Joker'

const names = ['Batman'];
names.push('Joker');
names; // ['Batman', 'Joker']

提示：array.push() 会改变原数组；array.push(item1, item2, ..., itemN) 可以添加多个元素。 

（2） array.unshift() 方法

array.unshift(item1[..., itemN])方法将一个或多个项追加到数组的开头，返回数组的新长度

const names = ['Batman'];
names.unshift('Catwoman');
names; // ['Catwoman', 'Batman']

提示：array.unshift() 会改变原数组；array.unshift(item1, item2, ..., itemN) 可以添加多个元素。

（3） 展开操作符

可以通过组合展开操作符和数组字面量以不可变的方式在数组中插入项。

在数组末尾追加一个项:

const names = ['Joker', 'Bane'];
const names2 = [ ...names, 'Batman',];
names2; // => ['Joker', 'Bane', 'Batman'];

在数组的开头追加一个项: 

const names = ['Joker', 'Bane'];
const names2 = [ 'Batman', ...names];
names2; // => ['Batman', 'Joker', 'Bane'];

在任何索引处插入元素：

const names = ['Joker', 'Bane'];const indexToInsert = 1;
const names2 = [ ...names.slice(0, indexToInsert), 'Batman', ...names.slice(indexToInsert)];
names2; // => ['Joker', 'Batman', 'Bane'];

11. 删除数组元素
（1） array.pop() 方法

array.pop()方法从数组中删除最后一个元素，然后返回该元素。如下所示，删除colors数组的最后一个元素：

const colors = ['blue', 'green', 'black'];
const lastColor = colors.pop();
lastColor; // => 'black'colors; // => ['blue', 'green']

提示：array.pop() 会改变原数组； 

（2） array.shift() 方法

array.shift()方法从数组中删除第一个元素，然后返回该元素。 

const colors = ['blue', 'green', 'black'];
const firstColor = colors.shift();
firstColor; // => 'blue'colors; // => ['green', 'black']

提示：array.shift() 会改变原数组；array.shift() 具有O(n)复杂度。

（3）array.splice() 方法

array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素，并插入新的元素。

例如，从索引1处删除2个元素：

const names = ['张三', '李四', '王五', '赵六']
names.splice(1, 2)
names // => ["张三", "赵六"]
names.splice(1，2)删除元素'张三'和'赵六'。

names.splice() 可以插入新元素，而不是插入已删除的元素。咱们可以替换索引1处开始的的2个元素，然后插入一个新的元素 '小红'：

const names = ['张三', '李四', '王五', '赵六']
names.splice(1, 2, '小红')
names // ["张三", "小红", "赵六"]

提示：array.splice() 会改变原数组。 

（4）展开操作符号

可以通过组合展开操作符和数据字面量以不可变的方式从数组中删除项。

const names = ['张三', '李四', '王五', '赵六']const fromIndex = 1const removeCount = 2
const newNames = [ ...names.slice(0, fromIndex), ...names.slice(fromIndex + removeCount)]
newNames // ["张三", "赵六"]

12. 清空数组
（1） array.length属性

array.length是保存数组长度的属性。除此之外，array.length是可写的。

如果咱们写一个小于当前长度的array.length = newLength，多余的元素从数组中移除。

如下所示：使用array.length = 0删除数组中的所有项目：

const colors = ['blue', 'green', 'black'];
colors.length = 0;
colors; // []

（2）array.splice() 方法

array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素，并插入新的元素。

如果removeCount参数被省略，那么array.splice()将删除从fromIndex开始的数组的所有元素。咱们使用它来删除数组中的所有元素：

const colors = ['blue', 'green', 'black'];
colors.splice(0);
colors; // []

13. 填充数组
（1）array.fill() 方法

array.fill(value[, fromIndex[, toIndex]])用从fromIndex 到toIndex的值填充数组(不包括toIndex本身)。fromIndex可选参数默认为0,toIndex可选参数默认为array.length。

例如，使用用零值填充数组：

const numbers = [1, 2, 3, 4];
numbers.fill(0);
numbers; // => [0, 0, 0, 0]

不仅如此，还可以使用Array(length).fill(initial)来初始化特定长度和初始值的数组。

const length = 3;const zeros = Array(length).fill(0);
zeros; // [0, 0, 0]

提示：array.splice() 会改变原数组。

（2）Array.from() 函数

Array.from() 有助于初始化带有对象的特定长度的数组：

const length = 4;const emptyObjects = Array.from(Array(length), function() { return {};});
emptyObjects; // [{}, {}, {}, {}]

14. 数组的扁平化
（1） array.flat()方法

array.flat([depth])方法通过递归扁平属于数组的项直到一定深度来创建新数组。 depth可选参数默认为1：

const arrays = [0, [1, 3, 5], [2, 4, 6]];
const flatArray = arrays.flat();
flatArray; // [0, 1, 3, 5, 2, 4, 6]

arrays 包含数字和数字数组的混合。 arrays.flat()对数组进行扁平，使其仅包含数字。

提示：array.flat() 创建一个新数组，而不会改变原始数组。

15. 数组的排序
（1）array.sort() 方法

array.sort([compare])方法对数组的元素进行排序。

可选参数compare(a, b)是一个自定义排序顺的回调函数。如果比较compare(a, b)返回的结果：

如果 a小于b，在排序后的数组中a应该出现在b之前，就返回一个小于0的值。

如果a等于b，就返回0。

如果a大于b，就返回一个大于0的值。

如下所示，对数组 numbers 时行排序

const numbers = [4, 3, 1, 2];
numbers.sort();
numbers; // => [1, 2, 3, 4]
numbers.sort() 以升序对数字进行排序。

使用比较函数，让偶数排在奇数前面：

const numbers = [4, 3, 1, 2];
function compare(n1, n2) { if (n1 % 2 === 0 && n2 % 2 !== 0) { return -1; } if (n1 % 2 !== 0 && n2 % 2 === 0) { return 1; } return 0;}
numbers.sort(compare);
numbers; // => [4, 2, 3, 1]

提示：array.sort() 会改变原数组。