详解JavaScript数组特性与实践应用

这篇文章主要介绍了JavaScript数组特性与实践应用,较为深刻而详细的分析了javascript数组的功能、属性、使用方法及操做注意事项,写的十分的全面细致，具备必定的参考价值，对此有须要的朋友能够参考学习下。若有不足之处，欢迎批评指正。

JavaScript 提供了一种相似数组特性的对象，它把数组的下标变为字符串，做为对象的属性。虽然它比一个真正的数组来的慢，可是使用起来很方便。

1 数组字面量

数组字面量是在一对方括号中包围零个或多个用逗号分隔的值的表达式：

var empty = [];
var numbers = [
  'zero', 'one', 'two', 'three'
];
console.log(empty[1]);//undefined
console.log(numbers[1]);//one
console.log(empty.length);//0
console.log(numbers.length);//4
复制代码

数组对象继承自 Array.prototype，因此 numbers 继承了大量有用的方法。 JavaScript 容许数组包含任意混合类型的值：

var misc = [
  'string', 11.3, false, true, null, undefined, ['nested', 'array'], {object: true}, NaN, Infinity
];
console.log(misc.length);//10
复制代码

2 长度

数组有一个 length 属性，但它是没有上界的。若是用大等于当前 length 的数字做为下标来存储元素，那么 length 属性值会被增大以便容纳新的元素，而不会发生数组越界现象哦O(∩_∩)O~ length 属性的值很诡异，它是数组最大整数属性名加 1，即它不必定等于数组的元素个数：

var myArray = [];
console.log(myArray.length);//0
//myArray 只包含一个属性，但 length 的值等于这个数组最大整数的属性名加 1
myArray[100000] = true;
console.log(myArray.length);//100001
//在此我向你们推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提高思惟能力
复制代码

[] 后置运算符会把它包含的表达式转换为字符串，若是表达式有 toString() 方法，那么就会调用它。这个字符串被当作属性名，若是这个字符串是一个大等于当前 length 值并且小于 4294967295 的正整数，那么这个数组的 length 就会被重置为新的下标加 1。 能够直接设置 length 的值。设置更大的 length 值不会为数组分配更多的空间；而把 length 设小则会致使全部下标大等于新的 length 的属性被删除：

//删除元素
numbers.length = 3;
console.log(numbers);//[ "zero", "one", "two" ]
复制代码

把下标指定为数组的当前 length，就能够把一个新元素附加到数组的尾部：

//新增元素
numbers[numbers.length] = 'four';
console.log(numbers);//[ "zero", "one", "two", "four" ]
复制代码

使用 push() 能够更方便地实现一样的功能：

//新增元素（push）
numbers.push('good');
console.log(numbers);//[ "zero", "one", "two", "four", "good" ]
//在此我向你们推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提高思惟能力
复制代码

3 删除

JavaScript 数组就是对象，因此能够用 delete 移除元素：

delete numbers[2];
console.log(numbers);//[ "zero", "one", <1 个空的存储位置>, "four", "good" ]
复制代码

惋惜的是，这会在数组中留下一个空洞！而咱们但愿的是：删除后，被删除元素的后续元素会自动地往前移动。 JavaScript 数组提供了 splice() 方法，它接受下列参数： ①. 数组的索引。 ②. 要删除的元素个数。 ③. 其余参数（多个）- 把这些参数依次插入到索引位置。

//第一个参数是索引号，第二个参数是要删除的元素个数
numbers.splice(2, 1);
console.log(numbers);// [ "zero", "one", "four", "good" ]
复制代码

4 枚举

JavaScript 数组是对象，因此能够用 for in 语句来遍历数组的全部属性。但是 for in 语句没法保证属性的顺序，并且可能从原型链中获得意外的属性。 可使用 for 来避免上述的问题：

var i,
  myArray = numbers;
for (i = 0; i < myArray.length; i += 1) {
  console.log(myArray[i]);
}
复制代码

5 数组与对象

如何在这二者进行选择？当属性名是小而连续的整数时，使用数组；不然使用对象。 JavaScript 的 typeof 会认为数组是 object，这没有意义！ 咱们能够定义一个函数来检测数组：

var is_array = function (value) {
  return value && typeof value === 'object' &&
    value.constructor === Array;
};//在此我向你们推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提高思惟能力
复制代码

这个方法在不一样窗口(window)或框架(frame) 里构造的数组会失败。因此请用下面的这个更好的方法：

var is_array = function (value) {
  return Object.prototype.toString.apply(value) === '[object Array]';
};
console.log(is_array(myArray));//true
复制代码

6 方法

JavaScript 提供了一些对于数组可用的方法，它们被存储在 Array.prototype 中。咱们能够为数组增长一个对数组进行计算的方法：

//新增能够对数组中的元素进行计算的方法
Array.method('reduce', function (f, value) {
  var i;
  for (i = 0; i < this.length; i += 1) {
    value = f(this[i], value);
  }
  return value;
});
复制代码

这样全部的数组都继承了这个方法。它接受一个函数与初始值为参数。而后遍历数组，并经过函数计算出新值，最后返回这个值。

//建立数字数组
var data = [9, 16, 32, 192, 8];
//定义加法与乘法函数
var add = function (a, b) {
  return a + b;
};
var mult = function (a, b) {
  return a * b;
};
console.log(data.reduce(add, 0));//257
console.log(data.reduce(mult, 1));//7077888
复制代码

由于数组就是对象，因此也能够直接给数组添加方法：

data.total = function () {
  return this.reduce(add, 0);
};
console.log(data.total());//257
复制代码

由于字符串 “total” 不是整数，因此不会改变数组的 length 值。当属性名是字符串时，它就会成为数组的属性。

7 指定初始值

若是使用 [] 获得的新数组，它将是空的。这是若是访问它，将会获得 undefined。咱们能够实现一个能够初始化数组元素值的方法：

//为每个元素指定初始值
Array.dim = function (dimension, initial) {
  var a = [], i;
  for (i = 0; i < dimension; i += 1) {
    a[i] = initial;
  }
  return a;
};
//建立包含 10 个 0 的数组
var myArray = Array.dim(10, 0);
console.log(myArray);//[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]
复制代码

JavaScript 数组的元素能够是数组，经过这种方式来实现多维数组功能：

//数组的数组
var matrix = [
  [0, 1, 2], [3, 4, 5]
];
console.log(matrix[1][0]);//3
复制代码

能够扩展 Array 方法，让它能够初始化矩阵：

/**
 *
 * @param m 第一维个数
 * @param n 第二维个数
 * @param initial 初始值
 *///在此我向你们推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提高思惟能力
Array.matrix = function (m, n, initial) {
  var a, i, j, mat = [];
  for (i = 0; i < m; i += 1) {
    a = [];
    for (j = 0; j < n; j += 1) {
      a[j] = initial;
    }
    mat[i] = a;
  }
  return mat;
};
//构造 0 填充的 4*4 矩阵
console.log(Array.matrix(4, 4, 0));
//构造单元矩阵
Array.identity = function (n) {
  var i, mat = Array.matrix(n, n, 0);
  for (i = 0; i < n; i += 1) {
    mat[i][i] = 1;
  }
  return mat;
};
var myMatrix = Array.identity(4);
console.log(myMatrix);
console.log(myMatrix[3][3]);//1
复制代码

结语

感谢您的观看，若有不足之处，欢迎批评指正。 获取资料👈👈👈 本次给你们推荐一个免费的学习群，里面归纳移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同窗，欢迎加入Q群：👉👉👉619586920👈👈👈，无论你是小白仍是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时天天更新视频资料。 最后，祝你们早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。