此文章将会是常用方法总结，就不区分是否是ES6的啦，有些真是作者本人真不常用，就不展示了
如有小伙伴想补充，可以联系作者哦~~
本文章方法分为两类哦~
原数组改变
push
push() 向一个数组后面添加项数
返回值：返回添加后的数组长度， 会改变原来数组
let arr1 = ['a', 'b', 'c'];
console.log(arr1); //输出 ['a', 'b', 'c']
console.log(arr1.push('z')); //输出 4
console.log(arr1); //输出 ['a', 'b', 'c', 'z']unshift
unshift() 向数组的最前面添加项
返回值：返回新的数组长度， 会改变原数组
let arr1 = ['a', 'b'];
console.log(arr1); //输出 ['a', 'b']
console.log(arr1.unshift('x', 'z')); //输出 4
console.log(arr1); //输出 ['x', 'z', 'a', 'b']pop
pop() 移除数组的最后一项
let arr = ['a', 'b', 'c'];
console.log(arr); //输出 ['a', 'b', 'c']
console.log(arr.pop()); //输出 c
console.log(arr); //输出 ['a', 'b']shift
shift() 删除数组中的第一项
返回值：返回删除的项 会改变原数组
let arr = ['a', 'b'];
console.log(arr); //输出 ['a', 'b']
console.log(arr.shift()); //输出 a
console.log(arr); //输出 ['b']reverse
数组反转 返回值：返回新数组，会改变原数组
let arr = [1, 3, 5, 3, 2, 4];
console.log(arr); //输出 [1, 3, 5, 3, 2, 4]
console.log(arr.reverse()); //输出 [4, 2, 3, 5, 3, 1]
console.log(arr); //输出 [4, 2, 3, 5, 3, 1]sort
直接排序数字出错原因:
因为它采用的unicode (采用双字节对字符进行编码；统一的字符编码标准) 编码导致的
数字排序
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});//1,5,10,25,40,100 升序
points.sort(function(a,b){return b-a});//100,40,25,10,5,1 降序
简写
points.sort((a,b)=> a-b);//1,5,10,25,40,100 升序
points.sort((a,b)=> b-a);//100,40,25,10,5,1 降序数组对象排序
var points = [
{value:10},
{value:8},
{value:4},
{value:9},
{value:1},
{value:18},
];
points.sort((a,b)=> {a.value-b.value});//1,5,10,25,40,100 升序
points.sort((a,b)=> {b.value-a.value});//100,40,25,10,5,1 降序字母排序
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); //Apple,Banana,Mango,Orange 升序排列数组splice 截取/添加/删除
参数1：开始删除的位置即下标
参数2：可选 删除元素个数长度。若不传则默认删除到最后
参数3,4,5…: 添加的项数
返回值：返回修改后的数组，会改变原数组
let arr = ['a', 'b', 'c', 'd', 'e', 'f'];
console.log(arr); //输出 ['a', 'b', 'c', 'd', 'e', 'f']
console.log(arr.splice(2, 3)); //输出 ['c', 'd', 'e']
console.log(arr); //输出 ['a', 'b', 'f']
let arr1 = ['a', 'b', 'c', 'd', 'e', 'f'];
console.log(arr1); //输出 ['a', 'b', 'c', 'd', 'e', 'f']
console.log(arr1.splice(2, 2, 'xx', 'aa')); //输出 ['c', 'd']
console.log(arr1); //输出 ['a', 'b', 'xx', 'aa', 'e', 'f']
copyWithin()
将数组中指定的成员项，复制到其他位置(会覆盖原来的成员)，返回新数组会改变原数组。
Array.prototype.copyWithin(target, start = 0, end = this.length)
参数1：指定从那个位置开始替换数据
参数2：可选，默认从0开始复制。若传入则从指定位置为复制的数据，若为负数则从尾部数
参数3：可选，默认复制到最后。若传入则从指定位置结果复制的数据，若为负数则从尾部数
let arr = [1, 2, 3, 4, 5, 6];
let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let arr2 = [1, 2, 3, 4, 5, 6, 7, 8];
let arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let arr4 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let arr5 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
console.log(arr.copyWithin(4));
//输出 [1, 2, 3, 4, 1, 2]
console.log(arr);
//输出 [1, 2, 3, 4, 1, 2]
console.log(arr1.copyWithin(2));
//输出 [1, 2, 1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr1);
//输出 [1, 2, 1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr2.copyWithin(3, 4));
//输出 [1, 2, 3, 5, 6, 7, 8, 8]
console.log(arr3.copyWithin(3, 4, 6));
//输出 [1, 2, 3, 5, 6, 6, 7, 8, 9, 10]
console.log(arr5.copyWithin(3, -7, -5));
//输出 [1, 2, 3, 5, 6, 6, 7, 8, 9, 10, 11]
原数组不改变
数组长度 length
let arr = ['a', 'b', 'c', 'd'];
console.log(arr.length);//输出4转换字符串
join()
以指定的字符将数组连接起来，变成字符串
通常和String中的split连用，splint 是以指定字符分割成数组
参数：指定的字符, 如果未传参则是以逗号(,)分割
let arr = ['a', 'b', 'c', 'd'];
console.log(arr.join('1')); //输出 a1b1c1d
console.log(arr.join()); //输出 a,b,c,d
console.log(arr.join('')); //输出 abcdtoString()
var test = [1,2,3,4];
test.String() //1,2,3,4toLocaleString()
设置格式化字符串
var test = [1,2,3,4];
test.toLocaleString()
// 1,2,3,4array.toLocaleString(locales, options)
toLocaleString() 方法返回数字和时间在特定语言环境下的表示字符串。
新的 locales 和 options 参数让应用程序可以指定要进行格式转换的语言，并且定制函数的行为。在旧的实现中，会忽略 locales 和 options 参数，使用的语言环境和返回的字符串的形式完全取决于实现方式。
join()与toString()的区别
- 如果join()函数内部参数为空，则join()等价于toString()
- 如果join(’,’)函数内部参数为逗号字符，则表示用逗号分割数组
- 如果join(‘巴拉巴拉’)，则表示用‘巴拉巴拉’分割数组。
var test = [1,2,3,4];
var x=document.getElementById("demo");
x.innerHTML= test.toString()+":"+test.join()+"<br>"
+test.toString()+":"+test.join(',')+"<br>"
+test.toString()+":"+test.join('巴拉巴拉')+"<br>"
+test.toString()+":"+test.join('')+"<br>";
截取数组 slice
按传入的下标截取数组
参数1：开始截取的位置即下标
参数2：可选 若不传则默认截取到末尾。若传入则截取到该下标的前一位，不包括当前下标的一位。
返回值：返回按指定下标截取后的数组(前包后不包)，不会影响原数组 (若想删除一个数组中的某几项则用splice())
若传入负数则从数组的末尾往前数
let arr = ['a', 'b', 'c', 'd', 'e', 'f'];
console.log(arr); //输出 ['a', 'b', 'c', 'd', 'e', 'f']
console.log(arr.slice(1, 3)); //输出 ['b', 'c']
console.log(arr.slice(1)); //输出 ['b', 'c', 'd', 'e', 'f']
console.log(arr.slice(-3)); //输出 ['d', 'e', 'f']
console.log(arr.slice(-3, -1)); //输出 ['d', 'e']concat
两个数组连接
返回值：返回新数组，不会改变原数组
let arr = ['a', 'b'];
let arr1 = ['x', 'z'];
console.log(arr.concat(arr1)); //输出 ['a', 'b', 'x', 'z']
console.log(arr); //输出 ['a', 'b']
console.log(arr1); //输出 ['x', 'z']查值系列
indexOf()
查找一个数组(从首位开始查询)中是否存在某个值，若存在返回当前的下标(只能匹配第一次出现)，否则返回-1
参数1：要查找的某个值
参数2：可选 传入指定的下标，指定从哪个位置开始查询
let arr = ['a', 'b', 'c', 'd', 'b', 'e'];
console.log(arr); //输出 ['a', 'b', 'c', 'd', 'b', 'e']
console.log(arr.indexOf('b')); //输出 1
console.log(arr.indexOf('f')); //输出 -1
console.log(arr.indexOf('d', 2)); //输出 3lastIndexOf()
lastIndexOf() 查找一个数组(从末尾开始倒着查询)中是否存在某个值(最后出现的值)，若存在返回当前的下标(只能匹配第一次出现)，否则返回-1
参数1：要查找的某个值
参数2：可选 传入指定的下标，指定从哪个位置之前查询
let arr1 = ['a', 'b', 'c', 'd', 'b', 'e'];
console.log(arr1);
//输出 ['a', 'b', 'c', 'd', 'b', 'e']
console.log(arr1.lastIndexOf('b'));
//输出 4
console.log(arr1.lastIndexOf('f'));
//输出 -1
console.log(arr1.lastIndexOf('d', 3));
// 这里就是从数组['a', 'b', 'c', 'd'] 查询是否有'd' //输出 3at()
指定下标
var arr1 = [100, 200, 300, 400, 500];
arr1.at(1);//200 数字代表获取下标的
arr1.at(-1);//500 数字代表获取下标的检测数组
every() 每一项是否都满足
检测数组的每一项是否都符合条件，符合返回true，若有一项不符合则停止检测返回false
参数：函数，有三个参数分别为，当前的项，当前项的下标，检测的数组
let arr = [1, 2, 3, 4, 5];
let arr1 = arr.every((item, x, y) => {
console.log(item, x, y)
return item >= 1
})
//输出内部
1 0 (5) [1, 2, 3, 4, 5]
2 1 (5) [1, 2, 3, 4, 5]
3 2 (5) [1, 2, 3, 4, 5]
4 3 (5) [1, 2, 3, 4, 5]
5 4 (5) [1, 2, 3, 4, 5]
console.log(arr1); //true 意思是都满足some() 是否有满足的
检测数组中是否存在符合指定的条件，若有符合条件的则停止检测返回true，否则false
参数：函数， 有三个参数分别为，当前的项，当前项的下标，检测的数组
let arr = [1, 2, 3, 4, 5];
let arr2 = arr.some((x, y, z) => {
return x > 2
})
console.log(arr2);//true
// 如果 x>5 返回falsefilter() 过滤
检测数组，返回符合条件的内容， 没有符合的则返回空数组
参数：函数， 有三个参数分别为，当前的项，当前项的下标，检测的数组
let arr = [1, 2, 3, 4, 5];
let arr1 = arr.filter((x, y, z) => {
console.log(x, y, z);
return x > 2
})
console.log(arr1);
//[3, 4, 5]includes()
检测数组是否存在某个值，存在为true，否则为false
- 参数1：传入的指定值
- 参数2：可选，表示搜索的起始位置，默认为0。若为负数，则从数组倒着查询
- 注意：
- 如果传入的值为整数，其长度大于数组长度则返回false
- 如果传入的值为负数，其长度大于数组长度则重置从0开始查询
// 常规写法
if (num == 1 || num == 2 || num == 3) {
console.log("yes");
}
// 简洁写法
if ([1, 2, 3].includes(num)) {
console.log("yes");
}
let arr = ['x', 'b', 'a', 'c', 'd', 'e'];
console.log(arr.includes('b')); //true
console.log(arr.includes('z')); //false
console.log(arr.includes('a', 1)); //true
console.log(arr.includes('a', 3)); //false
console.log(arr.includes('e', -2)); // 这里其实是从['d', 'e']中查询值'e'是否存在 //true
console.log(arr.includes('e', 10)); //false
find()
找出第一个符合条件的成员
参数是一个回调函数，依次查询每一项，直到查询到第一个符合条件的成员，并返回该项的值，若不存在则返回undefined
有三个参数分别为，当前的项，当前项的下标，检测的数组
let arr = [1, 2, 3, 4, 5, 6];
let arr1 = arr.find((item, index, arr) => {
console.log(item, index, arr)
return item > 3
})
console.log(arr1); //输出 4 findIndex()
返回的是符合条件的位置，而find()是返回符合条件的项，如果所有成员都不满足则返回-1
let arr2 = [1, 2, 3, 1, 3, 5, 4, 5, 6];
let arr3 = arr2.findIndex((item, index, arr) => {
return item > 3
})
console.log(arr3);
//输出 5 下标转为数组
Array.of()
将一组值转为数组
如果没有传入参数则返回一个空数组[]
其实Array.of()可以代替Array()和new Array() 去创建和声明一个新数组
console.log(Array.of()); //输出 []
console.log(Array.of('a')); //输出 ['a']
console.log(Array.of(1, 'a', 3, 'ab')); //输出 [1, 'a', 3, 'ab']
console.log(Array.of(1, [1, 'a'], 3, 'ab')); //输出 [1, Array(2), 3, 'ab']
console.log(Array.of(1, 2, 3, 4, 5)); //输出 [1, 2, 3, 4, 5]Array.from()
将一个类数组对象或者可遍历对象转换成一个真正的数组
所谓类数组对象，最基本的要求就是具有length属性的对象。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES6 的写法
let arr2 = Array.from(arrayLike);
// ['a', 'b', 'c']
将Set结构的数据转换为真正的数组：
let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set))
// [ 12, 45, 97, 9797, 564, 134, 45642 ]
Array.from还可以接受第二个参数
作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
如下：
let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1))
// [ 13, 46, 98, 9798, 565, 135, 45643 ]
将字符串转换为数组
let str = 'hello world!';
console.log(Array.from(str))
// ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]
Array.from参数是一个真正的数组
console.log(Array.from([12,45,47,56,213,4654,154]))
//像这种情况，Array.from会返回一个一模一样的新数组。
fill()
fill() 方法用静态值填充数组中的指定元素。
您可以指定开始和结束填充的位置。如果未指定，则将填充所有元素。
注释：fill() 会覆盖原始数组。
array.fill(value, start, end)
//value 必需。用于填充数组的值。
//start 可选。开始填充数组的索引（默认为 0）。
//end 可选。停止填充数组的索引（默认为 array.length）。
复制20遍相同数组
Array(20).fill(item)
let arr = ['a', 'b', 'c'];
console.log(arr.fill(1)); //输出
[1,1,1]
let arr1 = ['a', 'b', 'c', 'd', 'e'];
console.log(arr1.fill(2, 2, 4)); //输出 ['a','b','2','2','e']
new Set()
let s1 = new Set(["大哥","二哥","三哥","四哥","三哥"]);
console.log(s1);//去重 Set(4) {'大哥', '二哥', '三哥', '四哥'}
let s2= [...s1]
console.log(s2);//去重 ['大哥', '二哥', '三哥', '四哥']方法-常用
add()、delete()、size、 clear()、has(value)遍历
键名遍历
keys()
let arr = ['a', 'b', 'c', 'd', 'e'];
for(let i of arr.keys()){
console.log(i)
}
输出
0
1
2
3
4
for in
let arr = ['a', 'b', 'c', 'd', 'e'];
for(let i in arr){
console.log(i)
}
输出
0
1
2
3
4键值遍历
values()
let arr = ['a', 'b', 'c', 'd', 'e'];
for(let i of arr.values()){
console.log(i)
}
输出
a
b
c
d
e
for of 无法遍历对象
for(let i of arr){
console.log(i)
}
输出
a
b
c
d
e键值对的遍历
entries()
let arr = ['a', 'b', 'c', 'd', 'e'];
for(let i of arr.entries()){
console.log(i)
}
输出
[0, 'a']
[1, 'b']
[2, 'c']
[3, 'd']
[4, 'e']
数据遍历
1. forEach()
forEach：（可以三个参数，第一个是value，第二个是index，第三个是数组体）
var arr1 = [100, 200, 300, 400, 500];
arr1.forEach(function(item, index){
console.log(item, index);
});2.map()
let arr = [1, 2, 3, 4, 5];
arr.map((item, index) => {
console.log(item, index);
})3. for循环
for (let i = 0; i < arr.length; i++) {
console.log('for===', arr[i])
}数组判断
Array.isArray(obj)
obj必需，要判断的对象。*扩展运算符
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
...arr1 输出0,1,2
arr1.push(...arr2);多维数组的转换
flat()
数组的成员有时还是数组， Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。
flat ( num ) num默认为1 数字为要拉平的嵌套数量
[1, 2, [3, 4]].flat() //输出 [1, 2, 3, 4]
[1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]
原数组有空位， flat() 方法会跳过空位。
[1, 2, , 4, 5].flat() // [1, 2, 4, 5]flatMap
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]
flatMap() 只能展开一层数组。
// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])// [[2], [4], [6], [8]]
上面代码中，遍历函数返回的是一个双层的数组，但是默认只能展开一层，因此 flatMap() 返回的还是一个嵌套数组。
flatMap() 方法的参数是一个遍历函数，该函数可以接受三个参数，分别是当前数组成员、当前数组成员的位置（从零开始）、原数组。
arr.flatMap(function callback(currentValue[, index[, array]]) { // ...}[, thisArg])
flatMap() 方法还可以有第二个参数，用来绑定遍历函数里面的 this 。Array()
Array(3) // [, , ,]
reduce
小伙伴们有更好的可以评论添加哦~~
扫一扫
1177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
