乐趣区

关于前端:深入理解JavaScript数组

jiezi

咱们在前文系列中，咱们以内置构造函数 Object 开始讲起，并从中衍生出各种知识点。而后咱们又讲另一个大构造函数 Function，同样引出了比肩 Object 的知识点。这两者之后，笔者认为 JavaScript 的大厦曾经建成，只是天边还有两朵小乌云，明天咱们就讲其中的一朵——数组

概要

数组是一组按序排列的值，创立数组的目标通常是遍历数字索引值，以零索引开始。

咱们须要理解的是，数组是依照数字顺序排列的汇合，绝对地，对象的属性名称是无序的。

从实质上讲，数组应用数字作为查找建，而对象领有用户自定义的属性名。

JavaScript 没有真正的关联数组，对象可用于实现关联数组的性能

如果咱们想理解数组中有什么办法和属性，有个很简略的办法——通过浏览器打印 Array

console.dir(Array);

除去 arguments、caller、Symbol、get Symbol 以及 [[Scopes]] 外，剩下的都是咱们十分相熟的数组领有的动态函数，能够看出，有 length、name 等动态属性，还有 from、isArray、of 等静态方法

咱们用 Class 来写一下 Array 的伪代码：

class MyArray {constructor() {
        this.name = name;
        this.length = arguments.length; // arguments 指参数中的类数组对象
        this.prototype = prototype;
    }
}
MyArray.from = function () {};
MyArray.isArray = function () {};
MyArray.of = function () {};

ps：这里提一句，用 Class 模仿类 (继承)，它的 constructor 函数其实也很好记，它就是用来做属性初始化的，它很非凡，写在 class 中，但不在 prototype 里

原型上的属性和办法

在上文曾经展现了 Array 的动态属性和办法，但咱们晓得，JavaScript 是以原型作为继承的语言，也就是说在「prototype」属性中，领有了咱们平时应用的数组办法

咱们开展 prototype 能看到

实例属性

  • index
  • length

实例办法

  • pop()：从数组中删除最初一个元素，并返回该原生的值。该办法更改数组的长度
  • push()：将一个或多个元素增加到数组的开端，并返回该数组的新长度

  • reverse()：将数组中原生的地位颠倒，并返回该数组。数组的第一个元素变成最初一个，数组的最初一个元素变成第一个。该办法会扭转原数组

    • 所以个别如果你要颠倒一个数组时，先深拷贝先
  • shift()：从数组中删除第一个元素，并返回该元素的值。此办法更改数组的长度

  • sort()：用原地算法对数组的元素进行排序，并返回数组。默认排序是在将元素转换为字符串，而后比拟他们的 UTF-16 代码单元制序列时构建

    • 因为它取决于具体实现，因而无奈保障排序的工夫和空间复杂性

  • splice()：办法通过删除或代替现有元素或者原地增加新的元素来批改数组，并以数组模式返回被批改的内容。此办法会扭转原数组

    • 第一个参数，指定批改的开始地位（从 0 计数）
  • unshift()：将一个或多个元素增加到数组的结尾，并返回该数组的新长度（该办法批改原数组）
  • concat()：办法用于合并或多个数组。此办法不会更改现有数组，而是返回一个新数
  • join()：办法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个我的项目，那么将返回该我的项目而不实用分隔符
  • slice()：办法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包含 begin，不包含 end）。原始数组不会被扭转
  • isArray()：用于确定传递的值是否是数组
  • from()：对一个相似数组或可迭代对象创立一个新的，浅拷贝的数组实例
  • forEach()：遍历数组中的每个元素
  • filter()：通过回调函数筛选元素
  • find()：返回数组中满足提供的测试函数的第一个元素的值

  • some()：测试数组中是不是至多有 1 个元素通过了被提供的函数测试

    • 它返回的是一个 Boolean 类型的值

  • reduce()：对数组中的每个元素按序执行一个由您提供的 reducer 函数

    • 每一次运行 reducer 会将先前元素的计算结果作为参数传入，最初将其后果汇总为单个返回值

哪些 API 是纯函数

哪些 API 会扭转原数组 

arr.splice();
arr.sort();
arr.reverse();
arr.fill();
arr.push();
arr.pop();
arr.shift();
arr.unshift();

哪些 API 不会扭转原数组

也就是纯函数 

arr.slice();
arr.concat();
arr.map();
arr.forEach();
arr.fliter();
arr.reduce();
arr.every();
arr.some();
arr.find();
arr.entries();

参考资料

  • 超级具体的 js 数组办法详解
  • MDN

系列文章

  • 深刻了解 JavaScript——开篇
  • 深刻了解 JavaScript——JavaScript 是什么
  • 深刻了解 JavaScript——JavaScript 由什么组成
  • 深刻了解 JavaScript——所有皆对象
  • 深刻了解 JavaScript——Object（对象）
  • 深刻了解 JavaScript——new 做了什么
  • 深刻了解 JavaScript——Object.create
  • 深刻了解 JavaScript——拷贝的机密
  • 深刻了解 JavaScript——原型
  • 深刻了解 JavaScript——继承
  • 深刻了解 JavaScript——JavaScript 中的始皇
  • 深刻了解 JavaScript——instanceof——找祖籍
  • 深刻了解 JavaScript——Function
  • 深刻了解 JavaScript——作用域
  • 深刻了解 JavaScript——this 关键字
  • 深刻了解 JavaScript——call、apply、bind 三大将
  • 深刻了解 JavaScript——立刻执行函数（IIFE）
  • 深刻了解 JavaScript——词法环境
  • 深刻了解 JavaScript——执行上下文与调用栈
  • 深刻了解 JavaScript——作用域 VS 执行上下文
  • 深刻了解 JavaScript——闭包
  • 深刻了解 JavaScript——防抖与节流
  • 深刻了解 JavaScript——函数式编程
  • 深刻了解 JavaScript——垃圾回收机制
退出移动版