JavaScript基础简介

1. JavaScript引入的方式
   1. 直接在<script>标签中写

      <script>
          console.log('hello world!');
      </script>

   2. 引入JS文件

      <script src="helloworld.js"></script>
2. 注释

   //单行注释
   
   /*
   *多
   *行
   *注
   *释
   */

3. 变量的声明
   1. JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头
   2. 使用关键字var
   3. 使用驼峰式命名规则
   4. ES6新增了let命令，用于声明变量。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。
   5. const用来声明常量。一旦声明，其值就不能改变

   6. //1
      var myAge = 23;
      
      //2
      let count = 1; //适合用在如for循环中
      
      //3
      const PI = 3.1415;

4. 数据类型
   1. JavaScript是动态类型的

      var x = 1;

      var x = 'hsr'; 
      

      var x = undefined;

   2. 数值类型（Number）

      //JavaScript不区分整型和浮点型，就只有一种数字
      
      //整数
      var a = 100;
      
      //浮点数
      var b = 1.1;
      
      //科学计数法
      var c = 12e11;
      
      //表示不是数字
      var d = NaN;
      
      //常用方法
      parseInt("123")  // 返回123
      parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
      parseFloat("123.456")  // 返回123.456

   3. 字符串类型（String）

      var s1 = 'hsr';
      var s2 = 'cool!';
      
      var s3 = s1+s2;    //字符串拼接直接用+
      
      //常用方法
      s3.length    //返回长度
      s3.trim()    //移除空白
      s3.trimLeft()    //移除左边的空白
      s3.trimRight()    //移除右边的空白
      s3.charAt(3)    //返回第3个字符
      s3.concat("haha")    //拼接
      s3.indexOf('hsr')    //子序列位置
      s3.substring(from, to)    //根据索引获取子序列,左闭右开
      s3.slice(start, end)    //切片
      s3.toLowerCase()    //小写
      s3.toUpperCase()    //大写
      s3.split(序列, 分割符)    //分割

   4. 布尔值（Boolean）

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

   5. null与undefined

      null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null
      
      undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined
      
      举例：
      我要买一瓶水
      null是拿到了空瓶子
      undefined是还没拿到任何东西

5. 对象

   1. JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

   2. JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

      对象只是带有属性和方法的特殊数据类型。

   3. 数组

      //数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。
      
      var arr = [1,2,3,4]
      console.log(arr[2])
      
      //常用方法
      方法    说明
      .length    数组的大小
      .push(ele)    尾部追加元素
      .pop()    获取尾部的元素
      .unshift(ele)    头部插入元素
      .shift()    头部移除元素
      .slice(start, end)    切片
      .reverse()    反转
      .join(seq)    将数组元素连接成字符串
      .concat(val, ...)    连接数组
      .sort()    排序
      .forEach()    将数组的每个元素传递给回调函数
      .splice()    删除元素，并向数组添加新元素。
      .map()    返回一个数组元素调用函数处理后的值的新数组
      
      
      //如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
      
      //如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 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)

   4. foreach

      //forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
      
      //注意: forEach() 对于空数组是不会执行回调函数的。
      
      //例子
      arr = [1,2,3,4,5];
      
      function xiu(currentVaule){
          console.log(currentVaule)
      }
      arr.forEach(xiu);

   5. splice

      //splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目
      //该方法会改变原始数组
      
      var arr = [1,2,3,4,5,6];
      
      arr.splice(2,0,2);//在2的位置添加一个2
      console.log(arr);
      
      arr.splice(2,1);//删除2的位置上的元素
      console.log(arr);
      
      arr.splice(2,1,4);//把2位置上的元素替换为4
      console.log(arr);

   6. map

      //map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
      //map() 方法按照原始数组元素顺序依次处理元素。
      //注意： map() 不会对空数组进行检测。
      //注意： map() 不会改变原始数组。
      
      var arr = [1,2,3]
      function xiu(currentValue){
          return currentValue*currentValue;
      }
      console.log(arr.map(xiu));    //返回元素的平方

   7. 类型查询

      #运算符typeof
      
      console.log(typeof 'hahaha');

6. 运算符

   #跟其它语言几乎一样
   #算术
   + - * / % ++ --
   
   #比较
   > >= < <= != == === !==
   
   #逻辑
   && || !
   
   #赋值
   = += -= *= /=

7. 流程控制

   #和c++一样，简单示例一下
   #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");
   }
   
   #switch语句
   var day = new Date().getDay();
   switch (day) {
     case 0:
     console.log("Sunday");
     break;
     case 1:
     console.log("Monday");
     break;
   default:
     console.log("...")
   }
   
   #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

8. 函数
   1. 函数定义

      //函数的定义
      // 普通函数定义
      function f1() {
        console.log("Hello world!");
      }
      
      // 带参数的函数
      function f2(a, b) {
        console.log(arguments);  // 内置的arguments对象
        console.log(arguments.length);
        console.log(a, b);
      }
      
      // 带返回值的函数
      function sum(a, b){
        return a + b;
      }
      sum(1, 2);  // 调用函数
      
      // 匿名函数方式
      var sum = function(a, b){
        return a + b;
      }
      sum(1, 2);
      
      // 立即执行函数
      (function(a, b){
        return a + b;
      })(1, 2);
      
      //ES6添加
      //如果箭头函数不需要参数或需要多个参数，就是用圆括号代表参数部分
      var f = v => v;
      // 等同于
      var f = function(v){
        return v;
      }
      
      //函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回。

   2. arguments参数

      function add(a,b){
        console.log(a+b);
        console.log(arguments[0]+arguments[1]);//等同上一条
        console.log(arguments.length);//参数个数  
      }

   3. 作用域

      局部变量：
      
      在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
      
      全局变量：
      
      在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
      
      变量生存周期：
      
      JavaScript变量的生命期从它们被声明的时间开始。
      
      局部变量会在函数运行以后被删除。
      
      全局变量会在页面关闭后被删除。
      
      
      首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。

9. 词法分析

   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);
     function age(){
       console.log("呵呵");
     }
     console.log(age);
   }
   foo();  // 执行后的结果是？

10. 内置对象
    1. 自定义对象

       //JavaScript中的所有事物都是对象：字符串、数字、数组、日期，等等。在JavaScript中，对象是拥有属性和方法的数据。
       
       //注意点
       var a = 1;
       var b = new Number(1);
       console.log(typeof a,typeof b);
       //a->number,而b->object
       
       //ES6中提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。
       也就是说，Object结构提供了“字符串--值”的对应，Map结构提供了“值--值”的对应，是一种更完善的Hash结构实现。
       
       //自定义对象
       var person=new Object();  // 创建一个person对象
       person.name="Alex";  // person对象的name属性
       person.age=18;  // person对象的age属性
       person.sayhi = function (name) {    //添加方法
           console.log(name);
       };
       person.sayhi('hsr');

    2. 继承
       1. 参考博客
    3. 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");
       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());  //毫秒并不直接显示
       
       //其他方法
       var d = new Date(); 
       //getDate()                 获取日
       //getDay ()                 获取星期
       //getMonth ()               获取月（0-11）
       //getFullYear ()            获取完整年份
       //getHours ()               获取小时
       //getMinutes ()             获取分钟
       //getSeconds ()             获取秒
       //getMilliseconds ()        获取毫秒
       //getTime ()                返回累计毫秒数(从1970/1/1午夜)

    4. JSON

       var str = '{"name":"hsr","age":"18"}';
       //解析:字符串->对象
       var ret = JSON.parse(str);
       console.log(ret);
       console.log(typeof ret);
       //对象->字符串
       var s2 = JSON.stringify(ret);
       console.log(s2);
       console.log(typeof s2);

    5. RegExp

       方法1
       var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
       var regexpRet1 = reg1.test("wiero342");
       console.log(regexpRet1);
       
       //方法2
       console.log(/^[a-zA-Z][a-zA-Z0-9]{5,11}/.test("3sfas3"));
       
       //注意点
       
       //1.表达式中间不要加空格
       console.log(/^[a-zA-Z][a-zA-Z0-9]{5,11}/.test("sfweas3"));
       console.log(/^[a-zA-Z][a-zA-Z0-9]{5, 11}/.test("sfas3"));
       
       //2.没有传值相当于传入字符串undefined
       console.log(/^[a-zA-Z][a-zA-Z0-9]{5,11}/.test());
       console.log(/^[a-zA-Z][a-zA-Z0-9]{5,11}/.test(undefined));
       
       //3.JS正则的两种模式
       //a.g表示全局
       //b.i忽略大小写
       var ss = 'hsrverycoolr';
       ss = ss.replace(/r/gi,"哈哈");  //不是改变旧的，而是生成新的
       console.log(ss);
       
       //4.使用全局模式的正则表达式去检测一个字符串时
       //lastIndex会记住上一次匹配成功的位置
       //下次将会从lastIndex开始
       var r = /^a[a-zA-Z]{2}$/g;
       console.log(r.test('abc'));
       console.log(r.lastIndex);
       console.log(r.test('abc'));
       console.log(r.lastIndex);
       console.log(r.test('abc'));
       console.log(r.lastIndex);
       console.log(r.test('abc'));
       console.log(r.lastIndex);

    6. 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)      返回角的正切。
       
       //使用方法
       console.log(Math.abs(-1));//ret= 1