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


Posted in Javascript onDecember 30, 2018

本文实例讲述了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

[] 后置运算符会把它包含的表达式转换为字符串,如果表达式有 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" ]

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;
};

这个方法在不同窗口(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 初始值
 */
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

感兴趣的朋友还可以使用本站在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行结果。

更多关于JavaScript相关内容还可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
Prototype源码浅析 String部分(二)
Jan 16 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 #Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 #Javascript
微信小程序提交form操作示例
Dec 30 #Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 #Javascript
详解vue 兼容IE报错解决方案
Dec 29 #Javascript
玩转Koa之koa-router原理解析
Dec 29 #Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 #Javascript
You might like
mysql中存储过程、函数的一些问题
2007/02/14 PHP
PHP的5个安全措施小结
2012/07/17 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
JsDom 编程小结
2011/08/09 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
python机器学习之神经网络(二)
2017/12/20 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
Python中请不要再用re.compile了
2019/06/30 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
房屋继承公证书
2014/04/10 职场文书
访谈节目策划方案
2014/05/15 职场文书
委托书怎样写
2014/08/30 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
nginx容器方式反向代理实战
2022/04/18 Servers