web前端从零开始系列-06-Javascript数据类型(下)

熟悉Javascript数据类型,相关函数的使用

  • 数据类型概述。
  • null 和 undefined 布尔值
  • 数值
  • 字符串
  • 对象
  • 函数
  • 数组
对象/对象/对象

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

键名是数值,会被自动转为字符串。每一个键名又称为“属性”(property),若是函数可以像函数那样调用

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

引用只局限于对象,如果两个变量指向同一个原始类型的值。变量这时都是值的拷贝。

var o1 = {};
var o2 = o1;
o1.a = 1;
o2.a // 1
o2.b = 2;
o1.b // 2
var o1 = {};
var o2 = o1;
o1 = 1;
o2 // {}
var x = 1;
var y = x;
x = 2;
y // 1

圆括号的里面,只能是表达式,所以确保大括号只能解释为对象。

如果遇到这种情况,无法确定是对象还是代码块,一律解释为代码块。

圆括号的里面,只能是表达式,确保大括号只能解释为对象。eval语句中反应最明显

({ foo: 123 }) // 正确
({ console.log(123) }) // 报错
eval('{foo: 123}') // 123
eval('({foo: 123})') // {foo: 123}
属性操作

两种方法,一种是使用点运算符,还有一种是使用方括号运算符。

  • 方括号运算符,键名必须放在引号里面,否则会被当作变量处理。
  • 方括号运算符内部可以使用表达式,数字键可以不加引号,会自动转成字符串。
  • 数值键名不能使用点运算符,只能使用方括号运算符。
  • 点运算符和方括号运算符,不仅可以用来读取值,还可以用来赋值。
  • Object.keys()查看一个对象本身的所有属性。

delete命令

  • delete命令用于删除对象的属性,删除成功后返回true,删除失败后返回false。
  • delete命令删除一个不存在的属性,delete不报错,而且返回true
  • 只有一种情况,delete命令会返回false,那就是该属性存在,且不得删除。
  • delete命令只能删除对象本身的属性,无法删除继承的属性

in 运算符

  • in运算符用于检查对象是否包含某个属性(注意,检查的是键名,不是键值)
  • in运算符不会识别 属性是来自本身还是继承的
  • 配合hasOwnProperty()判断一下,是否为对象自身的属性。
  • 对象属性的可遍历性,比如toString属性 默认不可遍历
var obj = {};
if ('toString' in obj) {
  console.log(obj.hasOwnProperty('toString')) // false
}

for...in 循环

  • for...in循环用来遍历一个对象的全部属性。
  • for...in会遍历所有可遍历(enumerable)的属性,会跳过不可遍历的属性。(比如toString属性 默认不可遍历)
  • for...in会遍历对象自身的属性,还遍历继承的属性
  • 配合hasOwnProperty(),判断一下,某个属性是否为对象自身的属性。
var person = { name: '老张' };

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

with 语句

  • 作用是操作同一个对象的多个属性时,提供一些书写的方便。
  • with语句的一个很大的弊病,就是绑定对象不明确。
  • 建议不要使用with语句,可以考虑用一个临时变量代替with。
with(obj1.obj2.obj3) {
  console.log(p1 + p2);
}

// 可以写成
var temp = obj1.obj2.obj3;
console.log(temp.p1 + temp.p2);
函数/函数/函数

函数javascript 里的一等公民,声明方式有三种

  • function 命令
function print(s) {
  console.log(s);
}
  • 函数表达式
var print = function(s) {
  console.log(s);
};
  • Function 构造函数(不值观,很少人使用)
var foo = new Function(
  'return "hello world";'
);

// 等同于
function foo() {
  return 'hello world';
}

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

调用函数时,要使用圆括号运算符。圆括号之中,可以加入函数的参数。

递归,计算斐波那契数列的代码。

function fib(num) {
  if (num === 0) return 0;
  if (num === 1) return 1;
  return fib(num - 2) + fib(num - 1);
}

fib(6) // 8
函数名提升
f();
function f() {}
f();
var f = function (){};
// TypeError: undefined is not a function

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

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

f() // 1

函数的属性和方法 name属性返回函数的名字。

var myFunc = function () {};

function test(f) {
  console.log(f.name);
}

test(myFunc) // myFunc

length属性返回函数预期传入的参数个数,即函数定义之中的参数个数

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

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

function f() {
  a();
  b();
  c();
}

f.toString()
// function f() {
//  a();
//  b();
//  c();
// }

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

函数作用域

全局作用域

var v = 1;

function f() {
  console.log(v);
}

f()
// 1

函数作用域

function f(){
  var v = 1;
}

v // ReferenceError: v is not defined

函数内部定义的变量,会在该作用域内覆盖同名全局变量。

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

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

函数内部的变量提升

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

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

函数执行时所在的作用域,是定义时的作用域,而不是调用时所在的作用域 函数体内部声明的函数,作用域绑定函数体内部。

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

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

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

函数参数的省略

function f(a, b) {
  return a;
}

f(1, 2, 3) // 1
f(1) // 1
f() // undefined

f.length // 2

没有办法只省略靠前的参数,而保留靠后的参数。如果一定要省略靠前的参数,只有显式传入undefined。

function f(a, b) {
  return a;
}

f( , 1) // SyntaxError: Unexpected token ,(…)
f(undefined, 1) // undefined

在函数体内修改参数值,不会影响到函数外部

var p = 2;

function f(p) {
  p = 3;
}
f(p);

p // 2

没有办法只省略靠前的参数,而保留靠后的参数。如果一定要省略靠前的参数,只有显式传入undefined。

function f(a, b) {
  return a;
}

f( , 1) // SyntaxError: Unexpected token ,(…)
f(undefined, 1) // undefined

函数体内修改参数值,不会影响到函数外部

var p = 2;

function f(p) {
  p = 3;
}
f(p);

p // 2

传入函数的原始值的地址,在函数内部修改参数,将会影响到原始值。

var obj = { p: 1 };

function f(o) {
  o.p = 2;
}
f(obj);

obj.p // 2

如果函数内部修改的,不是参数对象的某个属性,而是替换掉整个参数,这时不会影响到原始值。

var obj = [1, 2, 3];

function f(o) {
  o = [2, 3, 4];
}
f(obj);

obj // [1, 2, 3]

同名参数以后面那个为准

function f(a, a) {
  console.log(a);
}
f(1, 2) // 2
function f(a, a) {
  console.log(a);
}
f(1) // undefined
function f(a, a) {
  console.log(arguments[0]);
}
f(1) // 1

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

arguments 正常模式 严格模式

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

arguments很像数组,但它是一个对象。数组专有的方法(比如slice和forEach),不能在arguments对象上直接使用。解决方法是将arguments转为真正的数组。 下面是两种常用的转换方法:slice方法和逐一填入新数组

var args = Array.prototype.slice.call(arguments);

// 或者
var args = [];
for (var i = 0; i < arguments.length; i++) {
  args.push(arguments[i]);
}
闭包

闭包就是将函数内部和函数外部连接起来的一座桥梁。

  • 函数内部可以直接读取全局变量。
  • 函数外部无法读取函数内部声明的变量。 JavaScript 语言特有的"链式作用域"结构,父对象的所有变量,对子对象都是可见的,反之则不成立。
通过闭包 在函数外部获取函数内部的变量
function f1() {
  var n = 999;
  function f2() {
    console.log(n);
  }
  return f2;
}

var result = f1();
result(); // 999

闭包的最大用处有两个,一个是可以读取函数内部的变量,另一个就是让这些变量始终保持在内存中,即闭包可以使得它诞生环境一直存在。

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

var inc = createIncrementor(5);

inc() // 5
inc() // 6
inc() // 7

闭包的另一个用处,是封装对象的私有属性和私有方法

function Person(name) {
  var _age;
  function setAge(n) {
    _age = n;
  }
  function getAge() {
    return _age;
  }

  return {
    name: name,
    getAge: getAge,
    setAge: setAge
  };
}

var p1 = Person('张三');
p1.setAge(25);
p1.getAge() // 25

滥用闭包,会造成网页的性能问题

function这个关键字即可以当作语句,也可以当作表达

// 语句
function f() {}

// 表达式
var f = function f() {}

当作表达式时,函数可以定义后直接加圆括号调用。

var f = function f(){ return 1}();
f // 1

避免了污染全局变量写法(如写法二所示)

// 写法一
var tmp = newData;
processData(tmp);
storeData(tmp);

// 写法二
(function () {
  var tmp = newData;
  processData(tmp);
  storeData(tmp);
}());
eval() 命令
  • eval命令接受一个字符串作为参数,并将这个字符串当作语句执行。
  • 引擎只能分辨eval()这一种形式是直接调用,不是直接调用,都属于别名调用,别名调用作用域都是全局作用域。
  • 少用 慎用。
数组/数组/数组

数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始),整个数组用方括号表示。

var arr = ['a', 'b', 'c'];

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

本质上,数组属于一种特殊的对象。typeof运算符会返回数组的类型是object

typeof [1, 2, 3] // "object"

Object.keys(arr) 会返回数组的的所有键名

由于数组成员的键名是固定的(默认总是0、1、2...),因此数组不用为每个元素指定键名,而对象的每个成员都必须指定键名。JavaScript 语言规定,对象的键名一律为字符串,所以,数组的键名其实也是字符串。之所以可以用数值读取,是因为非字符串的键名会被转为字符串。

数组成员只能用方括号arr[0]表示(方括号是运算符,可以接受数值)

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

length属性是可写的。如果人为设置一个小于当前成员个数的值,该数组的成员数量会自动减少到length设置的值。

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

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

清空数组的一个有效方法,就是将length属性设为0。

var arr = [ 'a', 'b', 'c' ];

arr.length = 0;
arr // []

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

var a = ['a'];

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

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

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

var a = [];

a['p'] = 'abc';
a.length // 0

a[2.1] = 'abc';
a.length // 0

length属性的值就是等于最大的数字键加1,而这个数组没有整数键,所以length属性保持为0。

####### in 运算符 检查某个键名是否存在的运算符in,适用于对象,也适用于数组。

var arr = [ 'a', 'b', 'c' ];
2 in arr  // true
'2' in arr // true
4 in arr // false
for...in 循环和数组的遍历

for...in不仅会遍历数组所有的数字键,还会遍历非数字键。

var a = [1, 2, 3];
a.foo = true;

for (var key in a) {
  console.log(key);
}
// 0
// 1
// 2
// foo

数组的遍历可以考虑使用for循环或while循环。

var a = [1, 2, 3];

// for循环
for(var i = 0; i < a.length; i++) {
  console.log(a[i]);
}

// while循环
var i = 0;
while (i < a.length) {
  console.log(a[i]);
  i++;
}

//逆向遍历
var l = a.length;
while (l--) {
  console.log(a[l]);
}

数组的forEach方法

var colors = ['red', 'green', 'blue'];
colors.forEach(function (color) {
  console.log(color);
});
// red
// green
// blue

数组的空位不影响length属性。

var a = [1, , 1];
a.length // 3

如果最后一个元素后面有逗号,并不会产生空位,不影响最终结果。

数组的空位是可以读取的,返回undefined。

var a = [, , ,];
a[1] // undefined

delete命令删除一个数组成员,会形成空位,并且不会影响length属性。

var a = [1, 2, 3];
delete a[1];

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

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

var a = [, , ,];

a.forEach(function (x, i) {
  console.log(i + '. ' + x);
})
// 不产生任何输出

for (var i in a) {
  console.log(i);
}
// 不产生任何输出

Object.keys(a)
// []

如果某个位置是undefined,遍历的时候就不会被跳过。

var a = [undefined, undefined, undefined];

a.forEach(function (x, i) {
  console.log(i + '. ' + x);
});
// 0. undefined
// 1. undefined
// 2. undefined

for (var i in a) {
  console.log(i);
}
// 0
// 1
// 2

Object.keys(a)
// ['0', '1', '2']

空位就是数组没有这个元素,所以不会被遍历到,而undefined则表示数组有这个元素,值是undefined,所以遍历不会跳过。

类似数组的对象

如果一个对象的所有键名都是正整数或零,并且有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属性。只要有length属性,就可以认为这个对象类似于数组。但是有一个问题,这种length属性不是动态值,不会随着成员的变化而变化。

var obj = {
  length: 0
};
obj[3] = 'd';
obj.length // 0

典型的“类似数组的对象”是函数的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

上面代码包含三个例子,它们都不是数组(instanceof运算符返回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方法。

// forEach 方法
function logArgs() {
  Array.prototype.forEach.call(arguments, function (elem, i) {
    console.log(i + '. ' + elem);
  });
}

// 等同于 for 循环
function logArgs() {
  for (var i = 0; i < arguments.length; i++) {
    console.log(i + '. ' + arguments[i]);
  }
}

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

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

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

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

对象 函数 数组 编程非常 多读多练习 以上学习整理于 阮一峰教程 更详细内容可直接访问

彼特城博客
请先登录后发表评论
  • latest comments
  • 总共0条评论