目录
五. 堆栈方法——push、pop、unshift、shift(都会改变原数组)
六. 排序相关方法——reverse、sort(也会改变原数组)
九. indexOf、lastIndexOf、includes
十一. Array静态方法(of、from、keys、entries)
十二. Object:keys、values、entries
一. 稀疏数组
比如
var arr=[1,2,3,4,5];
delete arr[1];
console.log(arr);
或者[1,,3,4,5]
二. 类数组
1.arguments对象
function fun(){
console.log(arguments);
}
fun(1,2,3);
2.DOMLIST
3.字符串(无法更改它的length)
console.log(Array.prototype.toString.call([1,[2,3], [3, [4], 5]]))
结果:
join()只能扁平化一层:
console.log([1, [2, 2], 3, [4, [5, 5, 5], 6]].join('-'));
console.log([1, [2, 2], 3, [4, [5, 5, 5], 6]].join());
结果:
三. 转字符串方法——join、toString
同:都是数组转字符串
异:
join可以指定分隔符,分隔只能分隔一层
toString可以全部分隔
四. 转数组方法——split(和join相对应)
split可以将字符串转数组
var str='1,2,3';
str.split(',');
五. 堆栈方法——push、pop、unshift、shift(都会改变原数组)
push:数组最后一位新增一项(返回数组新增后的长度)
pop:数组最后一位删除一项(删除那项的值)
unshift:数组最开头新增一项
shift:数组最开头删除一项
六. 排序相关方法——reverse、sort(也会改变原数组)
reverse:将数组倒序(返回原数组)
sort:arr.sort((a,b)=>b-a)【逆序】(返回原数组)
应用:实现乱序排序数组(原生没有实现过这个功能)
function compare(){
return Math.random()-0.5;
}
arr.sort(compare);
七. 拼接的方法——concat(不改变原数组)
concat:
var arr =[1,2];
console.log(arr,arr.concat(3,4));
console.log(arr,arr.concat([3,4]));
console.log(arr,arr.concat([3,[4]]));
八. 删改的方法——splice、slice
slice:提取[start,end)的数组,start、end还可以是负数(返回提取后的数组,不改变原数组)
应用:还可以将类数组转数组
var str='123';
console.log(Array.prototype.slice.call(str));
或
function test(){
console.log(Array.prototype.slice.call(arguments));
}
test(1,2,3,4);
splice:从(start,num,插入元素)删除num个数,start可以是负数(返回的是被删除的数组,更改原数组)
九. indexOf、lastIndexOf、includes
indexOf:从左往右查找,返回查找到的值的下标
lastIndexOf:从右往左查找,返回查找到的值的下标
(ES6)
includes:返回一个布尔值。
十. fill(修改原数组)
fill(value,start,end):把[start,end)区间的值填充为value
var arr = [1, 2, 3, 4];
console.log(arr, arr.fill(5));
十一. Array静态方法(of、from、keys、entries)
之前的那些方法都是直接调用,这些是静态方法
function Test(){
}
Test.of=()=>{ //静态方法
}
Test.prototype.of=()=>{ //原型上的方法
}
Array.of()——创建数组
Array.of(1,2,3,4)
打印:
Array.from()——将类数组转为数组
Array.keys()
不用加任何参数。返回一个数组迭代器。
var Arr = ['gfg', 'geeks', 'cse', 'geekpro', '', 1, 2];
var iterator = Arr.keys();
for (let key of iterator) {
console.log(key + ' ');
}
Array.values()
同key,返回值
var Arr = ['gfg', 'geeks', 'cse', 'geekpro', '', 1, 2];
var iterator = Arr.values();
for (let value of iterator) {
console.log(value + ' ');
}
Array.entries()
同key,返回数组的索引和值
var Arr = ['gfg', 'geeks', 'cse', 'geekpro', '', 1, 2];
var iterator = Arr.entries();
for (let entry of iterator) {
console.log(entry + ' ');
}
十二. Object:keys、values、entries
Object.keys:返回的是对象键名构成的数组
Object.values:返回的是对象的值构成的数组
Object.entries:返回的是键值对构成的数组
var obj = {
a: 1,
b: 2,
c: 3,
d: 4,
e: 5
};
for (let key of Object.keys(obj)) {
console.log(key);
}
for (let value of Object.values(obj)) {
console.log(value);
}
for (let [key, value] of Object.entries(obj)) {
console.log(key, value);
}
十三. find、findIndex
find:返回第一个符合条件的成员
findIndex:返回第一个符合条件的下标
var arr = [1, 2, 3, 4, 5, 6];
console.log(arr.find((item) => {
return item > 3;
}));
console.log(arr.findIndex((item) => {
return item > 3;
}));
十四. 数组迭代方法
forEach
(1)forEach没有返回值
(2)如果值不存在的话,是不会调用forEach方法的
var arr = [1, , 3, 4]; // 稀疏数组
arr.forEach((item) => {
console.log(item);
})
(3)forEach和for循环对比:forEach控制循环有局限性,无法用continue和break。
(4)类数组调用forEach
function fun() {
[...arguments].forEach((item) => {
console.log(item);
});
Array.prototype.forEach.call(arguments,(item)=>{
console.log(item);
})
}
function fun1(...args) {
[args].forEach((item) => {
console.log(item);
});
}
fun(1, 2, 3, 4);
(5) 参数1是个函数,fun(item,index,arr),参数2是this指向
map
(1)返回的是一个跟原数组产生映射关系的一个数组,如果不指定返回值,返回的是undefined
var arr=[1,2,3,4];
var arr1=arr.map(function(item){
if(item>3)
return item;
})
console.log(arr1);
(2)参数1是个函数,fun(item,index,arr),参数2是this指向
filter
(1) 参数1是个函数,fun(item,index,arr),参数2是this指向 。
(2)函数里面返回一个布尔值,布尔值决定了当前过滤的方式。
应用:删除原数组里的undefined和null
var arr = [1, 2, 3, 4, undefined, 5, null, , 6, 0];
var arr1 = arr.filter(function (item) {
return item;
})
console.log(arr1);
问题:0也被过滤了,因为0也是falsy值
var arr = [1, 2, 3, 4, undefined, 5, null, , 6];
var arr1 = arr.filter(function (item) {
return item != undefined;
})
console.log(arr1);
利用undefined==null
但是如果又加上NaN,false
var arr = [1, 2, 3, 4, undefined, 5, null, , 6, '', NaN, false, .1];
var arr1 = arr.filter(function (item) {
return Number.isInteger(item);
})
console.log(arr1);
some
(1) 参数1是个函数,fun(item,index,arr),参数2是this指向
(2) 返回的是个布尔值。只要有一项符合就返回true
var arr = [1, 2, 3, 4];
var arr1 = arr.some(function (item) {
return item % 2 === 1;
})
console.log(arr1);
every
(1) 参数1是个函数,fun(item,index,arr),参数2是this指向
(2) 返回的是个布尔值。所有项都符合才返回true
var arr = [1, 2, 3, 4];
var arr1 = arr.every(function (item) {
return item % 2 === 1;
})
console.log(arr1);
reduce
(1) 参数1是个函数,fun(acca,item,index,arr),参数2是acca的初始值
(2) 如果没有设初始值,累加器的初始值就是当前遍历元素的第一个元素,从第二个元素开始遍历
应用场景:
1.求和
var arr = [1, 2, 3, 4];
var sum = arr.reduce((accu, item) => (
accu + item
), 0)
console.log(sum);
2.将二维数组转一维数组
var flat = [[1,2,3],[1,2,3]].reduce((accu, item) => (
[...accu, ...item]
), [])
console.log(flat);
3.计算数组中每个元素出现的次数
var names = ['Alice', 'Bob', 'Zyy', 'Alice'];
var count = names.reduce((allNames, name) => {
if (name in allNames) {
allNames[name]++;
} else {
allNames[name] = 1;
}
return allNames;
},{});
console.log(count);
4.按属性对obj分类
筛选数组中相同属性的成员。
var people=[
{name:'Alice',age:18},
{name:'Marry',age:89},
{name:'Jerry',age:34}
];
function groupBy(obj,prop){
return obj.reduce(function(acc,obj){
var key=obj[prop];
if(!acc[key]){
acc[key]=[];
}
acc[key].push(obj);
return acc;
},{})
}
var groupedPeople=groupBy(people,'age');
console.log(groupedPeople);
5. 数组去重
let arr = [1, 2, 3, 3, 5, 6, 6, 2, 3, 0];
let result = arr.sort().reduce((init, cur) => {
if (init.length === 0 || init[init.length - 1] !== cur) {
init.push(cur);
}
return init;
}, []);
console.log(result);
6. 按顺序运行Promise
function runPromise(arr, input) {
return arr.reduce(
(promiseChain, curFunc) => promiseChain.then(curFunc),
Promise.resolve(input)
);
}
function p1(a) {
return new Promise((resolve, reject) => {
resolve(a * 5);
});
}
function p2(a) {
return new Promise((resolve, reject) => {
resolve(a * 2);
});
}
function f3(a) {
return a * 3;
}
function p4(a) {
return new Promise((resolve, reject) => {
resolve(a * 4);
});
}
const promiseArr = [p1, p2, f3, p4];
runPromise(promiseArr, 10).then(console.log)
7.功能管道符
const double = x => x + x;
const triple = x => x * 3;
const quadruple = x => 4 * x;
const pipe = (...functions) => input => functions.reduce(
(acc, fn) => fn(acc),
input
)
const multiply6 = pipe(double, triple);
const multiply9 = pipe(triple, triple);
const multiply16 = pipe(quadruple, quadruple);
const multiply24 = pipe(double, triple, quadruple);
console.log(multiply6(6)); // 和triple(double(6))的效果一样
console.log(multiply9(9));
console.log(multiply16(16));
console.log(multiply24(24));
8. reduce实现map
if (!Array.prototype.mapUsingReduce) {
Array.prototype.mapUsingReduce = function (callback, thisArg) {
return this.reduce(function (mapArr, curValue, index, arr) {
mapArr[index] = callback.call(thisArg, curValue, index, arr);
return mapArr;
}, [])
}
}
[1, 2, 3].map((item, index, arr) => {
return item + index + arr.length;
})
[1, 2, 3].mapUsingReduce(
(cur, index, arr) => cur + index + arr.length
)
十五. 数组去重的几种方法
1. set
var arr = [1, 3, 3, 4, 5, 66, 6, 1, 2, 3, 4, 5];
function uniqueArr(arr) {
return Array.from(new Set(arr));
}
console.log(uniqueArr(arr));
或
var arr = [1, 3, 3, 4, 5, 66, 6, 1, 2, 3, 4, 5];
function uniqueArr(arr) {
return [...new Set(arr)];
}
console.log(uniqueArr(arr));
2.for循环
var arr = [1, 3, 3, 4, 5, 66, 6, 1, 2, 3, 4, 5];
function uniqueArr(arr) {
var flag = false, _arr = [];
for (let i = 0; i < arr.length; i++) {
flag = false;
for (let j = i + 1; j < arr.length; j++) {
if (arr[i] === arr[j]) {
flag = true;
break;
}
}
if (!flag) {
_arr.push(arr[i]);
}
}
return _arr;
}
console.log(uniqueArr(arr));
var arr = [1, 3, 3, 4, 5, 66, 6, 1, 2, 3, 4, 5];
function uniqueArr(arr) {
var flag = false, _arr = [];
for (let i = 0; i < arr.length; i++) {
flag = false;
for (let j = 0; j < _arr.length; j++) {
if (arr[i] === _arr[j]) {
flag = true;
break;
}
}
if (!flag) {
_arr.push(arr[i]);
}
}
return _arr;
}
console.log(uniqueArr(arr));
3.利用对象的键名不能重复
var arr = [1, 3, 3, 4, 5, 66, 6, 1, 2, 3, 4, 5];
function uniqueArr(arr) {
var obj = {}, _arr = [];
for (let i = 0; i < arr.length; i++) {
if (!obj[arr[i]]) {
obj[arr[i]] = 1;
_arr.push(arr[i]);
} else {
obj[arr[i]]++;
}
}
return _arr;
}
console.log(uniqueArr(arr));
4.reduce
同上
5.indexOf
var arr = [1, 3, 3, 4, 5, 66, 6, 1, 2, 3, 4, 5];
function uniqueArr(arr) {
let _arr=[];
for(let i=0;i<arr.length;i++){
if(_arr.indexOf(arr[i])===-1){
_arr.push(arr[i]);
}
}
return _arr;
}
console.log(uniqueArr(arr));
6.includes
var arr = [1, 3, 3, 4, 5, 66, 6, 1, 2, 3, 4, 5];
function uniqueArr(arr) {
let _arr = [];
for (let i = 0; i < arr.length; i++) {
if (!_arr.includes(arr[i])) {
_arr.push(arr[i]);
}
}
return _arr;
}
console.log(uniqueArr(arr));
7.filter
var arr = [1, 3, 3, 4, 5, 66, 6, 1, 2, 3, 4, 5];
function uniqueArr(arr) {
return arr.filter((item, index) => {
return arr.indexOf(item) === index
})
}
console.log(uniqueArr(arr));