js 的基础

js 的基础

js的三种引入方式:

- 外部引入: 通过script 标签的src属性引入, 放到body结束标签之前的位置

   <script src="index.js"></script>

- 内部引入: 通过script标签引入, 代码写在标签内部

    <script>
       // js代码
    </script>

• 内嵌式(行内式):直接把js代码写在开始标签中; 作为标签的属性

  <h1 onclick="alert(123)">hello world</h1>

js代码在页面中的位置不同,页面渲染的效果也不同; 因此我们一般把js代码放到body结束标签之前的位置

js 的变量

1. js的变量的声明
   • 使用 var 关键字声明变量
     1. 先声明后赋值

         var a;
         a = 100;
     

     2. 声明的同时并赋值

     ```javascript
        var str = 'hello world';
     

     3. 使用一个var关键字声明多个变量,多个变量之间使用逗号隔开
     ```javascript
         var str = 'hello world',
         a = 100,
         flag = true,
         num;
     

2. 变量的命名规则
   • 不能使用关键字或者保留字
   • 使用字母, , $ 作为开头,后边可以是字母,,$,数字的组合
   • 变量名严格区分大小写
   • 变量可以使用驼峰命名法,帕斯卡命名法,匈牙利标记命名法

js的数据类型

1. 基本数据类型
   • number :数值类型
     • 整型 : 整数
     • 浮点型 : 小数
     • 特殊的值:
       1. NaN : 非数值, 自身和自身不相等; 通过 isNaN()方法判断一个数是否是非数值; 结果是布尔值, true: 代表是非数值, false 代表是数值(存在隐式类型转换)
       2. 有穷无穷: 通过 isFinite() 方法判断一个数是否有穷 isFinite() 结果也是一个布尔值; true: 有穷 false: 无穷
     • 科学计数法: 5.3e6 5.3e+6 (5.310^6) 5.3e-6 (5.310^-6)
   • string : 字符串类型; 存储文本数据
     • 使用单双引号定义字符串类型
     • 引号都是成对出现的
     • 单双引号可以嵌套使用
     • 单双引号自身嵌套需要使用转义字符进行转义 ’ 转义单引号 " 转义双引号
   • boolean : 布尔类型
     • true: 成立
     • false : 不成立
     • 六种假值: 0 null undefined NaN ‘’(空字符串) false
   • undefined : 里边只有一个特殊的值就是undefined ; 未定义, 一个变量声明了,没有赋值(一个变量声明了但是没有初始化) ,变量会存在一个默认值, 就是 undefined
   • null : 空,没有,不存在 ;
2. 引用数据类型
   1. 数组
   2. 对象

js的数据类型转换

1. 转换为字符串类型: toString()

2. 转换为整型: parseInt() : 逐位转换;

3. 转换为浮点型: parseFloat() : 逐位转换;

4. 强制类型转换:

   1. 强制转换为布尔类型 Boolean() :
   2. 强制转换为字符串类型: String() : 可以转换 null 和 undefined
   3. 强制转换为数值类型: Number() : 整体进行转换

5. 使用 typeof 运算符判断变量的数据类型:结果是一下之一

   1. string
   2. number
   3. boolean
   4. undefined
   5. object

js运算符

1. 算术运算符 : + - * / %
   1. • 求和或者拼接: 只要 + 的一边是字符串类型,则进行拼接操作
2. 关系运算符 : > < >= <= == === != !==
   1. == 和 === 的区别: == 判断值相等,不考虑数据类型; === 判断值和数据类型都相等
3. 逻辑运算符 : && || !
   1. && 存在短路情况: 只要 && 左边为假,则直接返回结果,后边的将不再运算
   2. || 存在短路情况: 只要 || 左边为真,则直接返回结果,后边的将不再运算
4. 条件运算符 ?: 表达式 ? 代码1 : 代码2
   1. 条件运算符可以嵌套
5. 自增自减运算符 : ++ –
   1. 前曾/前减 : ++num/–num : 首先是自身先去改变(+1 / -1) ; 然后拿着改变后的值参与运算
   2. 后曾/后减 : num++/ num-- : 首先是拿着之前的值参与运算, 然后在自身改变(+1 / -1)
6. 符合运算符 : += -= *= /= %=

js的语句

1. if语句

   // 表达式: 可以是一个具体的值,也可以是一个范围  ; 或者是一个表达式 a && b > 10
      if(表达式){
         
         } 
   
      // 二选一
      if(表达式){
         
         
   
      }else{
         
         
   
      }
   
       // 多选一
      if(){
         
         
   
      }else if(){
         
         
   
      }else if(){
         
         
   
      }else{
         
         
         // 可选项
      }
   
   

2. switch语句

   // 表达式 经过计算必须是一个具体的值
   // case 后边的value 是表达式计算的结果之一
   // break 跳出 switch 语句
   switch(表达式){
         
         
      case value1:
         代码1;
         break;
      case value2:
         代码2;
         break;
      case value3:
         代码3;
         break;
      default:
         代码4;
   }
   

3. 循环语句
   1. while()循环 : 先判断后执行; 如果条件不满足,则循环体一次都不执行
   2. do-while()循环 : 先执行后判断; 不管条件是否满足,循环体至少执行一次
   3. for循环 : 先判断 后执行, for可以嵌套使用
   4. forEach循环 : 数组专用的遍历方法
   5. for-in循环 : 遍历数组或者对象

js 的函数

函数的声明方式

1. 函数表达式

var fun = function(){
    
    }

2. 使用function关键字

function 函数名(){
    
    

}

函数调用

1. 通过函数名调用执行函数

函数的参数

1. 形参 : 函数声明时传入的参数称之为形参 ; 形参就相当于函数内声明的变量,在函数内可以直接使用
2. 实参 : 函数调用时传入的参数称之为实参 ;
3. 形参和实参的关系 : 一一对应的
   • 形参多 实参少: 多余的形参默认值是undefined
   • 形参少 实参多: 多余的实参会被忽略
4. 参数可以是任何数据类型

函数的返回值

1. 使用return 语句作为函数的返回; return语句后边的value就是返回值, 返回值可以是任意数据类型
2. 使用空的return语句 可以终止代码的执行

变量作用域

1. 全局作用域
   • 在函数外声明的变量 拥有全局作用域
   • 不使用var关键字声明的变量拥有全局作用域
   • window对象的属性和方法拥有全局作用域
   • 在最外层函数内声明的变量,在该函数体内拥有全局作用域
2. 局部作用域
   • 在函数内声明的变量拥有局部作用域

变量提升机制

函数内声明的变量,变量的声明被提升到函数的最上边,变量的赋值还留在原来的地方

函数对象的属性和方法

1. 函数对象的属性: length 形参的个数
2. 属性: arguments 对象 伪数组形式;
   • arguments.length 实参的个数
3. 函数对象的方法:
   • apply() : 可以调用执行函数; 第一个参数是修改this指向; 不需要修改可以为null; apply()方法的参数是以数组的形式传递的
   • call() : 可以调用执行函数; 第一个参数是修改this指向; 不需要修改可以为null; call()方法的参数是一一罗列