JS数组方法

2020-06-29  本文已影响0人  子墨子沐

参考链接:https://www.cnblogs.com/obel/p/7016414.html

JS中创建数组的方法:

方法一:使用Array构造函数

var arr1 = new Array();  //创建一个空数组

var arr2 = new Array(20); //创建一个包含20项的数组

var arr3 = new Array("lily", "tom", "pop"); //创建包含3个字符串的数组

方法二:使用数组字面量表示

var arr4 = []; //创建一个空数组

var arr5 = [20]; //创建一个包含1项的数组

var arr6 = ["lily","tom","pop"]; //创建包含3个字符串的数组

数组的原方法都是基于 Array.prototype

改变数组的方法:push pop unshift shift reverse(倒序) splice(开始的索引,长度,插入的值) sort(排序)

var  a = [3,6,9,12,15]

a.push(18)    //返回长度6

a.pop()          //返回删除的那一项数据 18

a.unshift(21)  //返回长度6

a.shift()          //返回删除的那一项数据 21

a.reverse()    //返回翻转后的数组 [15,12,9,6,3]

a.sort()          //返回比较后的数组  如果都是数据需要借助 a-b 从小到大  b-a 从大到小

a = [3,6,9,12,15]

a.splice(1,1)  //返回删除的那一项 [6]  a 变成 [3,9,12,15]

a.splice(1,0,7)  //返回空数组 []  a变成[3,7,9,12,15]

a.splice(1)        //返回删除从当前索引到最后的项  [7,9,12,15]    a变成[3]

不改变数组的方法:toString slice(开始索引,结束索引) join  concat(两个数组链接)  indexOf(从左到右第一次符合条件的索引)  lastIndexOf(从右到左第一次符合条件的索引) 

得有对象接收

var a = ['a','b','c','e']

var b = a.toString()       

console.log(b)//返回 'a,b,c,d'

b = a.slice(1)

console.log(b) //返回 ['b','c','d']   

b = a.slice(1,2)

console.log(b) //返回['b']       

b = a.join()

console.log(b) // 'a,b,c,d'

b = a.join('-')

console.log(b) // 'a-b-c-d'

扩展方法:every some forEach map filter(浅拷贝,去重) reduce(第一个往最后一个) reduceRight(最后一个往第一个)

every每一项都满足条件才能返回true,否则返回false

    var  = this.productBox.every(function(el){

        return el.price > 40

    })

    console.log(res)  //每一项都大于40才能返回true

some 有一项满足条件就返回true,否则返回false

    var  = this.productBox.some(function(el){

        return el.price > 40

    })

    console.log(res)  //有一项都大于40才能返回true

forEach 查询每一项,也可以修改数组

    this.productBox.forEach(function(item){

         if(item.price > 20){

            item.price = item.price - 10

        }

    })

    console.log(JSON.stringify(this.productBox))

map

    1、map() 方法返回一个新数组,新数组中的元素为原始数组中的每个元素调用函数处理后得到的值。

    2、map() 方法按照原始数组元素顺序依次处理元素。

        注意: map() 不会对空数组进行检测。

        注意: map() 不会改变原始数组。

        注意:函数的作用是对数组中的每一个元素进行处理,返回新的元素。

    3、语法

        map是数组的方法,有一个参数,参数是一个函数,函数中有3个参数

            参数1:item必须。当前元素的值

            参数2:index,可选。当前元素在数组中的索引值

            参数3:arr可选。当前元素属于的数组对象

       array.map(function(item,index,arr){})

       var arr = [2,3,4,5]

       var newarr = arr.map(function(item,index,array){

          item = item * 2

           return item

        })

        console.log(newarr)  //[4,6,8,10]

filter  可以浅拷贝,也可以数组去重

    var list = [1,2,3,2,4,3,4]

    var res = list.filter(function(item,index,array){

      return array.indexOf(item) === index

    })

    console.log(res)  // [1,2,3,4]

reduce 累加  从左向右

    var arr = [1,2,3,4]

    var sum = arr.reduce(function(pre,cur,index,array){

        console.log(pre,cur,index)

        return pre + cur

    })

    console.log(arr,sum)

    //1 2 1

    // 3 3 2

    // 6 4 3

    //[1, 2, 3, 4] 10

reduceRight 累加  从右向左

    var arr = [1,2,3,4]

    var sum = arr.reduceRight(function(pre,cur,index,array){

        console.log(pre,cur,index)

        return pre + cur

    })

    console.log(arr,sum)

    //4 3 2

    // 7 2 1

    // 9 1 0

    //[1, 2, 3, 4] 10

js中赋值主要有两种赋值形式,一种是值引用,另一种是址引用(地址)。

一般对象赋值的时候,都是地址引用,所以在修改新对象的时候,其实修改了在内存区地址上的值。

为了达到值引用的效果,所以有 深度克隆的概念。 

使用 call() 方法,改变this指向。参考链接:https://www.jianshu.com/p/aa2eeecd8b4f

深度克隆的代码

var arr = [{a:1},{a:2},{a:3}]

var newarr = cloneSun(arr)

function cloneSun(obj, target) {

        var sunObj2 = target || {}; //继承传来的目标对象

        var toStr = Object.prototype.toString;

        for (var prop in obj) {

            if (obj.hasOwnProperty(prop)) {

                if (typeof obj[prop] !== 'object' && obj[prop] !== 'null') {

                    sunObj2[prop] = obj[prop];

                } else {

                    sunObj2[prop] = toStr.call(obj[prop]) === '[object Object]' ? {} : [];

                    cloneSun(obj[prop], sunObj2[prop]);

                }

            }

        }

        return sunObj2

    }

上一篇下一篇

猜你喜欢

热点阅读