JavaScript学习之路（四）

JS学习

一、判断数据类型
基本数据类型：Number、String、Boolean、Null、Undefined。
typeof判断数据类型：typeof a;
但是没有办法区分Array和Object：

<script>
  let a=[1,2,3];
  let b={};
  console.log(typeof a,typeof b);
</script>

输出：object object

因此还可以使用instanceof判断：

<script>
  let a=[1,2,3];
  let b={};
  console.log(a instanceof Array);
  console.log(b instanceof Array);
</script>

输出：true false

二、字符串
转义符号
\t空格（html里面多个\t也只能显示一个空格，因此可以使用&nbsp）
\n换行（html里面不支持\n）
模板字面量

<script>
  let  today="8.17";
  console.log("今天是"+today+"号"+"\n"+"阴天");
  console.log(`今天是${today}号
阴天`);
</script>

输出：

今天是8.17号
阴天
今天是8.17号
阴天

这两种写法效果一样，但是明显使用模板字面量效率更高。
还可以在模板${}中写函数，表达式：

<script>
  function show(){
    return "baidu";
  }
  console.log(`www.${show()}.com`);
</script>

输出：

www.baidu.com

<script>
  console.log(`5+3=${5+3}`);
</script>

输出：

5+3=8

三、标签模板
一个示例，模板字面量里面还能嵌套模板字面量

  <style>
    li:nth-of-type(even){
      background:lightblue;
    }
    li:nth-of-type(odd){
      background:burlywood;
    }
    li{
      padding: 10px;
    }
  </style>
  <script>
    let lessons=[
    {title:"高性能计算",teacher:"赵老师"},
    {title:"移动计算技术",teacher:"方老师"},
    {title:"数据挖掘",teacher:"杨老师"},
    {title:"操作系统原理",teacher:"李老师"},
    {title:"高性能计算",teacher:"蔡老师"},
    {title:"移动计算技术",teacher:"张老师"},
    {title:"数据挖掘",teacher:"王老师"},
    {title:"操作系统原理",teacher:"刘老师"},
    ];
    function template(){
      return`<ul>
      ${lessons
      .map(item=>
        tag`<li>课程：${item.title}，老师：${item.teacher}</li>`
      )
      .join("")
      }
      </ul>`;
    }
    function tag(strings,...vars){
      return strings
      .map((str,key)=>{
        return str+(vars[key]?
        vars[key].replace(
          "操作系统原理",`<a href='https://www.baidu.com'>操作系统原理</a>`
        ).replace(
          "数据挖掘",`<a href='https://www.hao123.com'>数据挖掘</a>`
        ).replace(
          "移动计算技术",`<a href='https://www.baidu.com'>移动计算技术</a>`
        )
        :"");
      })
      .join("");
    }
    
    document.body.innerHTML+=template();
  </script>

四、闭包特性：函数可以访问到其他函数的数据
按照价格排序：

  <script>
    let lessons=[
    {title:"高性能计算",clik:89,price:12},
    {title:"移动计算技术",clik:45,price:76},
    {title:"数据挖掘",clik:78,price:97},
    {title:"操作系统原理",clik:30,price:47},
    {title:"数据结构",clik:60,price:26},
    {title:"算法设计",clik:12,price:36},
    {title:"软件架构",clik:58,price:64},
    {title:"软件项目管理",clik:99,price:96},
    ];
    let hd=lessons.sort(function(a,b){
      return a.price>b.price?1:-1;
    });
    console.table(hd);
  </script>

点击列名就可以按照列名排序：

  <script>
    let lessons=[
    {title:"高性能计算",clik:89,price:12},
    {title:"移动计算技术",clik:45,price:76},
    {title:"数据挖掘",clik:78,price:97},
    {title:"操作系统原理",clik:30,price:47},
    {title:"数据结构",clik:60,price:26},
    {title:"算法设计",clik:12,price:36},
    {title:"软件架构",clik:58,price:64},
    {title:"软件项目管理",clik:99,price:96},
    ];
    function order(field){
      return function(a,b){
        return a[field]>b[field]?1:-1;
        }
    }
    console.table(lessons.sort("click");
  </script>

四、this在闭包中的问题
this指向当前调用函数的对象，在闭包（函数里面的函数）中无法获取

  <script>
    let hd={
      user:"admin",
      get:function(){
        return function(){
          return this.user;
        };
      }
    };
    console.log(hd.get()());
  </script>

输出：undefined

可以声明一个变量指向当前作用域的this：

  <script>
    let hd={
      user:"admin",
      get:function(){
        let This=this;
        return function(){
          return This.user;
        };
      }
    };
    console.log(hd.get()());
  </script>

输出：admin

ES6新特性：箭头函数更方便~能够使闭包访问到外部函数的this

  <script>
    let hd={
      user:"admin",
      get:function(){
        return ()=>{
          return this.user;
        };
      }
    };
    console.log(hd.get()());
  </script>

输出：admin
再嵌套一层也没关系~

  <script>
    let hd={
      user:"admin",
      get:function(){
        return ()=>{
          return ()=>{
             return this.user;
        };
        };
      }
    };
    console.log(hd.get()()());
  </script>

输出：admin