js学习笔记-01 - 技术栈

JavaScript基础

1.引入方式

(1)内部引用

复制代码

  <body>
      <script>
        //js 代码 建尽量写到文档末尾 </body> 标签前面
      </script>
  </body>

(2)外部引入

复制代码

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

(3) 行内js: 点击提示... (vue框架会用这种模式)

2.js介绍

1.js怎么写

复制代码

单行注释： //

多行注释： /**/

结束符的约定: 实际开发中可以写,也可以不写; 按照团队要求统一风格; 

      alert("hello JavaScript")

2.输入输出语句

复制代码

2.1 输入语句

  prompt("请输入姓名") // 返回的是 字符串类型

2.2 输入输出

  alert("弹窗") 、console.log("日志打印") 、document.write("向body输入内容,可以解析标签")

3.变量

1.声明变量

复制代码

let 和 var 都可以声明变量, 推荐使用let 声明变量; 比如： let name = "tom" ;

2.变量名的命名规则

复制代码

(1)只能是字母、数字、下划线、$，且不能能数字开头

(2)字母区分大小写，如 Age 和 age 是不同的变量

(3)JavaScript 内部已占用于单词（关键字或保留字）不允许使用

(4)尽量保证变量具有一定的语义，见字知义

(5)遵守小驼峰命名法: userName

4.常量

常量里面保存的值是不允许改变的;声明的时候必须赋值。使用const 关键字进行声明常量: const PI = 3.1415926

5.数据类型

1.基本数据类型

复制代码

(1)基本类型: number 数字类型、string 字符串类型、boolean 布尔类型、undefined 未定义 、null 空类型

(2)使用typeof 函数查看js变量类型：

  <script>
    let price = prompt('请输入商品价格')

    console.log(typeof name) // string
  </script>

(3) 数字类型

    数字类型包含整数、小数、负数

(4)字符串类型

    使用: 单引号（ ''） 、双引号（ ""）或反引号( `` ) ; 推荐使用单引号

    模板字符串: 

      模版字符串为了拼接字符串和变量

      <script>

        let age = 18

        console.log(`小明
        今年${age}岁了`) //反引号中的字符串可以换行

      </script>

(5)布尔类型: true | false

(6)undifined 未定义类型

  只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，
  
  一般很少【直接】为某个变量赋值为 undefined。

2.引用数据类型

复制代码

引用数据类型: Object 、Function 、 Array

6.运算符

1.算术运算符

复制代码

+ 、 - 、* 、 / 、 %（取模: 取余数）

2.赋值运算符

复制代码

+=、 -= 、 *= 、 /= 、 %=

++ 

--

x++ 和 ++x 区别:

  单独使用,没有什么区别; 如果参与了运算, ++ 在变量前面,先自身+1,然后把+1后的值参与运算

    let x = 12

    let y = ++x

    console.log(x,y) //x=13; y = 13

  如果 ++ 再后面,先把变量值参与运算,然后再自身+1

    let x = 12

    let y = x++

    console.log(x,y) //x = 13; y = 12

3.比较运算符

复制代码

> 、< 、>= 、<= 、=== (值和类型都要相同) 、 == (只比较值是否相等) 、!= 、 !==

4.逻辑运算符

复制代码

&& (一假则假)、 || (一真则真) 、 ！ (逻辑非,取反;真变假，假变真) 

逻辑运算符优先级： ！> && >  ||

5.运算符的优先级

复制代码

 <优先级从高到低>

  ()

  ++ 、-- 、 !

  先 * 、/ 、 % 后 + 、 -

  > 、>= 、 < 、 <=

  == 、!= 、=== 、!==

  先 && 后 ||

  =

7.类型转换

1.显示转换

复制代码

(1)什么是显示转换

  所谓显示转换,程序员自己写代码告诉系统转换成什么类型,比如： 

      <script>
          let num = '1' //字符串类型的数字1

          console.log(typeof Number(num))  // number  ; 如果转换失败返回NaN
      </script>

  prompt输入的数据、表单提交过来的数据默认为字符串。

(2)转换成数字型

  1. Number():
  
        比如字符串数字 : let num = "520"  - - - - > 使用Number()函数转换成number类型,如果转换失败返回NaN(数据里面包含了非数字)

  2.parseInt(): 

        保留整数,如果是数字开头的字符串,只保留整数

          let str = "3.1415926px"

          console.log(parseInt(str)) // 3

  3.parseFloat():

        保留小数,和parseInt()函数一样

        let str = "3.1415926px"

        console.log(parseInt(str)) // 3.1415926

(3)转换成字符串

      String() 、变量.toString(进制)

        let num = 4
        console.log(typeof String(num), String(num)) //string - 4

        num = 9
        console.log(num.toString(2))// 1001

(4)转换成Boolean

    Boolean(数据) // 返回 true | false

    数据: false 、'' 、 0 、null 、 undefined 、NaN 的时候 都返回false ; 其余的都返回 true

      console.log(Boolean('0')) // true

      console.log(Boolean(null))  // false
      console.log(Boolean(undefined))  // false
      console.log(Boolean(NaN))  // false

2.隐式转换

复制代码

(1)转换成数字型

  + 作为正号的时候可以把字符串转换成数字类型

        let a = +'2'
        console.log(typeof a) //number
  
  算术运算符： + - * / % ; 比较运算符: > == 等. 自动把字符串数字转换成数字类型进行运算.

        console.log('8'+'3') // 11

        console.log('2' > '4') // false

(2)转换成字符串

    + 拼接字符串; 两侧只要有一个是字符串，结果就是字符串 (如果是数字字符串会做运算操作)

    console.log(4+'px') // 4px

(3)转换成布尔

    逻辑非: ! 

      console.log(!true)  // false 
      console.log(!0)  // true
      console.log(!'')  // true
      console.log(!null) // true
      console.log(!undefined)  // true
      console.log(!NaN)  // true
      console.log(!false)  // true
      console.log(!'xxx') // false