JavaScript的元组 js数组原生方法

转载

数据小筑 2024-02-04 15:35:34

文章标签 JavaScript的元组 javascript 前端 typescript 数组 文章分类 JavaScript 前端开发

这是对原生js常用的数组方法进行总结以及对一些方法进行重构，记住一些常用的数组方法，再开发中，可以让我们快速使用，不过我也一般记不住，但还是多看看吧，让自己有个印象，用到的时候可以更好的百度，更有利于面向csdn编程，哈哈哈。

原生js的数组方法

1. concat

concat()方法用于合并两个或多个数组或给数组合并值。不会更改原有数组，而是直接返回一个新数组。

语法：var newArray = arr.concat(value1,value2…value);
参数：value：可选参数，可以是数组，也可以是具体的变量或值

var alpha = ["a", "b", "c"]; 
 var numeric = [1, 2, 3];

 var alphaNumeric = alpha.concat(numeric); 
 console.log("alphaNumeric : " + alphaNumeric );    // a,b,c,1,2,3

2. join

join()方法将一个数组(伪数组)的所有元素连接成一个字符串并返回。

语法：arr.join([分隔符])
参数：[分隔符]：可选参数，表示用什么符号分隔，如果不填的话默认用逗号分隔。

var arr = ["hello","world",false];
console.log(arr.join()); 
console.log(arr.join("-"));
console.log(arr.join(""));

3. push

后增。push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。会改变原数组

语法：arr.push(value1,value2…value)
参数：value：可以是数组，也可以是具体的变量或值

var a = [2,3,4];
var b = a.push(5,6);
console.log(a); // [2,3,4,5,6]
console.log(b); // 5

4. pop

后删。pop()方法用于删除数组最后一个元素，并返回最后一个元素，会改变原数组。

语法：arr.pop()

var arr = [2,3,4];
console.log(arr.pop()); // 4
console.log(arr); // [2,3]

5. shift

前删。shift()方法可以把数组的第一个元素删除，并返回第一个元素。会改变原数组。

语法：arr.shift()

var arr = [2,3,4];
console.log(arr.shift()); // 2
console.log(arr); // [3,4]

6. unshift

前增。unshift()方法向数组的开头增加一个或多个元素，并返回新的长度。会改变原数组。

语法：arr.unshift(value1,value2…)
参数：value：可以是数组，也可以是具体的变量或值。

var arr = [2,3,4,5];
console.log(arr.unshift(0,1)); // 6
console.log(arr); // [0,1,2,3,4,5]

7. slice

截取。slice()方法可以截取并返回一个新的数组（从start到end中的元素（不包含end））。不会修改原数组。

语法：arr.slice(start,end)
参数：start：number类型，截取头的下标；
end：number类型，截取尾的下标；

var arr = [2,3,4,5];
console.log(arr.slice(1,3)); // [3,4]
console.log(arr) // [2,3,4,5]

8. splice()

更新。splice()方法很强大，包含了添加和删除，所以可以达到替换的效果。该方法返回被删除的元素组成的数组。会改变原数组。

语法：arr.splice(index,length,value1,value2…)
参数：
index：起始下标
length：删除元素的位移
value：插入的新元素，可以是多个

// 使用splice完成删除
var arr = [2,3,4,5,"haha"];
var arr2 = arr.splice(1,2); // 从index为1的元素开始，删除2个元素并以数组形式返回，原数组发生改变
console.log(arr) // [2,5,"haha"]
console.log(arr2) // [3,4]

// 使用splice完成增加
var arr = [2,3,4,5,"haha"];
arr.splice(1,0,8,9,"bobo"); // 从index为1的位置（元素4）开始，删除0个元素，并在index（3）对应的元素前新增三个元素（8,9,"bobo"）
console.log(arr); //[2,8,9,"bobo",3,4,5,"haha"]

// 使用splice完成替换
var arr = ["a","b","x","d"];
arr.splice(2,1,"c"); // 从index为2的位置（"x"）开始，删除1个元素，并在该位置上增加一个新的元素"c"。
console.log(arr); // ["a","b","c","d"]

9. sort()

排序。按照Unicode编码的位置排序，默认升序。返回排序后的数组。会改变原数组。

var fruit = ['cherries','apples','bananas'];
 console.log(fruit.sort()); // ['apples','bananas','cherries']
 
 var scores = [1,10,21,2];
 console.log(scores.sort()); // [1,10,2,21]

10. reverse()

倒序。reverse()方法颠倒数组中元素的顺序，返回颠倒后的数组。会改变原数组。

```js
var arr = [2,3,4];
console.log(arr.reverse()); // [4,3,2]
console.log(arr); // 4,3,2
```

11. indexOf() 和 lastIndexOf()

查找。indexOf()从开始往后查找，lastIndexOf()从末尾往前查找。返回第一个查找到的元素的下标（未找到则返回-1）。不改变原数组。

语法：
arr.indexOf(value)
arr.lastIndexOf(value)
参数：value：查找的元素

var arr = [2,3,4,5,2];
console.log(arr.indexOf(2)); // 0
console.log(arr.indexOf(8)); // -1
console.log(arr.lastIndexOf(2)); // 4

12. forEach()

遍历。forEach()方法可以直接对数组遍历并用回调函数进行操作。

语法：arr.forEach(callback(value,index,array))
参数：
callback：回调函数
有三个参数：
value：当前元素
index：当前元素的下标
array：整个数组

var arr = [1,2,3,4,5];
arr.forEach(function(value,index,array){
    arr[index] += 1;
})
console.log(arr); // [2,3,4,5,6]

13. every

判断。每次遍历回调函数都为true，才会返回true。否则返回false。

语法：arr.every(callback(value))
参数：
callback：回调函数
参数：value：遍历的值

var arr = [1,2,-1,0,3]
arr.every(function(value){
    return value>0
})  // fasle

var arr2 = [5,6,7]
arr2.every(function(value){
    return value>0
})  // true

14. some

判断。只要有一个元素满足回调函数，就会返回true。全部都不满足则返回false。

语法：arr.some(callback(value))
参数：
callback：回调函数
参数：value：遍历的值

var arr = [1,2,3,0,-1];
arr.some(function(value){
    return value < 0;
}) // true

var arr2 = [1,2,3,0,6];
arr2.some(function(value){
    return value < 0;
}) // false

15. map

加工。遍历数组，并通过回调函数操作后返回一个新数组。原数组不变。

语法：arr.map(callback(value))
参数：
callback：回调函数
有一个参数：
value：当前元素

var arr = [1,2,3,4,5];
var arr2 = arr.map(function(value){
    return value * 2;
})
console.log(arr); // 1,2,3,4,5
console.log(arr2); // 2,4,6,8,10

16. filter

过滤。遍历数组中的元素，返回满足回调函数的元素组成的数组。原数组不变。

语法：arr.filter(callback)
参数：
callback：回调函数
参数：value：遍历的值

var arr = [1,2,3,4,5,6,7];
var arr2 = arr.filter(function(value){
    return value % 2 == 0;
})
console.log(arr); // [1,2,3,4,5,6,7]
console.log(arr2); // [2,4,6]

17. reduce

归并。功能很强大，reduce()方法从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。

语法：arr.reduce(callback(acc,value,index,array)，initialValue)
参数：
callback：回调函数
acc：累积器，累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue。
value：当前元素
index：当前索引（可选参数
array：原数组（可选参数
initialValue：初始值（可选参数

// reduce 基本累加
var arr = [1,2,3,4];
var res = arr.reduce(function(acc,value){
    return acc + value;
})
console.log(res); // 10

// reduce 对对象的值进行操作
var initialValue = 0;
var arr = [{x:1},{x:2},{x:3},{x:4}]
var res = arr.reduce(function(acc,value){
    return acc + value.x;
},initialValue)
console.log(res); // 10

// reduce 将二维数组转化为一维数组
var arr = [[0,1],[2,3],[4,5]];
var res = arr.reduce(function(acc,value){
    return acc.concat(value);
},[]);
console.log(res); // [0,1,2,3,4,5]

// 计算数组中每个元素出现的次数
var arr = ['Alley','Bob','Hehe','Alley','Eric','Bruce','Alley','Eric','Tiff']
var res = arr.reduce(function(allNames,name){
    if(name in allNames){
        allNames[name] ++;
    }
    else{
        allNames[name] = 1;
    }
    return allNames;
},{});
console.log(res); // {Alley: 3,Bob: 1,Bruce: 1,Eric: 2,Hehe: 1,Tiff: 1}

// 按照属性对object进行分类
var people = [
    {name:'Alley',age:30},
    {name:'Eric',age:40},
    {name:'Apple',age:20},
    {name:'Edan',age:30},
    {name:'Code00',age:20}
]
function groupBy(objectArr,property){
    return objectArr.reduce(function(acc,obj){
        var key = obj[property];
        if(!acc[key]){
            acc[key] = [];
        }
        acc[key].push(obj);
        return acc
    },{});
}
var groupPeople = groupBy(people,'age');
console.log(groupPeople);

// reduce 实现数组去重
var arr = ['a','b','a','b','c','e','f','d','c','e']
var res = arr.reduce(function(acc,currentValue){
    if(acc.indexOf(currentValue) === -1){
        acc.push(currentValue);
    }
    return acc;
},[])
console.log(res); // ['a','b','c','e','f','d']

// 2：
var arr2 = [1,2,4,6,7,8,5,3,3,2,5,7,5,4];
var newArr = arr2.sort();
var res2 = newArr.reduce((init,current)=>{
    if(init.length === 0 || init[init.length-1] !== current){
        init.push(current);
    }
    return init;
},[]);
console.log(res2); // [1,2,3,4,5,6,7,8]

重构迭代方法

(1)myEvery 如果有不满足的直接返回false,不再继续往后判断。如果全部满足，返回true

Array.prototype.myEvery=function(fun,obj){
        for(var i=0;i<this.length;i++){
            if(!(obj?fun.bind(obj)(this[i]):fun(this[i]))){
            return false
            } //如果有第二个参数，需要修改this指向
            //if(!fun(this[i])){
            //    return false
            //} ---没有第二个参数的逻辑操作
        }
        return true
    };
    var arr=[1,2,3,4,5];
    var result=arr.myEvery(function(item,index,arr){
        console.log(this) //有第二个参数,this指向第二个参数
        return item>1  //一项条件不满足 直接返回false
    },{name:'zhangsan'}) //第二个参数可以是任意数据类型)
    console.log(result)

(2)mysome 如果有一项满足直接返回true,不再往后判断,直接返回true

Array.prototype.mySome=function(fun,obj){
    for(var i=0;i<this.length;i++){
        if((obj?fun.bind(obj)(this[i]):fun(this[i]))){
            return true
        }
    }
        return false
    };
    var arr=[1,2,3,4,5];
    var result=arr.mySome(function(item,index,arr){
        console.log(this) //有第二个参数,this指向第二个参数；这里this打印两次,首先没有执行条件前，打印了一次，后面数组项1不满足条件再打印一次，数组项2满足条件直接跳出判断不打印
        return item>1  //一项满足 直接返回true
    },{name:'zhangsan'}) //第二个参数可以是任意数据类型)

(3)myMap 映射对每一项数组项进行操作，返回的是操作后的一个新数组

Array.prototype.myMap = function (fun, obj) {
    var result = [];
    for (i = 0; i < this.length; i++) {
        //obj?test():test2()
        result.push(obj ? fun.bind(obj)(this[i]) : fun(this[i]))
    }
    return result
    }
    var arr = [1, 2, 3, 4, 5];
    var result = arr.myMap(function (item, index, arr) {
        console.log(this)//没有第二个参数this指向全局对象node 里面是global html文档中指向window  //有第二个参数this指向第二个参数
        return item + 1
    }, { name: 'zhangsan' })
    console.log(result)

(4)myFilter

Array.prototype.myFilter=function(fun,obj){
    var result=[];
    for(i=0;i<this.length;i++){
        if(obj?fun.bind(obj)(this[i]):fun(this[i])){
            result.push(this[i])
        }
    }
        return result
    }   

    var arr=[1,2,3,4,5];
    var result=arr.myFilter(function(item,index,arr){
        console.log(this)//global  //obj //打印五次
        return item>2 
    },{name:'zhangsan'})
    console.log(result)

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。