数组是值的有序结合。每个值叫做一个元素，而每个元素在数组中都有一个位置，用数字表示，称为索引。
javascript数组是无类型的：数组的元素可以是任意类型，并且同一个数组中的不同元素也可能有不同的类型。数组的元素可能是对象或其他数组，这允许创建更加复杂的数据结构，如对象的数组和数组的数组。
javascript数组的索引是基本零的32位数值：第一个元素的索引为0，最大的索引为4 294 967 294（2的32次方-2）,数组最大能容纳4 294 967 295个元素。
javascript数组是动态的：根据需要他们会增长或缩减，并且在创建数组时无需声明一个固定大小或者在数组大小变化时无需从新分配空间，javascript数组可能是稀疏的：数组元素的索引不一定要连续的，该属性就是数组元素的个数。征对稀疏数组，length比所有元素的索引要大。
javascript数组是javascript对象的特殊形式，数组索引实际上和碰巧是整数的属性名差不多。我们将在本文（章）更多讨论特殊化的数组。通常数组的实现是经过优化的，用数组索引来访问数组元素一般来说比访问常规的对象属性要快很多。
数组继承自Array.prototype的属性，它定义了一套丰富的数组操作方法，8和9节涵盖这方面的内容。大多这些方法是通用的，这意味着他们不仅对正真的数组有效，而且对“类数组对象”同样有效。11节讨论类数组对象。在ECMAScript5中，字符串的行为与字符数组类似，12节将讨论。
1.创建数组
使用直接量创建数组是最简单方法，在方括号中将组组元素用逗号隔开即可，如：
var primes = [2, 3, 5, 7, 11];
var misc = [1.1, true, "a", ]; //三个不同类型的元素和结尾的逗号
数组直接量中的值不一定是要常量，它们可以是任意的表达式
var table =
它可以包含对象直接量或其他数组直接量
如果省略数组直接量中的某个值，省略的值的元素将被赋予undefined
var undefs = [, , ] //两个元素，都是undefined
调用构造函数Array()是创建数组的令一种方法。用三种方法调用构造函数
- 调用时没有参数
- 调用时有一个值是参数，它指定长度
- 显式指定两个或多个数组元素或者数组的一个非数组元素
var a =new Array();
该方法创建一个没有任何元素的空数组，等于数组直接量[].
该方法创建指定长度的数组，当预先知道所需元素的个数时，这种形式的Array()构造函数可以用来分配一个数组空间。注意，数组中没有存储值。甚至数组的索引，“0”，“1”等还未定义。
用这种形式，构造的函数参数将会成为新的数组元素，使用数组字面量比这样使用Array()构造函数要简单多了。
2.数组元素的读和写
使用[]操作符来访问数组中的一个元素。数组的引用位于方括号的左边。方括号中是一个返回非负整数值的任意表达式。使用该表达式可以读也可以写数组中的一个元素。因此，如下的代码都是合法的javascript语句
var value = a[0]; //读取第0个元素
a[1] = 3.14; //写第1个元素
i = 2;
a = 3; //写第2个元素
a = "hello"; //写第3个元素
a[a[i]] = a[0] //读取第0和第2个元素，写第3个元素
请记住：数组是对象的特殊形式。使用方括号访问数组元素就像使用方括号访问对象的属性一样。javascript将制定的数组索引替换成字符串——索引1变成"1"，然后将其作为属性名来使用。关于索引值从数字转换为字符串没有什么特别之处：对常规对象也可以这么做：
o[1] = "none" ;//用一个整数来索引它
数组的特别之处在于，当使用小于2的32次方的非负数整数作为属性名时，数组会自动维护其length属性值。如上，创建仅有一个元素的数组，然后在1、2、3、处进行赋值，当我们这么做时，数组的length变为4
清晰地区分数组的索引和数组的属性名是非常有用的。所有的索引都是其属性名，但只有0到（2的32次方-2）的整数属性名才是索引。所有的数组都是对象，可以为其创建任意名字的属性。但如果使用的属性是数组的索引，数组的特殊行为就是将根据需要更新它们的length属性值。
注意，可以使用负数或非整数来索引数组。这种情况下，数值转换为字符串。字符串作为属性名来用。既然名字不是非负整数，就只能当做常规的对象属性，而非数组的所有。同样，如果凑巧使用了是非负整数的字符串，它就当做数组索引，而非对象的属性。当使用一个浮点数和一个整数相等时情况也是一样的：
a["1000"] = 0; //这是数组的第1001个元素
a[1.000] //和a[1]相等
事实上数组索引仅仅是对象属性名的一种特殊类型，这意味着javascript数组没有“越界”错误的概念。当试图查询对象中不存在的属性时，不会报错。只会得到undefined值。类似于对象，对于对象同样存在这种情况。
既然数组是对象 ，那么它们可以从原型中继承元素。在ECMAScript5中，数组可以定义元素的getter和setter方法(6.6)。如果一个数组确实继承了元素或使用了元素的getter和setter方法，你应该期望它使用非优化的代码路径：访问这种数组的元素的时间会与常规对象属性的查找时间相近。
3.稀疏数组
稀疏数组就是包含从0开始的不连续索引的数组。通常，数组的length属性值代表了数组中元素的个数。如果数组是稀疏的，那么length的值远大于元素的个数。可以使用Array构造函数或简单地指定数组的索引值大于当前数组长度来创建稀疏数组。
a = []; //创建一个空数组，length的值为0
a[1000] = 0;//赋值添加一个元素，但设置的length值为1001
后面你也可以delete操作符产生稀疏数组。
足够稀疏的数组通常在实现上比稠密是数组更慢、内存利用率更高，在这样的数组中查找元素的时间与常规对象属性的查找时间一样长。
注意，当数组直接量中省略值时不会创建稀疏数组。省略的元素在数组中是存在的，其值为undefined。这和数组元素根本不在是有一些微妙的区别的。可以用in操作符检测两者的区别。
var a2 = new Array(3); //该数组根本没有元素
0 in a1; //=>true a1在索引0处有一个元素;
0 in a2; //=>false a2在索引0处没有元素
当使用for/in循环时，a1和a2的区别也很明显（第6节）
需要注意的是，当省略数组直接量中的值时（使用连续的逗号，比如[1,,,,3]），这时得到的也是稀疏数组，省略掉的芝是不存在的：
最近在做一个项目时, 研究了一下新浪微博的前端, 看到首页中那个图标了吗, 以前看到这类效果的第一反应就是用一个gif之类的图标做出来!!
但在研究的过程, 发现了一个小技巧, 注意那个em标签中的文本是E, 但显示出来一个类似ICON的图标.
既然是HTML+CSS写出来的, 那么应该是由css控制显示出来的效果的.
其他的一些css基本没什么问题, 都理解了, 但只有这个 font-family, 强制设置成了 "wbficonregular", 一般操作系统里应该没这个命名的字体吧!!
又乱点了一下谷歌的调试器, 发现有加载字体文件的!! 而且在其中一个字体文件中, 发现和首页图标一样形状的东西!!
百度一下, woff是一种字体文件!!
于是我就想 应该也有软件可以制作自己的字体文件吧. 百度一下, 找到了名为 FontCreator 的软件!!
文件 -> 新建
字符集 , 字体样式 和 预定义轮廓我都按默认值弄, 其中预定义轮廓 选 包括轮廓, 是让新建的字体文件默认就有几个字符的了, 一般我都直接修改就行了!!
例如我把 数字字符0 修改一下 在数字字符0 上右键-> 编辑
在出现的窗口, 点0的正中间 就可以拖动选框, 修改它的形状 (只为做实例)
好了, 保存!!
接下来, 把刚刚做的字体用到html编写中去!!
只是做个实例, 还是把css写到html中吧
谷歌浏览器的效果
这个时候不要想完工了, 用万恶的IE打开看看
效果出不来?? 百度一下css自定义字体的兼容问题
来源 http://www.w3cplus.com/content/css3-font-face
一、TureTpe(.ttf)格式：
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
二、OpenType(.otf)格式：
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
三、Web Open Font Format(.woff)格式：
.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
四、Embedded Open Type(.eot)格式：
.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；
五、SVG(.svg)格式：
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。
(这里, 我小小偷了一下懒, 我还是用ttf, 因为我还没找一个好点的ttf转woff的软件)
这其中, ttf 转eot, 需要一个小软件, 下载地址 http://download.csdn.net/detail/u010488325/6235387
在f.ttf旁边就多了一个f.eot,
用css hack把f.eot文件加进之前的字体引用中
看效果
总结一下,
用这种方法给一些a标签 ul中的li标签 加一个icon, 其实很方便的, 而且只要制作的字体文件内容不多, 它的大小也就几k吧, 有些情况下相对于图片的icon好一些.
另外, 这种方法做的icon, 只能是纯色的, 像一些icon是有渐变效果的, 还是用图片会好一些�, 这个在开发的时候自行衡量呗!!
本文链接：HTML中用自定义字体实现小图标icon(不是原作, 只是一个研究笔记)，转载请注明。
没有评论:
发表评论