利用了两天的时间,使用typescript和原生js重构了一下JavaScript中数组对象的主要方法,可以移步github查看。

这里,按照MDN上的文档顺序,再重新学习一下数组方法吧。

  • concat: concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
    给出的示例是:

    var array1 = ['a', 'b', 'c'];
    var array2 = ['d', 'e', 'f']; console.log(array1.concat(array2));

      期望输出:["a", "b", "c", "d", "e", "f"]。这也符合我们正常的使用方式。那么还有没有特殊的地方呢?
    1、由于concat()方法返回一个新数组,那么如果不传参数,会怎样呢?

    var array1 = ['a', 'b', 'c'];
    var arr3 = array1.concat()
    console.log(array1==arr3); // false

      很明显,可以实现数组的浅拷贝。
    2、如果参数不是数组呢?

    var array1 = ['a', 'b', 'c'];
    var arr3 = array1.concat("3", true, null, undefined, {key: "value"})
    console.log(arr3);

      输出结果:

    把所有参数都当做数组元素拼接到array1后面,并返回一个新的数组实例。
    想到了什么?这种情况是不是与push方法很像。区别在于push是修改原数组,concat是返回新数组。
    到这里,我们是不是可以尝试重构一下concat的方法呢?

    function concat() {
    if (!(arguments[0] instanceof Array)) throw new Error("请确保第一个参数类型为数组")
    var results = []
    for (var i = 0; i < arguments.length; i++) {
    if (!(arguments[i] instanceof Array)) {
    results[results.length] = arguments[i]
    break;
    }
    for (var j = 0; j < arguments[i].length; j++) {
    results[results.length] = arguments[i][j]
    }
    }
    return results
    }

      稍作解释的是,没有在数组原型上重构各种方法,仅仅是封装为一个个的函数,所以函数的第一个参数,都要求是需要操作的数组。

  • push:push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
    按照顺序而言,这里不应该是push的,但是既然在谈concat的时候,提到push了,那么就先来push吧!
    惯例,先看MDN给出的示例:

    var animals = ['pigs', 'goats', 'sheep'];
    
    console.log(animals.push('cows'));
    // expected output: 4 console.log(animals);
    // expected output: Array ["pigs", "goats", "sheep", "cows"] animals.push('chickens'); console.log(animals);
    // expected output: Array ["pigs", "goats", "sheep", "cows", "chickens"]

     看结果:

    很容易理解,push修改的是原数组,并返回修改后的数组长度。
    同理,我们分别测试:
    1、不传参数

    var animals = ['pigs', 'goats', 'sheep'];
    var b = animals.push()
    console.log(b );  

    输出值为3,那么3是哪里来的呢?很明显就是animals.length,突然美滋滋的,下次再获取数组长度,是不是可以装X一下!!!
    2、传递多个不同类型的参数

    var animals = [];
    animals.push(['dogs', []],"3", true, null, undefined, {key: "value"})
    console.log(animals);

      查看结果:

    就是说不管什么类型的参数,一个参数都将作为一个元素,插入到原数组当中。
    那就重构一下push吧!第一个参数也是需要操作的数组!

    function push(arr) {
    if (!(arr instanceof Array)) throw new Error("请确保参数类型为数组")
    for (var i = 1; i < arguments.length; i++) {
    arr[arr.length] = arguments[i]
    }
    return arr.length
    }

     
    剩余的方法,期待后续了!

JavaScript数组方法--concat、push的更多相关文章

  1. JavaScript数组方法--every、some、fill

    接上一篇,JavaScript数组方法--concat.push,继续其他的数组方法. every:every() 方法测试数组的所有元素是否都通过了指定函数的测试. 先看其使用方法: functio ...

  2. 【译】你应该了解的JavaScript数组方法

    让我们来做一个大胆的声明:for循环通常是无用的,而且还导致代码难以理解.当涉及迭代数组.查找元素.或对其排序或者你想到的任何东西,都可能有一个你可以使用的数组方法. 然而,尽管这些方法很有用,但是其 ...

  3. JavaScript数组方法大全(推荐)

    原网址:http://www.jb51.net/article/87930.htm 数组在笔试中经常会出现的面试题,javascript中的数组与其他语言中的数组有些不同,为了方便之后数组的方法学习, ...

  4. JavaScript数组方法详解

    JavaScript数组方法详解 JavaScript中数组的方法种类众多,在ES3-ES7不同版本时期都有新方法:并且数组的方法还有原型方法和从object继承的方法,这里我们只介绍数组在每个版本中 ...

  5. JavaScript数组方法大集合

    JavaScript数组方法集合 本文总结一下js数组处理用到的所有的方法.自己做个笔记. 数组方法 concat() 合并两个或多个数组 concat()能合并两个或者多个数组,不会更改当前数组,而 ...

  6. 一站式超全JavaScript数组方法大全

    一站式JavaScript数组方法大全(建议收藏) 方法一览表 详细操作 本人总结了JavaScript中有关数组的几乎所有方法(包含ES6之后新增的),并逐一用代码进行演示使用,希望可以帮助大家! ...

  7. 2018.2.27 JavaScript数组方法应用

    JavaScript数组方法应用 1.找出元素item在给定数组arr中的位置 function indexOf(arr,item){ return arr.indexOf(item); } func ...

  8. JavaScript 数组方法处理字符串 prototype

    js中数组有许多方法,如join.map,reverse.字符串没有这些方法,可以“借用”数组的方法来处理字符串. <!doctype html> <html lang=" ...

  9. JavaScript数组方法速查,32个数组的常用方法和属性

    JavaScript数组方法速查手册极简版 http://30ke.cn/doc/js-array-method JavaScript数组方法速查手册极简版中共收了32个数组的常用方法和属性,并根据方 ...

随机推荐

  1. 蓝桥每周一题之1. 3n+1 问题

    [问题描述] 考虑如下的序列生成算法:从整数 n 开始,如果 n 是偶数,把它除以 2:如果 n 是奇数,把它乘 3 加1.用新得到的值重复上述步骤,直到 n = 1 时停止.例如,n = 22 时该 ...

  2. 小程序获取图片base64编码

    项目中遇到了这个问题,在搜索过程中看到别人的博文,大多是下面这种方法,大致如下: let imgObj = { count: 1, success: (res) => { let tempFil ...

  3. 浅谈兔兔对Object.defineProperty的理解

    给一个对象定义一个新的属性或者在修改一个对象现有的属性,并返回这个对象 语法: Object.defineProperty(参数1,参数2,参数3) 参数1:目标对象 参数2:要修改或者添加的属性名称 ...

  4. P5315 头像上传

    --------------------------------------- 模拟中的模拟 --------------------------------------- FOR---MIKU -- ...

  5. 使用CNN生成图像先验,实现更广泛场景的盲图像去模糊

    现有的最优方法在文本.人脸以及低光照图像上的盲图像去模糊效果并不佳,主要受限于图像先验的手工设计属性.本文研究者将图像先验表示为二值分类器,训练 CNN 来分类模糊和清晰图像.实验表明,该图像先验比目 ...

  6. UCenter通信原理

    https://www.jb51.net/article/59666.htm 1.用户登录discuz,通过logging.php文件中的函数uc_user_login对post过来的数据进行验证,也 ...

  7. C# 如何保证对象线程内唯一:数据槽(CallContext)【转载】

    如果说,一个对象保证全局唯一,大家肯定会想到一个经典的设计模式:单例模式,如果要使用的对象必须是线程内唯一的呢? 数据槽:CallContext,ok看下msdn对callcontent的解释. Ca ...

  8. 2018-2019-2 网络对抗技术 20165308 Exp1 PC平台逆向破解

    2018-2019-2 网络对抗技术 20165308 Exp1 PC平台逆向破解 NOP, JNE, JE, JMP, CMP汇编指令的机器码 NOP汇编指令:执行到NOP指令时,CPU仅仅当做一个 ...

  9. 通过type类型 新建对象

    Activator根System命名空间中的类非常强大. 将参数传递给构造函数等有很多重载.查看以下文档: http://msdn.microsoft.com/en-us/library/system ...

  10. docker容器以ROOT账号登录(获取ROOT权限/ROOT密码)

    第一步:查看容器的CONTAINER ID docker ps 第二步:获取root权限,例如需要进入的CONTAINER ID为4650e8d1bcca docker exec -ti -u roo ...