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 相关文章推荐
JavaScript版代码高亮
Jun 26 Javascript
在JavaScript中通过URL传递汉字的方法
Apr 09 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
vue开发简单上传图片功能
Jun 30 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
phpinfo 系统查看参数函数代码
2009/06/05 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
子页向父页传值示例
2013/11/27 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
如何使用repr调试python程序
2020/02/28 Python
室内设计专业学生的自我评价分享
2013/11/27 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
党员大会主持词
2014/04/02 职场文书
任命书范本大全
2014/06/06 职场文书
党员批评与自我批评
2014/10/15 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL