JS基础的知识点(1)

41 阅读6分钟

五种JS的基本类型语法

1>字符串string: 一切 单引号' '  双引号" " 反引号` ` 包起来的内容
2>数字number:一切 数学中的数字
3>布尔boolean:true false
4>undefined未定义
5>null空值

其中typeof是来检测数据类型,得到一个字符串并展示它是什么类型的

        console.log( typeof 123 )//'number'
        console.log( typeof '123' )//'string'
        console.log( typeof true )//'boolean'
        console.log( typeof undefined )//'undefined'
        console.log( typeof null )//'object'

变量最基本的使用:

1.变量的作用:在内存中存储 数据

2.变量语法:

2.1 声明变量: let 变量名
2.2 变量赋值: 变量名 = 值
2.3 变量取值: 变量名

注意:

1 变量不允许重复声明 2 变量重新赋值:先销毁旧值,然后存入新值 3 变量之间赋值:取出变量的数据拷贝一份,然后复制

变量名命名规则:

1.规则 : 必须要遵守,不遵守就会报错

       1.1 变量名必须以 : $ 、下划线_ 、字母开头,后面可以是$ 、下划线_ 、字母、数字
       1.2 变量名不能是关键字

2.规范 : 所有程序员都养成的一种习惯

        2.1 取名要有意义,最好是英文名词
        2.2 多个单词使用小驼峰命名
            首单词小写,后面单词首字母大写

常量:值无法被修改

字面量:

js中的数据有两种使用方法

    1.先存入变量中, 通过变量取值语法来使用
        变量 :  指的是内存中的一块空间,里面的数据是可变的。(变量是内存空间)
    2.不存入变量中,直接拿来使用
        字面量 : 指的是一个固定的数据(字面量是数据)

运算符与表达式

1.运算符:用于运算的符号

2.算术运算符:用于数学算术运算 + - * / %(求模,取余数)

3.表达式 : 由运算符组成的式子

4.算术表达式 : 算术运算符组成的式子

重点: 表达式一定会有运算结果

5.赋值运算符:= += -= *= /= %=

= : 赋值运算符。 右边数据 存入 左边的变量

= 的左边只能是变量,不能是字面量

6.自增与自减运算符:自增(自身+1)运算符 ++

自增表达式:   num++
自减表达式:  num--

7.连接符:

1.如果字符串不需要变量取值 :  ''
2.如果字符串需要变量取值 :    ` ${变量名} `

8.关系运算符与关系表达式:

1. 算术运算符 : 数学算术运算

2. 关系(比较)运算符 : 比较两个数据之间的关系是否成立
      >  >= < <=  ==(相等)  !=(不等)  ===(全等)  !==(不全等)
      
3.关系表达式 : 由关系运算符组成的式子
    重点 : 关系表达式运算结果 一定是 布尔类型.  true:成立  false:不成立

= : 赋值运算符。 =号右边数据 存入 左边变量中

== : 相等运算符 只比较值,不比较数据类型

=== : 全等运算符 先比较数据类型,后比较值

9.逻辑运算符 : 计算 多个条件 是否成立

  && : 逻辑与,读作 并且
    * 一假则假
  || : 逻辑或,读作 或者
    * 一真则真
  ! :  逻辑非,读作 取反
    * truefalse, falsetrue
    

逻辑表达式 : 左边式子 逻辑运算符 右边式子

10.运算符优先级: 不同的运算符在一个式子中的运算顺序

        ()  : 优先级最高
        一元: ++ -- !
        算术
        关系
        逻辑
        赋值
    开发中遇到复杂的式子,一般使用()小括号提升优先级 

数据类型的转换

当数据类型不一致的时候,达不到预期需求。(需要转换数据类型进行运算)

其他类型转number类型:

    (1)字符转整数:  parseInt( 数据 )
    (2)字符转小数:  parseFloat( 数据 )
    (3)其他转数字 : Number( 数据 )

number类型特殊值NaN: NaN : number类型的特殊值

not a number : 不是一个数字。 如果你的数学运算得不到一个数字,则会得到NaN

NaN含义 : 表示的是错误的运算,出现NaN一般就是代码有bug

NaN不能参与任何运算,结果一律是NaN

转换string类型:

  1. String(数据)
        console.log( String(123) )//'123'
        console.log( String(true) )//'true'
        console.log( String(undefined) )//'undefined'
        console.log( String(null) )//'null'
        let num = 255
        //2. 变量名.toString()
        /* a. 如果是undefined与null,这种方式会报错 
           b. 这种方式可以支持进制转换。 例如把 十进制转十六进制
        */
        console.log( num.toString(16) )//把数字转成十六进制字符

转换boolean类型:

// Boolean(数据)
        /* 
        1.false: 有7种数据会得到false 
            0  -0  NaN undefined  null  ''  false
            
        2.true:  除false 7种之外的一切数据
        */    
        console.log( Boolean(0) )//false
        console.log( Boolean(-0) )//false
        console.log( Boolean(NaN) )//false
        console.log( Boolean(undefined) )//false
        console.log( Boolean(null) )//false
        console.log( Boolean('') )//false
        console.log( Boolean(false) )//false

隐式转换:

/* 
       1. 显式转换 : 程序员主动使用语法去转换类型 (阅读性高)
            1.1 其他类型转number类型
                parentInt() : 转整数
                parentFloat() : 转小数
                Number() : 布尔转数字 1 0
            1.2 其他类型转string类型
                String() : 转数字
            1.3 其他类型转Boolean类型
                Boolean() : 转布尔类型
                
        2.隐式转换 : 当运算符两边‘数据类型不一样’的时候,编译器会先帮我们转成一样之后再计算
            2.1 转数字 :  算术运算符 + - * / %
            2.2 转字符串 : 连接符 +
            2.3 转布尔 : 逻辑非 !
       */     

       // 1. 转数字 :  算术运算符 + - * / %
       console.log( '10' - 1 )//9  Number('10') - 1
       console.log( 1 + true )//2  1 + Number(true)
       console.log( +'10' )//10 数学正号

       //2. 转字符串 : 连接符 +  
       // +号只要有字符串就是连接符
       console.log( '1' + true )//'1true'   '1' + String(true)  

       //3.转布尔 : 逻辑非!
       console.log( !1 )  //false  !Boolean(1)
       console.log( !null )//true      !Boolean(null)

undefined与null区别:

/* 
        1. undefined : 未定义。 变量有声明,未赋值,此时变量的默认值就是undefined
            * 说人话 : undefined就像期房 : 买了房,但是房子还没有建 (没有值)

        2. null : 空值。 变量有赋值,值为空
            * 说人话 : null就像毛坯房 : 买了房,房子有建,但是里面是空的 (有值,只不过是空值)
        */  
        
        //undefined和null共同点 :  值相等, 转布尔类型都是false
        console.log( undefined == null )//true
        console.log( Boolean(undefined) )//false
        console.log( Boolean(null) )//false

        //undefined和null不同点 : 数据类型不同, 转number类型值不同
        console.log( undefined === null )//false
        console.log( Number(undefined) )//NaN
        console.log( Number(null) )//0

分支结构:

  1. if单分支语句 : 一个条件

  2. if-else双分支语句: 两个互斥条件

  3. if-else if-else多分支语句: 多个条件

    if(条件1){
      条件1成立时需要执行的代码
    }else if(条件2){
      条件2成立时需要执行的代码
    }else if(条件3){
      条件3成立时需要执行的代码
    }
    ……………………
    else{
      以上所有条件都不成立,需要执行的代码
    }
    
    注意点: 
     (1)多分支语句所有的大括号最多只会执行一个, 只有当上面不成立才会进入下一个条件判断
     (2)第一个条件一定要以if开头,后面的else if可以写多个,末尾的else可以省略
    

三元表达式:

1.表达式根据运算的数量分为 一元、二元、三元

        一元运算符: 只能算一个数  ++ --  !
        二元运算符: 可以算两个数  算术  关系
        三元运算符: 可以算三个数  ?:
        

2.三元表达式: 表达式 ? 代码1 : 代码2

        (1)如果表达式成立,则执行代码1,否则执行代码2
        (2)如果代码1和代码2有运算结果,他们就是三元表达式的结果

3.三元表达式功能和if-else类似的

        (1)如果代码只有一行,优先考虑三元表达式
        (2)三元表达式有运算结果
//如果三元表达式代码1和代码2没有结果, 三元表达式结果就是undefined
        1>10 ? alert(111) : alert(222)
        
        //如果三元表达式代码1和代码2有结果,  三元表达式结果就是他们的值
        let res = true ? 10 : 20
        console.log( res )//10

for循环:

        /* for循环

        for( 语句1 ; 语句2 ; 语句3 ){
            //循环体:需要重复执行的代码
        }
        
        执行规则
            (1)执行语句1 (声明循环变量)
            (2)判断语句2是否成立 (循环条件)
                成立 : 执行循环体, 执行语句3(循环变量自增),重复步骤(2)
                不成立: 循环结束
        */

        for(let i = 1 ; i <= 3 ; i++ ){
            console.log('吃了嘛')
        }

        console.log('吃完了')

        /* 
        for( 声明循环变量 ; 循环条件 ; 循环变量自增 ){
            循环体代码
        }
        
        执行步骤:
            1. 执行 声明循环变量
            2. 判断 循环条件 是否成立
                2.1 成立 : 执行循环体, 执行循环变量自增, 重复步骤2
                2.2 不成立:循环结束
        */

数组:

数组基本使用:

1.数组是什么 ? : 是 一种复杂 数据类型

2.数组作用 : 存储多个数据

3.数组原理 : 数组三要素 元素:数据中的数据 下标:元素的位置 (下标从0开始) 长度:元素的数量 数组语法:

/* 
        1.数组声明 :  let 数组名 = [ 元素1,元素2,元素3,………… ]
        2.数组取值 :  数组名[ 下标 ]
        3.数组长度 :  数组名.length
        4.数组遍历 :  依次获取数组每一个元素值
        * 固定for循环语句 :  for(let i = 0; i < arr.length ;i++){  arr[i] }
 */

        //1.数组声明  let arr = [ 元素1,元素2,元素3,………… ]
        let arr = [ 88,90,100,60,57 ]
        console.log( arr )
        
        //2.数组取值  arr[ 下标 ]
        console.log( arr[2] )//100 第三个元素下标为2
        
        //3.数组长度  arr.length
        console.log( arr.length )//5
        
        //4.数组遍历
         //声明数组
        let arr = [ 88,90,100,60,57,20 ]

        // i <= arr.length-1     
        for(let i = 0;i <= arr.length-1 ; i++ ){//i = 0 1 2 3 4 5
            console.log( arr[i] )
        }

        //i < arr.length
        for(let i = 0;i < arr.length ; i++ ){//i = 0 1 2 3 4 5
            console.log( arr[i] )
        }
    
    
        // console.log( arr[0] )
        // console.log( arr[1] )
        // console.log( arr[2] )
        // console.log( arr[3] )
        // console.log( arr[4] )
        
数组的操作:
    1.声明数组  let 数组名 = [元素1,元素2,元素3,....]
    
    2.数组取值(查)    数组名[下标]
        * 下标存在:  则是‘获取’元素值
        * 下标不存在: 则是‘获取’ undefined
        
    3.数组赋值(改)    数组名[下标] = 值
        * 下标存在: 则是 ‘修改’ 元素值
        * 下标不存在: 则是 ‘新增’ 元素值
  


    let arr = [100,90,88,50,60]

    /* 数组取值 :  数组名[ 下标 ]
    1.下标存在:  则是 ‘获取’ 元素值
    2.下标不存在: 则是获取undefined
    */  
    console.log( arr[3] )//50
    console.log( arr[5] )//undefined

    /* 数组赋值(改)    数组名[下标] = 值
    1.下标存在:  则是 ‘修改’ 元素值
    2.下标不存在: 则是 ‘新增’ 元素
    */ 

     arr[0] = 200
     console.log(arr)

     arr[5] = 40
     console.log(arr)

数组 新增 删除 元素(push,unshift,pop,shift):

/*1.数组新增有两个方法
            数组名.push(元素)  : 一个或多个元素,添加到 末尾 
            数组名.unshift(元素)  : 一个或多个元素,添加到 开头
            
 2.数组删除元素有两个方法
            数组名.pop() : 删除 '末尾' 元素
            数组名.shift() : 删除 '开头' 元素
*/
        

        let arr = [100,90,88,50,60]

        //1. 数组名.push(元素)  : 新增一个或多个元素,添加到 ‘末尾’
        arr.push(10)
        console.log(arr)

        //2. 数组名.unshift(元素)  : 一个或多个元素,添加到 开头
        arr.unshift(1)
        console.log(arr)
        
        //3. 数组名.pop() : 删除 '末尾' 元素
        let arr1 = [10,20,30,40,50]
        arr1.pop()
        console.log(arr1)//[10,20,30,40]

        //4. 数组名.shift() : 删除 '开头' 元素
        arr1.shift()
        console.log(arr1)//[20,30,40]
        
       
/*3.删除数组指定下标元素 
            arr.splice( start,deleteCount)
                第一个值: 从哪个下标开始删除
                第二个值:  要删除几个元素(如果不写,则会删除后面所有元素) 
        
*/
        let arr = [100,90,88,50,60]

        arr.splice(2,1)//从第2个下标开始,删除2个元素
        console.log( arr )// [100,90,50,60]

数组上述所有语法小结:

 1.数组三要素
            元素: 数组存储的数据
            下标: 元素的位置 (下标从0开始)
            长度 : 元素的数量 ( 长度 = 最大下标 + 1)

 2.数组声明:  let 数组名 = [元素1,元素2,元素3,…………]

 3.数组查询:
            3.1 查询一个元素 :  数组名[下标]
            3.2 查询每一个元素:  for(let i = 0;i < arr.length;i++){  arr[i] }

 4.数组修改 :  数组名[下标] = 值

 5.数组新增 :
            5.1 末尾新增:  arr.push( 元素 )
            5.2 开头新增:  arr.unshift( 元素 )

 6.数组删除 :
            6.1 删除末尾:  arr.pop()
            6.2 删除开头:  arr.shift()
            6.3 删除指定下标:  arr.splice(起始下标,删除数量)