笔记一、JavaScript——初识JS

用户9457016734348
219 阅读9分钟

一、初识JS

1. JS是什么

  • JS是一种运行在客户端的脚本语言
  • 浏览器就是一种运行JS脚本语言的客户端

2. JS 的组成(面试可能会问)

JavaScript 是由 ECMAScript，DOM 和 BOM 三者组成的。

  1. ECMAScript: 定义了JavaScript 的语法规范,描述了语言的基本语法 和 数据类型
  2. DOM (Document Object Model)(文档对象模型)
  • 有一套成熟的可以操作 ==页面元素的 API==，通过 DOM 可以操作页面中的元素(其实就是标签)。
  • 比如：增加个div，减少个div，给div换个位置等
  • API: application programming interface 的简写; 
复制代码
复制代码

  • 翻译：应用程序编程接口；(大白话：别人写好的代码，或者编译好的程序，提供给你使用，就叫作api)
复制代码
复制代码
  1. BOM (Browser Object Model): 浏览器对象模型
  • 有一套成熟的可以操作 ==浏览器的 API==，通过 BOM 可以操作浏览器。
  • 比如： 弹出框、浏览器跳转、获取分辨率等

3. js 的三种书写方式

  • 行内式(不推荐, 了解即可, 这种写法, 代码量多了, 不好维护)

    <input type="button" value="按钮" onclick="alert('hello world')" />
复制代码
复制代码

  • 内嵌式(学习阶段推荐使用, 因为代码量少, 如果代码量多, 不推荐)

    <body>
    <script>
        alert('hello world')
    </script>
</body>
复制代码
复制代码

  • 外链式(目前公司都是外链式, 因为公司项目代码量肯定比较大)

    <script src="main.js"></script>
复制代码
复制代码

4. js 定义变量

4.1 什么是变量？

  • 变量 是计算机中存储数据的一个标识符, 通过这个标识符可以找到内存中存储的数据
  • 翻译为大白话，我有一个东西需要暂时存储起来，比如说就是一个数字 100，我把它存放到了变量 a 中，我后续想要使用他的时候就可以直接通过变量 a 获取到数字 100
  • 变量其实就相当于一个容器，内部可以存储任意类型的数据，使用变量时，用的是内部存储的数据

4.2 为什么要定义变量？

使用变量可以方便的获取或者修改内存中的数据

4.3 变量赋值

  • 变量定义之后，初始时没有进行赋值，内部有一个默认存储的值叫 undefined(未定义) 表示内部未赋值，但可以存储数据了
  • 变量赋值的方式：通过等号 = 赋值，等号右边的值赋值给左边的变量 ==（等号在 JS 中叫做 赋值号；书写时，等号 = 两侧习惯书写一个空格）==

4.4 使用变量

直接写变量名即可使用变量；变量在使用前，必须先有定义，如果没有定义，会出现引用错误

4.5 使用变量需要用两步

  1. 定义变量
  • 语法: var 变量名
var a;
复制代码
复制代码
  1. 赋值变量
  • 变量名 = 值
a = 1;
复制代码
复制代码
  1. 变量定义并赋值
var a = 1;//定义一个变量, 变量名为 a, 并且给这个变量赋值为 1
复制代码
复制代码
  1. 打印:
  • console.log(要打印的值)
  • 可以将我们想要打印的值 打印在浏览器的控制面板上

4.6. 课堂案例

  1. 交换变量, 需求: 交换两个变量所保存的值
// 正确版
        var a = 100 // a: 100
        var b = 200 // b: 200

        var c = a // 定义一个变量 c, 并赋值为 变量 a 的值, 所以 c: 100
        a = b // 将变量 a 重新赋值为 变量b 内保存的值, 所以此时 a: 200
        b = c

        console.log(a)  // 200
        console.log(b)  // 100

复制代码
复制代码

4.7 变量命名规则（必须遵守，不遵守会报错）(面试可能会问)

  • 由字母、数字、下划线、$符号组成，不能以数字开头

  • 字母区分大小写

  • 不能是关键字和保留字

    • 关键字指的是js中有特殊功能的小词语，比如var、for、if、function等
    • 保留字指的是现在没有特殊功能，但是将来新语法中有可能作为关键字使用(在 ES6 还没出现之前具有的保留字let、 const、promise)

4.8 变量命名规范（建议遵守的，不遵守不会报错）(面试可能会问)

  • 变量名必须有意义(符合见名知意)

    • 尽量不要用字母作为变量名, 除非是练习

  • 遵守驼峰命名法

    • 多个单词的组合名时, 使用驼峰命名法(多个单词拼接时, 后一个单词的首字母大写) bigbox -> bigBox

5. js 数据类型(面试题)

JS中的值，无论是字变量还是变量，都有明确的类型

  • 数据类型分类(以基本数据类型为主)
  1. Number 数字类型
  • 不区分整数、浮点数、特殊值，都是 Number 类型
  1. String 字符串类型
  • 只要是引号包裹的内容, 就是字符串类型(引号不区分单双引号)
  1. undefined undefined类型
  • ndefined本身就是一个数据，表示未定义，变量只声明不赋值的时候，值默认是 undefined
  1. Boolean 布尔类型
  • Boolean 字面量：只有 true 和 false 两个字面量的值，必须是小写字母
  • 计算机内部存储：true 为 1，false 为 0
  1. null null类型
  • null 本身就是一个数据
  • 从逻辑角度，null 值表示一个空对象指针
  • 如果定义的变量准备在将来用于保存对象，最好该变量初始化为 null
  1. Object 对象类型

6.数据类型检测

  1. 为什么要有数据类型检测？
  • JS语言是一门动态类型的语言，变量并没有一个单独的数据类型，而是会随着内部存储数据的变化，数据类型也会发生变化
  • 变量的数据类型，与内部存储数据有关
  • 将来使用变量时，需要知道内部存储的数据是什么类型，避免程序出错
  1. 使用 typeof 的方法进行数据检

（语法: typeof(要检测的数据类型的值)）

  • 检测方式：在 typeof 后面加小括号执行，将要检测的数据放在小括号内部

  1. 延申: 一道面试题

    typeof 能正确检测所有数据类型的值吗?
  • 不能, 因为他没有办法准确的检测出 null 的类型是什么

（检测 null 的时候打印结果为 object， null 代表的含义是 空, 也就是空对象, 所以 typeof 会把他当成一个对象去输出）

7.数据类型转换(转数值 / 转字符串 / 转布尔)

7.1转数值

  1. Number(数据)方法
  • 转型函数Number()可以用于任何数据类型，将其他数据类型转为数字
  • 字符串：纯数字字符串转为对应数字，空字符串和空白字符串转为0，非空非纯数字字符串转为NaN
  • 布尔值：true转为1，false转为0
  • undefined：转为NaN
  • null：转为0
  • 解释： NaN: 表示的是一个 number 的数字, 但是没有办法通过常规的数字表明它, 所以只能使用 NaN 来代替(坏掉的数字)

  1. parseInt()方法：字符串转整数方法

    • 对浮点数进行取整操作

      • 对数字取整直接舍弃小数部分，只保留整数

    • 将字符串转为整数数字

      • 将字符串转为整数数字，也包含取整功能

    • 字符串中，必须是纯数字字符串或者数字字符开头的字符串，才能转换为正常数字，且只取整数部分

    • 如果不是数字打头的字符串，会转换为NaN

  2. parseFloat()方法：字符串转浮点数方法

    • 将字符串转为浮点数数字
    • 满足浮点数数字字符必须在字符串开始，如果不在开始返回值都是NaN

  3. 扩展: 在实际开发中 我个人常用 数据 - 0 (暂时先不考虑原理)

7.2转字符串

  1. 变量.toString()方法
  • 注意: undefined 类型 和 null 不能使用 toString 方法(因为 JS 没有给我们提供, 或者说 JS 不允许)
  1. String(变量)方法，有些值没有toString()，这个时候可以使用String()。比如undefined和null
  2. +号拼接字符串方式
  • num + “” ,当 + 两边一个操作符是字符串类型，一个操作符是其他类型的时候，会先把其他类型转换成字符串在进行字符串拼接，返回字符串

7.3转布尔

  • 转型函数Boolean()可以用于任何数据类型，将其他数据类型转为布尔类型的值

    • 转为false：NaN、0、“”空字符串、null、undefined
    • 转为true：非0 非NaN数字、非空字符串、“ ”空白字符串
  1. 数字转换布尔值, 只有0会转换为 false 其他的数字都会转换为 true, (非0即为真)
  2. 字符串转换布尔值, 只有 空字符串 会转换为 false 其他的字符串都会转换为 true
  3. undefined 和 null 转换为 布尔值的时候 就是 false (重点, 以后会常用!!!)

8.js 运算符

什么是运算符？

  • 也叫操作符，是 JS 中发起运算最简单的方式，例如： 5 + 6
  • 表达式的组成包含 操作数 和 操作符 ，表达式会得到一个结果，然后用结果参与程序

8.1JS 运算符分类

  1. 算数运算符( + / - / * / / / % )
  • 注意: + 运算符, 相加时如果两边都是数字, 那么会运算数字的相加操作
  • 相加时如果两边有一个不是数字的, 比如出现一个字符串, 那么运行的不是在相加, 而是拼接操作
  • 拼接操作只有 + 运算时会出现, 其他符号不出现
  • 其他运算符在遇到两边有非数字类型时, 会将其转换为 数字(这一步就叫做隐式转换), 然后在运算
console.log(5 / 0)  // Infinity 表明 无穷的意思
console.log(5 % 0)  // NaN
// 0.1 + 0.2 不等于 0.3
复制代码
复制代码

  1. 赋值运算符( = / += / -= / *= / /= / %= )

  2. 比较运算符( > / < / >= / <= / == / === / != / !== )

    • 比较运算符 比较运算符两边的值之后, 返回一个 布尔值, 也就是返回一个true或者false

    • 判断相等

      • = 赋值号
      • == === 在JS中 等号出现两次或者三次时代表 等于的意思

    • 两个等号与 三个等号的区别 (面试可能会问)

      • == 在JS中判断时会做隐式转换, 也就是说 只会对比值是否相等, 不会对比数据类型
      • === 在 JS 中也叫做全等, 在判断的时候不会做隐式转换, 也就是说, 在对比时除了会对比值是否相等, 还会判断数据类型

    • 判断不相等 != !==

      • 共同点: 判断符号两边的值是否不相等, 不相等时返回 true 相等时返回 false
      • 不同点： != 不会对比数据类型!== 会对比数据类型

  3. 逻辑运算符( && / || / ! )

  4. 自增自减运算符( ++ / -- )

    • ++值： 如果 ++ 在前, 那么会先将自身的值 +1 然后参与其他的
    • 值++： 如果 ++ 在后, 那么会先参与周围的运算, 然后将自身的值 +1
 var a = 1
 var b = 1

 console.log(++a)    // 如果 ++ 在前, 那么会先将自身的值 +1     然后打印到控制台, 所以打印的值为 2
 console.log(b++)    // 如果 ++ 在后, 那么会先将目前的值打印到控制台(也就是 1), 然后将自身的值 +1 , 也就是说这行运行完毕后, 变量b的值变为 2了
复制代码
复制代码

8.2 JS 运算符优先级

  1. 小括号优先级最高

  2. 一元运算符++ -- !

  3. 算术运算符 先* / % 后+ -

  4. 比较运算符(大于小于) > >= < <=

  5. 比较运算符(等于不等于) == != === !==

  6. 逻辑运算符 先&& 后||

  7. 赋值运算符

avatar
文章
阅读
粉丝