JS 第一章

146 阅读6分钟

一、概述

1.什么是Javascript

它是运行在客户端浏览器端解释型弱类型面向对象的脚本语言,简称JS。

名词解释: 解释型--编译型

(1)解释型:在运行程序之前,不用先检查语法,直接运行,遇到错误会报错并停止运行后续代码 (2)编译型:在运行程序之前会先检查语法是否正确,如有问题不会运行直接报错。

弱类型---强类型

(3)弱类型:变量保存的数据类型由变量值的数据类型来决定。

(4)强类型:变量保存的数据类型是由定义的数据类型来决定的。

面向对象:两大特征属性和方法--对象.方法()

2.JS的使用方式

(1) <script>JS代码</script>
(2)外部引入 <script src="JS文件路径"></script>

3.三种输出方式

  • console.log()
  • alert()
  • document.write()

二、变量和常量

1. 定义

  • 变量 var 变量名=值; 创建后值可以再次修改,用于反复使用的数据
  • 常量 const 常量名=值; 创建后值不能修改

2. 变量的特征

  • 不能以数字开头,见名知意的驼峰式命名
  • 不能是关键字
  • 可连续创建多个用逗号分隔

三、基本数据类型

1.基本数据类型(又称原始、值数据类型)

  • Number 数字 --蓝色
  • String 字符串--黑色
  • Boolean 布尔--蓝色
  • Null 空--灰色
  • Undefined 未定义--灰色

2.引用数据类型

四、运算符

1.算术运算符(+ - * / %)

 特点1: % 取余
       作用:a.判读奇数偶数    num%2==0 -->偶数    num%2==1--> 奇数
             b.取出某个数字的后几位     num%10-->最后一位    nnum%100-->最后两位  以此内推
             
 特点2:算数运算带有隐式转换,默认将左右两边转化位数字在进行运算
        true-->1          false-->0        undefined-->NaN     
        "100"-->100      "100ss"-->NaN      null-->0 
        注意:(1)有字符串时+运算是拼接操作
              (2)字符串必须为纯数字才能转化为对应数字,否则为NaN
              
  特点3NaN是数字类型,但不是数字
        注意:(1)NaN参与任何算数运算结果都为NaN
              (2)NaN参与任何比较运算结果都为false
            

2.比较运算/关系运算 ( >、 >=、 <、 <= 、 == 、 !=、 ===、 !== )

(1)带有隐式转换

(2)如两边都是字符串则按位比较Unicode(ASCII)

  • 比较规则: 数字<大写字母<小写字母<汉字

(3)!isNaN(xx) true-->为有效数字 false-->NaN

(4)undefined==null -->true undefined===null -->false

===” 全等,数据类型和值都相等

3.逻辑运算
(1) 与( && ) -->全真则真,一假则假

(2) 或( || ) -->一真则真,全假才假

(3) 非( ! ) -->取反

4.赋值运算( = 、+=、-=、*=、/=、%=)

i+=2 ==>i=i+2

5.自增自减(++ 、 --) 每次固定加(减)1

  注:前++和后++的区别?
    (1)单独使用无区别
    (2)参与其他表达式,变量始终都会加1,但返回结果不同,前++会返回加了之后的新值,后++返回加1前的旧值

6.位运算

(1)左移 m<<n --> m*2^n

(2)右移 m>>n --> m/2^n

五、循环、分支结构

1.分支结构

(1)if分支结构

if(条件){                   if(条件){                  if(条件1){
    操作;                          操作;                      操作; 
}                               } else                            }
                                  {  操作;          else if(条件2){
                                       }                          操作; }
                                                            ...
                                                         else{
                                                               操作;
                                                                  }

(2)switch ... case

  switch(变量/或表达式){
       case1:
           操作1;
           break;
      case2:
           操作2;
           break
      case3:
           操作3;
           break
          ...
      default:
         默认操作;
     }
  
注意:1.默认只要一个case满足,会将后续操作执行完,搭配break使用
      2.多个case操作相同可合并
      3.case比较不带隐式转化
      4. switchif区别
         (1)switch做等值比较,速度较快,执行效率较高
         (2)if做范围判断,速度较慢,效率较低

(3)三目运算

  • 目的:为了简化简单的分支结构
  • 语法:
        条件?操作:默认操作;           if...else...
        条件1?操作1: 条件2?操作2:默认操作;           if...else if... else..
    
        条件&&(操作);    短路逻辑       if...
    
    注:操作只能有一句话,且默认操作不能省略
    
    

2.强制转化

页面上的一切数据js获取到的都是字符串类型

(1)转字符串

.toString()   不能是undefined 和null
String(xx)   等同隐式转化--> xx+" "

(2)转数字

1.  parseInt(str/number)  字符串/数字转整数
       从左往右依次读取每个字符,遇到非数字停止,一开始就停止则为NaN
2.parseFloat(str)      
      从左往右依次读取每个字符,遇到非数字停止(第一个小数点可以读取),一开始就停止则为NaN
3.Number(xx)   等同隐式转化  --->    -0    *1   /1

(3)转布尔

   Boolean(x)  等同隐式转化--->     !!x  

2.循环结构(反复执行相同或相似的操作)

循环三要素:

  • 循环条件
  • 循环体
  • 循环变量

(1)while循环

   while (循环条件){
    循环体;
    变量变化;
    }
    
    (1) break  结束循环
    (2) continue   结束本次循环
    (3)while(True)   死循环
  

(2)for 循环

    for (var 循环变量;循环条件;变量变化){
        循环体
    }

(3)do... while

    do{
        循环体;
        循环变量变化
     }while(循环条件)

几种循环的区别

(1)whilefor
    原理上无区别,不确定循环次数用while更合适,确定循环次数用for
(2)whiledo..while的区别(第一次循环的区别)
    第一次循环都满足则无区别
    第一次循环都不满足,do..while始终会执行一次,while不会执行

六、函数

1.函数:先预定好,后面反复使用的代码片段

2.定义:

   方式一:声明函数
   function 函数名(形参1,形参2,...){
          函数体
           }

    方式二:直接量方式
   
     var 函数名=function(){
           函数体;
         }
注:
(1) 参数可以不写
(2) 传参的顺序和数量要和形参一一对应

3.调用函数

(1)JS内部: 函数名();
(2) 绑定事件 :  onclick="函数名()"

4.作用域

(1)全局作用域:全局变量和全局函数在页面任何位置都能使用

(2)局部作用域:局部变量和局部函数只能在函数调用时在函数内部使用

注:1.局部可以使用全局,全局不能使用局部
   2.  不能在函数中对未声明得变量赋值,会造成全局污染

5.return 函数返回

(1)可以将需要得返回结果加在return后面,用一个变量来保存

(2)在函数中遇到return就停止执行

7.声明提前

(1)原理:在程序正式执行之前,会将var声明得变量(轻)和function声明得函数(重)提前到当前作用域之前,赋值留在原地

注:1.声明方式创建得函数会完整提前
    2.直接量式创建得函数只将变量名提前
    3.函数先创建后使用,变量名和函数名不能重复
    4.函数内部得变量在函数执行完后会自动释放

8.重载

(1)定义:相同得函数名根据传入得实参不同,自动选择对应的函数去执行
(2)JS不支持重载原因:函数同名后面的会覆盖前面的
(3)解决办法:在函数内部自带一个arguments对象,使用arguments,在没有任何形参也可以接受所有实参
(4)用法:通过下标去获取传入的某个实参,通过length获取传入了多少个实参从而通过判断传入的参数不同执行不同的操作,变相的实现方法的重载。