RYF javascript笔记1

96
暗夜的怒吼
2016.05.15 21:26* 字数 9240

标签: 我的笔记

---学习资料:http://javascript.ruanyifeng.com/

1. 导论

  • JavaScript的发明目的,就是作为浏览器的内置脚本语言,为网页开发者提供操控浏览器的能力。

  • 近年来,JavaScript的使用范围,慢慢超越了浏览器,正在向通用的系统语言发展。

  • “任何能够用JavaScript实现的应用,最终都必将用JavaScript实现。”

2. 基本语法

2.1 基本句法和变量

2.1.1 语句

  • JavaScript程序的执行单位为行(line),一般一行就是一个语句。

    var a = 1 + 3 ;

这是一条语句,其中“1+3”叫做表达式。

  • 语句和表达式的区别在于:前者主要为了进行某种操作,后者则是为了得到返回值

  • 语句以分号结尾表达式不需要分号结尾,否则会变成无任何意义的语句),一个分号就表示一个语句结束。多个语句可以写在一行内。

  • 分号前面可以没有任何内容;,这叫做空语句。

2.1.2 变量

  • 变量是对“值”的引用,变量有声明和赋值两个步骤。

    var a = 1;

相当于:

var a;
a = 1;
  • 只声明变量而不赋值,则该变量的值为undefined。

    var a;
    a //undefined

  • 不声明而直接使用会报错:

    x //ReferenceError: x is not defined

  • JavaScript允许省略var,这样创建的是全局变量,建议总是使用var。

2.1.3 变量提升

  • JavaScript引擎的工作方式:先解析代码,将所有的变量声明提升(hoisting)到代码的头部,再一行一行地运行。

比如:

console.log(a); //undefined
var a = 1; //var a;被提升

上面代码不会打印出1,但不会报错。因为存在变量提升,所以真正运行的是:

var a;
console.log(a);
a = 1;
  • 请注意,变量提升只对var命令声明的变量有效,如果变量不是用var命令声明的就不会发生变量提升。因为JavaScript引擎将其视为对顶层对象的b属性进行赋值。

比如:

console.log(b); //ReferenceError: b is not defined
b = 1; //没有变量声明被提升

2.1.4 标识符

  • 标识符用来识别具体对象。最常见的标识符就是变量名和函数名。
  • JavaScript语言的标识符对大小写敏感。
  • 标识符的命名规则:
  • 第1个字符可以是任意Unicode字母,以及美元符号($)和下划线(_)。
  • 其它字符,还可以用数字。
  • JavaScript的保留字不能用作标识符。
  • 保留字有:var、void、class、if、for、new、null、true、return 等。
  • 还有特别含义的标识符:Infinity、NaN、undefined。

2.1.5 注释

  • 单行注释,用//起头
  • 多行注释,放在/* 和 */之间

比如:

// 单行注释
/*
 多行
 注释
*/

2.1.6 区块

  • 一组大括号包起来的多条语句,称为“区块”(block)。

  • 与大多数编程语言不一样,JavaScript的区块不构成单独的作用域(scope)。

比如:

{
    var a = 1;
}
a // 1

类似的C#代码则会报错:

{
    var a = 1;
}
Console.WriteLine(a); //当前上下文中不存在名称“a”

2.1.7 条件语句

a. if

if (m === 3) 
  m += 1;

if (m === 0) {
    // ...
} else if (m === 1) {
   // ...
} else {
   // ...
}

else代码块总是跟随离自己最近的那个if语句。

b. switch

  • 建议case内部必须有break
    因为case内部如果没有break就会接着执行下一个case部分(而且不判断case条件)。

  • switch语句部分和case语句部分,都可以使用表达式。

  • switch后面的表达式与case后面的表示式比较时,采用的是严格相等运算符(===),而不是相等运算符(==)。

这意味着比较时不会发生类型转换:

console.log(4=="4");
console.log(4==="4");
switch(1 + 3) {
    case "4":
        console.log("string 4");
        break;
    case 2 + 2:
        console.log("number 4");
    case 2 + 3:
        console.log("number 5");
        break;
    default:
        console.log("default");
}

上面代码会输出:
true
false
number 4 //因为4==="4"是false,而4===4是true
number 5 //因为case 2 + 2 语句内部没有使用break

  • switch结构不利于代码重用,往往可以用对象形式重写。

比如:

var o = {
    banana: function (){ console.log("banana"); },
    apple: function (){ console.log("apple"); },
    default: function (){ console.log("default"); }
};
var fruit="apple";
if (o[fruit]){
    o[fruit]();
} else {
    o['default']();
}

输出apple

2.1.8 循环语句

a. while循环

如果条件为真,就不断循环。

var i = 0;
while (i<100){
    console.log('i当前为:' + i);
    i++;
}

b. for循环

for语句分成三步:

  • 初始化(initialize):确定循环的初始值,只执行一次;

  • 检测(test):检测循环条件,只要为真就进行后续操作;

  • 递增(increment):当循环体执行完毕后,执行递增操作,然后重新检测。

    for (var i=0; i < arr.length; i++) {
    console.log(arr[i]);
    }

for语句表达式的三个部分可以省略任何一个或全部省略。

var i=0;
for (; i < 10; ) {
    console.log(i++);
}

所有for循环,都可以改写成while循环。

c. do...while循环

  • do...while循环与while循环类似,唯一的区别就是先运行一次循环体,然后判断循环条件。
  • 另外,while语句后面的分号不能省略:

至少运行一次,这是这种结构最大的特点。

do { 
    statement
} while(expression);

d. break语句和continue语句

  • break语句用于跳出代码块或循环。
  • continue语句用于立即终止本次循环,开始下一次循环。

e. 标签(label)

不建议使用。

2.1.9 结尾的分号

a. 不使用分号结尾的语句

}结尾的语句不需要分号结束,如:for、while、if, switch, try、函数
因此,do...while需要分号结束

b. 分号的自动添加

JavaScript引擎在应该写却没写的情况下,会自动添加分号。
但这难以预测,因此不应省略该有的分号。

2.2 数据类型

2.2.1 概述

六个类别和两个特殊值。

原始类型:

数值(number)    //整数和小数
字符串(string)
布尔值(boolean)

合成类型:

对象(object)
数组(array)
函数(function)

两个特殊值nullundefined

2.2.2 typeof运算符

JavaScript有三种方法,可以确定一个值到底是什么类型。

typeof运算符
instanceof运算符
Object.prototype.toString方法
  1. 原始类型分别返回number、string、boolean
  2. 函数返回function
  3. undefined返回undefined

利用这一点来检查一个没有声明的变量,而不报错。

if (typeof v === "undefined"){
    // ...
}
  1. 除此以外,都返回object。

对象、数组、null

typeof window // "object"
typeof {} // "object"
typeof [] // "object"
typeof null // "object"

说明数组本质上只是一种特殊的对象。
null的类型也是object,这是历史原因造成的,它是一个类似于undefined的特殊值。

区分数组和对象

console.log(({}) instanceof Array); // false
console.log([] instanceof Array); // true
console.log(({}) instanceof Object); // true
console.log([] instanceof Object); // true

2.2.3 null和undefined

  • 几乎等价。

如:

console.log(undefined == null); // true
console.log(undefined === null); // false
  • 大致可以区分:
    null表示"没有对象",即该处不应该有值。
    undefined表示"缺少值",即此处应该有值,但是还未定义。

  • null的特殊之处在于:typeof null 结果为Object

2.2.4 布尔值

如果JavaScript预期某个位置应该是布尔值,会将该位置上现有的值自动转为布尔值。

转换规则是除了下面6个值被转为false,其他值都视为true。

  • undefined
  • null
  • false
  • 0
  • NaN
  • ""(空字符串)

2.2.5 类型转换

JavaScript是一种动态类型语言,变量是没有类型的,可以随时赋予任意值。但是,数据本身和各种运算是有类型的,因此运算时变量需要转换类型。

a. 强制转换

强制转换主要指使用Number、String和Boolean三个构造函数,手动将各种类型的值,转换成数字、字符串或者布尔值。

Number函数

1、原始类型:

  • 数值:转换后还是原来的值。
  • 字符串:如果可以被解析为数值,则转换为相应的数值,否则得到NaN。空字符串转为0。
  • 布尔值:true转成1,false转成0。
  • undefined:转成NaN。 null:转成0。

Number函数和parseInt函数的区别:

  • parseInt逐个解析字符,而Number函数整体转换字符串的类型。
  • Number会忽略八进制的前导0,而parseInt不会。
  • Number函数会自动过滤一个字符串前导和后缀的空格。

示例:

parseInt('011') // 9
parseInt('42 cats') // 42
parseInt('0xcafebabe') // 3405691582

Number('011') // 11
Number('42 cats') // NaN
Number('0xcafebabe') // 3405691582

2、对象

  • 1.先调用对象自身的valueOf方法,如果该方法返回原始类型的值(数值、字符串和布尔值),则直接对该值使用Number方法,不再进行后续步骤。
  • 2.如果valueOf方法返回复合类型的值,再调用对象自身的toString方法,如果toString方法返回原始类型的值,则对该值使用Number方法,不再进行后续步骤。
  • 3.如果toString方法返回的是复合类型的值,则报错。
String函数

1、原始类型:

  • 数值:转为相应的字符串。
  • 字符串:转换后还是原来的值。
  • 布尔值:true转为“true”,false转为“false”。
  • undefined:转为“undefined”。 null:转为“null”。

2、对象:

  • 先调用toString方法,如果toString方法返回的是原始类型的值,则对该值使用String方法,不再进行以下步骤。
  • 如果toString方法返回的是复合类型的值,再调用valueOf方法,如果valueOf方法返回的是原始类型的值,则对该值使用String方法,不再进行以下步骤。
  • 如果valueOf方法返回的是复合类型的值,则报错。

String方法的这种过程正好与Number方法相反。

Boolean函数

1、原始类型:

以下六个值的转化结果为false,其他的值全部为true。

  • undefined
  • null
  • -0
  • +0
  • NaN
  • ''(空字符串)

2、对象:

所有对象的布尔值都是true,甚至连false对应的布尔对象也是true。
空对象{}和空数组[]也会被转成true。

Boolean(new Boolean(false)) // true
Boolean([]) // true
Boolean({}) // true

b. 自动转换

有时JavaScript会自动转换数据类型,比如:
不同类型的数据进行互相运算;
对非布尔值类型的数据求布尔值,等。

1、自动转换为布尔值

除了以下6个值,其他都是自动转为true:

  • undefined
  • null
  • -0
  • +0
  • NaN
  • ''(空字符串)

:

if (!undefined && !null && !0 && !NaN && !''){
    console.log('true');
}
// true

2、自动转换为字符串
字符串的自动转换,主要发生在加法运算时。

'5' + 1 // '51'
'5' + true // "5true"
'5' + {} // "5[object Object]"
'5' + [] // "5"
'5' + function (){} // "5function (){}"
'5' + undefined // "5undefined"
'5' + null // "5null"

3、自动转换为数值

当JavaScript遇到预期为数值的地方,就会将参数值自动转换为数值,转换规则与“强制转换为数值”相同。

除了加法运算符有可能把运算子转为字符串,其他运算符都会把两侧的运算子自动转成数值。

'5' - '2' // 3
'5' * '2' // 10
true - 1  // 0
false - 1 // -1
'1' - 1   // 0
'5' * []    // 0
false / '5' // 0
'abc' - 1   // NaN

JavaScript的两个一元算术运算符也会把运算子自动转为数值。

+'abc' // NaN
-'abc' // NaN
+true // 1
-false // 0

c. 加法运算符的类型转化

加法运算符(+)需要特别讨论,因为它可以完成两种运算(加法和字符连接),所以不仅涉及到数据类型的转换,还涉及到确定运算类型。

2、三种情况

  • 运算子之中有字符串

则另一个被转为字符串,然后执行字符串连接运算。

  • 运算子都为数值或布尔值,则执行加法运算

布尔值转为数值(true为1,false为0)。

true + 5 // 6 
true + true // 2
  • 运算子之中存在对象

太复杂,略。

2.3 运算符

2.3.1 算数运算符

  • 加法运算符(Addition):x + y
    加法运算符(+)需要注意的地方是,它除了用于数值的相加,还能用于字符串的连接。

  • 减法运算符(Subtraction): x - y

  • 乘法运算符(Multiplication): x * y

  • 除法运算符(Division):x / y

  • 余数运算符(Remainder):x % y

运算结果的正负号由第一个运算子的正负号决定(有负数的话建议先使用绝对值)

12 % 5 // 2
-1 % 2 // -1
1 % -2 // 1

// 判断偶数
function isOdd(n) {
    return Math.abs(n % 2) === 1;
}
  • 自增运算符(Increment):++x 或者 x++

  • 自减运算符(Decrement):--x 或者 x--

  • 求负运算符(Negate):-x

  • 数值运算符(Convert to number): +x

作用是将任何值转为数值(与Number函数作用相同)。

+true // 1
+[] // 0
+{} // NaN

2.3.2 赋值运算符

=、 += 、 -= 、 *= 、 /= 、 %= 、 >>= 、 <<= 、 >>>= 、 &= 、 |= 、 ^=

2.3.2 比较运算符

== 相等
=== 严格相等
!= 不相等
!== 严格不相等
< 小于
<= 小于或等于

大于
= 大于或等于

相等运算符(==)比较两个“值”是否相等,严格相等运算符(===)比较它们是否为“同一个值”。
两者的一个重要区别是,如果两个值不是同一类型,严格相等运算符(===)直接返回false,而相等运算符(==)会将它们转化成同一个类型,再用严格相等运算符进行比较。

我们先看严格相等运算符。

严格相等运算符

1、不同类型的值

如果两个值的类型不同,直接返回false。

2、同一类的原始类型值

同一类型的原始类型的值(数值、字符串、布尔值)比较时,值相同就返回true,值不同就返回false。

1 === 0x1 // true
  • NaN与任何值都不相等(包括自身)。
  • 正0等于负0。

3、同一类的复合类型值
复合类型(对象、数组、函数)的数据比较时,是比较它们是否指向同一个对象(内存地址)。

({}) === {} // false
[] === [] // false
(function (){}) === function (){} // false

var v1 = {};
var v2 = v1;
v1 === v2 // true

4、undefined和null

undefined 和 null 与自身严格相等。

undefined === undefined // true
null === null // true

由于变量声明后默认值是undefined,因此两个只声明未赋值的变量是相等的。

var v1;
var v2;
v1 === v2 // true

相等运算符

相等运算符在比较相同类型的数据时,与严格相等运算符完全一样。

在比较不同类型的数据时,相等运算符会先将数据进行类型转换,然后再用严格相等运算符比较。类型转换规则如下:

1、原始类型的值

原始类型的数据会转换成数值类型再进行比较。

1 == true // true
"true" == true // false
'' == 0 // true
'1' == true  // true

// 注意:字符串转为数字时,省略前置和后置的空格
'\n  123  \t' == 123 // true
'  123  ' == 123 // true
' 123' == 123 // false

2、对象与原始类型值比较

对象(这里指广义的对象,包括数值和函数)与原始类型的值比较时,对象转化成原始类型的值,再进行比较。

[1] == 1 // true
[1] == "1" // true
[1] == true // true

3、undefined和null

undefined和null与其他类型的值比较时,结果都为false,它们互相比较时结果为true。

false == null // false
0 == null // false

undefined == null // true

4、相等运算符的缺点
相等运算符隐藏的类型转换,会带来一些违反直觉的结果。

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true

' \t\r\n ' == 0     // true

上面这些表达式都很容易出错,因此不要使用相等运算符(==),最好只使用严格相等运算符(===)。

布尔运算符

布尔运算符用于将表达式转为布尔值。

1、取反运算符(!)

对于非布尔值的数据,取反运算符会自动将其转为布尔值。规则是,以下六个值取反后为true,其他值取反后都为false。

undefined
null
false
0(包括+0和-0)
NaN
空字符串("")

两次取反就是将一个值转为布尔值的简便写法。

!!x
// 等同于
Boolean(x)

2、且运算符(&&)
“短路”机制

3、或运算符(||)

4、三元条件运算符( ? :)

"t" ? true : false // true

5、位运算符

5.1 简介
或运算(or)|
与运算(or)&
否运算(not)~
异或运算(xor)ˆ
左移运算(left shift)<<
右移运算(right shift)>>
带符号位的右移运算(zero filled right shift)>>>

略。

其他运算符

1、圆括号运算符() 表示求值:

有2种用法:
把表达式放在圆括号之中,作用是求值;
跟在函数的后面,作用是调用函数。

(2) // 2
    
function f(){return 1;}
(f) // function f(){return 1;}
f() // 1

// 语句没有返回值所以不能放在括号里
(var a =1) // SyntaxError: Unexpected token var

2、void运算符 作用是执行一个表达式,然后返回undefined。

void (0) // undefined

这个运算符主要是用在超级链接中插入代码,目的是返回undefined可以防止网页跳转。

javascript:void window.open("http://example.com/")

比如:

<a href="#" onclick="f();return false;">文字</a>

void运算符可以取代上面两种写法。

<a href="javascript:void(0)" onclick="f();">文字</a>

3、逗号运算符

逗号运算符用于对两个表达式求值,并返回后一个表达式的值。

"a", "b" // "b"

var x = 0;
var y = (x++, 10);
x // 1
y // 10

运算顺序

运算符是有优先级的
圆括号的优先级最高(建议总是使用圆括号)

左结合与右结合
大部分运算符是左结合,
少数是右结合,最主要的是:=和三元运算符(?:)。

w = x = y = z;
q = a?b:c?d:e?f:g;

相当于:

w = (x = (y = z)); 
q = a?b:(c?d:(e?f:g));

2.4 数值

数字都以64位浮点数形式储存。

2.4.1 精度和取值范围

整数在绝对值<=253(Math.pow(2, 53))内的都可以精确表示。
浮点数取值范围在21024到2-1024(开区间)之间。

由于浮点数不是精确的值,所以涉及小数的比较和运算要特别小心。

0.1 + 0.2 === 0.3
// false

0.3 / 0.1
// 2.9999999999999996

2.4.2 数值的表示法

可以用字面形式直接表示,也可以采用科学计数法表示。

123e3 // 123000
123e-3 // 0.123

正常情况下,所有数值都为十进制。
十六进制必须以0x或0X开头。
八进制数必须以0开头(八进制很容易造成混乱)。

2.4.3 特殊数值

1、零
JavaScript提供零的3种写法:0、+0、-0。它们是等价的。
但是,如果正零和负零分别当作分母,它们返回的值是不相等的。

(1/+0) === (1/-0) // false

因为除以正零得到+Infinity,除以负零得到-Infinity,这两者是不相等的(关于Infinity详见后文)。

2、NaN
NaN表示“非数字”(Not a Number)。
NaN不等于任何值,包括它本身。
NaN与任何数(包括它自己)的运算,得到的都是NaN。

isNaN函数可以用来判断一个值是否为NaN。
但是,isNaN只对数值有效,如果传入其他值,会被先转成数值。也就是说,isNaN为true的值,有可能不是NaN,而是一个字符串。

isNaN("Hello") // true

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

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

或者利用NaN是唯一不等于自身的值这个特点,进行判断。

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

3、Infinity
Infinity表示“无穷”。除了0除以0得到NaN,其他任意数除以0,得到Infinity。

1 / -0 // -Infinity
1 / +0 // Infinity

运算结果超出JavaScript可接受范围,也会返回无穷。

JavaScript的数学运算几乎没有可能抛出错误。

isFinite函数返回一个布尔值,检查某个值是否为正常值,而不是Infinity。

isFinite(Infinity) // false
isFinite(NaN) // false

2.4.4 与数值相关的全局方法

1、parseInt
将字符串或小数转化为整数。字符串头部空格会被自动去除。一旦遇到不能转化的字符就停止继续转化。
如果字符串的第一个字符不能转化为数字(正负号除外),返回NaN。

parseInt('   1a23') // 1

parseInt("abc") // NaN
parseInt(".3") // NaN

parseInt还可以接受第二个参数(2到36之间),表示被解析的值的进制。这意味着,可以用parseInt方法进行进制的转换。

parseInt(1000, 2) // 8

2、parseFloat
将字符串转为浮点数。同样,字符串头部空格会被自动去除。一旦遇到不能转化的字符就停止继续转化。
如果字符串的第一个字符不能转化为浮点数,返回NaN。

parseFloat("   3.14"); // 3.14

parseFloat("a2") // NaN
parseFloat("") // NaN

parseFloat将空字符串转为NaN。

parseFloat的转换结果不同于Number函数。

parseFloat(true)  // NaN
Number(true) // 1
parseFloat(null) // NaN
Number(null) // 0
parseFloat('') // NaN
Number('') // 0
parseFloat('123.45#') // 123.45
Number('123.45#') // NaN

2.5 字符串

2.5.1 概述

字符串默认只能写在一行内,如果必须分成多行,可以在每一行的尾部使用反斜杠(ECMAScript 5新添加),而且反斜杠的后面必须是换行符,不能有其他字符(比如空格)。

var longString = "Long \
string";

连接运算符(+)可以连接多个单行字符串。

var longString = "Long " + "string";

转义

\n 换行符
\r 回车键
\t 制表符
\' 单引号
\" 双引号
\\ 反斜杠

字符串与数组

字符串可以被视为字符数组,因此可以使用数组的方括号运算符。

'hello'[0] // "h"
'hello'[5] // undefined

但是,实际上,字符串是类似数组的对象,且无法改变字符串之中的单个字符。length属性也是无法改变的。

var s = 'hello';

delete s[0];
s[1] = 'a';
s.length = 3;
s // "hello"

字符串内部的单个字符无法改变和增删,这些操作会默默地失败。字符串的length也无法改变,但不会报错。

字符串也无法添加新属性:

var s = "Hello World";
s.x = 123;
s.x // undefined

2.5.2 字符集

JavaScript内部所有字符都用Unicode表示。所有字符都可以写成"\uxxxx"的形式。

var s = '\u00A9';
s // "©"

注意:UTF-16有两种长度:对于U+0000到U+FFFF之间的字符,长度为16位(即2个字节);对于U+10000到U+10FFFF之间的字符,长度为32位(即4个字节)。

var s = "\uD834\uDF06"

s // "𝌆"
s.length // 2
s.charAt(0) // ""
s.charCodeAt(0) // 55348

由于JavaScript引擎(ES5)不能自动识别编号大于0xFFFF的Unicode字符,导致所有字符串处理函数遇到这类字符,都会产生错误的结果,所以必须判断字符是否落在0xD800到0xDFFF这个区间。

下面是能够正确处理字符串遍历的函数:

function getSymbols(string) {
  var length = string.length;
  var index = -1;
  var output = [];
  var character;
  var charCode;
  while (++index < length) {
    character = string.charAt(index);
    charCode = character.charCodeAt(0);
    if (charCode >= 0xD800 && charCode <= 0xDBFF) {
      output.push(character + string.charAt(++index));
    } else {
      output.push(character);
    }
  }
  return output;
}

替换(String.prototype.replace)、截取子字符串(String.prototype.substring, String.prototype.slice)等其他字符串操作,都必须做类似的处理。

2.5.3 Base64转码

window.btoa("Hello World")
// "SGVsbG8gV29ybGQ="
window.atob("SGVsbG8gV29ybGQ=")
// "Hello World"

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

window.btoa('你好')
// InvalidCharacterError: An invalid or illegal character was specified, such as in an XML name.

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

function b64Encode( str ) {
    return window.btoa(unescape(encodeURIComponent( str )));
}
 
function b64Decode( str ) {
    return decodeURIComponent(escape(window.atob( str )));
}

// 使用方法
b64Encode('你好') // "5L2g5aW9"
b64Decode('5L2g5aW9') // "你好"

2.6 对象

2.6.1 概述

所谓对象,就是一种无序的数据集合,由若干个“键值对”(key-value)构成。
JavaScript的所有数据都可以被视为对象。

var o = {
    id: 123,
    "na me": "Hello"
};

键名加不加引号都可以。但是,如果键名不符合标识名的条件(比如包含数字、字母、下划线以外的字符,或者第一个字符为数字),也不是正整数,则必须加上引号。

如果一个属性的值为函数,通常把这个属性称为“方法”。

2.6.1.1 生成方法

var o1 = {};
var o2 = new Object();
var o3 = Object.create(null);

2.6.1.2 读取属性

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

var o = {
    id: "Hello",
    0.7: "World"
};

o.id // "Hello"
o["id"] // "Hello"
o["i" + "d"] // "Hello"
o["0.7"] // "World"
o[0.7] // "World"

注意,如果使用方括号运算符,键名必须放在引号里面,否则会被当作变量处理。但是,数字键可以不加引号,因为会被当作字符串处理。

2.6.1.3 检查变量是否声明

读取一个不存在的键,会返回undefined,而不是报错。
可以使用in运算符判断属性是否存在(也可以判断变量是否声明)。

"id" in o // true
0.8 in o // false
o in window // true

在浏览器环境,所有全局变量都是window对象的属性。

2.6.1.4 写入属性

同样使用:点运算符和方括号运算符。

o.p = "abc";
o["p"] = "abc";

JavaScript允许属性的“后绑定”,也就是说,你可以在任意时刻新增属性,没必要在定义对象的时候,就定义好属性。

var o = { p:1 };

// 等价于
var o = {};
o.p = 1;

2.6.1.5 查看所有属性(Object.keys)

Object.keys(o);
// ["id", "0.8"]

2.6.1.6 属性的删除(delete)

delete o.p // true
o.p // undefined

一旦使用delete命令删除某个属性,再读取该属性就会返回undefined,而且Object.keys方法返回的该对象的所有属性中,也将不再包括该属性。

注意:如果删除一个不存在的属性,delete不报错,而且返回true。

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

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

o.p // 123
delete o.p // false

另外,需要注意的是,delete命令只能删除对象本身的属性,不能删除继承的属性。delete命令也不能删除var命令声明的变量,只能用来删除对象的属性和方法。

2.6.1.7 对象的引用

如果不同的变量名指向同一个对象,那么它们都是这个对象的引用,都指向同一个内存地址。修改其中一个变量,会影响到其他所有变量。

var o1 = {};
var o2 = o1;

o1.a = 1;
o2.a // 1

这种引用只局限于对象,对于原始类型的数据则是值的拷贝。

2.6.1.8 in运算符

in运算符用于检查对象是否包含某个属性(注意,检查的是键名,不是键值)。

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

该运算符对数组也适用。

var a = ["hello", "world"];
0 in a // true
'0' in a // true

在JavaScript语言中,所有全局变量都是顶层对象(浏览器环境的顶层对象为window)的属性,因此可以用in运算符判断一个全局变量是否存在。

if ('x' in window) { return 1; }

in运算符对继承的属性也有效。

var o = new Object();
o.hasOwnProperty('toString')  // false
'toString' in o // true

in运算符只能用来检验可枚举(enumerable)的属性。

2.6.1.9 for...in循环

var o = {a:1, b:2, c:3};
for (i in o){
    console.log(o[i]);
}

for...in循环遍历的是对象所有可enumberable的属性,其中不仅包括定义在对象本身的属性,还包括对象继承的属性。

如果只想遍历对象本身的属性,可以使用hasOwnProperty方法做一个判断。

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

2.6.2 类似数组的对象

在js中,有些对象被称为“类似数组的对象”,它们可以使用length属性,但是它们并不是数组,无法使用一些数组的方法。

var a = {
    0:'a',
    1:'b',
    length:2
};
a[0] // 'a'
a.length // 3

变量a就是一个类似数组的对象,但它无法使用数组特有的一些方法,比如pop和push方法。而且,length属性不是动态值。

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

// arguments对象
function args() { for(var i=0;i<arguments.length;i++) alert(arguments[i]); }
args('a', 'b');

// DOM元素集
var elts = document.getElementsByTagName('h3');

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

通过函数的call方法,可以用slice方法将类似数组的对象,变成真正的数组

var arr = Array.prototype.slice.call("abc");

遍历类似数组的对象,可以采用for循环,也可以采用数组的forEach方法。

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

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

2.6.3 with语句(不建议使用)

with语句的作用是操作同一个对象的多个属性时,提供一些书写的方便。

o.p1 = 1;
o.p2 = 2;
// 等同于
with (o){
    p1 = 1;
    p2 = 2;
}

注意:在with区块内部依然是全局作用域。这意味着,如果你要在with语句内部,赋值对象某个属性,这个属性必须已经存在,否则你就是声明了一个全局变量(绑定对象不明确)。

2.7 数组

2.7.1 数组的定义

数组(array)是按次序排列的一组值,单个值称为元素。

  1. 编号从0开始。
  2. 可变长。可先定义再赋值。
  3. 元素可以是任何类型。

例如:

var arr = [];
arr[0] = {a:1}; // 对象
arr[1] = [1,2,3]; // 数组
arr[2] = function (){return true;}; // 函数

如果数组的元素还是数组,就形成了多维数组。

var a = [[1,2],[3,4],"x"];
console.log(a[0][0]);
console.log(a[2]);

2.7.2 数组与对象的关系

本质上,数组也属于对象。

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

上面代码表明,数组只是一种特殊的对象,所以typeof运算符返回数组的类型是object。

数组是字典结构的一个变种,它的键是0开始的整数。

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

上面代码分别用数值和字符串作为键名,结果都能读取数组。

需要注意的是,这一条在赋值时也成立,即如果一个值可以被转换为整数,则以该值为键名,等于以对应的整数为键名。

var a = [];
a[0] = 0;
a['1000'] = 'abc';
console.log(a.length); // 1001

对于数字的键名,不能使用点结构,所以arr.0的写法不合法。因此数组只能用方括号arr[0]表示。

2.7.3 length属性

  • 数组的length是一个动态的值。它是最大键值+1.
  • length属性是可写的。设置length可以改变数组的大小,空位都填充为undefined。
    如果设置length为不合法的值,JavaScript会报错。
  • 可以为数组添加属性(因为数组本质上是对象),但这不影响length的值

示例:

var a = [];
a[1] = 'abc';
a['10'] = 'abc'; //a.length是10
a.length=3; //a.length是3
console.log(a); // [undefined, "abc", undefined]
a.id="ddd"; //a.length是3
    
[].length = -1 // RangeError: Invalid array length
[].length = 'abc' // RangeError: Invalid array length

2.7.4 数组的空位

  • delete命令可以删除值,形成空位。
    注意:使用delete命令删除值,不影响length属性。

  • 空位通过空值生成,还是通过显式设为undefined生成,有细微的差别。

如果通过空值生成,使用数组的forEach方法或者for...in结构进行遍历,空位就会被跳过。

var a = [0,1,,3,undefined];
delete a[1];
console.log(a.length); // 5
a.forEach(function (x, i) { console.log(x) }) // 0,3,undefined 
for (var i in a){console.log(a[i])} // 0,3,undefined 

2.7.5 in运算符,for...in循环

  • in可以坚持是否存在某个键
    检查某个键是否存在的运算符in,适用于对象,也适用于数组。
  • for-in循环,可以遍历数组的所有元素
    注意:for-in会遍历数组所有的键,即使是非数字键。
  • 还可以用for或while遍历数组

示例:

var a = [0,,undefined];
console.log(0 in a); // true
console.log(1 in a); // false
console.log(2 in a); // true
a.id = function (){};
for (var i in a){console.log(a[i])} // 0,undefined,function (){} 
for(var i = 0; i < a.length; i++){console.log(a[i]);} // 0,undefined,undefined 

2.7.6 Array构造函数

数组还可以使用JavaScript内置的Array构造函数创建。

var a = new Array(2);
console.log(a); // [undefined, undefined]
var a = new Array(1,2);
console.log(a); // [1, 2]

2.8 函数

2.8.1 概述

2.8.1.1 函数的声明

1、function命令声明函数

function print(){
    // ...
}

2、函数表达式

var print = function (){
    // ...
};

采用函数表达式声明函数时,function命令后面不带有函数名。
如果加上函数名,该函数名只在函数体内部有效,在函数体外部无效。

3、Function构造函数

var add = new Function("x","y","return (x+y)");

最后一个参数是add函数的“函数体”,其他参数都是add函数的参数。

4、函数的重复声明

重复声明同一个函数,则后面的声明会覆盖前面的声明。
由于存在函数名的提升,所以前面的函数声明完全是无效的。

2.8.1.2 圆括号运算符和return语句

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

function add(x,y) {
    return x+y;
}

console.log(add(1,2,3)) // 3
console.log(add(1)) // NaN

return语句不是必需的,如果没有的话,该函数就不返回任何值,或者说返回undefined。

函数调用自身,这就是递归。

2.8.1.3 第一等公民

JavaScript的函数与其他数据类型处于同等地位,可以使用其他数据类型的地方就能使用函数。
比如,可以把函数赋值给变量和对象的属性,也可以当作参数传入其他函数,或者作为函数的结果返回。
这表示函数与其他数据类型的地方是平等,所以又称函数为第一等公民。

2.8.1.4 函数名的提升

JavaScript引擎将函数名视同变量名,所以采用function命令声明函数时,整个函数会被提升到代码头部。

f();
var f = function (){ alert("aa";) };

但是,如果采用赋值语句定义函数就会报错,因为提升的只是赋值语句左边的变量,函数并未被提升。

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

2.8.1.5 不能在条件语句中声明函数

不得在非函数的代码块中声明函数,最常见的情况就是if和try语句。
按照语言规范,这是不合法的。但是,实际情况是各家浏览器往往并不报错,能够运行。

2.8.1.6 name属性

大多数JavaScript引擎支持非标准的name属性。该属性返回紧跟在function关键字之后的那个函数名。

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

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

2.8.2 函数作用域

2.8.2.1 定义

Javascript只有两种作用域:一种是全局作用域,变量在整个程序中一直存在;另一种是函数作用域,变量只在函数内部存在。

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

var w = 1; 
var w2 = 1;
(function f(){
   w=2;
   var w2 = 2;
   var n = 1;
})();
console.log(w); // 2
console.log(w2); // 1
console.log(n); // ReferenceError: n is not defined

2.8.2.2 函数内部的变量提升

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

2.8.3 参数

2.8.3.1 概述

函数可以定义参数。
函数对象的length属性,返回函数定义中参数的个数。

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

2.8.3.2 参数的省略

函数调用时,提供多少参数都不会报错。被省略的参数的值就变为undefined。多的废弃。
没有办法只省略靠前的参数,想那样只有显式传入undefined。

f(undefined,1) 

2.8.3.3 默认值

如果要为参数设置默认值,可以使用方法:

function f(a){
    (a !== undefined && a != null)?(a = a):(a = 1);
    return a;
}
console.log(f('')); // ""
console.log(f(0)); // 0
console.log(f()); // 1
console.log(f(null)); // 1

因为undefined、0、空字符、null等的布尔值都是false。

2.8.3.4 传值方式

js的函数参数传递方式是值传递,这意味着,在函数体内修改参数值,不会影响到函数外部。
但是:对于复合类型的变量来说,属性值是通过地址读取的。所以在函数体内修改复合类型变量的属性值,会影响到函数外部。

var o = { p:1 };
function f(obj){
    obj.p = 2;
}
f(o);
o.p // 2

var a = [1,2,3];
function f(a){
    a[0]=4;
}
f(a);
a // [4,2,3]

如果需要对某个变量达到按址传递的效果,可以将它写成全局对象的属性。

var a = 1;
var b = 2;
function f(x,y){
    x *= 10;
    window[y] *= 10;
}
f(a,'b'); // 注意:第二个参数不能是b,这样的话函数f内会去找window["2"]这个属性。
console.log(a); // 1
console.log(b); // 20

2.8.3.5 同名参数

如果有同名的参数,则取最后出现的那个值。
但是用arguments可以取到正确的参数。

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

2.8.3.6 arguments对象

  • arguments可以在函数体内部读取所有参数
    也可设置,严格模式不允许这种用法。
  • arguments对象的length属性,表示函数调用时到底带几个参数
  • arguments对象的callee属性,返回它所对应的原函数
    (注意:不是那个指向函数的变量)。

示例:

var f = function f2(a) {
   console.log(arguments[0]); // a
   console.log(arguments[1]); // b
   console.log(arguments.length); // 3
   console.log(arguments.callee === f); // true
   console.log(arguments.callee === f2); // true
};
f("a","b","c");

2.8.4 函数的其他知识点

2.8.4.1 闭包

闭包是函数与其生成时所在的作用域对象的一种结合。

闭包可以读取函数内部变量,还可以使得内部变量记住上一次调用时的运算结果。

function f(start) {
    return function () { 
        return start++;
    }
}
var inc = f(5);
console.log(inc());  // 5
console.log(inc());  // 6
console.log(inc());  // 7

2.8.4.2 立即调用的函数表达式(IIFE)

(function(){ /* code */ }()); 
// 或者
(function(){ /* code */ })();

这两种写法都是以圆括号开头,引擎就会认为后面跟的是一个表示式,而不是函数定义。

2.8.5 eval命令

eval命令的作用是,将字符串当作语句执行。
放在eval中的字符串,应该有独自存在的意义,不能用来与eval以外的命令配合使用。

eval('var a = 1;');
eval('return;'); //报错

2.9 错误处理机制

2.9.1 Error对象js

一旦发生错误,js引擎会抛出一个Error对象的实例,然后程序就此中断。

Error对象有3个基本的属性:name、message、stack。

(function catchit() {
   try {
      throw new Error('出错了.'); // Error
   } catch(e) {
      console.log(e.name); // Error
      console.log(e.message); //出错了
      console.log(e.stack); // print stack trace
   }
})();

2.9.2 JavaScript的原生错误类型

Error对象是最一般的错误类型,还存在Error的6个派生对象。

  • SyntaxError是解析代码时发生的语法错误。
  • ReferenceError是引用一个不存在的变量时发生的错误。
  • TypeError是变量或参数不是预期类型时发生的错误。
    比如,对字符串、布尔值、数值等原始类型的值使用new命令。因为new命令的参数应该是一个构造函数。
  • RangeError是当一个值超出有效范围时发生的错误。
    主要有:一是数组长度为负数,二是Number对象的方法参数超出范围
  • URIError是URI相关函数的参数不正确时抛出的错误,主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。
  • EvalError是eval函数没有被正确执行时,会抛出EvalError错误。

示例:

var 1a; // SyntaxError 变量名错误
new Array(-1) // RangeError  数组长度为负
new 123 // TypeError 123不是函数
decodeURI('%2') // URIError

2.9.3 自定义错误

function UserError(message) {
   this.message = message || "默认信息";
   this.name = "UserError";
}
UserError.prototype = new Error();
UserError.prototype.constructor = UserError;

自定义一个错误对象UserError,让它继承Error对象。然:

new UserError("这是自定义的错误!");

2.9.4 throw语句

throw语句的作用是中断程序执行,抛出一个错误。它接受一个表达式作为参数。

throw "Error!"; 

2.9.5 try...catch结构和finally代码块

try {
    throw new Error('出错了!');
} catch (e) {
    console.log(e.name + ": " + e.message); 
    console.log(e.stack);  
}finally {
    console.log('无论是否出错都执行');
}

甚至可以省略catch代码块,只使用finally代码块。

try {
   ....
} finally {
   console.log('无论是否出错都执行');
}
随笔
Web note ad 1