JS数组方法

参考链接: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

    }

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,258评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,335评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,225评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,126评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,140评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,098评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,018评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,857评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,298评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,518评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,400评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,993评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,638评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,661评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2 352