前端(JavaScript语言）

一、ECMAScript 的三个组成部分

　　• 核心（ECMAScript）
　　• 文档对象模型（DOM） Document object model (整合js，css，html)
　　• 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

二、JavaScript语言规范

注释：
方式一： // 单行注释
方式二： /*多行注释*/

结束符：
结束符(;)

缩进：
无特殊要求

变量声明：
var:申明一个变量            # _，数字，字母，$组成，不能以数字开头
• 变量名是区分大小写的
• 推荐使用驼峰式命名规则。首字母大写
• 保留字不能用做变量名

　　

null和undefined区别

null                 // 表示值是空
undefined        // 表示当声明一个变量但未初始化时，该变量的默认值是undefined

　　

typeof方法对类型查询：
typeof          // 查看变量类型
示例：

typeof null               // "object"
typeof [1,2]             // "object"
typeof new Object;   // "object"

typeof "abc"             // "string"

typeof true               // "boolean"

typeof 123               // "number"
typeof NaN              // "number"(非数值类型(Not a Number)，类型：number)

typeof undefined;     // undefined

三、JavaScript引入方式

　　3.1 Script标签内写代码：

  　　注意：在head标签里面可以写，在body标签里面也可以写

　　

示例：
<script>console.log('骑士计划！')</script>

　　3.2 引入额外的JS文件：

　　

示例：
<script src="myscript.js"></script>

四、JavaScript常用方法

　　4.1 alert方法：

 　　 注意：执行后浏览器弹出一个提示框

　　

示例：
<script>
    alert(' 你好！')      #这个是浏览器窗口一打开咱们这个文件，就弹出一个窗口
</script>

　　4.2 console.log方法：

　　

示例：
<script>
    console.log('你好！')      # f12建打开浏览器的调试窗口，然后在console这个调试台就能看到这个内容了
</script>

五、JavaScript数据类型

　　5.1 数值(Number)：

  　　注意：
　　  1.JavaScript不区分整型和浮点型
　　  2.NaN（Not a Number）：表示不是一个数字，也就是说是一个值

　　

示例：
var a = 12.34;
var b = 20;
var c = 123e5;     // 12300000  科学计数法
var d = 123e-5;   // 0.00123

　　5.2 字符串(String)：

定义字符串：
var a = "Hello"

字符串方法：
注意：拼接字符串一般使用“+”
• .length                             // 返回字符串长度(属性：不需要+括号)
• .trim()                                   // 移除两端空白(得到一个新值)
• .trimLeft()                       // 移除左边的空白
• .trimRight()                       // 移除右边的空白
• .charAt(n)                       // 返回第n个字符
• .concat(value, ...)                      // 字符串拼接(例如：value="hello", "world")
• .indexOf(substring, start)                      // 子序列位置，没有返回-1（substring:子序列字符串，start：起始索引位置）
• .substring(from, to)                      // 根据索引获取子序列（from:子序列字符串，to：索引结束位置）
• .slice(start, end)                      // 字符串切片(start:起始索引位置，end：索引结束位置)
• .toLowerCase()                      // 字符串全部变小写
• .toUpperCase()                   // 字符串全部变大写
• .split(delimiter, limit)                     // 字符串分割（delimiter:字符串界定符，limit：索引结束位置）

字符串转换方法：
parseInt("123")            // 返回123
parseInt("ABC")           // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456
"

　　5.3 布尔值(Boolean)：

  　　注意：true和false都是小写

　　

示例：
var a = true;          // 真
var b = false;         // 假(　""(空字符串)、0、null、undefined、NaN都是false)

　　5.4 对象(Object):

 　　 注意：
　　  1.  对象只是带有属性和方法的特殊数据类型
　　  2. JavaScript 中的所有事物都是对象(字符串、数值、数组、函数...此外)
　　  3. JavaScript 提供多个内建对象 (Number、String、Date、Array 等)
　　  4. 数组不需要new生命，类型就是object类型

内建对象创建对象：
var s = new String('hello')                        // 创建一个字符串对象
var n = new Number(12)                         // 创建一个数值对象

自定义对象一：
s3 = {'name': "alie", "age": 12};              // 自定义对象({name: "alie", age: 12})，类似于python中的字典
• s3.name                // 获取对象的属性
• s3["name"]              // 获取对象的属性
示例：
var a = {"name": "Alex", "age": 18};
for (var i in a){                                      // 遍历对象中的内容
  console.log(i, a[i]);
}

自定义对象二：
var person=new Object();    // 创建一个person对象
person.name="Annie";         // person对象的name属性
person.age=18;                  // person对象的age属性

构造方法：
• 创建函数对象：
function Person(name){       // 创建一个Person函数对象
    this.name=name
}
• 实例化：
var p1 = new Person('lisa');       // 实例化这个对象
• 创建对象方法：
Person.prototype.func1 = function(){   //添加一些方法，使用prototype，叫做原型链 方法
    console.log(this.name,'爱编程！')
}
• 属性或者方法调用：
p1.name            // chao
p1.func1()         // lisa 爱编程！

　　5.5 数组(Array):

  　　注意：使用单独的变量名来存储一系列的值。类似于Python中的列表

定义数组：
var a = [123, "ABC"]; 

数组方法：
• .length                               // 返回数组的长度
• .pus(value, ...)                              // 尾部追加元素
• .pop()                              // 删除尾部的元素,返回删除的元素
• .unshift(value, ...)                        // 头部插入元素
• .shift()                            // 头部移除元素
• .slice(start, end)                        // 数组切片
• .reverse()                         // 数组反转(修改原列表)
• .join(seq)                        // 将数组元素连接成字符串(seq: 连接符，例如：s.join(“+”))
• .concat(val, ...)                         // 连接数组(类似：python中的extend)
• .splice(start, end, substring)                       // 删除元素，并向数组添加新元素(可以不指定添加的新字符串)


• .sort()                 // 排序(如果调用该方法时没有使用参数，将按字母顺序的编码对数组中的元素进行排序)
指定参数：
示例：
function sortNumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

• .forEach()             // 将数组的每个元素传递给回调函数

• .map()                  // 返回一个数组元素调用函数处理后的值的新数组

六、运算符

　　6.1 算数运算符：

+ - * / % ++ -- 
注意：
i++,是i自加1，i--是i自减1
i++              // 这个加1操作优先级低，先执行逻辑，然后再自加1
++i              // 这个加1操作优先级高，先自加1，然后再执行代码后面的逻辑

　　6.2 比较运算符：

> >= < <= != == === !==
1 == “1”           // true, 弱等于(比较值)
1 === "1"        // false, 强等于（比较类型 + 比较值）

　　6.3 逻辑运算符：

　　&& || ! // !null返回true

　　6.4  赋值运算符：

　　= += -= *= /=  

七、三元运算符

　　

示例：
var a = 1;
var b = 2;
var c = a > b ? a : b    // 如果a>b这个条件成立，就把冒号前面的值给c，否则把冒号后面的值给c   //python中的：a = x if x>y else y

八、流程控制语句

　　8.1 if-else语法：

　　

语法：
if else语句：
if (条件){函数体}else{函数体}
if (条件){函数体}else if (条件){函数体}

　　

单条件示例：
var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

多条件示例：
var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

　　8.2 switch语法：

  　　注意：
　　  1. switch里面参数：一个值或者一个一个值的算式
　　  2. switch语句中执行满足条件的case语句后，一般地需要break退出当前switch语句

　　

语法:
switch(条件){case 0:函数体；...default: 函数体；}

示例：
var variable = 2;           // 这里variable可以是一个值或者表达式
switch (variable){
    case 1:
    console.log("这时variable：1");
    break;
    case 2:
    console.log("这时variable：2");
    break;                   // 满足条件后退出
    default:                 // 此处，以上不满足条件或者没有break函数，则会执行最后的default语句
    console.log("这时variable是其他数值");              
}

　　8.3 for语法：

　　

语法：
for (var i=0;i<10;i++){函数体}
注意：
++i与i++在for中的逻辑：
for (var i=0;i<10){函数体；++i或者i++}               // ++i或者i++都是逻辑执行完后才执行
for (;;)                                                                // 死循环

　　

示例：
循环数组：
var l2 = ['aa','bb','dd','cc']
方式1：
for (var i in l2){                         // 通过遍历数组元素取值
   console.log(i,l2[i]);
}
方式2：
for (var i=0;i<l2.length;i++){     // 通过遍历数组长度取值
　　console.log(i,l2[i])
}

循环自定义对象：
var d = {aa:'xxx',bb:'ss',name:'小明'};
for (var i in d){
    console.log(i,d[i])      // 注意循环自定义对象的时候，打印键对应的值，只能是对象[键]来取值，不能使用对象.键来取值。
}

　　8.4 while语法：

 　　 注意：while条件必须指定有限条件，否则会产生死循环

　　

示例：
var i = 0;
while (i < 10) {             // 直到循环条件不成立退出程序
  console.log(i);
  i++;
}

九、函数

　　

定义函数方法：
function 函数名(){函数体}
function 函数名(a,b){函数体}
注意：
返回值(return)                  // 多个返回值时，只返回最后一个值(如果就想返回多个值，你可以用数组包裹起来)

　　9.1 普通函数定义：

　　

function f1() {
  console.log("Hello world!");
}

　　9.2 带参数的函数：

　　

function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);       // 返回数组中的元素个数
  console.log(a, b);
}

　　9.3 带返回值的函数：

  　　注意：调用函数时：参数多给只执行前两个参数的和，参数给少了执行返回NaN

　　

function sum(a, b){
    return a + b;           // 返回一个结果值
    //return [a,b]；          // 返回多个值，通过数组返回
}

　　9.4 匿名函数方式：

　　

var sum = function(a, b){          //在es6中，使用var，可能会飘黄，是因为在es6中，建议你使用let来定义变量，但不影响使用
  return a + b;  
}
sum(1, 2);

ES6中允许使用“箭头”（=>）定义函数，可以理解为匿名函数：
示例：
var f = () => 5;      // 不带参数，等同于：var f = function(){return 5};
var sum = (num1, num2) => num1 + num2;    // 带参数，等同于：var sum = function(num1, num2){ return num1 + num2; }

　　9.5 立即执行函数：

  　　注意：页面加载到这里，这个函数就直接执行了，不需要被调用执行

　　

(function(a, b){
  return a + b;
})(1, 2);                  //python中写可以这么写：ret=(lambda x,y:x+y)(10,20) 然后print(ret)

十、函数的全局变量和局部变量

　　

局部变量：
    在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
    
全局变量：
    在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它

变量生存周期：
　　JavaScript变量的生命期从它们被声明的时间开始。
　　局部变量会在函数运行以后被删除。
　　全局变量会在页面关闭后被删除。

作用域：
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层

   

示例一：
var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";              # 找到内部的局部变量
    console.log(city);
  }
  inner();
}

f();  //输出结果是？ ---> ShenZhen

   

示例二：
var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;                           // 返回Bar的函数地址
}
var ret = f();
ret();  // 打印结果是？---> BeiJing

   

示例三(闭包函数)：
闭包函数：一个嵌套函数，引用外部非全局变量
var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();   ---> ShangHai

十一、词法分析

  　　注意：函数内部无论是使用参数还是使用局部变量都到AO上找

词法分析过程：
    1、激活词法分析对象(Avtive Object（AO）) 
    2、函数参数，如果有，则将此参数赋值给AO，且值为undefined
    3、函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
    4、函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作

　　

示例一：
var age = 18;
function foo(){
  console.log(age);  //分析到这一步的时候，发现你下面有age变量声明，那么age变量就在AO对象上树上了，并且值为undefined，所以函数在执行的时候，还没有到age=22这步的时候，age=undefined
  var age = 22;      //如果没有这个变量声明，那么打印的结果应该是18
  console.log(age);
}
foo();            // undefined  22

　　

示例二：
var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
  function age(){   #发现age这个函数名也是变量，将OA上的变量给替换了，那么函数在执行的时候，去OA上找，发现OA是个函数，然后执行到age=22的时候，age才被重新赋值
    console.log("呵呵");
  }
  console.log(age);
}
foo();                    // function age(){console.log("呵呵");} 22 22

十二、JS中的日期(Date)对象

　　

//方法1：不指定参数
var d1 = new Date(); //获取当前时间
console.log(d1.toLocaleString());  //当前时间日期的字符串表示

//方法2：参数为日期字符串
var d2 = new Date("2004.3.20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");     # 月/日/年(可以写成04/03/2020)
console.log(d3.toLocaleString());

//方法3：参数为毫秒数，了解一下就行
var d3 = new Date(5000);  
console.log(d3.toLocaleString());
console.log(d3.toUTCString());  
 
//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());   //毫秒并不直接显示

属性：
//getDate()                 获取日
//getDay ()                 获取星期 ，数字表示（0-6），周日数字是0
//getMonth ()               获取月（0-11,0表示1月,依次类推）
//getFullYear ()            获取完整年份
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜),时间戳

十三、JS中的JSON对象使用

var str1 = '{"name": "chao", "age": 18}';     // 字符串json对象
var obj1 = {"name": "chao", "age": 18};      // js对象

var obj = JSON.parse(str1);         // JSON字符串转换成对象
var str = JSON.stringify(obj1);     // 对象转换成JSON字符串

十四、JS中的Math对象

　　

注意：Math：不需要new来创建对象
• Math.abs(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)            // 返回角的正切。

 十五、RegExp对象

注意：
参数1 ：正则表达式(不能有空格)
参数2 ：匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一个匹配后停止)和i(忽略大小写)

创建RegExp对象：
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");              // 创建RegExp对象(方式一)
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;                                  // 创建RegExp对象，简写(方式二)


方法：
注意事项1：
如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。
该属性值默认为0，所以第一次仍然是从字符串的开头查找。
当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。
因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。
如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。


• test方法：
注意：
RegExp对象的test方法，测试一个字符串是否符合对应的正则规则，返回值是true或false。
示例：
var s1 = "bc123";          // 创建一个需要匹配的字符串，例如：bc123
reg1.test(s1);               // true
reg1.test();                  // test()：如果不传入参数，默认会传一个“undefined”字符串（条件匹配则为true否则为false）

• match方法：
示例：
var s2 = "hello world";
s2.match(/o/g);                    // ["o", "o"]             查找字符串中 符合正则 的内容 ，/o/g后面这个g的意思是匹配所有的o,

• search方法：
示例：
var s2 = "hello world";
s2.search(/h/g);                   // 0                      查找字符串中符合正则表达式的内容位置，返回第一个配到的元素的索引位置，加不加g效果相同

• split方法：
示例：
var s2 = "hello world";
s2.split(/o/g);                       // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割，得到一个新值，原数据不变


• replace方法：
示例一：
var s2 = "hello world";
s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换

示例二：
var s1 = "name:Annie age:18";
s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Annie age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Annie 哈哈哈ge:18"      全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈nnie 哈哈哈ge:18"  不区分大小写


特殊示例(test())：
当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test(undefined)，然后将这个undefined又转为字符串"undefined",去进行匹配了, 并且/undefined/.test()默认返回true。
var reg4 = /^undefined$/;
reg4.test();                           // 返回true
reg4.test(undefined);             // 返回true
reg4.test("undefined");           // 返回true