RYF javascript笔记1

作者: 暗夜的怒吼 | 来源:发表于2016-05-15 21:26 被阅读55次

标签：我的笔记

---学习资料：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）

两个特殊值null和undefined

2.2.2　typeof运算符

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

typeof运算符
instanceof运算符
Object.prototype.toString方法

原始类型分别返回number、string、boolean
函数返回function
undefined返回undefined

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

if (typeof v === "undefined"){
    // ...
}

除此以外，都返回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　精度和取值范围

整数在绝对值<=2⁵³(Math.pow(2, 53))内的都可以精确表示。
浮点数取值范围在2¹⁰²⁴到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）是按次序排列的一组值，单个值称为元素。

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

例如：

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('无论是否出错都执行');
}

RYF javascript笔记1

1. 导论

2. 基本语法

2.1 基本句法和变量

2.1.1 语句

2.1.2 变量

2.1.3 变量提升

2.1.4 标识符

2.1.5 注释

2.1.6 区块

2.1.7 条件语句

a. if

b. switch

2.1.8 循环语句

a. while循环

b. for循环

c. do...while循环

d. break语句和continue语句

e. 标签（label）

2.1.9 结尾的分号

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

b. 分号的自动添加

2.2 数据类型

2.2.1 概述

2.2.2 typeof运算符

区分数组和对象

2.2.3 null和undefined

2.2.4 布尔值

2.2.5 类型转换

a. 强制转换

Number函数

String函数

Boolean函数

b. 自动转换

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

2.3 运算符

2.3.1 算数运算符

2.3.2 赋值运算符

2.3.2 比较运算符

严格相等运算符

相等运算符

布尔运算符

其他运算符

运算顺序

2.4 数值

2.4.1 精度和取值范围

2.4.2 数值的表示法

2.4.3 特殊数值

2.4.4 与数值相关的全局方法

2.5 字符串

2.5.1 概述

转义

字符串与数组

2.5.2 字符集

2.5.3 Base64转码

2.6 对象

2.6.1 概述

2.6.1.1 生成方法

2.6.1.2 读取属性

2.6.1.3 检查变量是否声明

2.6.1.4 写入属性

2.6.1.5 查看所有属性（Object.keys）

2.6.1.6 属性的删除（delete）

2.6.1.7 对象的引用

2.6.1.8 in运算符

2.6.1.9 for...in循环

2.6.2 类似数组的对象

2.6.3 with语句(不建议使用)

2.7 数组

2.7.1 数组的定义

2.7.2 数组与对象的关系

2.7.3 length属性

2.7.4 数组的空位

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

2.7.6 Array构造函数

2.8 函数

2.8.1 概述

2.8.1.1 函数的声明

2.8.1.2 圆括号运算符和return语句

2.8.1.3 第一等公民

2.1　基本句法和变量

2.1.1　语句

2.1.2　变量

2.1.3　变量提升

2.1.4　标识符

2.1.5　注释

2.1.6　区块

2.1.7　条件语句

2.1.8　循环语句

2.1.9　结尾的分号

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

b.　分号的自动添加

2.2　数据类型

2.2.1　概述

2.2.2　typeof运算符

2.2.3　null和undefined

2.2.4　布尔值

2.2.5　类型转换

2.3　运算符

2.3.1　算数运算符

2.3.2　赋值运算符

2.3.2　比较运算符

2.4　数值

2.4.1　精度和取值范围

2.4.2　数值的表示法

2.4.3　特殊数值

2.4.4　与数值相关的全局方法

2.5　字符串

2.5.1　概述

2.5.2　字符集

2.5.3　Base64转码

2.6　对象

2.6.1　概述

2.6.1.1　生成方法

2.6.1.2　读取属性

2.6.1.3　检查变量是否声明

2.6.1.4　写入属性

2.6.1.5　查看所有属性（Object.keys）

2.6.1.6　属性的删除（delete）

2.6.1.7　对象的引用

2.6.1.8　in运算符

2.6.1.9　for...in循环

2.6.2　类似数组的对象

2.6.3　with语句(不建议使用)

2.7　数组

2.7.1　数组的定义

2.7.2　数组与对象的关系

2.7.3　length属性

2.7.4　数组的空位

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

2.7.6　Array构造函数

2.8　函数

2.8.1　概述

2.8.1.1　函数的声明

2.8.1.2　圆括号运算符和return语句

2.8.1.3　第一等公民

2.8.1.4　函数名的提升

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

2.8.1.6　name属性

2.8.2　函数作用域

2.8.2.1　定义

2.8.2.2　函数内部的变量提升

2.8.3　参数

2.8.3.1　概述

2.8.3.2　参数的省略

2.8.3.3　默认值

2.8.3.4　传值方式

2.8.3.5　同名参数

2.8.3.6　arguments对象

2.8.4　函数的其他知识点

2.8.4.1　闭包

2.8.4.2　立即调用的函数表达式（IIFE）

2.8.5　eval命令

2.9　错误处理机制

2.9.1　Error对象js

2.9.2　JavaScript的原生错误类型

2.9.3　自定义错误

2.9.4　throw语句

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