Array 深入浅出

array 构造器

ES6 && API >>> WEBPACK && GULP >> REACT || VUE
Ctrl+B //打开项目下文件
Ctrl+N //新建文件untitled
Ctrl+M //跳转到语句顶部(底部)
Ctrl+D //选中光标前(中)语句
Ctrl+G //跳转到指定行号位置
Ctrl+J //上下行合并(删除中间enter,spase)
Ctrl+L //选中光标所在行
Ctrl+W //关闭当前文件
Ctrl+R //跳转到函数位置,css,html
Ctrl+\ //关闭侧边栏
Ctrl+[ ] //前后移一字符
Ctrl+< //设置
通常使用字面量去声明 以下例外 array更为简洁
const b  = Array(8);//[undefined × 8]
const a = [];
a.length = 8; //[undefined × 8]
//Array(8)更为简洁
未使用new 浏览器会做如下操作
function Array(){
  // 如果this不是Array的实例,那就重新new一个实例
  if(!(this instanceof arguments.callee)){
    return new arguments.callee();
  }
}
Array构造器根据参数长度的不同,做以下处理。
  • new Array(arg1, arg2,…),参数长度为0或长度大于等于2时,传入的参数将按照顺序依次成为新数组的第0至N项(参数长度为0时,返回空数组)。
  • new Array(len),当len不是数值时,处理同上,返回一个只包含len元素一项的数组;当len为数值时,根据如下规范,len最大不能超过32位无符号整型,即需要小于2的32次方(len最大为Math.pow(2,32) -1-1>>>0),否则将抛出RangeError
  • Array.of()
    • Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。
    Array.of(element0[, element1[, ...[, elementN]]]);
    Array.of(7);//[7]
    Array(7);//[undefined x 7]
    
  • Array.from()
    • 只要一个对象有迭代器,Array.from就能把它变成一个数组(当然,是返回新的数组,不改变原对象)。以下均可转换。
      • 类数组对象 {0:'name',1:'sex',length:2}
      • 可遍历对象。map set
    Array.from(arrayLike[, mapFn[, thisArg]]);
    arrayLike
    想要转换成真实数组的类数组对象或可遍历对象。
    mapFn 可选
    可选参数,如果指定了该参数,则最后生成的数组会经过该函数的加工处理后再返回。
    thisArg 可选
    可选参数,执行 mapFn 函数时 this 的值。
    
    Array.from('abc');//["a", "b", "c"]
    
  • Array.isArray()
    Array.isArray([]);//true
    Object.getPrototypeOf(array) === Array.prototype
    
  • 数组推导 (浏览器支持率过低 暂不赘述);

      Object.getOwnPropertyNames(Array.prototype); //获取array  prototype 上的方法
    

改变自身值的方法(9个)

  • pop

    pop() 方法删除一个数组中的最后的一个元素,并且返回这个元素。如果是栈的话,这个过程就是栈顶弹出。

    可操作类对象数组,如果类对象数组不具有长度属性,返回undefind,并追加长度为0

    栈是一种先进后出的结构,新添加的或待删除的元素都保存在栈的末尾,称作栈顶,另一端叫做栈底。

    var arr = [1,2,3,4];
    arr.pop();//[1,2,3]
    
  • push

    push()方法添加一个或者多个元素到数组末尾,并且返回数组新的长度。如果是栈的话,这个过程就是栈顶压入。

    var arr = [];
    arr.push(1,2,3); [1,2,3]
    var arr2 = [4,5];
    var l = Array.prototype.push.apply(arr,arr2);// 5
    arr;// [1,2,3,4,5]
    
  • reverse

    reverse()方法颠倒数组中元素的位置,第一个会成为最后一个,最后一个会成为第一个,该方法返回对数组的引用。

    语法:arr.reverse()

    var arr = [1,2,3];
    var arr2 = arr.reverse();
    arr;//[3,2,1]
    

    可操作类对象数组。

  • shift

    shift()方法删除数组的第一个元素,并返回这个元素。如果是栈的话,这个过程就是栈底弹出。

    语法:arr.shift()

    var arr = [1,2,3];
    var itmes = arr.shift();
    arr;//[2,3]
    itme;// 1
    

    可操作类对象数组。

  • sort

    sort()方法对数组元素进行排序,并返回这个数组。

    语法:arr.sort([comparefn])

    //无comparefn,转换为unicode 进行排序
    var arr = [1,2,3,10,5];
    arr.sort(); // [1, 10, 2, 3, 5]
    //
    
  • 如果指明了comparefn,数组将按照调用该函数的返回值来排序。若 a 和 b 是两个将要比较的元素:

    • 若 comparefn(a, b) < 0,那么a 将排到 b 前面;
    • 若 comparefn(a, b) = 0,那么a 和 b 相对位置不变;
    • 若 comparefn(a, b) > 0,那么a , b 将调换位置;
    var arr = [1,3,55,6,100,10,23];
    arr.sort((a,b) => a-b); //[1, 3, 6, 10, 23, 55, 100]
    
    var arr = ['shift','push','revarse','pop','sort'];
    arr.sort((a,b)=>a.localeCompare(b));//["pop", "push", "revarse", "shift", "sort"]
    //localeCompare
    //返回一个数字表示是否 引用字符串 在排序中位于 比较字符串 的前面,后面,或者二者相同。
    //  当 引用字符串 在 比较字符串 前面时返回 -1
    //  当 引用字符串 在 比较字符串 后面时返回 1
    //  相同位置时返回 0
    
  • splice

    splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。

    语法

    array.splice(start)
    array.splice(start, deleteCount)
    array.splice(start, deleteCount, item1, item2, ...)
    
    • array.splice(start)
        var arr = [1,2,3,4,5];
        arr.splice(0);//[1,2,3,4,5]
        arr; //[]
      
        var arr = [1,2,3,4,5];
        arr.splice(3);//[4,5]
        arr; //[1,2,3]
      
        var arr = [1,2,3,4,5];
        arr.splice(6);//[]
        arr;//[1,2,3,4,5]
      
        var arr = [1,2,3,4,5];
        arr.splice(-1); //[5]
        arr;//[1, 2, 3, 4]
      
        //start
        //指定修改的开始位置(从0计数)。(1)(2)
        //如果超出了数组的长度,则从数组末尾开始添加内容。(3)
        //如果是负值,则表示从数组末位开始的第几位(从1计数)。(4)
      
    • array.splice(start, deleteCount)
      var arr = [1,2,3,4,5];
      arr.splice(0,3);//[1,2,3]
      arr; //[4,5]
      
      var arr = [1,2,3,4,5];
      arr.splice(0,0);//[]
      arr;//[1,2,3,4,5]
      
      var arr = [1,2,3,4,5];
      arr.splice(0,10); //[1,2,3,4,5]
      arr;//[]
      //deleteCount
      //整数,表示要移除的数组元素的个数。(1)
      //如果 deleteCount 是 0,则不移除元素。这种情况下,至少应添加一个新元素。(2)
      //如果 deleteCount 大于start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。(3)
      
    • array.splice(start, deleteCount, item1, item2, ...)
      var arr = [1,2,3,4,5];
      arr.splice(0,3,'splice');//[1,2,3]
      arr;//['splice',4,5]
      
      var arr = [1,2,3,4,5];
      arr.splice(-1,2,'hi','children');
      arr;//[[1,2,3,'hi','children']
      //item1, item2, ...
      //要添加进数组的元素,从start 位置开始。
      //如果不指定,则 splice() 将只删除数组元素。
      
  • unshift

    将一个或多个元素添加到数组的开头,并返回新数组的长度

    栈底插入

    语法arr.unshift(element1, ..., elementN)

    var arr = [1,2];
    arr.unshift(-1,0);
    arr;//[-1,0,1,2]
    
    arr.unshift([-3,-2]);
    arr;//[[-3,-2],-1,0,1,2];
    
    Array.prototype.unshift.apply(arr,[-4]);
    arr;// [-4,[-3,-2],-1,0,1]
    
  • copyWithin(ES6)

    copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,而不修改其大小。

    语法:arr.copyWithin(target, start=0[, end = this.length])

    • taget 指定被替换元素的索引
    • start 指定替换元素起始的索引
    • end 可选,指的是替换元素结束位置的索引。
    [1,2,3,4,5,6].copyWithin(-2);//[1,2,3,4,1,2]
    //无start默认为0,end为arr.length
    [1,2,3,4,5,6].copyWithin(0,3);//[4,5,6,4,5,6]
    [1,2,3,4,5,6].copyWithin(0,2,3);//[3,2,3,4,5,6]
    [1,2,3,4,5,6].copyWithin(-2,-3,-1);// [1, 2, 3, 4, 4, 5]
    

    可用于类数组对象

  • fill(ES6)

    fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。

    语法

    arr.fill(value)
    arr.fill(value, start)
    arr.fill(value, start, end)
    

    可用于类数组对象

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

不会改变自身的方法(9个)

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

推荐阅读更多精彩内容