1.数组常用方法之 push（）（==改变原数组，产生新数组==）
push是用来在数组的末尾追加一个元素,返回添加以后的长度
var arr = [1, 2, 3]
// 使用 push 方法追加一个元素在末尾
arr.push(4)
console.log(arr) // [1, 2, 3, 4]
var res = arr.push(1,2,3,34);
res//8
2.数组常用方法之 pop（）（==改变原数组，产生新数组==）
pop是用来删除数组末尾的一个元素,返回删除的元素
var arr = [1, 2, 3]
// 使用 pop 方法删除末尾的一个元素
var res = arr.pop()
console.log(arr) // [1, 2]
3.数组常用方法之 unshift（）（==改变原数组，产生新数组==）
unshift是在数组的最前面添加一个元素
var arr = [1, 2, 3]
// 使用 unshift 方法想数组的最前面添加一个元素
arr.unshift(4)
console.log(arr) // [4, 1, 2, 3]
4.数组常用方法之 shift（）（==改变原数组，产生新数组==）
shift是删除数组最前面的一个元素
var arr = [1, 2, 3]
// 使用 shift 方法删除数组最前面的一个元素
arr.shift()
console.log(arr) // [2, 3]
5.数组常用方法之 splice（==改变原数组==）
splice是截取数组中的某些内容，按照数组的索引来截取- 语法：
splice(从哪一个索引位置开始，截取多少个，替换的新元素)（第三个参数可以不写）
var arr = [1, 2, 3, 4, 5]
// 使用 splice 方法截取数组
var res = arr.splice(1, 2)
console.log(arr) // [1, 4, 5]
console.log(res)//[2,3]
- `arr.splice(1, 2)` 表示从索引 1 开始截取 2 个内容
- 第三个参数没有写，就是没有新内容替换掉截取位置
```javascript
var arr = [1, 2, 3, 4, 5]
// 使用 splice 方法截取数组
arr.splice(1, 2, '我是新内容')
console.log(arr) // [1, '我是新内容', 4, 5]
1）、删除元素,并返回删除的元素
可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。
var arr = [1,3,5,7,9,11];
var arrRemoved = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arrRemoved); //[1, 3]
2）、向指定索引处添加元素
可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入 4 和 6。
var array1 = [22, 3, 31, 12];
array1.splice(1, 0, 12, 35); //[]
console.log(array1); // [22, 12, 35, 3, 31, 12]
3）、替换指定索引位置的元素
可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入 4 和 6。
const array1 = [22, 3, 31, 12];
array1.splice(1, 1, 8); //[3]
console.log(array1); // [22, 8, 31, 12] 作者：物理达人Physics侯老师 https://www.bilibili.com/read/cv9715493/ 出处：bilibili
arr.splice(1, 2, '我是新内容')表示从索引 1 开始截取 2 个内容- 然后用第三个参数把截取完空出来的位置填充
6.数组常用方法之 reverse（==改变原数组，产生新数组==）
reverse是用来反转数组使用的
var arr = [1, 2, 3]
// 使用 reverse 方法来反转数组
arr.reverse()
console.log(arr) // [3, 2, 1]
7.数组常用方法之 sort（==改变原数组，产生新数组==）
sort是用来给数组排序的（默认按照字典排序 先按==照第一位排序-==如果第一位相等就按照第二位）
var arr = [2, 3, 1]
// 使用 sort 方法给数组排序
arr.sort()
console.log(arr) // [1, 2, 3]
- 这个只是一个基本的简单用法
// 升序
arr4.sort(function (a, b) {
return a - b
})
// 降序
arr4.sort(function (a, b) {
return b - a
})
let arr5 = [{
username: 'zhangsan',
age: 19
},
{
username: 'lisi',
age: 10
},
]
// 按照对象的年龄 降序
// a ，b 数组的元素
arr5.sort(function (a, b) {
return b.age - a.age
})
8.数组常用方法之 concat（==不====改变原数组==）
concat是把多个数组进行拼接- 和之前的方法有一些不一样的地方，就是
concat==不会改变原始数组，而是返回一个新的数组==
var arr = [1, 2, 3]
// 使用 concat 方法拼接数组
var newArr = arr.concat([4, 5, 6])
console.log(arr) // [1, 2, 3]
console.log(newArr) // [1, 2, 3, 4, 5, 6]
- 注意： ==
concat方法不会改变原始数组==
9.数组常用方法之 join==（不会改变原始数组，而是把链接好的字符串返回）==
join是把数组里面的每一项内容链接起来，变成一个字符串- 可以自己定义每一项之间链接的内容
join(要以什么内容链接)默认使用逗号作为分隔符 - 不会改变原始数组，而是把链接好的字符串返回
var arr = [1, 2, 3]
// 使用 join 链接数组
var str = arr.join('-')
console.log(arr) // [1, 2, 3]
console.log(str) // 1-2-3
- 注意： join 方法不会改变原始数组，而是返回链接好的字符串
10.slice 复制数组的一部分 ==（不改变原始数组，返回一个新的数组）==
var arr9 = [9,8,7,6,5,4,3,2];
// 参数 两个 开始位置 结束位置,不包含结束位置,不改变原数组
var res9 = arr9.slice(1,3)
console.log(res9)//[8, 7]
// 第二个参数不传入,复制到最后
console.log(arr9.slice(1))//[8, 7, 6, 5, 4, 3, 2]
// 如果传入负数,倒着数位置,最后一个是 -1
console.log(arr9.slice(1,-2))// [8, 7, 6, 5, 4]
注：
如果之只传入一个大于数组长度的参数，则返回一个空数组
无论是如何提取数组元素，原数组始终保持不变
ES5 中常见的数组常用方法
11.indexOf
接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。
indexOf()：从数组的开头（位置 0）开始向后查找。
lastIndexOf：从数组的末尾开始向前查找。
这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符。
indexOf用来找到数组中某一项的索引- 语法：
indexOf(你要找的数组中的项)
var arr = [1, 2, 3, 4, 5]
// 使用 indexOf 超找数组中的某一项
var index = arr.indexOf(3)
console.log(index) // 2
- 我们要找的是数组中值为 3 的那一项
- 返回的就是值为 3 的那一项在该数组中的索引
- 如果你要找的内容在数组中没有，那么就会返回 -1
var arr = [1, 2, 3, 4, 5]
// 使用 indexOf 超找数组中的某一项
var index = arr.indexOf(10)
console.log(index) // -1
- 你要找的值在数组中不存在，那么就会返回 -1
12.forEach
- 和
for循环一个作用，就是用来遍历数组的 - 这个方法没有返回值。参数都是 function 类型，默认有传
- 语法：
arr.forEach(function (item, index, arr) {})
var arr = [1, 2, 3]
// 使用 forEach 遍历数组
arr.forEach(function (item, index, arr) {
// item 就是数组中的每一项
// index 就是数组的索引
// arr 就是原始数组
console.log('数组的第 ' + index + ' 项的值是 ' + item + '，原始数组是', arr)
})
forEach()的时候传递的那个函数，会根据数组的长度执行- 数组的长度是多少，这个函数就会执行多少回
13.map ==（不改变原数组，返回新数组）==
- 和
forEach类似，只不过可以对数组中的每一项进行操作，==返回一个新的数组==
var arr = [1, 2, 3]
// 使用 map 遍历数组
var newArr = arr.map(function (item, index, arr) {
// item 就是数组中的每一项
// index 就是数组的索引
// arr 就是原始数组
return item + 10
})
console.log(newArr) // [11, 12, 13]
14.filter==（不改变原数组，返回新增数组）==
- 和
map的使用方式类似，按照我们的条件来筛选数组 - 把原始数组中满足条件的筛选出来，组成一个新的数组返回
var arr = [1, 2, 3]
// 使用 filter 过滤数组
var newArr = arr.filter(function (item, nindex, arr) {
// item 就是数组中的每一项
// index 就是数组的索引
// arr 就是原始数组
return item > 1
})
console.log(newArr) // [2, 3]
- 我们设置的条件就是
> 1 - 返回的新数组就会是原始数组中所有
> 1的项
- 15.every 返回布尔值
判断 是否数组所有的元素都满足条件
let flag = arr.every(function(item,index,arr){
return 条件
})
let res4 = arr4.every(function (v) {
return v >= 18
})
console.log(res4);
16.some 返回布尔值
判断是否数组有一些元素满足条件
let flag = arr.some(function(item,index,arr){
return 条件
})
let res5 = arr4.some(function (v) {
return v >= 18
})
console.log(res5);//true
17.find
查找数组中第一个满足条件的元素
var arr6 = [10, 19, 17, 20];
let res6 = arr6.find(function (v, i) {
return v === 19
})
console.log(res6);
var arr7 = [{ id: 1, name: 'zs' }, { id: 2, name: 'lisi' }];
var obj = arr7.find(function (v) {
return v.id == 2
})
console.log(obj);
console.log(obj.name);
18.findIndex
查找数组中第一个满足条件的元素的下标
var res7 = arr7.findIndex(function (v) {
return v.id == 2
})
console.log(res7);
19.reduce
let res8 = arr8.reduce(function (a, b) {
console.log(a, b);
//a 第一次是 数组中第一个元素
//10+19 =29
// 然后几次 就是前面 数字的和
//a = 29
// b 17
return a + b;
})
console.log(res8);
let res9 = arr8.reduce(function (a, b) {
console.log(a, b);
//a 是累积变量 ，1000就是累积变量的初始值
// b 是数组的元素
return a + b;
}, 1000)
console.log(res9);
20.fill() es6 新增 ==（会改变原数组）==
fill()方法能使用特定值填充数组中的一个或多个元素。当只是用一个参数时，该方法会用该参数的值填充整个数组。
let arr = [1, 2, 3, cc , 5];
arr.fill(1);
console.log(arr);//[1,1,1,1,1];
如果不想改变数组中的所有元素，而只是想改变其中一部分，那么可以使用可选的起始位置参数与结束位置参数（不包括结束位置的那个元素）
3 个参数： 填充数值，起始位置参数，结束位置参数（不包括结束位置的那个元素）
let arr = [1, 2, 3, arr , 5];
arr.fill(1, 2);
console.log(arr);//[1,2,1,1,1]
arr.fill(0, 1, 3);
console.log(arr);//[1,0,0,1,1];
21.includes() es7 新增，返回布尔值
includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则 false。
参数有两个，其中第一个是（必填）需要查找的元素值，第二个是（可选）开始查找元素的位置
const array1 = [22, 3, 31, 12, arr ];
const includes = array1.includes(31);
console.log(includes); // true
const includes1 = array1.includes(31, 3); // 从索引3开始查找31是否存在
console.log(includes1); // false
需要注意的是：includes使用===运算符来进行值比较，仅有一个例外：NaN 被认为与自身相等。
let values = [1, NaN, 2];
console.log(values.indexOf(NaN));//-1
console.log(values.includes(NaN));//true
22.toLocaleString() 和 toString()
将数组转换为字符串
const array1 = [22, 3, 31, 12];
const str = array1.toLocaleString();
const str1 = array1.toString();
console.log(str); // 22,3,31,12
console.log(str1); // 22,3,31,12
23.copyWithin() [es6 新增]==（该方法会改变现有数组）==
copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。
//将数组的前两个元素复制到数组的最后两个位置
let arr = [1, 2, 3, arr , 5];
arr.copyWithin(3, 0);
console.log(arr);//[1,2,3,1,2]
默认情况下，copyWithin()方法总是会一直复制到数组末尾，不过你还可以提供一个可选参数来限制到底有多少元素会被覆盖。这第三个参数指定了复制停止的位置（不包含该位置本身）。
let arr = [1, 2, 3, arr , 5, 9, 17];
//从索引3的位置开始粘贴
//从索引0的位置开始复制
//遇到索引3时停止复制
arr.copyWithin(3, 0, 3);
console.log(arr);//[1,2,3,1,2,3,17]
24.flat() 和 flatMap() es6 新增（==该方法返回一个新数组，不改变原数组。）==
flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
该方法返回一个新数组，对原数据没有影响。
参数： 指定要提取嵌套数组的结构深度，默认值为 1。
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2));
// expected output: [0, 1, 2, [3, 4]]
//使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// 扁平化数组空项,如果原数组有空位，flat()方法会跳过空位
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]
flatMap()方法对原数组的每个成员执行一个函数，相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。
该方法返回一个新数组，不改变原数组。
// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]
25、 entries(),keys() 和 values() 【ES6】
entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历
区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历
for (let index of [ a , b ].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of [ a , b ].values()) {
console.log(elem);
}
// a
// b
for (let [index, elem] of [ a , b ].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
如果不使用for...of循环，可以手动调用遍历器对象的next方法，进行遍历。
let letter = [ a , b , c ];
let entries = letter.entries();
console.log(entries.next().value); // [0, a ]
console.log(entries.next().value); // [1, b ]
console.log(entries.next().value); // [2, c ]
JS 如何终止 forEach 循环 break 报错，return 跳不出循环
- 终止 forEach 可以使用 try catch 内部抛出错误，catch 捕获错误。
let arr = [1, 2, 3]
try {
arr.forEach(item => {
if (item === 2) {
throw('循环终止')
}
console.log(item)
})
} catch(e) {
console.log('e: ', e)
}
复制代码
当然我们大可以用其他方法代替
- Array.prototype.some
当 return true 的时候，会终止遍历 - Array.prototype.every
当 return false 的时候，会终止遍历
