JavaScript概述

引用1

引用2

函数
    函数的定义
        一般函数定义:
            function foo(a,b){
              函数的代码块;
              return 返回值
            }
        匿名函数:
            var bar = function(){...}
        立即执行函数:
            (function(a,b){...})(实参1,实参2)
    函数的参数:
        不严谨(可传多,可传少,就是不报错)
        arguments:函数内部可以通过arguments拿到所有的参数
        
    作用域
        函数内部可以调用函数外部的变量
        函数外部无法访问函数内部的变量
        
    词法分析
        函数调用的一瞬间要做两部:
            1. 分析(AO对象)
                1. 先分析有没有参数,
                2. 看看有没有局部变量
                3. 看看有没有函数声明
                
            2. 真正执行
                取值都是从AO对象上找
    
自定义对象
    定义的两种方法:
        1. var p1 = {name: "xiaoqiang", age: 38}
        2. var p2 = new Object();
           p2.name = "xiaoqiang"
           p2.age = 38;
       
    遍历自定义对象方式:
        for (var i in p1){
          console.log(i);
          console.log(p1[i]);
        }

内置对象和方法
    1. Date
        1. 生成对象
            var d1 = new Date()
            var d2 = new Date("2018-03-13")
        2. 方法:
            1. d1.toLocalString()
            2. d1.toUTCString()
            3. d1.getFullYear()
            4. d1.getMonth() (0~11)
            5. d1.getDay()   (星期天是0)
            6. ...
    
    2. JSON
        1. 字符串转JSON对象
            var jsonObj = JSON.parse('{"name": "xiaoqiang", "age": 18}')
        2. JSON对象转成字符串
            var s = JSON.stringify(jsonObj)
    
    3. Math
        1. 略...
    4. RegExp
        1. 定义正则两种方式
            1. var reObj1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}$");
            2. var reObj2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}$/
            
        2. 常用方法
            reObj1.test("将要被校验的字符串")
        3. 正则的匹配模式
            1. g  --> 全局
                "Alexdashabi".replace(/a/g, "呵呵")
            2. i  --> 不区分大小写
                "Alexdashabi".replace(/a/i, "呵呵")
            
        4. 几个坑
            1. 正则表达式之间不能加空格
            2. .test()不传值相当于.test(undefined)--> .test("undefined")
            3. 全局匹配模式注意事项
                var reObj = /Alex/g;
                reObj.test("Alex")    --> lastIndex属性被设置成下一位4
                reObj.test("1234Alex") 就返回true

一、JS（JavaScript）

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

    核心（ECMAScript） 
    文档对象模型（DOM） Document object model (整合js，css，html)
    浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
            简单地说，ECMAScript 描述了JavaScript语言本身的相关内容。

JavaScript 是脚本语言，是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

①注释：
    // 这是单行注释

    /*
    这是多行注释
    */

②结束符
    JavaScript中的语句要以分号（;）为结束符。

③变量声明
    JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
    声明变量使用 var 变量名; 的格式来进行声明

    var name = "Alex";
    var age = 18;

④注意：
    变量名是区分大小写的。
    推荐使用驼峰式命名规则。
    保留字不能用做变量名。

补充：

ES6新增了let命令，用于声明变量。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令。

for (let i=0;i<arr.length;i++){...}

ES6新增const用来声明常量。一旦声明，其值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-onl

二、引入JS的两种方式

1、Script标签内写代码

<script>
  // 在这里写你的JS代码
</script>

2、引入额外的JS文件

<script src="myscript.js"></script>

三、数据类型

JavaScript拥有动态类型

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串 

1、数值

JavaScript不区分整型和浮点型，就只有一种数字类型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

还有一种NaN，表示不是一个数字（Not a Number）。

常用方法：

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

 2、字符串

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

拼接字符串一般使用“+”

 

 

var s="hello yuan";

//几个js方法示例
console.log(s.charAt(6));      // 返回指定位置的字符    y
console.log(s.indexOf("h"));   // 返回某个指定的字符串值在字符串中首次出现的位置   0
console.log(s.slice(2,-2));    // 从已有的数组中返回选定的元素，-2指从倒数第二个元素结束    llo yu
console.log(s.slice(2));       // 没有指定从何处结束，切分的数组包含从 start 到数组结束的所有元素  llo yuan

string.slice(start, stop)和string.substring(start, stop)：

两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换

silce()的特点：
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

slice和substring的区别

 

    

 3、布尔值

区别于Python，true和false都是小写。

var a = true;
var b = false;

""(空字符串)、0、null、undefined、NaN都是false

4、null和undefined

• null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
• undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

　　null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值

5、数组

 数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

 

 

关于sort()需要注意：

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

示例：

function sortNumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

关于遍历数组中的元素，可以使用下面的方式：

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(a[i]);
}

6、foreach

 

7、splice

 

 

8、typeof类型查询

 

typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。

四、运算符

 1、算数运算符:+ - * / % ++ --

 

 2、比较运算符:> >= < <= != == === !==

  

 3、逻辑运算符:&& || !

 

 4、赋值运算符:= += -= *= /=

 五、流程控制

 if-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

 if-else if-else 

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

 switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

 switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。 

for

for (var i=0;i<10;i++) {
  console.log(i);
}

 while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

 三元运算  

var a = 1;
var b = 2;
var c = a > b ? a : b

 

六、函数

 1、函数的定义

 ①带参函数

 

 ②带返回值的函数 

 ③匿名函数

 

 ④立即执行函数

 

 ⑤箭头函数

  

 2、函数中的arguments参数

  

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

局部变量：

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

全局变量：

　　在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

作用域：

　　首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样 

 几个例子： 

1.

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

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

2.

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是？--------------BeiJing

3.闭包

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();      // 打印结果是？---------------ShangHai 

// 函数的定义
// function foo(a,b) {
//     console.log("a:", a);
//     console.log("b:", b);
//     return a+b;
// }
// 匿名函数
// var func = function (a, b) {
//     console.log("a:", a);
//     console.log("b:", b);
//     return a+b;
// };

// 立即执行函数
// (function (a,b) {
//     console.log("立即执行函数");
//     console.log(a+b);
//     var sss = "我是函数内部的变量";
// })(11,22);

// console.log(sss);  // 外部访问不到函数内部定义的变量(用立即执行函数防止变量污染全局变量)
// console.log("立即执行函数");
// console.log(a+b);
// var sss = "我是函数内部的变量";

console.log("===========================");
// 函数的调用
// var ret1 = foo(11,22,33,44,55);
// var ret1 = foo(11); // 11+undefined --> NaN
// console.log("a+b=", ret1);

// var ret2 = func(11, 22);
// console.log(ret2);

// arguments
// function func2(a,b) {
//     console.log("总共有" + arguments.length + "个参数");
//     var ret = 0;
//     for (var i=0;i<arguments.length;i++){
//         ret += arguments[i]
//     }
//     return ret;
// }
//
// console.log(func2(11,22,33));


// JS中的词法分析
var age = 18;
function func3(){
  console.log(age);  // 去AO找age
  var age = 22;  // AO.age=undefined
  console.log(age);
  // function age() {  // AO.age= function(){...}
  //     console.log("xxxx");
  // }
}

func3();  // 问：执行func3()之后的结果是？



// 18 22
// 22 22
// 22 18
// 18 18
// null 22
// undefind 22


var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
  function age(){
    console.log("呵呵");
  }
  console.log(age);
  age();
}
foo();  // 执行后的结果是？

// 1. 先分析 给AO赋值
// var age = 22;  --> AO.age=undefined;
// function age(){console.log("呵呵");}  --> AO.age=function(){...}

// 2. 真正执行阶段 就去AO上找
// function(){...}
// 22
// 22

// 总共三个值

4、词法分析

JavaScript中在调用函数的那一瞬间，会先进行词法分析。

词法分析的过程：

当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：

1:函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。
2:函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
3:函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。

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

例子：

//第一题
var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
}
foo();  // 问：执行foo()之后的结果是？

//第二题：

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
  function age(){
    console.log("呵呵");
  }
  console.log(age);
}
foo();  // 执行后的结果是？

词法分析过程：
1、分析参数，有一个参数，形成一个 AO.age=undefine;
2、分析变量声明，有一个 var age, 发现 AO 上面已经有一个 AO.age，因此不做任何处理
3、分析函数声明，有一个 function age(){...} 声明， 则把原有的 age 覆盖成 AO.age=function(){...};

最终，AO上的属性只有一个age，并且值为一个函数声明

执行过程：
注意：执行过程中所有的值都是从AO对象上去寻找

1、执行第一个 console.log(age) 时，此时的 AO.age 是一个函数，所以第一个输出的一个函数
2、这句 var age=22; 是对 AO.age 的属性赋值， 此时AO.age=22 ，所以在第二个输出的是 2
3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了

 

   

七、内置对象和方法

1、自定义对象

2、date对象

getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)

作业：编写代码，将当前日期按‘2017-12-27 11:11 星期三’格式输出：

const WEEKMAP = {  
  0:"星期天",
  1:"星期一",
  2:"星期二",
  3:"星期三",
  4:"星期四",
  5:"星期五",
  6:"星期六"
};  //定义一个数字与星期的对应关系对象


function showTime() {
    var d1 = new Date();
    var year = d1.getFullYear();
    var month = d1.getMonth() + 1;  //注意月份是从0~11
    var day = d1.getDate();
    var hour = d1.getHours();
    var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();  //三元运算

    var week = WEEKMAP[d1.getDay()];  //星期是从0~6

    var strTime = `
    ${year}-${month}-${day} ${hour}:${minute} ${week}
    `;
    console.log(strTime)
};

showTime();

结果为： 2019-5-31 22:17 星期五

 

3、JSON对象

4、RegExp对象

//RegExp对象

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

// 用户名只能是英文字母、数字和_，并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。

// 创建RegExp对象方式（逗号后面不要加空格）
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");

// 匹配响应的字符串
var s1 = "bc123";

//RegExp对象的test方法，测试一个字符串是否符合对应的正则规则，返回值是true或false。
reg1.test(s1);  // true

// 创建方式2
// /填写正则表达式/匹配模式（逗号后面不要加空格）
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

reg2.test(s1);  // true


// String对象与正则结合的4个方法
var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容
s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割
s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换

// 关于匹配模式：g和i的简单示例
var s1 = "name:Alex age:18";

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不区分大小写


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

var reg3 = /foo/g;
// 此时 regex.lastIndex=0
reg3.test('foo'); // 返回true
// 此时 regex.lastIndex=3
reg3.test('xxxfoo'); // 还是返回true
// 所以我们在使用test()方法校验一个字符串是否完全匹配时，一定要加上^和$符号。

// 注意事项2(说出来你可能不信系列)：
// 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test("undefined"), 并且/undefined/.test()默认返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true

RegExp相关

5、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)      返回角的正切。

Math

 

// JS中自定义对象

// var person = {name: '小强', age: 38};  // 在JS的对象中,键(属性)默认不用加引号;并且自动把单引号转成双引号
// console.log(person);
// // 单独取对象的属性
// console.log("name:", person.name);
// console.log("age:", person.age);
//
// // 遍历对象的属性
// for (var i in person){
//     console.log(i);
//     console.log(person[i]);
// }


// Date对象
var d1 = new Date();
console.log(d1);
console.log(typeof d1);
console.log(d1.toLocaleString());  // 转成字符串格式的本地时间
console.log(typeof d1.toLocaleString());

// 生成指定时间的Date对象
// var d2 = new Date("2004/3/20 11:12");
// console.log(d2.toLocaleString());  // 转成字符串格式的本地时间
// console.log(d2.toUTCString());  // 转成字符串格式的UTC时间

var d2 = new Date("2018-3-11 11:12");
console.log(d2.toLocaleString());  // 转成字符串格式的本地时间
console.log(d2.toUTCString());  // 转成字符串格式的UTC时间

console.log(d2.getDate());  // 获取那一天(多少号)
console.log(d2.getDay());  // 获取星期几
console.log(d2.getMonth());  // 获取月份
console.log(d2.getFullYear());  // 获取年
console.log(d2.getHours());  // 获取小时
console.log(d2.getMinutes());  // 获取分钟
console.log(d2.getSeconds());  // 获取秒
console.log(d2.getTime());  // 获取时间戳

// JSON对象
console.log("==============================");

var s = '{"name": "xiaoqiang", "age": 38}';
// 把字符串转换成JS内部的对象
var ret = JSON.parse(s);
console.log(ret);
console.log(typeof ret);
// 把JS内部的对象转换成字符串
var s2 = JSON.stringify(ret);
console.log(s2);
console.log(typeof s2);

// RegExp对象 --> Python re模块
// 生产 RegExp对象
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
var regexpRet1 = reg1.test("xiaoqiang");
console.log(regexpRet1);

var regexpRet2 = reg1.test("1xiaoqiang");
console.log(regexpRet2);

console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("xiaoqiang"));
console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("1xiaoqiang"));

// 坑1 (正则表达式中间一定不可以有空格)
console.log("============================================");
console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("xiaoqiang"));
console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("1xiaoqiang"));

// 坑2
// test()不传值相当于传了一个undefined进去
// 然后test()就把这个undefined当成是"undefined"来判断
console.log("============================================");
console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test("undefined"));
console.log(/^[0-9a-zA-Z][a-zA-Z0-9_]{5,11}$/.test());
console.log(/^[0-9][a-zA-Z0-9_]{5,11}$/.test(undefined));
console.log(/^[0-9][a-zA-Z0-9_]{5,11}$/.test("undefined"));

// JS正则的两种模式
// 1. g 表示全局
// 2. i 忽略大小写
var ss = "Alexdashabi";
var s3 = ss.replace(/a/gi, "哈哈哈");  // 不是改变默认的字符串,而是生成了一个新的字符串
console.log(s3);

// 坑3
// 当正则表达式使用了全局模式(g)的时候,并且你还让它去检测一个字符串,此时会引出来一个lastIndex
// lastIndex会记住上一次匹配成功的位置,并把下一次要开始椒盐的位置记住
//
console.log("===============================");
var r = /alex/g;
console.log(r.test("alex"));  // true
console.log(r.lastIndex);  // 4
console.log(r.test("alex"));  // false
console.log(r.lastIndex);
console.log(r.test("alex"));  // true
console.log(r.lastIndex);
console.log(r.test("alex"));  // false