[JavaScript知识库]ECMAScript渡一教育JavaScript精英课堂笔记 姬成

ECMAScript

一、js浏览器历史

1.web发展史

Mosaic，是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器。于1993年问世
1994年4月，马克.安德森和Silicon Graphics（简称为SGI，中译为“视算科技”或“硅图”）公司的创始人吉姆·克拉克（Jim Clark）在美国加州设立了“Mosaic Communication Corporation”。
Mosaic公司成立后，由于伊利诺伊大学拥有Mosaic的商标权，且伊利诺伊大学已将技术转让给Spy Glass公司，开发团队必须彻底重新撰写浏览器程式码，且浏览器名称更改为Netscape Navigator，公司名字于1994年11月改名为“Netscape Communication Corporation”，此后沿用至今，中译为“网景”。
微软的Internet Explorer及Mozilla Firefox等，其早期版本皆以Mosaic为基础而开发。微软随后买下Spy Glass公司的技术开发出Internet Explorer浏览器，而Mozilla Firefox则是网景通讯家开放源代码后所衍生出的版本。

2.js历史

JavaScript作为Netscape Navigator浏览器的一部分首次出现在1996年。它最初的设计目标是改善网页的用户体验。
作者：Brendan Eich
期初JavaScript被命名为，LiveScript，后因和Sun公司合作，因市场宣传需要改名JavaScript。后来Sun公司被Oracle收购，JavaScript版权归Oracle所有。

3.浏览器组成

1.shell部分
2.内核部分
? 1.渲染引擎（语法规则和渲染）
? 2.js引擎
? 2001年发布ie6，首次实现对js引擎的优化。
? 2008年Google发布最新浏览器Chrome，它是采用优化后的javascript引擎，引擎代号V8，因能把js代码直接 转化为机械码来执行，进而以速度快而闻名。
? 后Firefox也推出了具备强大功能的js引擎
? Firefox3.5 TraceMonkey（对频繁执行的代码做了路径优化）
? Firefox4.0 JeagerMonkey
? 3.其他模块

4.js的逼格

1.解释性语言 — (不需要像编译性语言一样编译成文件）跨平台

优缺点

编译：快——开发游戏引擎，操作系统；不能跨平台，移植性不好

解释性：稍慢；跨平台

2.单线程

异步下载

ECMA标注 — 为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格JavaScript兼容于ECMA标准，因此也称为ECMAScript。

5.js执行队列

类似吃饭

js三大部分
? ECMAScript、DOM、BOM
如何引入js?
? 页面 内嵌 script标签
外部引入
? 为符合web标准（w3c标准中的一项）结构、样式、行为相分离，通常会采用外部引入
同时外部引入，页面内嵌
外部好使，内部失效

二、js基本语法

1.变量

变量声明
声明、赋值分解
单一var声明法

命名规则

1.变量名必须以英文字母、_ 、$ 开头
2.变量名可以包括英文字母、_、$、数字
3.不可以用系统的关键字、保留字作为变量名(关键字，保留字)

开发规范：

<script>
    var a = 10,
        b = 20,
        d;
    document.write(a,b,c,d);
</script>

2.值类型

原始值（不可改变的;栈数据）

两个数据类型的区别：

原始值：stack（栈） 先进去的最后出来

var a = 10;
var b = a;
a = 20;
document.write(b);

栈内存与栈内存之间是拷贝

引用值（堆数据）

array, object, function

Date,RegExp

以上栈内存、堆内存底层原理见视频

JS是动态语言，解释一行，执行一行

三、js基本语句

语句后面要用分号结束“；”

不加分号

1. function test(){}
2. for(){}
3. if(){}

js不同文件变量可以互相访问

<script>
    var a = 10;
</script>
<script>
    document.write(a);
</script>

js语法错误会引发后续代码终止，但不会影响其它js代码块

<script>
    var a = 10;
    document.write(c);
    //20
</script>
<script>
    var b = 20;
    document.write(b);
</script>

几种错误

1. 低级错误（语法解析错误） 一行也不执行

2. 逻辑错误

   先扫描全局，没有低级错误后，解释一行，执行一行

书写格式要规范，“= + / -”两边都应该有空格

1.js运算符

运算操作符

“+”

1.数学运算、字符串链接

2.任何数据类型加字符串都等于字符串

var a = "a" + 1;
document .write(a); a1

var a = "a" + 1 + 1;
document .write(a); //自左向右：a11

var a = "a" + ture + 1;
document .write(a); ature1

var a = 0 / 0;
NAN——not a number

var a = 1/ 0;
Infinity

“-”，“*”，“/“，“%”，”=“，“()”

优先级”=“最弱，”()”优先级较高

“++”，“- -”，”+=“，“-=”，“/=“，“*=”，“%=”

a ++;先执行语句，后++

var a = 10;
document .write(a ++);
//先document .write (a)后++  因为先打印，所以出来10

var a = 10;
document .write(a ++);
document .write(a);
//则10 11

var a = 10;
var b = ++a - 1 + a++;
document .write(b + "" + a);  
//11（a变成了11）-1+11        b:21   a:12（a最后的++）

比较运算符

? “>”，”<”，”==”，“>=”，“<=”，”!=”
? 比较结果为boolean值

逻辑运算符

? “&&”，“||”，“!“
? 运算结果为真实的值

2.false

undefined， null， NaN， “”(空串)， 0， false

3.条件语句

布尔值

1.什么都能比较大小（字符串比较ASCII顺序）

2.只要左右一样，则一样

特例：

var a =NAN == NAN;
document .write(a);
//false

3.逻辑运算符：&& || !

&&:

var a = 1 && 2;
document .write(a);      2

两个表达式：

先看前面表达式转换成布尔值是否为真，（false: undefined， null， NaN， “”， 0， false
），真则看第二个表达式转换成布尔值的结果，如果只有两个表达式，只要看到第二个表达式，就可以返回第二个表达式的值了

var a = 1 && 2; //1为真，故返回2var a = 0 && 2;//直接把第一个表达式的原本的值返回， 故返回0

多个表达式：

先看第一个表达式，如果真，看第二个，也真，看第三个，一旦假的，就返回假的

&&：如果前面是零，就不看了；真，就下一句。

开发应用（短路语句）

2>1&&document .write("成哥很帅")var data = …;data && 执行一个语句，会用到data, 如果data空值，就不能执行下面

&

开发没卵用（有卵用）var num = 1 & 3;即01 & 11 即01

||

第一个是不是真，真，就返回真的原始值，假的话，返回第二个

4.写兼容应用

div. onclick = function(e){// 把e的值取出来	非ie浏览器	var event = e;}div. onclick = function(e){// 把e的值取出来	ie浏览器	var event = e;	window. event;}兼容：div. onclick = function(e){// 把e的值取出来		var event = e || window. event;}

5.if、if else if

demo

var score = parseInt(window .prompt('input'));if(score > 90 && score <= 100){    document .write('alibaba');}if(score > 80 && score <= 90){    document .write('tencent');}

优化

var score = parseInt(window .prompt('input'));if(score > 90 && score <= 100){    document .write('alibaba');}else if(score > 80 && score <= 90){    document .write('tencent');}else{}

等价关系

if(1 > 2){    document .write('a');}与1 > 2 && document .write('a');

6.for

for(var i = 0; i < 10; i++) {    document .write('a');}

优化

var i = 1;var count = 0;for(; i; ){    document.write('a');    count ++;    if(count == 10) {        i = 0;    }}

思维拓展

var i = 100;for(; i --; ){    document.write(i + " ");}

7.while, do while

带7和7的倍数：

var i = 0;while(i < 100){    if(i % 7 == 0 || i % 10 ==7){        document.write(i + " ");    }    i++;}

8.switch case

var n = 3;switch(n) {    case 1:        console.log('a');    case 2:        console.log('b');    case 3:        console.log('c');}

var n = 3;switch(n){    case "a":        console.log('a');    case "b":        console.log('b');    case ture:        console.log('c');}

DEMO

var data = window.prompt('input');switch(data){    case "monday":        console.log('working');        break;    case "tuesday":        console.log('working');        break;    case "wednesday":        console.log('working');        break;    case "thursday":        console.log('working');        break;    case "firday":        console.log('working');        break;    case "saturday":        console.log('relaxing');        break;    case "sunday":        console.log('relaxing');        break;}

优化

var data = window.prompt('input');switch(data){    case "monday":    case "tuesday":    case "wednesday":    case "thursday":    case "firday":        console.log('working');        break;    case "saturday":        console.log('relaxing');        break;    case "sunday":        console.log('relaxing');        break;}

9.break

var i = 0;while(1){    i++;    console.log(i);    if(i > 100){        break;    }}

10.continue

中止本次循环，进行下一循环

for(var i = 0; i < 100; i++){    if(i % 7 == 0 || i % 10 == 7){    }else{        console.log(i);    }}

for(var i = 0; i < 100; i ++){    if(i % 7 == 0 || i % 10 == 7){        continue;    }    console.log(i);}

四、初识引用值

1.数组

var arr = [1,2,3,4,"abc",undefined];

array后来赋值即更改

demo取出每一位

var arr = [1,2,3,45,5,7,"acv",undefined];for(var i = 0; i < arr.length; i++) {    console.log(arr[i]);}

2.对象object

demo

var deng = {    lastName : "Deng",    age : 40,    sex : undefined,    Wife : "xaioliu",    father : "dengge",    son : "dengxiaobao",    handsome : false}console.log(deng.lastName);deng.lastName = "123";console.log(deng.lastName);

3.编程形式的区别

1.面向过程

2.面向对象

六、typeof

六种数据类型： number、string、boolean、undefined、object、function

false undefined， null， NaN， “”， 0， false

类型转换

demo

var num = 1 * "1";console.log(typeof(num) + ":" + num);//s数字类型的1var num = "2" * "1";console.log(typeof(num) + ":" + num);//数字类型2

具体玩法

typeof：typeof(num)或者typeof num

var num = 123;console.log(typeof(num));// numbervar num = "true";//字符串trueconsole.log(typeof(num));// string

谁返回object

引用值：对象、数组、null(历史遗留问题)

七、类型转换

1.显示类型转换

Number(mix)

var num = Number('123');console.log(typeof(num) + " : " + num);// number:123//Null:0//Underfined: NAN//“a”: NAN//False:0//“123”:123	

parseInt(string,radix)

基础用法

“123.9”:123ture:NANNull:NANUnderfined: NAN123.9:123123abc:123

基底

var dmeo = "10";var num = parseInt(demo, 16);//转成16进制console.log(typeof(num) + ":" + num);var demo = "10";var num = parseInt(demo, 16);console.log(typeof(num) + ":" + num);

radix∈（2-36）

parseFloat(string)

转换成浮点型（正常数字）参数只能是字符串

100.2:100.2
100.2.2:100.2

100.2abs:100.2

toString(radix)

转换成字符串

var demo = 123;var num = demo.toString();console.log(typeof(num) + ":" + num);//string:123

Radix：进制，demo里面转换成进制

var demo = 123;var num = demo.toString();console.log(typeof(num) + ":" + num);//string : 123

特殊点：
underfined 和null不能用

String(mix)

同number string 是转换成字符串

underfined: underfined//123:123//ture:ture

Boolean()

除了这些，都是ture : undefined， null， NaN， “”， 0， false

题目:10101010转换成16进制

// parseInt       toString// 2        10      16var num = 10101010;var test = parseInt(num, 2);console.log(test.toString(16));

2.隐式类型转换

isNaN () ——调用number

//console.log(isNAN(NAN));   ture//123 false//“123” false//null false//underfined ture//“abc” ture// console.log(isNAN("abc"));// Number('abc')---->NAN  流程

++/— +/-（一元正负）——调用number

// var a = "123";// a++;//字符串计算也是124// var a = "abc";// a ++;// // NAN 但是typeof是number

两侧有一侧是字符串，就调用string 变成字符串

// var a = "a" + 1;// console.log(a + " : " + typeof(a));

*/% ——调用number

&& || ！

< > <= >=

// var a = "3" > 2;// console.log(a + " : " + typeof(a));// // 转换成数字比较// var a = "3" > "2";// console.log(a + " : " + typeof(a));// // 比较ASCII// var a = 1 == "1";// console.log(a + " : " + typeof(a));//隐式类型转 相等// // undefined == null:true,其他都是false// undefined>0// false// undefined<0// false// undefined==0// false// null同理// NAN == NAN : false;

== !=

3.不发生类型转换

=== !==

没定义直接使用会报错，除了console.log(typeof(a))

alert(typeof(a));alert(typeof(undefined));alert(typeof(NAN));alert(typeof(null));var a = "123abc";alert(typeof(+a));alert(typeof(!!a));alert(typeof(a+""));alert(1 == "1");alert(NAN == NAN);alert(typeof(NAN == undefined));alert("11"+11);alert(1==="1");alert(parentInt("13abx"));var num = 123123.22324;alert(num.toFixed(3));alert(typeof(typeof(a)));

八、函数

函数组成形式

• 函数名称
• 参数
  ? 形参
  ? 实参
• 返回值

1.定义

方法1：函数声明

function test(){}

方法2：函数表达式

函数定义方式

1.命名函数表达式

var test = function abc(){    document.write('a');}

2.匿名函数表达式（常用）——函数表达式

var demo = function (){    document.write('b');}

3.现象：

abc不是函数了，test才是。等号右边是表达式，表达式忽略abc名字

test.name//abcdemo.name//demotest.name//test

2.函数参数

function text(a,b){    // 相当于隐式var a,b;    document.write(a+b);}text(1,2);

形式参数—形参

function sum(a,b){    var c = a + b;    document.write(c);}

实际参数—实参

sum(1,2);

形参实参不一定相等数量，谁都谁少都行，传参传什么类型都行，也不一定一样

function sum(a){    document.write(a);}sum(11,2,3)

不管调用没调用，都有

function sum(a,b,c,d){    document.write(a);    document.write(d);//undefined}function sum(a){    //arguments--[11,2,3];实参列表    console.log(arguments);    console.log(arguments.length);}

小应用

function sum(a){    for(var i = 0; i < arguments.length; i++){        console.log(arguments[i])    }}sum(11,2,3);

求形参

function sum(a,b,c,d){                console.log(sum.length);//形参长度           }sum(11,2,3);

映射规则（形参=实参才映射）：但是是两个东西

function sum(a,b){    a = 2;    console.log(arguments[0]);}sum(1,2);//2    a变，arguments也变function sum(a,b){    a = 2;    arguments[0] = 3;    console.log(a);}sum(1,2);//3    a 也变

参数不相等，不映射

function sum(a,b){    // argument[1]就没值了    b = 2;    console.log(arguments[1]);    // 返回undefined}sum(1);

3.return

1.函数终止

function sum(a,b){    console.log('a');    return;    //在这里终止    console.log('b');}sum(1);

2.返回值

function sum(){    return 123;    console.log('a');//本句不好使，因为也终止函数}sum(1);var num = sum();

function myNumber(target){    return +target;}var num = myNumber('123');console.log(typeof(num) + " " + num);