web 前端3 javascript基础

JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。

一、如何编写

1、JavaScript代码存在形式

 

 

1
2
3
4
5
6
7
<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script>
   
<!-- 方式二 -->
<script type"text/javascript">
    Js代码内容
</script>

2、JavaScript代码存放位置

  • HTML的head中
  • HTML的body代码块底部(推荐)

由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

1
2
3
4
<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
<script>
    alert('123');
</script>

二、变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。　　

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
  
    // 全局变量
    name = 'seven';
  
    function func(){
        // 局部变量
        var age = 18;
  
        // 全局变量
        gender = "男"
    }
</script>

　　

JavaScript中代码注释：

  • 单行 //
  • 多行 /*  */

注意：此注释仅在Script块中生效。

三、数据类型

JavaScript 中的数据类型分为原始类型和对象类型

  • 原始类型
    • 数值类型:number
    • 字符串类型:string
    • 布尔类型：boolean
    • 空对象：null
    • 未定义：undefined
  • 对象类型
    • 数组
    • “字典”
    • function

特别的，数字、布尔值、null、undefined、字符串是不可变。

 

1
2
3
// null、undefined
null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。
undefined是一个特殊值，表示变量未定义。<br><br>
1
2
3
4
5
6
7
undefined
undefined表示未定义值
var name;
 
 
null
null是一个特殊值

　　

1、数字（Number）

JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

定义数字的两种方式：

1
2
3
4
5
6
7
8
9
10
11
a = 123
123
 
b = Number(234)
234
 
b = Number("123")
123
 
typeof b //判断类型
"number"

　

转换：

  • parseInt(..)    将某值转换成数字，不成功则NaN
  • parseFloat(..) 将某值转换成浮点数，不成功则NaN

 

特殊值：

  •  NaN，非数字。可使用 isNaN(num) 来判断。
  • Infinity，无穷大。可使用 isFinite(num) 来判断。

 

注意：

　　NaN 不等于NaN ，定义数值非数字则返回NaN

1
2
3
4
b = Number("123sdfas")
NaN
b == NaN
false

　

更多数值计算：

常量

Math.E
常量e，自然对数的底数。

Math.LN10
10的自然对数。

Math.LN2
2的自然对数。

Math.LOG10E
以10为底的e的对数。

Math.LOG2E
以2为底的e的对数。

Math.PI
常量figs/U03C0.gif。

Math.SQRT1_2
2的平方根除以1。

Math.SQRT2
2的平方根。

静态函数

Math.abs( )
计算绝对值。

Math.acos( )
计算反余弦值。

Math.asin( )
计算反正弦值。

Math.atan( )
计算反正切值。

Math.atan2( )
计算从X轴到一个点的角度。

Math.ceil( )
对一个数上舍入。

Math.cos( )
计算余弦值。

Math.exp( )
计算e的指数。

Math.floor( )
对一个数下舍人。

Math.log( )
计算自然对数。

Math.max( )
返回两个数中较大的一个。

Math.min( )
返回两个数中较小的一个。

Math.pow( )
计算xy。

Math.random( )
计算一个随机数。

Math.round( )
舍入为最接近的整数。

Math.sin( )
计算正弦值。

Math.sqrt( )
计算平方根。

Math.tan( )
计算正切值。

Math

Math 对象

Math 对象用于执行数学任务。

使用 Math 的属性和方法的语法：

1
2
var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);

　　

注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。

Math 对象属性

 

属性描述
E 返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2 返回 2 的自然对数（约等于0.693）。
LN10 返回 10 的自然对数（约等于2.302）。
LOG2E 返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。
PI 返回圆周率（约等于3.14159）。
SQRT1_2 返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2 返回 2 的平方根（约等于 1.414）。

Math 对象方法

方法描述
abs(x) 返回数的绝对值。
acos(x) 返回数的反余弦值。
asin(x) 返回数的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x) 对数进行上舍入。
cos(x) 返回数的余弦。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
toSource() 返回该对象的源代码。
valueOf() 返回 Math 对象的原始值。

2、字符串（String）

字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。

 

要把多个字符串连接起来，可以用+号连接：数字和字符串也能拼接。

var name = '小明';
var age = 20;
var message = '你好, ' + name + ', 你今年' + age + '岁了!';
alert(message);

如果有很多变量需要连接，用+号就比较麻烦。ES6新增了一种模板字符串，表示方法和上面的多行字符串一样，但是它会自动替换字符串中的变量：

var name = '小明';
var age = 20;
var message = `你好, ${name}, 你今年${age}岁了!`;
alert(message);

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
obj.length                           长度
  
obj.trim()                           移除空白，\t
obj.trimLeft()
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n个字符
obj.concat(value, ...)               拼接，新值，可以多个。
obj.indexOf(substring,start)         子序列位置 获取字串的第一个字母所在索引,start从哪开始找
obj.lastIndexOf(substring,start)         子序列位置，从后往前找
obj.substring(from, to)              根据索引获取子序列，从哪个位置到哪个位置
obj.slice(start, end)                切片
obj.toLowerCase()                    大写
obj.toUpperCase()                    小写
obj.split(delimiter, limit)          分割，limit分割数量限制
obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个索引位置(g无效)，找到之后就不再往后找了。
obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。返回列表形式
obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，
                                     $数字：匹配的第n个组内容；
                                     $&：当前匹配的内容；
                                     $`：位于匹配子串左侧的文本； #匹配到规则之后取其左侧内容并替换该规则的内容
                                     $'：位于匹配子串右侧的文本  #匹配到规则之后取其左侧内容并替换该规则的内容
1
                                     $$：直接量$符号<br><br>
1
2
3
4
5
6
7
8
9
10
11
12
13
a.replace(/\d+\w\d+/g,"$2eric$1") # 不加分组的正则，后面的$不代表任何意义
"alsdf$2eric$1dsf21sfd"
 
$1 $2 代表分组
a.replace(/(\d+)\w+(\d+)/,"$2"+"eric"+"$1") # \w+代表字母与数字 贪婪匹配
"alsdf1eric123sfd"
 
a.replace(/(\d+)[a-zA-Z]+(\d+)/g,"$2"+"eri"+"$1")
"alsdf21eri123sfd"
 
$&代表正则内的所有匹配内容
a.replace(/(\d+)\w+(\d+)/,":before:"+"$&"+":after:")
"alsdf:before:123dsf21:after:sfd"

　　

 

a = "alex123kds "
"alex123kds "
a.trim()
"alex123kds"
a.length
11
a.charAt(3)
"x"
b="123"
"123"
c="33"
"33"
b.concat(c)
"12333"
b.concat(c,"lll")
"12333lll"
console 测试

注释：IndexOf() 方法对大小写敏感！

注释：如果要检索的字符串值没有出现，则该方法返回 -1。

<script type="text/javascript">

var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))

</script>
indexof

注释：lastIndexOf() 方法对大小写敏感！

注释：如果要检索的字符串值没有出现，则该方法返回 -1。

<script type="text/javascript">

var str="Hello world!"
document.write(str.lastIndexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.lastIndexOf("ld"))

</script>
lastindexof
a = "alex123dfsf"
"alex123dfsf"
a.substring(1,3)
"le"
a.substring(5,a.length)
"23dfsf"
substring
a.toLowerCase()
"alex123dfsf"
a.toUpperCase()
"ALEX123DFSF"
小写大写转换
a = "alsdf123dsf21sfd"
"alsdf123dsf21sfd"
a.split(1,3)
["alsdf", "23dsf2", "sfd"]
a.split(1,4)
["alsdf", "23dsf2", "sfd"]
a.split(1)
["alsdf", "23dsf2", "sfd"]
split
a = "alsdf123dsf21sfd"
"alsdf123dsf21sfd"
a.split(1,3)
["alsdf", "23dsf2", "sfd"]
a.split(1,4)
["alsdf", "23dsf2", "sfd"]
a.split(1)
["alsdf", "23dsf2", "sfd"]
split正则分割，如果是分组则显示分隔符
a
"alsdf123dsf21sfd"
a.search(1)
5
a.search(123)
5
a.search(1234)
-1
a.search(/\d+/)
5
search
a
"alsdf123dsf21sfd"
a.match(/\d+/)
["123"]
a.match(/\d+/g)
["123", "21"]
match
a
"alsdf123dsf21sfd"
a.replace(/\d+/,"$")
"alsdf$dsf21sfd"
a.replace(/(\d+)/,"$")
"alsdf$dsf21sfd"
a.replace(/\d+/g,"$")
"alsdf$dsf$sfd"
a.replace(/\d+\w\d+/g,"$2eric$1")  # 不加分组的正则，后面的$不代表任何意义
"alsdf$2eric$1dsf21sfd"

$1 $2 代表分组
a.replace(/(\d+)\w+(\d+)/,"$2"+"eric"+"$1")  # \w+代表字母与数字 贪婪匹配
"alsdf1eric123sfd"

a.replace(/(\d+)[a-zA-Z]+(\d+)/g,"$2"+"eri"+"$1")
"alsdf21eri123sfd"

$&代表正则内的所有匹配内容
a.replace(/(\d+)\w+(\d+)/,":before:"+"$&"+":after:")
"alsdf:before:123dsf21:after:sfd"
replace
a = "alex123eric456sever"
"alex123eric456sever"
a.replace(/(\d+)[a-zA-Z]+(\d+)/,"$'")
"alexseversever"
$' 匹配右侧内容并替换规则

3、布尔类型（Boolean）

布尔类型仅包含真假，与Python不同的是其首字母小写。

  • ==      比较值相等
  • !=       不等于
  • ===   比较值和类型相等
  • !===  不等于
  • ||        或
  • &&      且
a = 123
123
b = "123"
"123"
c = 123
123

typeof a 
"number"
typeof b
"string"
typeof c
"number"
a == b
true
a === b
false
a === c
true
a !== b
true
a != b
false
布尔test

4、数组

JavaScript中的数组类似于Python中的列表

数组定义

1
2
3
var names = ['alex', 'tony', 'eric']
 
var names = Array('alex', 'tony', 'eric')

 

常见功能：

var names = ['alex', 'tony', 'eric']
var names = Array('alex', 'tony', 'eric')
 
常用方法：
    添加
        obj.push(ele)                   追加
        obj.unshift(ele)                最前插入
        obj.splice(index,0,'content')   指定索引插入
    移除
        obj.pop()                       数组尾部获取
        obj.shift()                     数组头部获取
        obj.splice(index,count)         数组指定位置后count个字符
      
    切片
        obj.slice(start,end)          
    合并
        newArray ＝ obj1.concat(obj2)  
    翻转
        obj.reverse()
      
    字符串化
        obj.join('_')
    长度
        obj.length
View Code

 

请注意，如果通过索引赋值时，索引超过了范围，同样会引起Array大小的变化：

var arr = [1, 2, 3];
arr[5] = 'x';
arr; // arr变为[1, 2, 3, undefined, undefined, 'x']
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
obj.length          数组的大小 直接给Array的length赋一个新的值会导致Array大小的变化：
var arr = [1, 2, 3];
arr.length; // 3
arr.length = 6;
arr; // arr变为[1, 2, 3, undefined, undefined, undefined]
arr.length = 2;
arr; // arr变为[1, 2]
  
obj.push(ele)       尾部追加元素
obj.pop()           尾部获取一个元素
obj.unshift(ele)    头部插入元素
obj.shift()         头部移除元素
obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素,deleteCount是删除数量，0是不删除增加。1，删除一个，2删除2个
                    obj.splice(n,0,val) 指定位置插入元素
                    obj.splice(n,1,val) 指定位置替换元素
                    obj.splice(n,1)     指定位置删除元素
obj.slice( )        切片，可以-1
obj.reverse( )      反转
obj.join(sep)       将数组元素连接起来以构建一个字符串
obj.concat(val,..)  连接数组
obj.sort( )         对数组元素进行排序

 关于sort的排序，数字表示按照大小排的而是按照内部的字母码排的。数字先被转成了字符串，然后a.charCodeAt() 查看字母对象的数字 ，在排序

因为sort排数字要加上key函数

 

例如

var arr = [10, 20, 1, 2];
b = arr.sort((x, y) => {
    return x - y
});
console.log(b); // [1, 2, 10, 20]

 

js 数组练习

字典 

1
2
3
  
字典
var items = {'k1': 123, 'k2': 'tony'}
1
2
3
4
5
6
a = {"k1":"alex",11:22}
Object {11: 22, k1: "alex"}
a[11]
22
a["k1"]
"alex"

JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成。

JavaScript的对象用于描述现实世界中的某个对象。例如，为了描述“小明”这个淘气的小朋友，我们可以用若干键值对来描述他：

var xiaoming = {
    name: '小明',
    birth: 1990,
    school: 'No.1 Middle School',
    height: 1.70,
    weight: 65,
    score: null
};

JavaScript用一个{...}表示一个对象，键值对以xxx: xxx形式申明，用,隔开。注意，最后一个键值对不需要在末尾加,，如果加了，有的浏览器（如低版本的IE）将报错。

上述对象申明了一个name属性，值是'小明'，birth属性，值是1990，以及其他一些属性。最后，把这个对象赋值给变量xiaoming后，就可以通过变量xiaoming来获取小明的属性了：

xiaoming.name; // '小明'
xiaoming.birth; // 1990

访问属性是通过.操作符完成的，但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符，就必须用''括起来：

var xiaohong = {
    name: '小红',
    'middle-school': 'No.1 Middle School'
};

xiaohong的属性名middle-school不是一个有效的变量，就需要用''括起来。访问这个属性也无法使用.操作符，必须用['xxx']来访问：

xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小红'
xiaohong.name; // '小红'

也可以用xiaohong['name']来访问xiaohong的name属性，不过xiaohong.name的写法更简洁。我们在编写JavaScript代码的时候，属性名尽量使用标准的变量名，这样就可以直接通过object.prop的形式访问一个属性了。

实际上JavaScript对象的所有属性都是字符串，不过属性对应的值可以是任意数据类型。

如果访问一个不存在的属性会返回什么呢？JavaScript规定，访问不存在的属性不报错，而是返回undefined：

'use strict';

var xiaoming = {
    name: '小明'
};

console.log(xiaoming.name);
console.log(xiaoming.age); // undefined

小明
undefined

由于JavaScript的对象是动态类型，你可以自由地给一个对象添加或删除属性：

var xiaoming = {
    name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming['name']; // 删除name属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错

如果我们要检测xiaoming是否拥有某一属性，可以用in操作符：

var xiaoming = {
    name: '小明',
    birth: 1990,
    school: 'No.1 Middle School',
    height: 1.70,
    weight: 65,
    score: null
};
'name' in xiaoming; // true
'grade' in xiaoming; // false

不过要小心，如果in判断一个属性存在，这个属性不一定是xiaoming的，它可能是xiaoming继承得到的：

'toString' in xiaoming; // true

因为toString定义在object对象中，而所有对象最终都会在原型链上指向object，所以xiaoming也拥有toString属性。

要判断一个属性是否是xiaoming自身拥有的，而不是继承得到的，可以用hasOwnProperty()方法：

var xiaoming = {
    name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false

 map和set

JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构，即一组键值对。

但是JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。

为了解决这个问题，最新的ES6规范引入了新的数据类型Map。要测试你的浏览器是否支持ES6规范，请执行以下代码，如果浏览器报ReferenceError错误，那么你需要换一个支持ES6的浏览器：

'use strict';
var m = new Map();
var s = new Set();
console.log('你的浏览器支持Map和Set！');

 

Map

Map是一组键值对的结构，具有极快的查找速度。

举个例子，假设要根据同学的名字查找对应的成绩，如果用Array实现，需要两个Array：

var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];

给定一个名字，要查找对应的成绩，就先要在names中找到对应的位置，再从scores取出对应的成绩，Array越长，耗时越长。

如果用Map实现，只需要一个“名字”-“成绩”的对照表，直接根据名字查找成绩，无论这个表有多大，查找速度都不会变慢。用JavaScript写一个Map如下：

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法：

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

Set

Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set：

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

重复元素在Set中自动被过滤：

var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

注意数字3和字符串'3'是不同的元素。

通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果：

s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}

通过delete(key)方法可以删除元素：

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}


iterable

遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。

具有iterable类型的集合可以通过新的for ... of循环来遍历。

for ... of循环是ES6引入的新的语法，请测试你的浏览器是否支持：

'use strict';
var a = [1, 2, 3];
for (var x of a) {
}
console.log('你的浏览器支持for ... of');

用for ... of循环遍历集合，用法如下：

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    console.log(x);
}
for (var x of s) { // 遍历Set
    console.log(x);
}
for (var x of m) { // 遍历Map
    console.log(x[0] + '=' + x[1]);
}

你可能会有疑问，for ... of循环和for ... in循环有何区别？

for ... in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

当我们手动给Array对象添加了额外的属性后，for ... in循环将带来意想不到的意外效果：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    console.log(x); // '0', '1', '2', 'name'
}

for ... in循环将把name包括在内，但Array的length属性却不包括在内。

for ... of循环则完全修复了这些问题，它只循环集合本身的元素：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    console.log(x); // 'A', 'B', 'C'
}

这就是为什么要引入新的for ... of循环。

然而，更好的方式是直接使用iterable内置的forEach方法，它接收一个函数，每次迭代就自动回调该函数。以Array为例：





'use strict';
var a = ['A', 'B', 'C'];




a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log(element + ', index = ' + index);
});


 



















A, index = 0
B, index = 1
C, index = 2




















注意，forEach()方法是ES5.1标准引入的，你需要测试浏览器是否支持。


Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身：


var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    console.log(element);
});



Map的回调函数参数依次为value、key和map本身：


var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    console.log(value);
});



如果对某些参数不感兴趣，由于JavaScript的函数调用不要求参数必须一致，因此可以忽略它们。例如，只需要获得Array的element：


var a = ['A', 'B', 'C'];
a.forEach(function (element) {
    console.log(element);
});










四、其他


1、序列化


    

  • JSON.stringify(obj)   序列化
    • 

  • JSON.parse(str)        反序列化
    • 







b
[223, 323, 232]
JSON.stringify(b)
"[223,323,232]"
c = JSON.stringify(b)
"[223,323,232]"
c
"[223,323,232]"

序列化



序列化


2、转义


    

  • decodeURI( )                   URl中未转义的字符
    • 

  • decodeURIComponent( )   URI组件中的未转义字符
    • 

  • encodeURI( )                   URI中的转义字符
    • 

  • encodeURIComponent( )   转义URI组件中的字符
    • 

  • escape( )                         对字符串转义
    • 

  • unescape( )                     给转义字符串解码
    • 

  • URIError                         由URl的编码和解码方法抛出
    • 



3、eval


JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。


    

  • eval() 
    • 

  • EvalError   执行字符串中的JavaScript代码
    • 







eval(1+2)

eval("for (i=0;i<3;i++){console.log(i)}")
VM1936:1 0
VM1936:1 1
VM1936:1 2

eval



eval


4、正则表达式


JavaScript中支持正则表达式，其主要提供了两个功能：


    

  • test(string)     用于检测正则是否匹配
    • 

  • exec(string)    用于获取正则匹配的内容
    • 



注：定义正则表达式时，“g”、“i”、“m”分别表示全局匹配，忽略大小写、多行匹配。


 












1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


20


21


22


23


24


25


26


27


28






<body>


请输入Email地址：


<input type="text" id="email"><!--设置Email输入框-->


<input type="button" value="检测合法性" onclick="checkEmail()"><!--设置按钮用于出发检测Email合法性事件-->


 


<script type="text/javascript">


 


    function checkEmail() {


 


        var input_email = document.getElementById("email").value  //获取input内容值


        document.write(input_email)


        console.log(input_email)


        var rel_email = /\w+@{1}\w+[.]\w+/  //正则书写


        var a = input_email.replace(/\w+@{1}\w+[.]\w+/,"woshi")


        document.write(rel_email)


        console.log(rel_email)


        console.log(a)


        document.write(rel_email.exec(input_email)) //用于获取正则匹配到的内容


        if (rel_email.test(input_email)){ //用于判断是否输入的内容被正则匹配


            alert("正确")


        }else {


            alert("error")


        }


 


    }


 


</script>


</body>














　　


test用法　　






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
请输入Email地址：
<input type="text" id="email"><!--设置Email输入框-->
<input type="button" value="检测合法性" onclick="checkEmail()"><!--设置按钮用于出发检测Email合法性事件-->

<script type="text/javascript">

    function checkEmail() {

        var input_email = document.getElementById("email").value
        document.write(input_email)
        console.log(input_email)
        var rel_email = /\w+@{1}\w+[.]\w+/
        var a = input_email.replace(/\w+@{1}\w+[.]\w+/,"woshi")
        document.write(rel_email)
        console.log(rel_email)
        console.log(a)
        if (rel_email.test(input_email)){
            alert("正确")
        }else {
            alert("error")
        }

    }

</script>
</body>
</html>

正则判断邮箱



正则判断邮箱


 


5、时间处理


JavaScript中提供了时间相关的操作，时间操作中分为两种时间：


    

  • 时间统一时间
    • 

  • 本地时间（东8区）
    • 



更多操作参见：http://www.shouce.ren/api/javascript/main.html






Date    操作日期和时间的对象
Date.getDate( )    返回一个月中的某一天
Date.getDay( )    返回一周中的某一天
Date.getFullYear( )    返回Date对象的年份字段
Date.getHours( )    返回Date对象的小时字段
Date.getMilliseconds( )    返回Date对象的毫秒字段
Date.getMinutes( )    返回Date对象的分钟字段
Date.getMonth( )    返回Date对象的月份字段
Date.getSeconds( )    返回Date对象的秒字段
Date.getTime( )    返回Date对象的毫秒表示
Date.getTimezoneOffset( )    判断与GMT的时间差
Date.getUTCDate( )    返回该天是一个月的哪一天(世界时)
Date.getUTCDay( )    返回该天是星期几(世界时)
Date.getUTCFullYear( )    返回年份(世界时)
Date.getUTCHours( )    返回Date对象的小时字段(世界时)
Date.getUTCMilliseconds( )    返回Date对象的毫秒字段(世界时)
Date.getUTCMinutes( )    返回Date对象的分钟字段(世界时)
Date.getUTCMonth( )    返回Date对象的月份(世界时)
Date.getUTCSeconds( )    返回Date对象的秒字段(世界时)
Date.getYear( )    返回Date对象的年份字段(世界时)
Date.parse( )    解析日期/时间字符串
Date.setDate( )    设置一个月的某一天
Date.setFullYear( )    设置年份，也可以设置月份和天
Date.setHours( )    设置Date对象的小时字段、分钟字段、秒字段和毫秒字段
Date.setMilliseconds( )    设置Date对象的毫秒字段
Date.setMinutes( )    设置Date对象的分钟字段和秒字段
Date.setMonth( )    设置Date对象的月份字段和天字段
Date.setSeconds( )    设置Date对象的秒字段和毫秒字段
Date.setTime( )    以毫秒设置Date对象
Date.setUTCDate( )    设置一个月中的某一天(世界时)
Date.setUTCFullYear( )    设置年份、月份和天(世界时)
Date.setUTCHours( )    设置Date对象的小时字段、分钟字段、秒字段和毫秒字段(世界时)
Date.setUTCMilliseconds( )    设置Date对象的毫秒字段(世界时)
Date.setUTCMinutes( )    设置Date对象的分钟字段和秒字段(世界时)
Date.setUTCMonth( )    设置Date对象的月份字段和天数字段(世界时)
Date.setUTCSeconds( )    设置Date对象的秒字段和毫秒字段(世界时)
Date.setYear( )    设置Date对象的年份字段
Date.toDateString( )    返回Date对象日期部分作为字符串
Date.toGMTString( )    将Date转换为世界时字符串
Date.toLocaleDateString( )    回Date对象的日期部分作为本地已格式化的字符串
Date.toLocaleString( )    将Date转换为本地已格式化的字符串
Date.toLocaleTimeString( )    返回Date对象的时间部分作为本地已格式化的字符串
Date.toString( )    将Date转换为字符串
Date.toTimeString( )    返回Date对象日期部分作为字符串
Date.toUTCString( )    将Date转换为字符串(世界时)
Date.UTC( )    将Date规范转换成毫秒数
Date.valueOf( )    将Date转换成毫秒表示

date日期函数



date日期函数


 


在JavaScript中，Date对象用来表示日期和时间。


要获取系统当前时间，用：


var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳



注意，当前时间是浏览器从本机操作系统获取的时间，所以不一定准确，因为用户可以把当前时间设定为任何值。


如果要创建一个指定日期和时间的Date对象，可以用：


var d = new Date(2015, 5, 19, 20, 15, 30, 123);
d; // Fri Jun 19 2015 20:15:30 GMT+0800 (CST)



你可能观察到了一个非常非常坑爹的地方，就是JavaScript的月份范围用整数表示是0~11，0表示一月，1表示二月……，所以要表示6月，我们传入的是5！这绝对是JavaScript的设计者当时脑抽了一下，但是现在要修复已经不可能了。


 JavaScript的Date对象月份值从0开始，牢记0=1月，1=2月，2=3月，……，11=12月。


第二种创建一个指定日期和时间的方法是解析一个符合ISO 8601格式的字符串：


var d = Date.parse('2015-06-24T19:49:22.875+08:00');
d; // 1435146562875



但它返回的不是Date对象，而是一个时间戳。不过有时间戳就可以很容易地把它转换为一个Date：


var d = new Date(1435146562875);
d; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
d.getMonth(); // 5



 使用Date.parse()时传入的字符串使用实际月份01~12，转换为Date对象后getMonth()获取的月份值为0~11。


时区


Date对象表示的时间总是按浏览器所在时区显示的，不过我们既可以显示本地时间，也可以显示调整后的UTC时间：


var d = new Date(1435146562875);
d.toLocaleString(); // '2015/6/24 下午7:49:22'，本地时间（北京时区+8:00），显示的字符串与操作系统设定的格式有关
d.toUTCString(); // 'Wed, 24 Jun 2015 11:49:22 GMT'，UTC时间，与本地时间相差8小时



那么在JavaScript中如何进行时区转换呢？实际上，只要我们传递的是一个number类型的时间戳，我们就不用关心时区转换。任何浏览器都可以把一个时间戳正确转换为本地时间。


时间戳是个什么东西？时间戳是一个自增的整数，它表示从1970年1月1日零时整的GMT时区开始的那一刻，到现在的毫秒数。假设浏览器所在电脑的时间是准确的，那么世界上无论哪个时区的电脑，它们此刻产生的时间戳数字都是一样的，所以，时间戳可以精确地表示一个时刻，并且与时区无关。


所以，我们只需要传递时间戳，或者把时间戳从数据库里读出来，再让JavaScript自动转换为当地时间就可以了。


要获取当前时间戳，可以用：




'use strict';




if (Date.now) {
    console.log(Date.now()); // 老版本IE没有now()方法
} else {
    console.log(new Date().getTime());
}


1542191208352


 


 


 


 


 


五、语句和异常


1、条件语句


JavaScript中支持两个中条件语句，分别是：if 和 switch　　




if(条件){
 
    }else if(条件){
         
    }else{
 
    }






switch(name){
        case '1':
            age = 123;
            break;
        case '2':
            age = 456;
            break;
        default :
            age = 777;
    }




switch 需放在函数内部，如果放在外部，则case的值需要是字符串才可，


 












1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17


18


19


20






function f1() {


      var num = 123


    switch (num){


 


        case 1:


            num = "dsfsdg";


            document.write(num);


            break;


        case 123:


            document.write("是123")


            break;


        default:


            document.write("bu shi 1 yebushi 123") //如果不是1 也不是123 则执行default


 


    }


 


 


    };


    f1()


</script>














2、循环语句


JavaScript中支持三种循环语句，分别是：




var names = ["alex", "tony", "rain"];
 
for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}
数组可以用这种方式，dict字典无序的没法用这种方式循环






var names = ["alex", "tony", "rain"];

for(var index in names){
    console.log(index);//0 1 2
    console.log(names[index]);
}






dic = ["k1":"alex","k2":"tony","k3":"rain"];

for(var index in dic){
    console.log(index);
    console.log(dic[index]);
}

===========和上面一样都是循环key
k1
k2
k3




 


 


 




while(条件){
    // break;
    // continue;




3、异常处理


　　














1


2


3


4


5


6


7


8


9


10






try {


    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行


}


catch (e) {


    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。


    //e是一个局部变量，用来指向Error对象或者其他抛出的对象


}


finally {


     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。


}
















　注：主动跑出异常 throw Error('xxxx')　


六、函数


1、基本函数


JavaScript中函数基本上可以分为一下三类：














1


2


3


4


5


6


7


8


9


10


11


12


13


14






// 普通函数


    function func(arg){


        return true;


    }


           


// 匿名函数


    var func = function(arg){


        return "tony";


    }


   


// 自执行函数


    (function(arg){


        console.log(arg);


    })('123')  //括号括起来，括号里可带上参数
















　　


注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。


　


arguments


JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array：








利用arguments，你可以获得调用者传入的所有参数。也就是说，即使函数不定义任何参数，还是可以拿到参数的值：


function abs() {
    if (arguments.length === 0) {
        return 0;
    }
    var x = arguments[0];
    return x >= 0 ? x : -x;
}

abs(); // 0
abs(10); // 10
abs(-9); // 9



实际上arguments最常用于判断传入参数的个数。你可能会看到这样的写法：


// foo(a[, b], c)
// 接收2~3个参数，b是可选参数，如果只传2个参数，b默认为null：
function foo(a, b, c) {
    if (arguments.length === 2) {
        // 实际拿到的参数是a和b，c为undefined
        c = b; // 把b赋给c
        b = null; // b变为默认值
    }
    // ...
}



要把中间的参数b变为“可选”参数，就只能通过arguments判断，然后重新调整参数并赋值。


2、作用域


JavaScript中每个函数都有自己的作用域，当出现函数嵌套时，就出现了作用域链。当内层函数使用变量时，会根据作用域链从内到外一层层的循环，如果不存在，则异常。














1


2


3


4


5


6


7


8


9


10


11






function f2(){


    var arg= 111;


    function f3(){


        console.log(arg);


    }


      


    return f3;


}


  


ret = f2();


ret();
















　　




function f2(){
            var arg= [11,22];
            function f3(){
                console.log(arg);
            }
            arg = [44,55];
            return f3;
        }

        ret = f2();
        ret();




 


 


 


注：声明提前，在JavaScript引擎“预编译”时进行。预编译 把用到的变量全部声明了，声明了不赋值。所以不报错，没有输出值。


函数都有自己的作用域，解释的时候 已经定死了，调用 执行的时候，作用域还是原来的作用域。 


 


 


 


变量作用域与解构赋值


 


在JavaScript中，用var申明的变量实际上是有作用域的。




如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量：


'use strict';

function foo() {
    var x = 1;
    x = x + 1;
}

x = x + 2; // ReferenceError! 无法在函数体外引用变量x



如果两个不同的函数各自申明了同一个变量，那么该变量只在各自的函数体内起作用。换句话说，不同函数内部的同名变量互相独立，互不影响：


'use strict';

function foo() {
    var x = 1;
    x = x + 1;
}

function bar() {
    var x = 'A';
    x = x + 'B';
}



由于JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行：


'use strict';

function foo() {
    var x = 1;
    function bar() {
        var y = x + 1; // bar可以访问foo的变量x!
    }
    var z = y + 1; // ReferenceError! foo不可以访问bar的变量y!
}



如果内部函数和外部函数的变量名重名怎么办？来测试一下：








这说明JavaScript的函数在查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。


变量提升


JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部：


'use strict';

function foo() {
    var x = 'Hello, ' + y;
    console.log(x);
    var y = 'Bob';
}

foo();



虽然是strict模式，但语句var x = 'Hello, ' + y;并不报错，原因是变量y在稍后申明了。但是console.log显示Hello, undefined，说明变量y的值为undefined。这正是因为JavaScript引擎自动提升了变量y的声明，但不会提升变量y的赋值。


对于上述foo()函数，JavaScript引擎看到的代码相当于：


function foo() {
    var y; // 提升变量y的申明，此时y为undefined
    var x = 'Hello, ' + y;
    console.log(x);
    y = 'Bob';
}



由于JavaScript的这一怪异的“特性”，我们在函数内部定义变量时，请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量：


function foo() {
    var
        x = 1, // x初始化为1
        y = x + 1, // y初始化为2
        z, i; // z和i为undefined
    // 其他语句:
    for (i=0; i<100; i++) {
        ...
    }
}



 


全局作用域


不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性：


'use strict';

var course = 'Learn JavaScript';
alert(course); // 'Learn JavaScript'
alert(window.course); // 'Learn JavaScript'



因此，直接访问全局变量course和访问window.course是完全一样的。


你可能猜到了，由于函数定义有两种方式，以变量方式var foo = function () {}定义的函数实际上也是一个全局变量，因此，顶层函数的定义也被视为一个全局变量，并绑定到window对象：


'use strict';

function foo() {
    alert('foo');
}

foo(); // 直接调用foo()
window.foo(); // 通过window.foo()调用



进一步大胆地猜测，我们每次直接调用的alert()函数其实也是window的一个变量：




'use strict';

window.alert('调用window.alert()');
// 把alert保存到另一个变量:
var old_alert = window.alert;
// 给alert赋一个新函数:
window.alert = function () {}


// 恢复alert:
window.alert = old_alert;
alert('又可以用alert()了!');




这说明JavaScript实际上只有一个全局作用域。任何变量（函数也视为变量），如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报ReferenceError错误。




 


名字空间


全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。


减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如：


// 唯一的全局变量MYAPP:
var MYAPP = {};

// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其他函数:
MYAPP.foo = function () {
    return 'foo';
};



把自己的代码全部放入唯一的名字空间MYAPP中，会大大减少全局变量冲突的可能。


许多著名的JavaScript库都是这么干的：jQuery，YUI，underscore等等。


 


3、闭包


「闭包」，是指拥有多个变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。


闭包是个函数，而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」


由于作用域链只能从内向外找，默认外部无法获取函数内部变量。闭包，在外部获取函数内部的变量。














1


2


3


4


5


6


7


8


9


10






function f2(){


    var arg= [11,22];


    function f3(){


        return arg;


    }


    return f3;


}


  


ret = f2();


ret();
















函数作为返回值


高阶函数除了可以接受函数作为参数外，还可以把函数作为结果值返回。


我们来实现一个对Array的求和。通常情况下，求和的函数是这样定义的：


function sum(arr) {
    return arr.reduce(function (x, y) {
        return x + y;
    });
}

sum([1, 2, 3, 4, 5]); // 15



但是，如果不需要立刻求和，而是在后面的代码中，根据需要再计算怎么办？可以不返回求和的结果，而是返回求和的函数！


function lazy_sum(arr) {
    var sum = function () {
        return arr.reduce(function (x, y) {
            return x + y;
        });
    }
    return sum;
}



当我们调用lazy_sum()时，返回的并不是求和结果，而是求和函数：


var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()



调用函数f时，才真正计算求和的结果：


f(); // 15



在这个例子中，我们在函数lazy_sum中又定义了函数sum，并且，内部函数sum可以引用外部函数lazy_sum的参数和局部变量，当lazy_sum返回函数sum时，相关参数和变量都保存在返回的函数中，这种称为“闭包（Closure）”的程序结构拥有极大的威力。


请再注意一点，当我们调用lazy_sum()时，每次调用都会返回一个新的函数，即使传入相同的参数：


var f1 = lazy_sum([1, 2, 3, 4, 5]);
var f2 = lazy_sum([1, 2, 3, 4, 5]);
f1 === f2; // false



f1()和f2()的调用结果互不影响。


闭包


注意到返回的函数在其定义内部引用了局部变量arr，所以，当一个函数返回了一个函数后，其内部的局部变量还被新函数引用，所以，闭包用起来简单，实现起来可不容易。


另一个需要注意的问题是，返回的函数并没有立刻执行，而是直到调用了f()才执行。我们来看一个例子：


function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];



在上面的例子中，每次循环，都创建了一个新的函数，然后，把创建的3个函数都添加到一个Array中返回了。


你可能认为调用f1()，f2()和f3()结果应该是1，4，9，但实际结果是：


f1(); // 16
f2(); // 16
f3(); // 16



全部都是16！原因就在于返回的函数引用了变量i，但它并非立刻执行。等到3个函数都返回时，它们所引用的变量i已经变成了4，因此最终结果为16。


返回闭包时牢记的一点就是：返回函数不要引用任何循环变量，或者后续会发生变化的变量。


如果一定要引用循环变量怎么办？方法是再创建一个函数，用该函数的参数绑定循环变量当前的值，无论该循环变量后续如何更改，已绑定到函数参数的值不变：


function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 1
f2(); // 4
f3(); // 9



注意这里用了一个“创建一个匿名函数并立刻执行”的语法：


(function (x) {
    return x * x;
})(3); // 9



理论上讲，创建一个匿名函数并立刻执行可以这么写：


function (x) { return x * x } (3);



但是由于JavaScript语法解析的问题，会报SyntaxError错误，因此需要用括号把整个函数定义括起来：


(function (x) { return x * x }) (3);



通常，一个立即执行的匿名函数可以把函数体拆开，一般这么写：


(function (x) {
    return x * x;
})(3);



说了这么多，难道闭包就是为了返回一个函数然后延迟执行吗？


当然不是！闭包有非常强大的功能。举个栗子：


在面向对象的程序设计语言里，比如Java和C++，要在对象内部封装一个私有变量，可以用private修饰一个成员变量。


在没有class机制，只有函数的语言里，借助闭包，同样可以封装一个私有变量。我们用JavaScript创建一个计数器：


'use strict';

function create_counter(initial) {
    var x = initial || 0;
    return {
        inc: function () {
            x += 1;
            return x;
        }
    }
}



它用起来像这样：


var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2
c1.inc(); // 3

var c2 = create_counter(10);
c2.inc(); // 11
c2.inc(); // 12
c2.inc(); // 13



在返回的对象中，实现了一个闭包，该闭包携带了局部变量x，并且，从外部代码根本无法访问到变量x。换句话说，闭包就是携带状态的函数，并且它的状态可以完全对外隐藏起来。


闭包还可以把多参数的函数变成单参数的函数。例如，要计算xy可以用Math.pow(x, y)函数，不过考虑到经常计算x2或x3，我们可以利用闭包创建新的函数pow2和pow3：


 


'use strict';

function make_pow(n) {
    return function (x) {
        return Math.pow(x, n);
    }
}


// 创建两个新函数:
var pow2 = make_pow(2);
var pow3 = make_pow(3);


console.log(pow2(5)); // 25
console.log(pow3(7)); // 343


25
343


 


箭头函数


ES6标准新增了一种新的函数：Arrow Function（箭头函数）。


为什么叫Arrow Function？因为它的定义用的就是一个箭头：


x => x * x



上面的箭头函数相当于：


function (x) {
    return x * x;
}





箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ ... }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ ... }和return：


x => {
    if (x > 0) {
        return x * x;
    }
    else {
        return - x * x;
    }
}



如果参数不是一个，就需要用括号()括起来：


// 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}



如果要返回一个对象，就要注意，如果是单表达式，这么写的话会报错：


// SyntaxError:
x => { foo: x }



因为和函数体的{ ... }有语法冲突，所以要改为：


// ok:
x => ({ foo: x })



this


箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。


回顾前面的例子，由于JavaScript函数对this绑定的错误处理，下面的例子无法得到预期结果：


var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();
    }
};



现在，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj：


var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25



如果使用箭头函数，以前的那种hack写法：


var that = this;



就不再需要了。


由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略：


var obj = {
    birth: 1990,
    getAge: function (year) {
        var b = this.birth; // 1990
        var fn = (y) => y - this.birth; // this.birth仍是1990
        return fn.call({birth:2000}, year);
    }
};
obj.getAge(2015); // 25



练习


'use strict'
var arr = [10, 20, 1, 2];


 


arr.sort((x, y) => {
    ???
});
console.log(arr); // [1, 2, 10, 20]


 


 


generator


 


generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。


ES6定义generator标准的哥们借鉴了Python的generator的概念和语法，如果你对Python的generator很熟悉，那么ES6的generator就是小菜一碟了。


我们先复习函数的概念。一个函数是一段完整的代码，调用一个函数就是传入参数，然后返回结果：


function foo(x) {
    return x + x;
}

var r = foo(1); // 调用foo函数



函数在执行过程中，如果没有遇到return语句（函数末尾如果没有return，就是隐含的return undefined;），控制权无法交回被调用的代码。


generator跟函数很像，定义如下：


function* foo(x) {
    yield x + 1;
    yield x + 2;
    return x + 3;
}



generator和函数不同的是，generator由function*定义（注意多出的*号），并且，除了return语句，还可以用yield返回多次。


大多数同学立刻就晕了，generator就是能够返回多次的“函数”？返回多次有啥用？


还是举个栗子吧。


我们以一个著名的斐波那契数列为例，它由0，1开头：


0 1 1 2 3 5 8 13 21 34 ...



要编写一个产生斐波那契数列的函数，可以这么写：


function fib(max) {
    var
        t,
        a = 0,
        b = 1,
        arr = [0, 1];
    while (arr.length < max) {
        [a, b] = [b, a + b];
        arr.push(b);
    }
    return arr;
}

// 测试:
fib(5); // [0, 1, 1, 2, 3]
fib(10); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]



函数只能返回一次，所以必须返回一个Array。但是，如果换成generator，就可以一次返回一个数，不断返回多次。用generator改写如下：


function* fib(max) {
    var
        t,
        a = 0,
        b = 1,
        n = 0;
    while (n < max) {
        yield a;
        [a, b] = [b, a + b];
        n ++;
    }
    return;
}



直接调用试试：


fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}



直接调用一个generator和调用函数不一样，fib(5)仅仅是创建了一个generator对象，还没有去执行它。


调用generator对象有两个方法，一是不断地调用generator对象的next()方法：


var f = fib(5);
f.next(); // {value: 0, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 2, done: false}
f.next(); // {value: 3, done: false}
f.next(); // {value: undefined, done: true}



next()方法会执行generator的代码，然后，每次遇到yield x;就返回一个对象{value: x, done: true/false}，然后“暂停”。返回的value就是yield的返回值，done表示这个generator是否已经执行结束了。如果done为true，则value就是return的返回值。


当执行到done为true时，这个generator对象就已经全部执行完毕，不要再继续调用next()了。


第二个方法是直接用for ... of循环迭代generator对象，这种方式不需要我们自己判断done：


 




'use strict'

function* fib(max) {
    var
        t,
        a = 0,
        b = 1,
        n = 0;
    while (n < max) {
        yield a;
        [a, b] = [b, a + b];
        n ++;
    }
    return;
}



 


for (var x of fib(10)) {
    console.log(x); // 依次输出0, 1, 1, 2, 3, ...
}


 



















0
1
1
2
3
5
8
13
21
34




















generator和普通函数相比，有什么用？


因为generator可以在执行过程中多次返回，所以它看上去就像一个可以记住执行状态的函数，利用这一点，写一个generator就可以实现需要用面向对象才能实现的功能。例如，用一个对象来保存状态，得这么写：


var fib = {
    a: 0,
    b: 1,
    n: 0,
    max: 5,
    next: function () {
        var
            r = this.a,
            t = this.a + this.b;
        this.a = this.b;
        this.b = t;
        if (this.n < this.max) {
            this.n ++;
            return r;
        } else {
            return undefined;
        }
    }
};



用对象的属性来保存状态，相当繁琐。


generator还有另一个巨大的好处，就是把异步回调代码变成“同步”代码。这个好处要等到后面学了AJAX以后才能体会到。


没有generator之前的黑暗时代，用AJAX时需要这么写代码：


ajax('http://url-1', data1, function (err, result) {
    if (err) {
        return handle(err);
    }
    ajax('http://url-2', data2, function (err, result) {
        if (err) {
            return handle(err);
        }
        ajax('http://url-3', data3, function (err, result) {
            if (err) {
                return handle(err);
            }
            return success(result);
        });
    });
});



回调越多，代码越难看。


有了generator的美好时代，用AJAX时可以这么写：


try {
    r1 = yield ajax('http://url-1', data1);
    r2 = yield ajax('http://url-2', data2);
    r3 = yield ajax('http://url-3', data3);
    success(r3);
}
catch (err) {
    handle(err);
}



看上去是同步的代码，实际执行是异步的。


练习


要生成一个自增的ID，可以编写一个next_id()函数：


var current_id = 0;

function next_id() {
    current_id ++;
    return current_id;
}



由于函数无法保存状态，故需要一个全局变量current_id来保存数字。


不用闭包，试用generator改写：


 




'use strict';
function* next_id() {



 


 for (var y = 1; y < 100; y ++) {
    yield y;
//console.log(y)
}


// 测试:
var
    x,
    pass = true,
    g = next_id();
for (x = 1; x < 100; x ++) {
    if (g.next().value !== x) {
        pass = false;
        console.log('测试失败!');
        break;
    }
}
if (pass) {
    console.log('测试通过!');
}




 


 


 




4、面向对象　　














1


2


3


4


5


6


7


8


9


10


11






function Foo (name,age) {


    this.Name = name;


    this.Age = age;


    this.Func = function(arg){


        return this.Name + arg;


    }


}


   


var obj = new Foo('alex', 18);


var ret = obj.Func("sb");


console.log(ret);
















对于上述代码需要注意：


    

  • Foo充当的构造函数
    • 

  • this代指对象
    • 

  • 创建对象时需要使用 new
    • 



上述代码中每个对象中均保存了一个相同的Func函数，从而浪费内存。使用原型可以解决该问题，把类的方法放到原型里，原型类似一个字典。：














1


2


3


4


5


6


7


8


9


10


11


12


13


14


15


16


17






function Foo (name,age) {


    this.Name = name;


    this.Age = age;


}//可以理解为创建一个类Foo，并且创建了Foo类的构造方法


Foo.prototype = {


    GetInfo: function(){


        return this.Name + this.Age


    },


    Func : function(arg){


        return this.Name + arg;


    }


}


 


 


——--------------------------


 


Foo.prototype.newfunc = function(){}//也可以不放到字典里，一个一个方法单独创建
















 


 


在一个对象中绑定函数，称为这个对象的方法。


在JavaScript中，对象的定义是这样的：


var xiaoming = {
    name: '小明',
    birth: 1990
};



但是，如果我们给xiaoming绑定一个函数，就可以做更多的事情。比如，写个age()方法，返回xiaoming的年龄：


var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};

xiaoming.age; // function xiaoming.age()
xiaoming.age(); // 今年调用是25,明年调用就变成26了



绑定到对象上的函数称为方法，和普通函数也没啥区别，但是它在内部使用了一个this关键字，这个东东是什么？


在一个方法内部，this是一个特殊变量，它始终指向当前对象，也就是xiaoming这个变量。所以，this.birth可以拿到xiaoming的birth属性。


让我们拆开写：


function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 25, 正常结果
getAge(); // NaN



单独调用函数getAge()怎么返回了NaN？请注意，我们已经进入到了JavaScript的一个大坑里。


JavaScript的函数内部如果调用了this，那么这个this到底指向谁？


答案是，视情况而定！


如果以对象的方法形式调用，比如xiaoming.age()，该函数的this指向被调用的对象，也就是xiaoming，这是符合我们预期的。


如果单独调用函数，比如getAge()，此时，该函数的this指向全局对象，也就是window。


坑爹啊！


更坑爹的是，如果这么写：


var fn = xiaoming.age; // 先拿到xiaoming的age函数
fn(); // NaN



也是不行的！要保证this指向正确，必须用obj.xxx()的形式调用！


由于这是一个巨大的设计错误，要想纠正可没那么简单。ECMA决定，在strict模式下让函数的this指向undefined，因此，在strict模式下，你会得到一个错误：


'use strict';

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};

var fn = xiaoming.age;
fn(); // Uncaught TypeError: Cannot read property 'birth' of undefined



这个决定只是让错误及时暴露出来，并没有解决this应该指向的正确位置。


有些时候，喜欢重构的你把方法重构了一下：


'use strict';

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - this.birth;
        }
        return getAgeFromBirth();
    }
};

xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined



结果又报错了！原因是this指针只在age方法的函数内指向xiaoming，在函数内部定义的函数，this又指向undefined了！（在非strict模式下，它重新指向全局对象window！）


修复的办法也不是没有，我们用一个that变量首先捕获this：


'use strict';

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var that = this; // 在方法内部一开始就捕获this
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - that.birth; // 用that而不是this
        }
        return getAgeFromBirth();
    }
};

xiaoming.age(); // 25



用var that = this;，你就可以放心地在方法内部定义其他函数，而不是把所有语句都堆到一个方法中。


 


 


apply


虽然在一个独立的函数调用中，根据是否是strict模式，this指向undefined或window，不过，我们还是可以控制this的指向的！


要指定函数的this指向哪个对象，可以用函数本身的apply方法，它接收两个参数，第一个参数就是需要绑定的this变量，第二个参数是Array，表示函数本身的参数。


用apply修复getAge()调用：


function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 25
getAge.apply(xiaoming, []); // 25, this指向xiaoming, 参数为空



另一个与apply()类似的方法是call()，唯一区别是：


    

  • 

    apply()把参数打包成Array再传入；
    

    • 

  • 

    call()把参数按顺序传入。
    

    • 



比如调用Math.max(3, 5, 4)，分别用apply()和call()实现如下：


Math.max.apply(null, [3, 5, 4]); // 5
Math.max.call(null, 3, 5, 4); // 5



对普通函数调用，我们通常把this绑定为null。


 


装饰器


利用apply()，我们还可以动态改变函数的行为。


JavaScript的所有对象都是动态的，即使内置的函数，我们也可以重新指向新的函数。


现在假定我们想统计一下代码一共调用了多少次parseInt()，可以把所有的调用都找出来，然后手动加上count += 1，不过这样做太傻了。最佳方案是用我们自己的函数替换掉默认的parseInt()：




'use strict';

var count = 0;
var oldParseInt = parseInt; // 保存原函数

window.parseInt = function () {
    count += 1;
    return oldParseInt.apply(null, arguments); // 调用原函数
};



parseInt('10');
parseInt('20');
parseInt('30');
console.log('count = ' + count); // 3


count = 3

























 闭包和原型 难点


http://www.cnblogs.com/ljchow/archive/2010/07/06/1768749.html


http://www.cnblogs.com/ljchow/archive/2010/06/08/1753526.html　　


　


 


 高阶函数


map


举例说明，比如我们有一个函数f(x)=x2，要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上，就可以用map实现如下：


map


由于map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果：




'use strict';

function pow(x) {
    return x * x;
}

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];　　
var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

console.log(results);

1,4,9,16,25,36,49,64,81






注意：map()传入的参数是pow，即函数对象本身。


你可能会想，不需要map()，写一个循环，也可以计算出结果：


var f = function (x) {
    return x * x;
};

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var result = [];
for (var i=0; i<arr.length; i++) {
    result.push(f(arr[i]));
}



的确可以，但是，从上面的循环代码，我们无法一眼看明白“把f(x)作用在Array的每一个元素并把结果生成一个新的Array”。


所以，map()作为高阶函数，事实上它把运算规则抽象了，因此，我们不但可以计算简单的f(x)=x2，还可以计算任意复杂的函数，比如，把Array的所有数字转为字符串：


var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']



只需要一行代码。


reduce


再看reduce的用法。Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：


[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)



比方说对一个Array求和，就可以用reduce实现：


var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25



练习：利用reduce()求积：


'use strict';

function product(arr) {return arr.reduce(function(x,y){return x*y})}


// 测试:
if (product([1, 2, 3, 4]) === 24 && product([0, 1, 2]) === 0 && product([99, 88, 77, 66]) === 44274384) {
    console.log('测试通过!');
}
else {
    console.log('测试失败!');
}
测试通过!



要把[1, 3, 5, 7, 9]变换成整数13579，reduce()也能派上用场：


var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x * 10 + y;
}); // 13579



如果我们继续改进这个例子，想办法把一个字符串13579先变成Array——[1, 3, 5, 7, 9]，再利用reduce()就可以写出一个把字符串转换为Number的函数。


练习：不要使用JavaScript内置的parseInt()函数，利用map和reduce操作实现一个string2int()函数：


filter


filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。


和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。


例如，在一个Array中，删掉偶数，只保留奇数，可以这么写：


var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
    return x % 2 !== 0;
});
r; // [1, 5, 9, 15]



把一个Array中的空字符串删掉，可以这么写：


var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (s) {
    return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
});
r; // ['A', 'B', 'C']



可见用filter()这个高阶函数，关键在于正确实现一个“筛选”函数。


回调函数


filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身：


var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
    console.log(element); // 依次打印'A', 'B', 'C'
    console.log(index); // 依次打印0, 1, 2
    console.log(self); // self就是变量arr
    return true;
});



利用filter，可以巧妙地去除Array的重复元素：


 var r, arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];


　　r = arr.filter(function (element, index, self) {
    　　return self.indexOf(element) === index; //indexOf 元素首次出现的位置
　　});


 


console.log(r.toString());

apple,strawberry,banana,pear,orange


去除重复元素依靠的是indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。




排序算法


排序也是在程序中经常用到的算法。无论使用冒泡排序还是快速排序，排序的核心是比较两个元素的大小。如果是数字，我们可以直接比较，但如果是字符串或者两个对象呢？直接比较数学上的大小是没有意义的，因此，比较的过程必须通过函数抽象出来。通常规定，对于两个元素x和y，如果认为x < y，则返回-1，如果认为x == y，则返回0，如果认为x > y，则返回1，这样，排序算法就不用关心具体的比较过程，而是根据比较结果直接排序。


JavaScript的Array的sort()方法就是用于排序的，但是排序结果可能让你大吃一惊：


// 看上去正常的结果:
['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft'];

// apple排在了最后:
['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple']

// 无法理解的结果:
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]



第二个排序把apple排在了最后，是因为字符串根据ASCII码进行排序，而小写字母a的ASCII码在大写字母之后。


第三个排序结果是什么鬼？简单的数字排序都能错？


这是因为Array的sort()方法默认把所有元素先转换为String再排序，结果'10'排在了'2'的前面，因为字符'1'比字符'2'的ASCII码小。


douwo


如果不知道sort()方法的默认排序规则，直接对数字排序，绝对栽进坑里！


幸运的是，sort()方法也是一个高阶函数，它还可以接收一个比较函数来实现自定义的排序。


要按数字大小排序，我们可以这么写：


'use strict'; var arr = [10, 20, 1, 2];


arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
});
console.log(arr); // [1, 2, 10, 20]


 


1,2,10,20


 


sort




排序算法





















排序也是在程序中经常用到的算法。无论使用冒泡排序还是快速排序，排序的核心是比较两个元素的大小。如果是数字，我们可以直接比较，但如果是字符串或者两个对象呢？直接比较数学上的大小是没有意义的，因此，比较的过程必须通过函数抽象出来。通常规定，对于两个元素x和y，如果认为x < y，则返回-1，如果认为x == y，则返回0，如果认为x > y，则返回1，这样，排序算法就不用关心具体的比较过程，而是根据比较结果直接排序。


JavaScript的Array的sort()方法就是用于排序的，但是排序结果可能让你大吃一惊：


// 看上去正常的结果:
['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft'];

// apple排在了最后:
['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple']

// 无法理解的结果:
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]



第二个排序把apple排在了最后，是因为字符串根据ASCII码进行排序，而小写字母a的ASCII码在大写字母之后。


第三个排序结果是什么鬼？简单的数字排序都能错？


这是因为Array的sort()方法默认把所有元素先转换为String再排序，结果'10'排在了'2'的前面，因为字符'1'比字符'2'的ASCII码小。


douwo


如果不知道sort()方法的默认排序规则，直接对数字排序，绝对栽进坑里！


幸运的是，sort()方法也是一个高阶函数，它还可以接收一个比较函数来实现自定义的排序。


要按数字大小排序，我们可以这么写：




'use strict';

var arr = [10, 20, 1, 2];



1,2,10,20




如果要倒序排序，我们可以把大的数放前面：


var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return 1;
    }
    if (x > y) {
        return -1;
    }
    return 0;
}); // [20, 10, 2, 1]



默认情况下，对字符串排序，是按照ASCII的大小比较的，现在，我们提出排序应该忽略大小写，按照字母序排序。要实现这个算法，不必对现有代码大加改动，只要我们能定义出忽略大小写的比较算法就可以：


var arr = ['Google', 'apple', 'Microsoft'];
arr.sort(function (s1, s2) {
    x1 = s1.toUpperCase();
    x2 = s2.toUpperCase();
    if (x1 < x2) {
        return -1;
    }
    if (x1 > x2) {
        return 1;
    }
    return 0;
}); // ['apple', 'Google', 'Microsoft']



忽略大小写来比较两个字符串，实际上就是先把字符串都变成大写（或者都变成小写），再比较。


从上述例子可以看出，高阶函数的抽象能力是非常强大的，而且，核心代码可以保持得非常简洁。


最后友情提示，sort()方法会直接对Array进行修改，它返回的结果仍是当前Array：


var a1 = ['B', 'A', 'C'];
var a2 = a1.sort();
a1; // ['A', 'B', 'C']
a2; // ['A', 'B', 'C']
a1 === a2; // true, a1和a2是同一对象




 


标准对象


 


在JavaScript的世界里，一切都是对象。


但是某些对象还是和其他对象不太一样。为了区分对象的类型，我们用typeof操作符获取对象的类型，它总是返回一个字符串：


typeof 123; // 'number'
typeof NaN; // 'number'
typeof 'str'; // 'string'
typeof true; // 'boolean'
typeof undefined; // 'undefined'
typeof Math.abs; // 'function'
typeof null; // 'object'
typeof []; // 'object'
typeof {}; // 'object'



可见，number、string、boolean、function和undefined有别于其他类型。特别注意null的类型是object，Array的类型也是object，如果我们用typeof将无法区分出null、Array和通常意义上的object——{}。


包装对象


除了这些类型外，JavaScript还提供了包装对象，熟悉Java的小伙伴肯定很清楚int和Integer这种暧昧关系。


number、boolean和string都有包装对象。没错，在JavaScript中，字符串也区分string类型和它的包装类型。包装对象用new创建：


var n = new Number(123); // 123,生成了新的包装类型
var b = new Boolean(true); // true,生成了新的包装类型
var s = new String('str'); // 'str',生成了新的包装类型



虽然包装对象看上去和原来的值一模一样，显示出来也是一模一样，但他们的类型已经变为object了！所以，包装对象和原始值用===比较会返回false：


typeof new Number(123); // 'object'
new Number(123) === 123; // false

typeof new Boolean(true); // 'object'
new Boolean(true) === true; // false

typeof new String('str'); // 'object'
new String('str') === 'str'; // false



所以闲的蛋疼也不要使用包装对象！尤其是针对string类型！！！


如果我们在使用Number、Boolean和String时，没有写new会发生什么情况？


此时，Number()、Boolean和String()被当做普通函数，把任何类型的数据转换为number、boolean和string类型（注意不是其包装类型）：


var n = Number('123'); // 123，相当于parseInt()或parseFloat()
typeof n; // 'number'

var b = Boolean('true'); // true
typeof b; // 'boolean'

var b2 = Boolean('false'); // true! 'false'字符串转换结果为true！因为它是非空字符串！
var b3 = Boolean(''); // false

var s = String(123.45); // '123.45'
typeof s; // 'string'



是不是感觉头大了？这就是JavaScript特有的催眠魅力！


总结一下，有这么几条规则需要遵守：


    

  • 

    不要使用new Number()、new Boolean()、new String()创建包装对象；
    

    • 

  • 

    用parseInt()或parseFloat()来转换任意类型到number；
    

    • 

  • 

    用String()来转换任意类型到string，或者直接调用某个对象的toString()方法；
    

    • 

  • 

    通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {...}；
    

    • 

  • 

    typeof操作符可以判断出number、boolean、string、function和undefined；
    

    • 

  • 

    判断Array要使用Array.isArray(arr)；
    

    • 

  • 

    判断null请使用myVar === null；
    

    • 

  • 

    判断某个全局变量是否存在用typeof window.myVar === 'undefined'；
    

    • 

  • 

    函数内部判断某个变量是否存在用typeof myVar === 'undefined'。
    

    • 



最后有细心的同学指出，任何对象都有toString()方法吗？null和undefined就没有！确实如此，这两个特殊值要除外，虽然null还伪装成了object类型。


更细心的同学指出，number对象调用toString()报SyntaxError：


123.toString(); // SyntaxError



遇到这种情况，要特殊处理一下：


123..toString(); // '123', 注意是两个点！
(123).toString(); // '123'



不要问为什么，这就是JavaScript代码的乐趣！


 


 


 


数值类型:number






            

            
posted @ 
2017-06-06 09:09 
崔崔0624 
阅读(522) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    

    

        

    

        

            
                
                
            
        

    

        

            
                
            
        

    

    

    



	

	

	
	

	

	

	





    

        TOP