【前端知识点总结】JavaScript 基础一

JavaScript 入门

1. JavaScript 是一门运行在浏览器上的编程语言
2. 前端三老铁
   • html : 确定网页的结构
   • css : 确定网页的样式
   • js : 确定网页的交互
3. js 组成的三个部分,两个阶段
   • ECMAscript : 确定js的语法规范
   • WebAPI
     • DOM : JavaScript 动态操作网页内容
     • BOM : js动态操作浏览器窗口
4. js三种书写位置
   • 行内: 写在标签内部
   • 内联: 写在 script 标签里面, script 标签写在 body 的在上面
   • 外链: 写在 js 文件中,使用 script 标签的 src 属性引入
5. js两种注释法
   • // 注释内容 单行注释
   • /* 注释内容 /* 块注释
6. 输入输出语句
   • 输出语法
     • 弹出提示框: window.alert()
     • 页面输入(可以写 HTML 标签): window.document.write()
     • 在控制台打印: window.console.log()
   • 输入语法
     • 弹出一个输入框: window.prompt()
     • 弹出一个确认框: window.confirm()
   • 注意 : 以上 window 都可以省略 例: document.write()

字面量

由字母，数字等构成的字符串或者数值,整数、浮点数以及字符串等等都是字面量 例如: "abc" 123

变量

1.变量的作用:

在内存中存储数据

2.变量语法:

• 声明变量: let 变量名
  • 在内存中开辟空间
• 赋值: 变量名 = 值
  • 把右边输入的数据存入左边的变量
• 取值: 变量名

3.变量注意点

1. let变量不允许重复声明
2. 变量赋值的时候会先销毁旧值,然后再存入新值
3. 变量给变量赋值,先拷贝一份,然后赋值

4.变量命名规则与规范

• 规则: 必须遵守,不遵守会报错
  1. 变量必须以字母,下划线_, $开头. 后面的可以用数字, 字母, 下划线_, $
  2. 不能使用关键字做变量名
• 规范: 程序员们共同的一种代码习惯,不会报错,但是不专业
  1. 取名要有意义,最好用英文单词
  2. 多个单词使用驼峰命名法 例: goodBoy

数据类型

基本数据类型(值类型)

• number 数值类型

  • 一切数学中的数字
  • 作用:数学计算
  • Infinity 无穷大

• string 字符串类型 : 一切引号包裹的内容

  • 单引号 ’ ’
  • 双引号 " "
  • 反引号 `` （又叫模板字符串）
  • 拼接字符串
    • 模板字符串,拼接字符串语法(业务中常用) ：

      `你好,我是 ${变量名}`
      注意点： ${变量名}  只能对``生效
      

    • 使用 + 连接符（+号只要遇到字符串，就会变成连接符），拼接字符串：'大家好' + 变量
  • 字符串嵌套时 ： ' " " ' 或者 " ' ' "
  • 作用: 展示文本

• boolean 布尔值类型 ： 只有两个值

  • true 真 : 条件成立
  • false 假 : 条件不成立
  • 作用 : 表示实物的对立面

• undefined 未定义类型

  • 变量只声明不赋值 ： 输出 undefined
  • 业务中通过判断变量是不是 undefined ,来判断变量是否有数据

• unll 空类型 ： 表示值为空

  • 业务中有一个变量要存储数据,但是数据暂时不知道,需要经过计算才知道具体要存什么

复杂数据类型(引用类型)

• array: 数组 ( 后续详解 )
• function：函数 ( 后续详解 )
• object: 对象 ( 后续详解 )

检测数据类型:

语法: typeof 数据 结果是数据的类型

• 注意 ： array、 object、 unll类型时结果都为 object

数据类型转换

window.prompt( ) 输入框不管输入什么都是字符串类型

隐式转换(开发中不推荐使用,代码不严谨,阅读性不高) :

当运算符左右两边数据不一致时,编译器自动转换一致

• 其他类型转 string :
  • 连接符+ 当 + 两边有一个值是字符串类型,编译器自动都解析为字符串,做两边数字相连接 11+'11' 为 '1111'
• 其他类型转 number:
  • 数学正号+ 当字符串前有正号时,编译器自动解析为数字类型做加法运算(例 1 + +“1” =2) '±*/'运算等…

显式转换 (推荐) 程序员使用js语法来转换

1. 其他类型转number
   • 其他类型转整数 parseInt(数据) : 解析整数,遇到非数字结束解析
   • 其他类型转小数 parseFloat(数据) : 解析小数 可以识别第一个小数点,遇到非数字结束解析
   • 其他类型转数字 Number(数据) : 一般用于转换 Boolean undefined unll
   • 解析数字 : 只要有非数字字符一律得到 NaN

     NaN : not a number  不是一个数字  (出现NaN 就是bug )
         1.特殊值,表示数字运算结果是错误的,得不到数字
         2.NaN无法与一切数据进行运算,运算结果一律是NaN
     

2. 其他类型转string
   1. 常用 : String(数据) S 大写 , 可以转换所有数据包括 undefined 和 null
   2. 少用 : 变量名.toString(数据) S 大写, 不能转换 undefined 和n ull 转换浏览器会报错
3. 其他值转Boolean
   • 语法 : Boolean(数据) 由于布尔类型只有两个值,因此任何数据转布尔类型只会出现两种情况
   • 得到 false : 八种数据 undefined、 ""空字符串、null、 0、 -0、 false、 NaN document.all
   • 得到 true : 除 false 的八种数据以外的任意数据
   • 注意 : "" 空字符串为 false , 加空格结果都不是空字符串,不是false