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 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
Jan 11 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 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
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
详解Vue webapp项目通过HBulider打包原生APP
2018/06/29 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
python实现爬虫下载美女图片
2015/07/14 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
python3实现高效的端口扫描
2019/08/31 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
深入理解Python 多线程
2020/06/16 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
如何获取某个日期是当月的最后一天
2013/12/05 面试题
车间工艺员岗位职责
2013/12/09 职场文书
社区包粽子活动方案
2014/01/21 职场文书
文秘大学生求职信
2014/02/25 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
Go 内联优化让程序员爱不释手
2022/06/21 Golang