Array

javascript Array

1. Properties

  • Array.length

     var arr = ["apple","juice "];
     arr.length; // 2
    
  • Array.prototype

    Array.prototype是Array的原型,你可以在上面添加新的方法,所有的Array实例都会继承新添加方法。

    if(!Array.prototype.first){
        Array.prototype.first = function(){
            return this[0];
        }
    }
    
    var arr = [1,2,3];
    arr.first = 1;
    

2. Methods

  • Array.from(arrayLike, mapFn?)

    Array.from()会从array-like or iterable object中创建一个新的数组实例。
    mapFn: 可选,可调用数组中每一个元素

    array-like: 类数组
    具有length和index的对象.

    iterable object: 可迭代对象
    可以循环获取对象里面值的对象,例如:Map和Set

    • 从字符串中获取数组

      Array.from("echo"); //["e","c","h","o"]

      拓展
      把字符串转成数组
      "echo".split("");

    • 从数组中拷贝数组

      var arr = [1,2,3];
      var fromArr = Array.from(arr);
      arr; //[1,2,3]
      fromArr; //[1,2,3]
      

      再看:

      var arr = [1,{a: 1}];
      var fromArr = Array.from(arr);
      fromArr[1].a = 2;
      arr; //[ 1, { a: 2 } ]
      fromArr; //[ 1, { a: 2 } ]
      

      发现了吗?

      Array.from()是从数组中浅拷贝一个数组出来。

      想了解更多深拷贝和浅拷贝的东东?请狠狠的戳这里👇

      前进吧,少年

    • 从Set中获取一个数组

    const set = new Set([1,2,2,3]);
    Array.from(set); //[1,2,3]
    

    Set数据结构介绍👇

    在这里

    • 从Map中获取一个数组
    var m = new Map([[1, 2], [2, 4], [4, 8]]);
    Array.from(m); // [[1, 2], [2, 4], [4, 8]]
    

    Map数据结构介绍👇

    here

    • 从类数组中获取一个数组
    function f() {
        return Array.from(arguments);
    } 
    f(1,2); //[1,2]
    

    拓展
    把类数组转成数组
    function f() {
    return [].slice.call(arguments);
    }
    f(1,2); //[1,2]

    • mapFn的应用
    Array.from([1,2,3], x => x * x); //[1,4,9]
    Array.from({length: 5}, (item, index) => index);
    //[0,1,2,3,4]
    
    
  • Array.isArray()

    Array.isArray() 用于确定传递的值是否是一个 Array。

    Array.isArray([1,2,3]);  //true
    Array.isArray({a: 1});   //false
    
  • Array.of()

    Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。

    Array.of(1,2,3); //[1,2,3]
    Array.of(undefined); //[undefined]
    Array.of({a: 2}); //[{a: 2}]
    

3. prototype

  • Array.prototype.concat()

    concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是浅复制一个新数组。

    连接两个数组

    var alpha = ['a', 'b', 'c'];
    var numeric = [1, 2, 3];
    alpha.concat(numeric);
    // result in ['a', 'b', 'c', 1, 2, 3]
    

    连接三个数组

    var num1 = [1, 2, 3],
    num2 = [4, 5, 6],
    num3 = [7, 8, 9];
    var nums = num1.concat(num2, num3);
    console.log(nums); 
    // results in [1, 2, 3, 4, 5, 6, 7, 8, 9]
    
  • Array.prototype.copyWithin(target, start, end)

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

    说明:

      1.把序列号为[start, end)的值拷贝到序列号为target的位置,而不改变原数组大小。
      2.start省略后默认为0,为负数时从尾部计算。
      3.end省略后为arrauy.length,为负数时从尾部计算。
    

    示例:

    [1, 2, 3, 4, 5].copyWithin(-2);
    // [1, 2, 3, 1, 2]
    
    [1, 2, 3, 4, 5].copyWithin(0, 3);
    // [4, 5, 3, 4, 5]
    
    [1, 2, 3, 4, 5].copyWithin(0, 3, 4);
    // [4, 2, 3, 4, 5]
    
    [1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
    // [1, 2, 3, 3, 4]
    
  • Array.prototype.every(fn)

    对一个数组里所有的值进行检测,全部通过返回true,否则返回false.

    说明:

      1.fn(element, index, every)
    

    示例:

    let arr = [12, 14, 5, 39];
    
    function testArr(item, index, array){
        return item > 10;
    }
    
    function testItem(item, index, array){
        return item > 3;
    }
    
    console.log( arr.every(testArr) ); //false
    console.log( arr.every(testItem) ); //true
    console.log( arr.every(x => x > 1) ); //true
    
  • Array.prototype.fill(value, strat? end?)

    说明:

      1.start可选,默认值为0.如果为负数,则从尾部开始。
      2.end可选,默认值为Array.length,则从尾部开始。
    

    示例:

    [1, 2, 3].fill(4);               // [4, 4, 4]
    [1, 2, 3].fill(4, 1);            // [1, 4, 4]
    [1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
    [1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
    [1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
    [1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
    Array(3).fill(4);                // [4, 4, 4]
    [].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}
    
  • Array.prototype.filter()

    入口:

      callback(item, index, array, thisArg?)
      
      item: 当前元素
      index: 当前元素的序列号
      array: 当前作用的数组
      thisArg: 回掉函数中的this指向,如果未设置,则指向undefined
    

    出口:

      返回一个包含匹配元素的数组
    

    示例:

    const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
    const filterItems = (query) => {
      return fruits.filter((el) =>
        el.toLowerCase().indexOf(query.toLowerCase()) > -1
      );
    }
    console.log(filterItems('ap')); // ['apple', 'grapes']
    console.log(filterItems('an')); // ['banana', 'mango', 'orange']
    
  • Array.prototype.find()

    入口:

      callback(item, index, array, thisArg?)
      
      item: 当前元素
      index: 当前元素的序列号
      array: 当前作用的数组
      thisArg: 回掉函数中的this指向,如果未设置,则指向undefined
    

    出口:

      放回第一个匹配到的元素,如果不存在,返回undefined.
    

    示例:

    var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
        {name: 'cherries', quantity: 5}
    ];
    
    function findCherries(fruit) { 
        return fruit.name === 'cherries';
    }
    
    console.log(inventory.find(findCherries)); 
    // { name: 'cherries', quantity: 5 }
    
  • Array.prototype.findIndex()

    入口:

      callback(item, index, array, thisArg?)
      
      item: 当前元素
      index: 当前元素的序列号
      array: 当前作用的数组
      thisArg: 回掉函数中的this指向,如果未设置,则指向undefined
    

    出口:

      放回第一个匹配到的元素的序列号,如果不存在,返回undefined.
    

    示例:

    function isBigEnough(element) {
      return element >= 15;
    }
    
    [12, 5, 8, 130, 44].findIndex(isBigEnough); 
    // index of 4th element in the Array is returned,
    // so this will result in '3'
    
  • Array.prototype.forEach()

    入口:

      callback(item, index, array, thisArg?)
      
      item: 当前元素
      index: 当前元素的序列号
      array: 当前作用的数组
      thisArg: 回掉函数中的this指向,如果未设置,则指向undefined
    

    操作:

      对数组中每一个元素执行一次函数操作。
    

    示例:

    const arr = ['a', 'b', 'c'];
    
    arr.forEach(function(element) {
        console.log(element);
    });
    
    // a
    // b
    // c
    
  • Array.prototype.includes(searchItem, startIndex?)

    入口:

      searchItem: 需要搜索的目标元素
      startIndex: 开始的位置
    

    出口:

      如果搜索到有目标元素,返回true,否则,返回false.
    

    示例:

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

推荐阅读更多精彩内容