前端每日小结

Echarts快速入门

1.第一个实例：

• 先引入echarts.js文件

• 创建一个用于容纳echarts的dom

  <div id="main" style="width: 600px;height:400px;"></div>
  

• 基于准备好的dom，初始化echarts实例

   var myChart = echarts.init(document.getElementById('main'));
  

• 将echarts示例的option部分代码填入

• 利用dom名.setOption(option)使用刚指定的配置项和数据显示图表

Javascript基础

1. num++ ++num

   var num = 8
   
   console.log(num++)  --->  8 ---> 先执行输出 再自增
   
   console.log(++num)   ---> 9 ---->先自增 再执行输出
   

2. 最佳实践：

   === !==

3. 函数的声明

   function func_name(null/premeters){
       ....
   }
   

4. 对象

   var object_name = {
       attr1: "value",
       attr2: value,
       attr3: function(){
           //可以写成函数
       }
   }
   
   /*一个对象的属性是函数，那么这就是个方法*/
   

5. 数组遍历

   //i 是索引
   for(var i in list){
       ...
   }
   //i 是 元素
   for(var i of list){
       ...
   }
   //map方法遍历
   list.map(function(list_value, list_index){
       ...
   });
   

6. 数组的常用方法：

• sort push

• filter:(过滤器) 返回值还是数组

  list.filter(function(item){
  	...
  })
  

• join: 将数组连接成字符串

  list.join(); //出现有逗号
  list.join("");// 自然连接，没有符号
  list.join("join_symbol");//用指定符号连接
  

• split：

  list.split();//将字符串转变为一个字符串数组(只有一个元素)
  list.split("");//拆分成字符数组，每个字符都是一个元素
  list.split("split_symbol");//将指定字符作为拆分符，拆分符两侧的字符变成新数组的元素
  

7. 内置对象

   • Math对象：floor(), random(),abs(), sqrt(), pow()

   • Date对象：使用new关键字

     var time = new Date(); //输出当前时间,注意是【当前】！
     var time = new Date("2022-12-1 12:00");//输出指定时间
     var month = time.getMonth();//输出实际月份-1
     time.getTime();//时间戳 从1970年01月01日00:00起的总毫秒数
     

8. 计时器方法：setInterval(function(){}, ms)

   setInterval(function(){
       ... 
   }, ms)
   

9. 正则表达式

   var str = "abc";
   var reg = /[a-z]/;   //[..]表示范围
   var reg = /^[a-z]$/; //^..$表示起始和终止
   
   var result = reg.exec(str);//返回匹配的内容
   var result = reg.test(str);//返回匹配的结果
   

   • 语法：

10. ES2015的基础语法

• 变量：

  • 使用let替换var ：
    • let有块级作用域的概念
    • let不存在变量声明提升
    • let不允许重复声明

• 常量：

  • const定义常量
  • 定义之后不可以修改
  • 常量的使用：
    • 不变的值
    • 函数表达式
    • 对象声明：可以二次修改对象属性值
    • 引用外部模块

• 模板字符串

  • 支持换行(使用反引号)、嵌入变量 ( 反引号＋${…})

    //换行
    let str = `hello
    		world`  //还会显示缩进
    
    //嵌入变量、
    let year = 2020;
    let month = 12;
    let day = 05;
    let result = `${year}年${month}月${day}日`;
    

    如图所示：

• 解构赋值

  • 数组的解构赋值
  • 对象的解构赋值
  • 通过解构赋值传递参数

• 函数

  • 一次声明，多次使用

  • 函数声明提升

  • 匿名函数：作为参数传递给另一个函数或方法时，被称为回调函数

  • 函数表达式：不具备函数提升的特性

    //函数声明
    function func(..){...}
    //函数表达式be like:
    const func = function(..){...}