javascript

数据类型

数据类型

六种类型,其中对象又分为三种。也就是说细分下来,八种类型。

  • 数值(number):整数和小数(比如13.14
  • 字符串(string):文本(比如Hello World
  • 布尔值(boolean):true(真)和false`(假)
  • undefined:表示“未定义”或不存在
  • null:表示空值
  • 对象(object):各种值组成的集合

数值、字符串、布尔值这三种类型,合称为原始类型(primitive type)的值,不能再细分。

对象:合成类型(complex type),往往是多个原始类型的值的合成。

undefinednull,两个特殊值。

对象又可以分成三个子类型:

  • 狭义的对象(object)
  • 数组(array)
  • 函数(function)
typeof 123 // "number"
typeof '123' // "string"
typeof false // "boolean"
function f() {}
typeof f // "function"
typeof undefined // "undefined"
// 错误的写法
if (v) {
  // ...
}
// ReferenceError: v is not defined

// 正确的写法
if (typeof v === "undefined") {
  // ...
}
typeof window // "object"
typeof {} // "object"
typeof [] // "object"
var o = {};
var a = [];

o instanceof Array // false
a instanceof Array // true
typeof null // "object" 
// 理论上应该是 null,历史原因造成了他是 object 咱不去纠结。

null、undefined

null 和 undefined 区别

null是一个表示“空”的对象,转为数值时为0undefined是一个表示”此处无定义”的原始值,转为数值时为NaN

// 变量声明了,但没有赋值
var i;
i // undefined

// 调用函数时,应该提供的参数没有提供,该参数等于 undefined
function f(x) {
  return x;
}
f() // undefined

// 对象没有赋值的属性
var  o = new Object();
o.p // undefined

// 函数没有返回值时,默认返回 undefined
function f() {}
f() // undefined

布尔

false0"" 或者 ‘’nullundefinedNaN 以外,其他值转化成布尔类型皆为真值。

布尔值常用于条件判断。

// 空数组([])和空对象({})对应的布尔值,都是true。

if ([]) {
  console.log('true');
}
// true

if ({}) {
  console.log('true');
}
// true

数字

所有数字都是以64位浮点数形式储存。1与1.0是相同的,是同一个数。JavaScript 语言的底层根本没有整数,所有数字都是小数(64位浮点数)。某些运算只有整数才能完成,此时 JavaScript 会自动把64位浮点数,转成32位整数,然后再进行运算。

请注意,64位的浮点数可以表示所有的32位整数,但是不能表示所有的64位整数,所以下面的表达式不能得出精确值。

console.log(9223372036854775980); // 9223372036854776000

如果一个数字特别大(大于等于 IEEE 754 标准的 64 位浮点数最大值 2 的 1024 次方),则返回 Infinity。

Math.pow(2, 1024) // Infinity

如果是一个整数,但是特别的小,超出表示范围,则返回 0。

Number.MAX_VALUE // 1.7976931348623157e+308
Number.MIN_VALUE // 5e-324

数值的表示方法:

以下两种情况,JavaScript 会自动将数值转为科学计数法表示,其他情况都采用字面形式直接表示。

(1)小数点前的数字多于21位。

1234567890123456789012
// 1.2345678901234568e+21

123456789012345678901
// 123456789012345680000

(2)小数点后的零多于5个。

// 小数点后紧跟5个以上的零,
// 就自动转为科学计数法
0.0000003 // 3e-7

// 否则,就保持原来的字面形式
0.000003 // 0.000003

数值的不同进制

  • 十进制:没有前导0的数值。
  • 八进制:有前缀0o0O的数值,或者有前导0、且只用到0-7的八个阿拉伯数字的数值。
  • 十六进制:有前缀0x0X的数值。
  • 二进制:有前缀0b0B的数值。

特殊数值

-0 === +0 // true
0 === -0 // true
0 === +0 // true
+0 // 0
-0 // 0
(-0).toString() // '0'
(+0).toString() // '0'

唯一有区别的:

(1 / +0) === (1 / -0) // false
// 除以正零得到+Infinity,除以负零得到-Infinity

NaN是 JavaScript 的特殊值,表示“非数字”(Not a Number),主要出现在将字符串解析成数字出错的场合。

5 - 'x' // NaN
Math.sqrt(-1) // NaN
0/0 // NaN
9/0 // Infinity
-12/0 // -Infinity
typeof NaN // 'number'
NaN === NaN // false
NaN + 32 // NaN
Infinity > NaN // false
-Infinity > NaN // false
5 * Infinity // Infinity
5 - Infinity // -Infinity
Infinity / 5 // Infinity
5 / Infinity // 0
0 * Infinity // NaN
0 / Infinity // 0
Infinity / 0 // Infinity
null * Infinity // NaN 其中 null 会转化成 0
null / Infinity // 0
Infinity / null // Infinity
undefined + Infinity // NaN
undefined - Infinity // NaN
undefined * Infinity // NaN
undefined / Infinity // NaN
Infinity / undefined // NaN

parseInt()

parseInt方法用于将字符串转为整数。如果字符串头部有空格,空格会被自动去除。如果parseInt的参数不是字符串,则会先转为字符串再转换。

parseInt('123') // 123
parseInt('   81') // 81
parseInt(1.23) // 1
// 等同于
parseInt('1.23') // 1

字符串转为整数的时候,是一个个字符依次转换,如果遇到不能转为数字的字符,就不再进行下去,返回已经转好的部分。

parseInt('8a') // 8
parseInt('12**') // 12
parseInt('12.34') // 12
parseInt('15e2') // 15
parseInt('15px') // 15

上面代码中,parseInt的参数都是字符串,结果只返回字符串头部可以转为数字的部分。

如果字符串的第一个字符不能转化为数字(后面跟着数字的正负号除外),返回NaN

parseInt('abc') // NaN
parseInt('.3') // NaN
parseInt('') // NaN
parseInt('+') // NaN
parseInt('+1') // 1

所以,parseInt的返回值只有两种可能,要么是一个十进制整数,要么是NaN

如果字符串以0x0X开头,parseInt会将其按照十六进制数解析。

parseInt('0x10') // 16

如果字符串以0开头,将其按照10进制解析。

parseInt('011') // 11

对于那些会自动转为科学计数法的数字,parseInt会将科学计数法的表示方法视为字符串,因此导致一些奇怪的结果。

parseInt(1000000000000000000000.5) // 1
// 等同于
parseInt('1e+21') // 1

parseInt(0.0000008) // 8
// 等同于
parseInt('8e-7') // 8

parseInt方法还可以接受第二个参数(2到36之间),表示被解析的值的进制,返回该值对应的十进制数。默认情况下,parseInt的第二个参数为10,即默认是十进制转十进制。

parseInt('1000') // 1000
// 等同于
parseInt('1000', 10) // 1000

parseFloat()

parseFloat方法用于将一个字符串转为浮点数。

isNaN()

isNaN方法可以用来判断一个值是否为NaN

isNaN(NaN) // true
isNaN(123) // false

但是,isNaN只对数值有效,如果传入其他值,会被先转成数值。比如,传入字符串的时候,字符串会被先转成NaN,所以最后返回true,这一点要特别引起注意。也就是说,isNaNtrue的值,有可能不是NaN,而是一个字符串。

isNaN('Hello') // true
// 相当于
isNaN(Number('Hello')) // true

出于同样的原因,对于对象和数组,isNaN也返回true

isNaN({}) // true
// 等同于
isNaN(Number({})) // true

isNaN(['xzy']) // true
// 等同于
isNaN(Number(['xzy'])) // true

但是,对于空数组和只有一个数值成员的数组,isNaN返回false

isNaN([]) // false
isNaN([123]) // false
isNaN(['123']) // false

上面代码之所以返回false,原因是这些数组能被Number函数转成数值,请参见《数据类型转换》一章。

因此,使用isNaN之前,最好判断一下数据类型。

function myIsNaN(value) {
  return typeof value === 'number' && isNaN(value);
}

判断NaN更可靠的方法是,利用NaN为唯一不等于自身的值的这个特点,进行判断。

function myIsNaN(value) {
  return value !== value;
}

isFinite()

isFinite方法返回一个布尔值,表示某个值是否为正常的数值。

isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(undefined) // false
isFinite(null) // true
isFinite(-1) // true

除了Infinity-InfinityNaNundefined这几个值会返回falseisFinite对于其他的数值都会返回true

字符串

字符串就是零个或多个排在一起,可以是单引号或者是双引号。使用单引号,就必须在内部的单引号前面加上反斜杠,用来转义。双引号字符串内部使用双引号,也是如此。

'abc'
"abc"
'Did she say \'Hello\'?' // "Did she say 'Hello'?"
"Did she say \"Hello\"?" // "Did she say "Hello"?"

多行

var longString = 'Long \
long \
long \
string';

console.log(longString) // "Long long long string"
var longString = 'Long '
  + 'long '
  + 'long '
  + 'string';

反斜杠(\)在字符串内有特殊含义,用来表示一些特殊字符,所以又称为转义符。例如 \0\n

'\251' // "©"
'\xA9' // "©"
'\u00A9' // "©"

'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true

如果在非特殊字符前面使用反斜杠,则反斜杠会被省略。

字符串可以被视为字符数组,因此可以使用数组的方括号运算符,用来返回某个位置的字符(位置编号从0开始)。

如果方括号中的数字超过字符串的长度,或者方括号中根本不是数字,则返回undefined

但是,字符串与数组的相似性仅此而已。我们无法改变字符串之中的单个字符。

var s = 'hello';
s.length // 5

s.length = 3;
s.length // 5

JavaScript 使用 Unicode 字符集。JavaScript 引擎内部,所有字符都用 Unicode 表示。

var f\u006F\u006F = 'abc';
foo // "abc"

avaScript 对 UTF-16 的支持是不完整的,是因为历史原因,也就是说,JavaScript 返回的字符串长度可能是不正确的。

'𝌆'.length // 2
  • btoa():任意值转为 Base64 编码
  • atob():Base64 编码转为原来的值

这两个方法不适合非 ASCII 码的字符,会报错。

var string = 'Hello World!';
btoa(string) // "SGVsbG8gV29ybGQh"
atob('SGVsbG8gV29ybGQh') // "Hello World!"

要将非 ASCII 码字符转为 Base64 编码,必须中间插入一个转码环节,再使用这两个方法。

function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}

function b64Decode(str) {
  return decodeURIComponent(atob(str));
}

b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

对象

对象就是一组“键值对”(key-value)的集合,是一种无序的复合数据集合。

var obj = {
  foo: 'Hello',
  bar: 'World'
};

对象的所有键名都是字符串(ES6 又引入了 Symbol 值也可以作为键名),所以加不加引号都可以。上面的代码也可以写成下面这样。

var obj = {
  'foo': 'Hello',
  'bar': 'World'
};

如果键名是数值,会被自动转为字符串。

如果键名不符合标识名的条件(比如第一个字符为数字,或者含有空格或运算符),且也不是数字,则必须加上引号,否则会报错。

对象的每一个键名又称为“属性”(property),它的“键值”可以是任何数据类型。如果一个属性的值为函数,通常把这个属性称为“方法”,它可以像函数那样调用。

如果属性的值还是一个对象,就形成了链式引用。

var o1 = {};
var o2 = { bar: 'hello' };

o1.foo = o2;
o1.foo.bar // "hello"

属性可以动态创建,不必在对象声明时就指定。

var obj = {};
obj.foo = 123;
obj.foo // 123

如果不同的变量名指向同一个对象,那么它们都是这个对象的引用,也就是说指向同一个内存地址。修改其中一个变量,会影响到其他所有变量。如果取消某一个变量对于原对象的引用,不会影响到另一个变量。这种引用只局限于对象。

表达式还是语句?

对象采用大括号表示,这导致了一个问题:如果行首是一个大括号,它到底是表达式还是语句?

{ foo: 123 }

JavaScript 引擎读到上面这行代码,会发现可能有两种含义。第一种可能是,这是一个表达式,表示一个包含foo属性的对象;第二种可能是,这是一个语句,表示一个代码区块,里面有一个标签foo,指向表达式123

为了避免这种歧义,JavaScript 引擎的做法是,如果遇到这种情况,无法确定是对象还是代码块,一律解释为代码块。

{ console.log(123) } // 123

上面的语句是一个代码块,而且只有解释为代码块,才能执行。

如果要解释为对象,最好在大括号前加上圆括号。因为圆括号的里面,只能是表达式,所以确保大括号只能解释为对象。

({ foo: 123 }) // 正确
({ console.log(123) }) // 报错

这种差异在eval语句(作用是对字符串求值)中反映得最明显。

eval('{foo: 123}') // 123
eval('({foo: 123})') // {foo: 123}

上面代码中,如果没有圆括号,eval将其理解为一个代码块;加上圆括号以后,就理解成一个对象。

读取对象的属性,有两种方法,一种是使用点运算符,还有一种是使用方括号运算符。数值键名不能使用点运算符(因为会被当成小数点),只能使用方括号运算符。

var obj = {
  123: 'hello world'
};

obj.123 // 报错
obj[123] // "hello world"

查看一个对象本身的所有属性,可以使用Object.keys方法。

Object.keys(obj);

delete命令用于删除对象的属性,删除成功后返回true。删除一个不存在的属性,delete不报错,而且返回true

delete obj.p // true

只有一种情况,delete命令会返回false,那就是该属性存在,且不得删除。

var obj = Object.defineProperty({}, 'p', {
  value: 123,
  configurable: false
});

obj.p // 123
delete obj.p // false

delete命令只能删除对象本身的属性,无法删除继承的属性。

var obj = {};
delete obj.toString // true
obj.toString // function toString() { [native code] }

in 和 hasOwnProperty

var obj = { p: 1 };
'p' in obj // true
'toString' in obj // true

if ('toString' in obj) {
  console.log(obj.hasOwnProperty('toString')) // false
}

// 它遍历的是对象所有可遍历(enumerable)的属性,会跳过不可遍历的属性。它不仅遍历对象自身的属性,还遍历继承的属性。toString属性,该属性不会被for...in循环遍历到,因为它默认是“不可遍历”的。
var obj = {a: 1, b: 2, c: 3};
for (var i in obj) {
  console.log('键名:', i);
  console.log('键值:', obj[i]);
}

for (var key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key);
  }
}

with【不建议使用】

// 例一
var obj = {
  p1: 1,
  p2: 2,
};
with (obj) {
  p1 = 4;
  p2 = 5;
}
// 等同于
obj.p1 = 4;
obj.p2 = 5;

// 例二
with (document.links[0]){
  console.log(href);
  console.log(title);
  console.log(style);
}
// 等同于
console.log(document.links[0].href);
console.log(document.links[0].title);
// 如果with区块内部有变量的赋值操作,必须是当前对象已经存在的属性,否则会创造一个当前作用域的全局变量。
var obj = {};
with (obj) {
  p1 = 4;
  p2 = 5;
}

obj.p1 // undefined
p1 // 4

函数

function print(s) {
  console.log(s);
}

var print = function(s) {
  console.log(s);
};

var print = function x(){
  console.log(typeof x);
};
x // ReferenceError: x is not defined
print() // function

var f = function f() {};

var add = new Function( // Function构造函数可以不使用new命令,返回结果完全一样。不常用。
  'x',
  'y',
  'return x + y'
);

如果同一个函数被多次声明,后面的声明就会覆盖前面的声明。

JavaScript 语言将函数看作一种值,与其它值(数值、字符串、布尔值等等)地位相同。凡是可以使用值的地方,就能使用函数。

JavaScript 引擎将函数名视同变量名,所以采用function命令声明函数时,整个函数会像变量声明一样,被提升到代码头部。所以,下面的代码不会报错。

f();

function f() {}

表面上,上面代码好像在声明之前就调用了函数f。但是实际上,由于“变量提升”,函数f被提升到了代码头部,也就是在调用之前已经声明了。但是,如果采用赋值语句定义函数,JavaScript 就会报错。

f();
var f = function (){};
// TypeError: undefined is not a function

上面的代码等同于下面的形式。

var f;
f();
f = function () {};

上面代码第二行,调用f的时候,f只是被声明了,还没有被赋值,等于undefined,所以会报错。

注意,如果像下面例子那样,采用function命令和var赋值语句声明同一个函数,由于存在函数提升,最后会采用var赋值语句的定义。

var f = function () {
  console.log('1');
}

function f() {
  console.log('2');
}

f() // 1

上面例子中,表面上后面声明的函数f,应该覆盖前面的var赋值语句,但是由于存在函数提升,实际上正好反过来。

function f1() {}
f1.name // "f1"

var f2 = function () {};
f2.name // "f2"

var f3 = function myName() {};
f3.name // 'myName' // 真正的函数名还是f3,而myName这个名字只在函数体内部可用

var myFunc = function () {};
function test(f) {
  console.log(f.name);
}
test(myFunc) // myFunc

function f(a, b) {}
f.length // 2 参数个数

函数的toString方法返回一个字符串,内容是函数的源码。

对于那些原生的函数,toString()方法返回function (){[native code]}

函数内部的注释也可以返回。

函数作用域

在 ES5 的规范中,JavaScript 只有两种作用域:一种是全局作用域,变量在整个程序中一直存在,所有地方都可以读取;另一种是函数作用域,变量只在函数内部存在。ES6 又新增了块级作用域,本教程不涉及。

对于var命令来说,局部变量只能在函数内部声明,在其他区块中声明,一律都是全局变量。

if (true) {
  var x = 5;
}
console.log(x);  // 5

与全局作用域一样,函数作用域内部也会产生“变量提升”现象。var命令声明的变量,不管在什么位置,变量声明都会被提升到函数体的头部。

function foo(x) {
  if (x > 100) {
    var tmp = x - 100;
  }
}

// 等同于
function foo(x) {
  var tmp;
  if (x > 100) {
    tmp = x - 100;
  };
}

函数本身也是一个值,也有自己的作用域。它的作用域与变量一样,就是其声明时所在的作用域,与其运行时所在的作用域无关。

var a = 1;
var x = function () {
  console.log(a);
};

function f() {
  var a = 2;
  x();
}

f() // 1

上面代码中,函数x是在函数f的外部声明的,所以它的作用域绑定外层,内部变量a不会到函数f体内取值,所以输出1,而不是2

总之,函数执行时所在的作用域,是定义时的作用域,而不是调用时所在的作用域。

很容易犯错的一点是,如果函数A调用函数B,却没考虑到函数B不会引用函数A的内部变量。

var x = function () {
  console.log(a);
};

function y(f) {
  var a = 2;
  f();
}

y(x)
// ReferenceError: a is not defined

上面代码将函数x作为参数,传入函数y。但是,函数x是在函数y体外声明的,作用域绑定外层,因此找不到函数y的内部变量a,导致报错。

同样的,函数体内部声明的函数,作用域绑定函数体内部。

function foo() {
  var x = 1;
  function bar() {
    console.log(x);
  }
  return bar;
}

var x = 2;
var f = foo();
f() // 1

上面代码中,函数foo内部声明了一个函数barbar的作用域绑定foo。当我们在foo外部取出bar执行时,变量x指向的是foo内部的x,而不是foo外部的x。正是这种机制,构成了下文要讲解的“闭包”现象。

参数

运行时无论提供多少个参数(或者不提供参数),JavaScript 都不会报错。

变量是一个原始类型的值,传入函数的方式是传值传递。

如果函数参数是复合类型的值(数组、对象、其他函数),传递方式是传址传递(pass by reference)。也就是说,传入函数的原始值的地址,因此在函数内部修改参数,将会影响到原始值。

如果有同名的参数,则取最后出现的那个值。

arguments对象包含了函数运行时的所有参数,arguments[0]就是第一个参数,arguments[1]就是第二个参数,以此类推。

正常模式下,arguments对象可以在运行时修改。

严格模式下,arguments对象与函数参数不具有联动关系。也就是说,修改arguments对象不会影响到实际的函数参数。

var f = function(a, b) {
  'use strict'; // 开启严格模式
  arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}

f(1, 1) // 2

通过arguments对象的length属性,可以判断函数调用时到底带几个参数。

需要注意的是,虽然arguments很像数组,但它是一个对象。数组专有的方法(比如sliceforEach),不能在arguments对象上直接使用。

arguments对象带有一个callee属性,返回它所对应的原函数。

var f = function () {
  console.log(arguments.callee === f);
}

f() // true

闭包

JavaScript 有两种作用域:全局作用域和函数作用域。函数内部可以直接读取全局变量。

但是,函数外部无法读取函数内部声明的变量。

由于在 JavaScript 语言中,只有函数内部的子函数才能读取内部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。

闭包的最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量始终保持在内存中,即闭包可以使得它诞生环境一直存在。请看下面的例子,闭包使得内部变量记住上一次调用时的运算结果。

function createIncrementor(start) {
  return function () {
    return start++;
  };
}

var inc = createIncrementor(5);

inc() // 5
inc() // 6
inc() // 7
var a = 1;
eval('a = 2');

a // 2

上面代码中,eval命令修改了外部变量a的值。由于这个原因,eval有安全风险。

为了防止这种风险,JavaScript 规定,如果使用严格模式,eval内部声明的变量,不会影响到外部作用域。

(function f() {
  'use strict';
  eval('var foo = 123');
  console.log(foo);  // ReferenceError: foo is not defined
})()

上面代码中,函数f内部是严格模式,这时eval内部声明的foo变量,就不会影响到外部。

不过,即使在严格模式下,eval依然可以读写当前作用域的变量。

(function f() {
  'use strict';
  var foo = 1;
  eval('foo = 2');
  console.log(foo);  // 2
})()

上面代码中,严格模式下,eval内部还是改写了外部变量,可见安全风险依然存在。

为了保证eval的别名不影响代码优化,JavaScript 的标准规定,凡是使用别名执行evaleval内部一律是全局作用域。

var a = 1;

function f() {
  var a = 2;
  var e = eval;
  e('console.log(a)');
}

f() // 1

上面代码中,eval是别名调用,所以即使它是在函数中,它的作用域还是全局作用域,因此输出的a为全局变量。这样的话,引擎就能确认e()不会对当前的函数作用域产生影响,优化的时候就可以把这一行排除掉。

eval的别名调用的形式五花八门,只要不是直接调用,都属于别名调用,因为引擎只能分辨eval()这一种形式是直接调用。

eval.call(null, '...')
window.eval('...')
(1, eval)('...')
(eval, eval)('...')

上面这些形式都是eval的别名调用,作用域都是全局作用域。

数组

任何类型的数据,都可以放入数组。

var arr = [
  {a: 1},
  [1, 2, 3],
  function() {return true;}
];

JavaScript 语言规定,对象的键名一律为字符串,所以,数组的键名其实也是字符串。之所以可以用数值读取,是因为非字符串的键名会被转为字符串。

var a = [];

a[1.00] = 6;
a[1] // 6

上面代码中,由于1.00转成字符串是1,所以通过数字键1可以读取值。

数组的length属性,返回数组的成员数量。

JavaScript 使用一个32位整数,保存数组的元素个数。这意味着,数组成员最多只有 4294967295 个(232 – 1)个,也就是说length属性的最大值就是 4294967295。

var arr = ['a', 'b'];
arr.length // 2

arr[2] = 'c';
arr.length // 3

arr[9] = 'd';
arr.length // 10

arr.length = 2;
arr // ["a", "b"]

arr.length = 0; // 清空数组

如果人为设置length大于当前元素个数,则数组的成员数量会增加到这个值,新增的位置都是空位。

var a = ['a'];

a.length = 3;
a[1] // undefined

如果人为设置length为不合法的值,JavaScript 会报错。

由于数组本质上是一种对象,所以可以为数组添加属性,但是这不影响length属性的值。

如果数组的键名是添加超出范围的数值,该键名会自动转为字符串。

var arr = [];
arr[-1] = 'a';
arr[Math.pow(2, 32)] = 'b';

arr.length // 0
arr[-1] // "a"
arr[4294967296] // "b"

in

var arr = [ 'a', 'b', 'c' ];
2 in arr  // true
'2' in arr // true
4 in arr // false

for...in不仅会遍历数组所有的数字键,还会遍历非数字键。数组的遍历可以考虑使用for循环或while循环。

数组的forEach方法,也可以用来遍历数组,详见《标准库》的 Array 对象一章。

var colors = ['red', 'green', 'blue'];
colors.forEach(function (color) {
  console.log(color);
});
// red
// green
// blue
var a = [, , ,];
a.length // 3 最后一个元素后面有逗号,js 会直接忽略
delete a[1];

delete命令删除了数组的第二个元素,这个位置就形成了空位,但是对length属性没有影响。

数组的某个位置是空位,与某个位置是undefined,是不一样的。如果是空位,使用数组的forEach方法、for...in结构、以及Object.keys方法进行遍历,空位都会被跳过。

类似数组的对象

如果一个对象的所有键名都是正整数或零,并且有length属性,那么这个对象就很像数组,语法上称为“类似数组的对象”(array-like object)。

var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

obj[0] // 'a'
obj[1] // 'b'
obj.length // 3
obj.push('d') // TypeError: obj.push is not a function

有一个问题,这种length属性不是动态值,不会随着成员的变化而变化。

上面代码为对象obj添加了一个数字键,但是length属性没变。这就说明了obj不是数组。

典型的“类似数组的对象”是函数的arguments对象,以及大多数 DOM 元素集,还有字符串。

// arguments对象
function args() { return arguments }
var arrayLike = args('a', 'b');

arrayLike[0] // 'a'
arrayLike.length // 2
arrayLike instanceof Array // false

// DOM元素集
var elts = document.getElementsByTagName('h3');
elts.length // 3
elts instanceof Array // false

// 字符串
'abc'[1] // 'b'
'abc'.length // 3
'abc' instanceof Array // false

数组的slice方法可以将“类似数组的对象”变成真正的数组。

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

除了转为真正的数组,“类似数组的对象”还有一个办法可以使用数组的方法,就是通过call()把数组的方法放到对象上面。

function print(value, index) {
  console.log(index + ' : ' + value);
}

Array.prototype.forEach.call(arrayLike, print);

上面代码中,arrayLike代表一个类似数组的对象,本来是不可以使用数组的forEach()方法的,但是通过call(),可以把forEach()嫁接到arrayLike上面调用。

下面的例子就是通过这种方法,在arguments对象上面调用forEach方法。

字符串也是类似数组的对象,所以也可以用Array.prototype.forEach.call遍历。

注意,这种方法比直接使用数组原生的forEach要慢,所以最好还是先将“类似数组的对象”转为真正的数组,然后再直接调用数组的forEach方法。

var arr = Array.prototype.slice.call('abc');
arr.forEach(function (chr) {
  console.log(chr);
});
// a
// b
// c

发表评论