《javascript高级程序设计》笔记_数组稀疏数组伪数组

pepperwang 发布于2019-08-21 11:56 / 2952人阅读

摘要：数组是数据的有序列表，与其他语言不同的是，数组的每一项可以保存任何类型的数据。如下的代码创建的就是一个密集数组稀疏数组与密集数组相反，并不强制要求数组元素是紧密相连的，即允许间隙的存在。

数组是数据的有序列表，与其他语言不同的是，ECMAScript 数组的每一项可以保存任何类型的数据。也就是说，可以用数组的第一个位置来保存字符串，用第二位置来保存数值，用第三个位置来保存对象，以此类推

牢记：

JavaScript中的数组并不像我们在C或java等语言中遇到的常规数组，在js中数组并不是起始地址+长度构成的一片连续的地址空间。

javascript中数组其实就是个对象,只不过会自动管理一些"数字"属性和length属性罢了。

说的更直接一点,JavaScript中的数组根本没有索引,因为索引应该是数字,而JavaScript中数组的索引其实是字符串

创建数组

构造函数方式

1.无参构造函数，创建一空数组

var colors = new Array();

2.创建指定长度的数组，一个数字参数构造函数，指定数组长度（由于数组长度可以动态调整，作用并不大）

var colors = new Array(5);

3.带有初始化数据的构造函数，创建数组并初始化参数数据

var colors = new Array("red", "blue", "green");

使用Array构造函数是可以省略new操作符，如下：

var colors = Array(3); // 创建一个包含 3 项的数组
var names = Array("Greg"); // 创建一个包含 1 项，即字符串"Greg"的数组

注意，这里有个坑！
同样是使用构造函数的方式，并传递一个值，new Array(2)与new Array("2")是有区别的

new Array(2) // ["undefined", "undefined"]
new Array("2") // ["2"]

字面量方式

数组字面量由一对包含数组项的方括号表示，多个数组项之间以逗号隔开，如下所示:

var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
var names = []; // 创建一个空数组
var values = [1,2,]; // 不要这样!这样会创建一个包含 2 或 3 项的数组
var options = [,,,,,]; // 不要这样!这样会创建一个包含 5 或 6 项的数组

字面量方式创建数组的兼容问题

字面量数组长度	IE8及以下	IE8以上
["red", "blue", "green"]	3	3
["red", "blue", , "green"]	4	4
["red", "blue", "green", ,]	4	3
[, , , , ,]	6	5

数组 VS 对象

javascript中数组其实就是个对象,只不过会自动管理一些"数字"属性和length属性

var a1=[1,2,3,4];
console.log(a1[0]); //1
var i=1;
console.log(a1[i]); //2
console.log(a1[++i]); //3

数组也是对象，我们可以使用索引的奥秘在于，数组会把索引值转换为对应字符串（1=>”1”）作为对象属性名，验证：

console.log(1 in a1);//true，确实是一个属性

索引特殊性在于数组会自动更新length属性，当然因为JavaScript语法规定数字不能作为变量名，所以我们不能显示使用array.1这样的格式。由此可见其实负数，甚至非数字”索引“都是允许的，只不过这些会变成数组的属性，而不是索引

var a = new Array(1,2,3);
a[-10] = "a[-10]";
a["sss"] = "sss";
console.log(a); // [1, 2, 3, -10: "a[-10]", sss: "sss"]

为对象添加数组方法

var blankArray = [];
var obj = {
    splice: blankArray.splice,
    push: blankArray.push,
    unshift: blankArray.unshift,
    pop: blankArray.pop,
    shift: blankArray.shift
};
obj.push();
obj.unshift();
obj.pop();
obj.shift();

数组中的length属性

数组的length属性不是只读的
1.通过设置这个属性，可以从数组的末尾移除项或向数组中添加新项

var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组 colors.length = 2;
alert(colors[2]); //undefined

2.利用 length 属性也可以方便地在数组末尾添加新项

var colors = ["red", "blue", "green"]; // 创建一个包含 3 个字符串的数组
colors[colors.length] = "black"; //(在位置3)添加一种颜色
colors[colors.length] = "brown"; //(在位置4)再添加一种颜色

3.利用length属性删除／清空数组

var arr = [1,2,3,4];
arr.length = 2;
console.log(arr[2]); // "undefined"

arr.length = 0;
console.log(arr); // []

密集数组与稀疏数组

密集数组：在Java和C语言中，数组是一片连续的存储空间，有着固定的长度。加入数组其实位置是address，长度为n，那么占用的存储空间是address[0],address[1],address[2].......address[n-1]。即数组元素之间是紧密相连的，不存在空隙。如下的js代码创建的就是一个密集数组

var data = [3,1,6,9,2];

稀疏数组：与密集数组相反，javascript并不强制要求数组元素是紧密相连的，即允许间隙的存在。如下的js代码是合法的：

var sparse = new Array();  
sparse[0] = 0;  
sparse[3] = 3;  
alert(sparse[0]);//输出0  
alert(sparse[1]);//输出undefined

密集数组的创建： var dense = Array.apply(null, Array(3));

稀疏数组与密集数组便利区别：

// 稀疏数组  
var array = new Array(3);   
array[2] = "name";  
for(var a in array){  
  console.log("index=" + a + ",value=" + array[a]);  
}  
   
// 密集数组  
var dense = Array.apply(null, Array(3));   
dense[2] = "name";  
for(var a in dense){  
  console.log("index=" + a + ",value=" + dense[a]);  
}

// 结果
// 稀疏数组：index=2,value=name
// 密集数组：index=0,value=undefined
//         index=1,value=undefined
//         index=2,value=name

差别：稀疏数组只遍历了已存在元素的次数，密集数组遍历了arr.length次

伪数组（类数组）

特点：
1.具有length属性；
2.按索引方式存储数据；
3.不具有数组的push()、pop()等方法；

伪数组无法直接调用数组方法或期望length属性有什么特殊的行为，不具有数组的push()、pop()等方法，但仍可以对真正数组遍历方法来遍历它们。

常见的伪数组类型：
1.function内的arguments对象；
2.调用getElementsByTagName, document.childNodes之类的，返回的NodeList对象都属于伪数组；
3.自定义对象的伪数组；

如何将伪数组转换成数组？
1.声明一个空数组，通过遍历伪数组把它们重新添加到新的数组(不推荐)

var links = document.querySelectorAll("a");
var arr = [];
for (var i = 0; i < links.length; i++) {
  arr[arr.length] = links[i]
}

2.使用数组的slice()方法它返回的是数组，使用call或者apply指向伪数组

var arr = Array.prototype.slice.call(links);

3.原型继承

links.__proto__ = Array.prototype;

4.ES6中数组的新方法 from()

var arr = Array.from(links);

清空数组的几种方式

1.length赋值为0

var arr = [1,2,3,4];
arr.length = 0;
console.log(arr); // 输出 []，空数组，即被清空了

2.splice

var arr = [1,2,3,4];
arr.splice(0,arr.length);
console.log(arr); // 输出 []，空数组，即被清空了

3.赋值为[]

var arr = [1,2,3,4];
arr = []; // 赋值为一个空数组以达到清空原数组

服务器托管专线服务伪数组 js自定义一个伪数组 javascript数组清空javascript数组

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87303.html

JavaScript-数组

摘要：什么是数组数组是值的有序集合。这个位置用数字表示叫索引数组用字符串表示叫关联数组。什么是数组数组是值的有序集合。数组中的每个值叫一个元素，每个元素在数组中都有一个唯一的位置。这个位置用数字表示叫索引数组；用字符串表示叫关联数组。数组的元素可以是不同的类型可以动态的向数组差人新元素，或者删除指定元素一维数组定义数组定义数组的方式有三种 /*数组字面量方式定义数组*/ var a...

XanaHopper 2019-08-23 10:53 评论0 收藏0
JavaScript学习第四天笔记（数组）

摘要：示例代码如下索引数组输出结果为索引数组关联数组注意关联数组的数组的长度与元素的个数不一致，原因是的官方不支持关联数组。定义一个空数组访问二维数组中的元素循环遍历二维数组数组概述数组是什么数组是值的有序集合。数组中的每个值叫做一个元素，而每个元素在数组中都右一个唯一的位置。这个位置用数字表示，叫做索引数组；用字符串表示，叫做关联数组。JavaScript数组是无类型的；数组的元素...

lncwwn 2019-08-23 10:53 评论0 收藏0
elasticsearch学习笔记高级篇（二）——filter执行原理深度剖析

摘要：对于小或，不缓存。这样下次如果在有这个条件过来的时候，就不用重新扫描倒排索引，反复生成，可以大幅度提升性能。比好的原因除了不计算相关度分数以外还有这个。下面详细讲一下为什么filter的性能很高，filter的底层原理究竟是什么？通过一个搜索的场景来深入剖析一下，当一个filter搜索请求打到Elasticsearch的时候，ES会进行下面的操作：（1）在倒排索引中查找搜索串，获...

ckllj 2019-07-16 15:38 评论0 收藏0
JS-Array

摘要：没有循环循环次四属性属性属性表示数组元素的数量，的数组元素并不是连续的，有些索引的位置可能没有元素，所以属性并不能真正表示元素的数量，其值等于数组最大索引。一、JS没有真正的数组像C++，Java这些编程语言中数组元素分配的内存都是连续，这有利于性能提升，但是JS的数组不是这样的。它使用对象模拟数组，即对象属性为数字，并含有length属性。所以JS数组对象的内存不是连续的，同一般...

madthumb 2019-08-22 13:53 评论0 收藏0
Mongo索引学习笔记

摘要：索引使用场景优加快查询速度劣增删改会产生额外的开销占用空间返回集合中一半以上的数据，全表扫描的效率高索引基础基础操作查看索引创建索引已有大量数据时可后台执行不阻塞删除索引查看索引大小属性索引顺序为正序，为逆序在复合索引中需注意顺序索引属索引使用场景优：加快查询速度劣：增删改会产生额外的开销、占用空间 tips: 返回集合中一半以上的数据，全表扫描的效率高索引基础基础操作查看...

tianhang 2019-06-26 17:44 评论0 收藏0