前端 javascript

js简介

# 1.js的全称为javaScript，其与java并无联系
# 2.js作为一款前端编程语言，其本身存在着许多的逻辑错误
# 3.js发展史：
         JavaScript >> ECMAScript >> JavaScript 
         JavaScript 进行了许多版本的迭代，现在最常用的是ECMAScript6

# 4.js基础
      -1.注释语法
            // 单行注释
            /*多行注释*/   
      -2.引入js的多种方式
            1.在head内script标签内编写
            2.在head内script标签的src属性引入外部js资源
            3.body内最底部通过script标签的src属性引入外部js资源
       ps: 页面代码的执行是从上往下的，所以在操作js代码时一定要等待标签加载完毕后，执行js资源才能正常运行

# 5.结束符号   ;

js变量与常量

"""
可以写前端代码的地方！
   -1.编译软件创建的js文件或html文件
   -2.浏览器提供js的编码环境       
"""

# 1.js中的常量
         在js中声明常量需要使用关键字 const
                   const p = 3.14;
# 2.js中的变量
         在js中声明变量也需要使用关键字  var/let
                   var name = 'jason'      
                   let name = 'jason'       
          ps：let时ECMA6的新语法，可以在局部定义变量不影响全局定义的变量，在js中声明常量也需要关键字  

js基本数据类型

"""
python中查看数据类型的方式            type()
js 中查看数据类型的方式               typeof
"""
//1.数值类型(Number)
      在JS中整型与浮点型统一称为Number
      NaN也属于数值类型，译为：Not A NumBer(不是一个数字)

//2.字符类型(String)
      单引号      ''
      双引号      ""
      模板字符串   ``

      使用：
         let name = 'jason'              //undefined
         let desc = `my name is ${name}` //undefined
         name                            //'jason'
         desc                            //'my name is jason'
      ps: 字符串的拼接建议使用+，js数据类型也有常见的内置方法

# 常用方法
.length                     //返回长度
.trim()                     //移除空白
.trimLeft()                 //移除左边的空白
.trimRight()                //移除右边的空白
.charAt(n)                  //返回第n个字符
.concat(value, ...)         //拼接
.indexOf(substring, start)  //子序列位置
.substring(from, to)        //根据索引获取子序列
.slice(start, end)          //切片
.toLowerCase()              //小写
.toUpperCase()              //大写
.split(delimiter, limit)    //分割

# 使用

// 定义：
var a = ' jerry '
undefined
var b = 'ami'
undefined
var c = 'TOM'
undefined
// 使用：
a.length                // 7
a.trim()                // 'jerry'
a.trimLeft()            // 'jerry '
a.trimRight()           // ' jerry'
a.charAt(3)             // 'r'
a.concat(b)             // ' jerry ami'
a.slice(2,4)            // 'er'
a.substring(1,4)        // 'jer'
a.indexOf('r')          // 3

b.toUpperCase()         // 'AMI'
c.toLowerCase()         // 'tom'
a.split(delimiter,limit)
// separator    可选,字符串或正则表达式，从该参数指定的地方分割string Object。
// limit    可选,该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

//3.布尔类型(Boolean)
      JS里面的布尔值和Python中的不同
      python:       True/False       首字母大写
      js:           true/false       全小写

//4.null与undefined
      null表示值为空             曾经有过
      undefined表示没有被定义     从来没有
     
//5.对象(object)
      数组(Array）       >>  类似于python里面的列表
              let l1=[]                 //undefined
              l1                        //[]
      自定义对象(Object)  >>  类似于python里面的字典
              let d1 = {'name':'tom',}  //undefined
              let d2 = new Object();    //undefined
              d1                        //{name: 'tom'}
              d2                        //{}

# 方法    
.length              // 数组的大小
.push(ele)           // 尾部追加元素
.pop()               // 获取尾部的元素
.unshift(ele)        // 头部插入元素
.shift()             // 头部移除元素
.slice(start, end）  // 切片
.reverse()           // 反转
.join(seq)           // 将数组元素连接成字符串
.concat(val, ...)    // 连接数组
.sort()              // 排序
.forEach()           // 将数组的每个元素传递给回调函数
.splice()            // 删除元素，并向数组添加新元素。
.map()               // 返回一个数组元素调用函数处理后的值的新数组

运算符

//1.算数运算符
    + - * / % ++(自增1) --(自减1)
     
    var x=10;                           //undefined                                  //10
    var res=x++;   加号在后，先赋值后自增   //undefined
    res                                 //10
    x                                   //11

    var res1=++x;  加号在前，先自增后赋值   //undefined
    res1                                //11
    x                                   //11
//2.比较运算符
      !=(弱不等于)    ==(弱等于)  
      !==(强不等于)  ===(强等于)
    ps:js中使用弱等于，是会自动进行类型的转换的

//3.逻辑运算符
   &&        与
   ||        或
   ！        非

流程控制

//1.单if分支
     if (条件){
            条件成立执行的代码
     }
//2.if...else分支
     if (条件){
            条件成立执行的代码
     }else{
            条件不成立执行的代码
     }
//3.if...else if...else分支
     if (条件1){
            条件1成立执行的代码
     }else if(条件2){
            条件1不成立，条件2成立执行的代码
     }else{
            条件1和条件2都不成立执行的代码
     }
//4.switch语法  （分支结构中的else if如果多的话可以考虑switch语法）
      switch(条件){
            case 条件1：
                  条件1成立执行的代码；
                  break;        //如果没有break会基于某个case一直执行下去
            case 条件2：
                  条件2成立执行的代码；
                  break;
            case 条件3：
                  条件3成立执行的代码；
                  break;
            default:
                  条件都不满足执行的代码
      }

//5.for循环
      for(起始条件;循环条件;条件处理){
           循环体代码
      }
      
    eg:1. for(let i=0;i<11;i++){
              console.log(i)
          }    
              // 0 1 2 3 4 5 6 7 8 9 10
              // undefined
           
       2. let a1 = {'name':'jason','age':18}
              // undefined 
          for(let k in a1){
              console.log(k)
          }
              // name
              // age
              // undefined
                      
//6.while循环
      while(循环条件){
            循环体代码
      }

函数

// 1.对于函数的定义
"""
python中：

def 函数名(形参):
      '''函数注释'''
      函数体代码
      return 返回值
"""
js中：
 
function 函数名(形参){
      // 函数注释
      函数体代码 
      return 返回值
}
"""
js与python的作用域关系查找一模一样，首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。
"""

# 1.匿名函数  : 传入的参数必须匹配够相同的数量，多了取前两个，少了则会出现NaN
例1：
var s1 =function(a,b){
     return a+b;
}

eg1:

var s1 =function(a,b){
    return a + b
}                         // undefined
s1(1,3)                   // 4
s1(1,3,2)                 // 4
s1(1)                     // NaN


# 2.箭头函数   : 传入的参数必须匹配够相同的数量，多了取前两个，少了则会出现NaN

例1:
var f = v =>v;
var f = function(v){
     return v;
}

eg1:

var f = v => v;
var f = function(v){
    return v;
}                 // undefined
f(4)              // 4


例2:     
var f = () =>5;
var f = function(){
     return 5
};                

eg2:

var f = () =>5;
var f = function(){
     return 5
};                 // undefined
f(2)               // 5
f()                // 5


例3:
var sum = (num1,num2) => num1 + num2; 
var sum = function(num1, num2){
     return num1 + num2;
}

eg3:

var sum = (num1,num2) => num1 + num2; 
var sum = function(num1, num2){
   return num1 + num2;
}             // undefined
sum(1,2)      // 3
sum()         // NaN
sum(3)        // NaN
sum(1,2,3)    // 3

"""
1.JS中函数的形参可以与实参的个数不对应
         传入的参数少了就是undefined，传多了多的就不用
2.函数体代码中有一个关键字 argyments用来接收所有的实参
3.函数的返回值如果有多个需要自己处理成一个整体

"""

内置对象

// 1.内置对象
var f= new Date();      // undefined
   f.getDate()          // 5            获取日
   f.getDay()           // 1            获取星期
   f.getMonth()         // 11          获取月份
   f.getFullYear()      // 2022      获取完整年份
   f.getYear()          // 122        获取1900年到现在的年份
   f.getHours()         // 18          获取小时
   f.getMinutes()       // 31         获取分钟
   f.getSeconds()       // 54         获取秒
   f.getMilliseconds()  // 850       获取毫秒
   f.getTime()          // 1670236314850     获取时间戳


// 2.序列化与反序列化
let dd ={name: 'tom', age: 21}     // undefined
  序列化：
       ss = JSON.stringify(dd)     // '{"name":"tom","age":21}'
  反序列化：
       JSON.parse(ss)              // {name: 'tom', age: 21}

// 3.正则
  定义正则的两种方式
       var reg1 =new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}") 
              // undefined
       reg1             结果:   /^[a-zA-Z][a-zA-Z0-9]{5,11}/
       var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/    
              //undefined
       reg2             结果:   /^[a-zA-Z][a-zA-Z0-9]{5,9}$/


"""
1.全局模式的规律                lastIndex
2.test匹配数据不传默认传入undefined
"""