一.JS简介
JavaScript 是 Web 的编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行
二.JS用法
1.放置位置
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript
推荐放在body代码块底部，因为Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已
Js代码可以放在一个单独的文件中，然后通过 <script src="common.js" type="text/javascript"></script>可以将其导入进来，或者直接在html文件中直接书写代码，如下面所示，其中两种方式的 type都可以不用写，因为浏览器默认的便是javascript
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>
标题一
</h1>
<script>
alert("js")
</script>
</body>
</html>
2.JS注释
单行注释以 // 开头
多行注释以 /* 开始，以 */ 结尾
注：此注释仅在Script块中生效
三.变量
变量是用于存储信息的"容器"
- 局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不推荐）
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
2.声明变量
var 关键词来声明局部变量
pwd = 'test'; //不加var 定义的是全局变量
function f1() {
//name = 123 ; // 不加var 函数里面修改的还是全局变量
var name = 'Mike' // 加var 函数里面修改的是局部变量
}
一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可
3.变量的生命周期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
四.数据类型
数据类型主要分为：
字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）
null、undefined1.字符串（String）
字符串是存储字符（比如 "Bill Gates"）的变量。
字符串可以是引号中的任意文本。可以使用单引号或双引号：
常见功能：
常见功能例 ：
indexOf:从第一个匹配项的索引
lastIndexOf:找到最后一个匹配项的索引
split:分隔，并且支持正则表达式
分隔示例：
正则表达式：Python中分隔用（），JS中用//,分组也用（）。
示例：
.search示例：
.match:加上g可以全局匹配
.replace:替换
示例二：
$&:代指已匹配成功的项
$数字：代指匹配成功的某一个组（按照顺序）
跑马灯实例：
跑马灯2.数字类型
avaScript 只有一种数字类型。数字可以带小数点，也可以不带
转换：
- parseInt(..) 将某值转换成数字，不成功则NaN
- parseFloat(..) 将某值转换成浮点数，不成功则NaN
特殊值：
- NaN，非数字。可使用 isNaN(num) 来判断。
- Infinity，无穷大。可使用 isFinite(num) 来判断
例
var num1 = new Number(123); //创建了一个数字类型的对象
var num3 = Number(456); // 456
var num2 = 666;
var s1 = 's123';
var num4 = parseInt(s1);
console.log(num1.valueOf(),num2,num3);
console.log(num4); // NaN
if(isNaN(num4)){
console.log('not a number'); // not a number
}
else {
console.log('a number');
}
console.log(isFinite(num3)); // 是否是有限值 true Infinity表示无穷大。
console.log(typeof num3); // 'number' 返回的是字符串
var a = 1222.4444444;
console.log(a.toFixed(2)); // 1222.44
console.log(a.toExponential(3)); // 1.222e+3
3.布尔类型
布尔（逻辑）只能有两个值：true 或 false
- == 比较值相等
- != 不等于
- === 比较值和类型相等
- !=== 不等于
- || 或
- && 且
例;
var a = 123; var s = '123'; console.log(a==s); // true console.log(a===s); // false 判断值和类型一样
4.数组
JavaScript中的数组类似于Python中的列表
1.内置方法
obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1) 指定位置删除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
例 ：
var a = [1,2,3,4];
console.log(a.length); // 4
a.push(5);
console.log(a); // [1, 2, 3, 4, 5]
var ret = a.pop();
console.log(ret); // 5
a.unshift('aaa'); // 头部插入元素
console.log(a); // ["aaa", 1, 2, 3, 4]
var ret1 = a.shift(); // 头部移除元素
console.log(ret1); // aaa
var ret2 = a.slice(1,3); // 切片，
console.log(ret2); // [2,3]
// obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
console.log(a);
a.splice(1,0,'first'); // 指定位置插入元素
a.splice(2,1,'second'); // 指定位置替换元素
a.splice(2,1); // 指定位置删除元素
console.log(a);
var b = ['22'];
console.log(b.concat(a)); // 连接字符串 ["22", 1, "first", 3, 4]
console.log(a.join('-')); // 拼接字符串 1-first-3-4
console.log(a.reverse()); // 反转字符串 [4, 3, "first", 1]
console.log([3,2,5].sort()) //对number数组进行排序
5.对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
var person={name:"Peter", , id:47};
对象属性有两种寻址方式:
name=person.name; name=person["name"];
完整示例6.Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量
示例声明新变量时，可以使用关键词 "new" 来声明其类型
五.其他
1.序列化
序列化就是将JavaScript中的数据类型转换成字符串，反序列化的过程则相反
JSON.string(obj)：序列化
JSON.parse(str)：反序列化
例：
var a = 'ss'; ret = JSON.stringify(a); // 'ss' 序列化 console.log(ret); console.log(JSON.parse(ret)); // ss 反序列化
2.转义
一般使用在URL中字符的转义等，常用方法见下：
- decodeURI( ) URl中未转义的字符
- decodeURIComponent( ) URI组件中的未转义字符
- encodeURI( ) URI中的转义字符
- encodeURIComponent( ) 转义URI组件中的字符
- escape( ) 对字符串转义
- unescape( ) 给转义字符串解码
- URIError 由URl的编码和解码方法抛出
例：
// 转义 其中escape() unescape()主要是对cookies使用
var a = 'http://www.baidu.com?name=张三';
console.log(encodeURI(a)); // http://www.baidu.com?name=%E6%9D%8E%E6%9D%B0
console.log(decodeURI(encodeURI(a))); // http://www.baidu.com?name=张三
console.log(encodeURIComponent(a)); // http%3A%2F%2Fwww.baidu.com%3Fname%3D%E6%9D%8E%E6%9D%B0
console.log(decodeURIComponent(encodeURIComponent(a))); // http://www.baidu.com?name=张三
3.eval
JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值
- eval()
- EvalError 执行字符串中的JavaScript代码
例 ：
console.log(eval('1+2*5-5')); // 6
console.log(eval(a = 1)); // 1 声明了一个局部变量a值为1
4.正则表达式
1、定义正则表达式
- /.../ 用于定义正则表达式
- /.../g 表示全局匹配
- /.../i 表示不区分大小写
- /.../m 表示多行匹配
JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容)
例：
var pattern = /^Java\w*/gm; var text = "JavaScript is more fun than \nJavaEE or JavaBeans!"; result = pattern.exec(text) result = pattern.exec(text) result = pattern.exec(text)
注：定义正则表达式也可以 reg= new RegExp()
2、匹配
JavaScript中支持正则表达式，其主要提供了两个功能：
- test(string) 用于检测正则是否匹配
-
n = 'uui99sdf' reg = /\d+/ reg.test(n) ---> true # 只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$
- exec(string) 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。
-
![]()
View Code
注：定义正则表达式时，“g”、“i”、“m”分别表示全局匹配，忽略大小写、多行匹配。
常用于匹配用户输入的用户名格式、手机号码格式是否正确
例：
var a = /\d+h/;
console.log(a.test('123h434')); // true 检测正则是否匹配，表单数据验证可用到
console.log(a.test('12a34')); // false
console.log(a.exec('123h434')); // ["123h", index: 0, input: "123h434"] 获取正则匹配内容
console.log(a.exec('123e434')); // null
5.时间
JavaScript中提供了时间相关的操作，时间操作中分为两种时间：
- 时间统一时间
- 本地时间（东8区）
例 ：
var now = new Date(); now.getFullYear(); now.getMonth(); // 6, 月份，注意月份范围是0~11，6表示7月 now.getDate(); // 7, 表示7号 now.getDay(); // 3, 表示星期三 now.getHours(); // 19, 24小时制 now.getMinutes(); // 49, 分钟 now.getTime(); // 1435146562875, 以number形式表示的时间戳
六.语句
1.条件语句
在 JavaScript 中，我们可使用以下条件语句：
- if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
- if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
- if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
- switch 语句 - 使用该语句来选择多个代码块之一来执行
if 语名格式
if(条件){
}else if(条件){
}else{
}
例：
if 语名实例使用 if....else if...else 语句来选择多个代码块之一来执行
语法
if (condition1)
{
当条件 1 为 true 时执行的代码
}
else if (condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
例
if..else if ..else
switch语句格式
语法
default 关键词来规定匹配不存在时做的事情
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}
switch(变量名){
case '值1':
age = 123;
break;
case '值2':
age = 456;
break;
default:
age = 777;
}
工作原理：
首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行
例
switch实例2.循环语句
JavaScript 支持不同类型的循环：
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
For 循环
for 循环是您在希望创建循环时常会用到的工具。
下面是 for 循环的语法：
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 （代码块）开始前执行 starts.
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
例：
var names = ["Sam", "tony", "rain"];
for(var i=0;i<names.length;i++){
console.log(i);
console.log(names[i]);
}
For/In 循环
JavaScript for/in 语句循环遍历对象的属性
例：
var names = ["Sam", "tony", "rain"];
for(var index in names){
console.log(index);
console.log(names[index]);
}
While 循环
只要指定条件为 true，循环就可以一直执行代码块
语法
while (条件)
{
需要执行的代码
}
例
View Codedo/while 循环
do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环
语法
do
{
需要执行的代码
}
while (条件);
例：
do..while3、异常处理
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的
try {
//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向Error对象或者其他抛出的对象 主动跑出异常 throw Error('xxxx')
}
finally {
//无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}
例：
View Code七.函数
1.函数类型
JavaScript中函数基本上可以分为一下三类,普通函数，匿名函数，自执行函数,此外需要注意的是对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数
// 普通函数
function func(arg){
return true;
}
// 匿名函数
var func = function(arg){
return "tony";
}
// 自执行函数
(function(arg){
console.log(arg);
})('123')
例:
不带参数函数 带参数函数 调用函数2.函数作用域
JavaScript中每个函数都有自己的作用域，当出现函数嵌套时，就出现了作用域链。当内层函数使用变量时，会根据作用域链从内到外一层层的循环，如果不存在，则异常。
切记：所有的作用域在创建函数且未执行时候就已经存在
function f2(){
var arg= 111;
function f3(){
console.log(arg);
}
return f3;
}
ret = f2();
ret();
注：声明提前，在JavaScript引擎“预编译”时进行。
3.闭包
「闭包」，是指拥有多个变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
简单来说闭包是个函数，而它「记住了周围发生了什么」（函数里面嵌套函数）。表现为由「一个函数」体中定义了「另个函数」。
由于作用域链只能从内向外找，默认外部无法获取函数内部变量。闭包，在外部获取函数内部的变量
function f2(){
var arg= [11,22];
function f3(){
return arg;
}
return f3;
}
ret = f2();
ret();
八.面向对象
1.简介
- JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...
- 对象只是一种特殊的数据。对象拥有属性和方法。
2.创建对象
function Foo (name,age) {
this.Name = name;
this.Age = age;
this.Func = function(arg){
return this.Name + arg;
}
}
var obj = new Foo('Peter', 18);
var ret = obj.Func("test");
console.log(ret);
对于上述代码需要注意：
- Foo充当的构造函数
- this代指对象
- 创建对象时需要使用 new
上述代码中每个对象中均保存了一个相同的Func函数，从而浪费内存。使用原型和可以解决该问题
function Foo (name,age) {
this.Name = name;
this.Age = age;
}
Foo.prototype = {
GetInfo: function(){
return this.Name + this.Age
},
Func : function(arg){
return this.Name + arg;
}
}
JavaScript补充
- 为了强制使用var定义变量，可以在代码开始加上'use strict',这样未被var声明的变量将会报错，前提是浏览器支持该模式
- 可以用转义字符
\,'I\'am "ok"' - 要获取字符串某个指定位置的字符,可以使用s[1]下表进行操作， 如果对s[1] = 'f'赋值的话，不会报错，原字符串也不会改变。调用字符串的相关方法只会产生一个新的字符串
- 对数组进行操作，var f = [1,2],f[4] = 5,超过了数组长度，但是不会报错，相反数组f变成了 [1, 2,undefined × 2, 5]这一点需要特别注意，此外如果在pycharm中运行的话，不会出现上述情况但是会在数组中增加一个键值对。因此千万要注意自己操作数组的时候不要越界
- 数组切片，
arr.slice(3)表示从索引3开始到结束，arr.slice(0, 3)表示从索引0开始，到索引3结束,arr.slice()可以复制一个数组。 - 对象，每个对象的属性用逗号分隔，访问不存在的属性会返回一个undefined,可以通过delete 删除某一属性，当然也可以直接动态的添加某一属性，要判断一个对象是否有某个属性，可以使用 in 比如 onsole.log('name' in xiaoming),但是这样可以能有一个问题，如果xiaoming继承了某一属性，那么判断这一属性也会成功，所以最好用 xiaoming.hasOwnProperty('name')
- 函数传参的时候，可以多传，也可以少传，少传的话，未被传入的参数会被定义为undefined,在函数内部用arguments获取到所有函数传入的参数，
- 函数内部的变量会"提前声明"，具体的请看下面的代码
function foo() {
var x = 'Hello, ' + y;
alert(x); // Hello, undefined
var y = 'Bob';
}
foo();
// 对于上述foo()函数，JavaScript引擎看到的代码相当于：
function foo() {
var y; // 提升变量y的申明
var x = 'Hello, ' + y;
alert(x);
y = 'Bob';
}
9.不在任何函数内定义的变量就具有全局作用域,实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性
var a = 'hello';
console.log(window.a);
console.log(a);
function foo() {
console.log('foo');
}
foo();
window.foo();
可以看到上面两种方式的执行效果一样，JavaScript实际上只有一个全局作用域。任何变量（函数也视为变量），如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报ReferenceError错误。全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局属性中。例如：
// 唯一的全局属性MYAPP:
var MYAPP = {};
// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;
// 其他函数:
MYAPP.foo = function () {
return 'foo';
};
10. Array的sort()方法默认把所有元素先转换为String再排序，结果'10'排在了'2'的前面，因为字符'1'比字符'2'的ASCII码小。
