数组的各种方法及应用

news/2024/7/10 22:35:24 标签: es6, javascript, 前端

目录

一. 稀疏数组

二. 类数组

三. 转字符串方法——join、toString

四. 转数组方法——split（和join相对应）

五. 堆栈方法——push、pop、unshift、shift（都会改变原数组）

六. 排序相关方法——reverse、sort（也会改变原数组）

七. 拼接的方法——concat（不改变原数组）

八. 删改的方法——splice、slice

九. indexOf、lastIndexOf、includes

十. fill（修改原数组）

十一. Array静态方法(of、from、keys、entries）

Array.of()——创建数组

 Array.from()——将类数组转为数组

Array.keys()

Array.values()

 Array.entries()

十二. Object：keys、values、entries

十三. find、findIndex

十四. 数组迭代方法

forEach

map

filter

some

every

reduce 

1.求和

2.将二维数组转一维数组

3.计算数组中每个元素出现的次数

4.按属性对obj分类

5. 数组去重 

 6. 按顺序运行Promise

7.功能管道符

8. reduce实现map 

十五. 数组去重的几种方法

1. set

 2.for循环

3.利用对象的键名不能重复

4.reduce

5.indexOf

6.includes

7.filter

一. 稀疏数组

比如

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));


http://www.niftyadmin.cn/n/1437259.html

相关文章

转树形结构

转树形结构

有一个这样的数组&#xff0c;希望你将其转成树形结构&#xff1a;(我们默认没有parentId节点的就是根节点&#xff09; let arr [{id: 3,name: aaa,parentId: 1},{id: 2,name: bbb,parentId: 2},{id: 4,name: ccc,parentId: 1},{id: 5,name: ddd,parentId: 4},{id: 6,name: …
阅读更多...
一个搜索引擎搜索出来的目录与其内容不同步的实例

一个搜索引擎搜索出来的目录与其内容不同步的实例

阅读更多...
函数柯里化与反柯里化

函数柯里化与反柯里化

柯里化 比如想要个函数计算一个月一共花了多少钱&#xff1a; let sumMoney0; function cost(money){sumMoneymoney; } cost(100); cost(50); cost(200); // 剩下的调用函数此处省略 console.log(sumMoney); 但实际上&#xff0c;我们并不希望这个cost函数执行31次&#xf…
阅读更多...
属性的4个局限性实例C#

属性的4个局限性实例C#

阅读更多...
关于文件操作的那些趣味小知识之（剪切、移动和复制粘贴）

关于文件操作的那些趣味小知识之（剪切、移动和复制粘贴）

阅读更多...
TypeScript学习（上）

TypeScript学习（上）

TypeScript的介绍 1.ts是由微软开发的开源变成语言&#xff08;vscode和ts都是微软提供的&#xff0c;vs里面很多ts的适配&#xff0c;里面有很多ts的插件&#xff0c;让写法更佳舒适&#xff09; 2.ts是js的超集&#xff08;超集的理解&#xff1a;ts在js之上&#xff0c;包…
阅读更多...
属性与字段的区别C#

属性与字段的区别C#

阅读更多...
webpack5

webpack5

为什么有webpack&#xff1f; web1.0阶段&#xff0c;还没有明确前端岗位&#xff0c;主要职责是编写静态页面&#xff0c;用Js来进行表单验证或动画效果。为了在页面上动态填充数据&#xff0c;后面也出现了php、jsp这种开发模式。 web2.0阶段&#xff0c;伴随ajax的诞生&am…
阅读更多...
最新文章

Copyright @ 2022~2023