JavaScript 变量 数据类型 运算操作符

JavaScript 变量 数据类型 运算操作符

前端 JavaScript ES5 学习目录

1. 认识 JavaScript

2. JavaScript 基础语法

3. JavaScript 变量 数据类型 运算操作符

4. JavaScript 逻辑运算符 分支语句 循环语句

5. JavaScript 函数 作用域问题

6. JavaScript IIFE 面向对象 函数中的this

7. JavaScript 类和对象 window对象 常见内置类

8. JavaScript 数组基本使用 Date日期的使用

JavaScript 变量

• 首先我们的一个程序中大部分的数据都是固定的，这个时候就需要我们的定义一个变量来实现存储这些值

  • 一个变化数据的记录，就是我们的变量
  • 一个变量就是用来存储数值的一个容器
  • 一个变量的独特之处就是我们的数值是不断发生改变的

• 变量的命名格式

  • 变量的声明： 在我们的JavaScript中，我们实现使用的变量就是var关键字（variable）【ECMAScript5之前的写法】
  • 变量的赋值： = 就是使用这个符号来实现的
  • 或者说变量的声明和变量的赋值直接结合成一条语句

  • // 第一步： 变量的命名
    var name;
    ​
    // 变量的赋值
    name = "76433";
    ​
    // 变量的声明和赋值直接一条指令
    var age = 18
    ​
    console.log(name, age)
    

• 变量的命名规范（任何语言都是这样的）

  • 变量的第一位不可以是: 数字javascript
  • 不可以实现关键字作为变量名
  • 为了命名的规范，变量的命名可以采用大驼峰或者小驼峰来实现命名
  • 普通的函数方法，命名的时候，我们建议使用 小写字母开头来命名
  • 对于构造函数或者类的话，建议使用大写字母开头来命名

• 变量使用的规范

  • 如果一个变量还没有赋值就直接使用，那么这个时候，直接报错

  • 如果一个变量有声明，但是未赋值操作，直接使用，就是 undifined

  • 在JavaScript中不使用关键字也是可以定义变量的，但是默认的是添加到 全局中去的，这个时候就导致了全局变量污染

    • 但是如果是使用的关键字 var 来定义一个变量，也是添加到的全局中的，这个也导致了全局变量的污染，所以说后面没用这个了，用的是 let/const
    • 这里需要注意的是，我们的 node 的全局对象是 global
    • 但是浏览器的全局对象是 window

    • address = "hdfshfouasdhf"
      ​
      console.log(address)
      console.log(global.address)
      

JavaScript 的数据类型简介

• 首先我们每一个变量进行赋值的值，都是具有数据类型的

• 但是在我们定义一个变量的时候，我们 js 是不会定义数据类型的，javascript 和 python 都是动态类型的语言机制

• 但是在其他的语言中C++ Java C TypeScript 中，我们实现的时候，都是可以指定变量的数据类型的，静态类型语言机制

  • 但是我们需要注意的是，我们最后是会学习我们的 Typescript 的，这个是前端现在必备的
  • 网页的实现运行的时候，我们是会将他编译成 JavaScript 后，才可以实现在网页中实现运行

• JavaScript 中的数据类型含有：

  • Number
  • String
  • Boolean
  • Undefined
  • Null
  • Object
  • BigInt(后续使用)
  • Symbol(后续使用)

• typeof 操作符

  • 我们是可以通过这个操作符来实现判断某一个变量的数据类型

  • 使用方式: typeof 变量名，最后返回的是我们的 字符串

  • 可以返回的值有：

    • "undefined" 表示未定义
    • "boolean" 表示布尔值
    • "string" 表示值为字符串
    • "number" 表示的数值
    • "object" 表示对象
    • "function" 表示函数
    • "symbol" 表示值为符号

JavaScript Number数据类型

• 这种数据类型就是实现代表我们的数字类型的（含有整数或者小数）

  • 但是如果自己想要扩展的话，我们会发现在其他的语言中，对于数字类型也是做了一个区分的（整型int 或者 浮点型float）

• var num = 10;
  var num01 = 1.11;
  console.log(num, num01)
  

• 在javascript 中，我们的还有两种特殊的数字型的表示模式

  • Infinity 表示的是无穷数
  • NaN 就是not a number 的意思

• 数字可以表示的最大范围：

  • console.log(Number.MAX_VALUE)  // 最大值
    console.log(Number.MIN_VALUE)  // 最小值
    

• isNaN 就是一个函数

  • 用来实现判断一个数据是不是一个数字型，返回的是我们的boolean

  • var num = 10;
    var str = "hello front-end"
    ​
    console.log(isNaN(num)) // true
    console.log(isNaN(str)) // false
    

JavaScript String数据类型

• 这个就是字符串数据类型，就是使用双引号或者单引号或者反引号 实现包裹的内容，就是我们的字符串
• 记住这个引号的话，是英文状态下的引号

• var str = "hello front-end"
  console.log(typeof str)
  

JavaScript Boolean数据类型

• 这个就是我们的 布尔数据类型，一般是用来进行实现我们的判断的数据类型
• true | false，表示的就是我们的真和假，可以是通过我们的一些判断来实现的
• 在编程中这种数据类型是起到了很大的作用的

• console.log(1 === 2) // false
  console.log(typeof 1 === typeof "hello world")  // false
  console.log(1 === 1)  // true
  

JavaScript Undefined数据类型

• 可以出现的形式是只是声明了变量，但是没有实现赋值，那么就会出现 undefined

• var desc;
  console.log(deac)  // undefined
  

JavaScript Object 和 Null 数据类型

• 引用类型或者复杂类型，但是其他的数据类型只是我们的单独的值，就是我们的值类型
• 这种数据类型分析的话，我们是需要涉及到栈区和堆区的概念的，值类型的话，我们分析的时候只是涉及的是栈区
• 但是这种引用数据类型，是由我们的简单的值类型数据多个的实现组合为的我们的引用数据类型
• 这个涉及其他语言的扩展的话: C++ 中的结构体 python 中的字典

• var obj = {
      name: "juwenzhang",
      age: 18,
      address: "你心里……"
  }
  console.log(obj)
  console.log(obj.name)
  ​
  // 同时我们后面的使用引用数据类型的时候，我们是会通过typescript实现指定数据类型的
  // 这种对象，就是通过的是我们的 键值对的形式实现的存储数据， 然后通过键来实现访问值
  // 和其他语言不同的是，数组array和function也是属于对象数据类型的
  // 数组的话，就是通过默认的下标来实现访问值的: index
  // 由于javascript 原本就是面向原型的编程语言，所以说我们也可以说的是，javascript上手也是面向对象的思维
  ​
  // 对对象进行初始化的时候，我们就是指定其为： null
  var obj01 = null;
  console.log(typeof obj01)  // false
  // 后面原型链再来细说
  

JavaScript Undefined 和 Null 的区别（面试）

• undefined 出现的时机是，当我们对一个变量只声明，但是不赋值的时候，就会出现
• null 的使用就是已经确定了这个变量是用来存储变量的，但是只不过还不确定这个变量是什么的时候，就使用这个来进行初始化

• var obj = null;
  console.log(typeof obj)  // object
  

JavaScript 数据类型的转换

• 数据类型的转变就是就是实现的是我们的将我们的其他数据类型转换为我们的需要的数据类型

JavaScript 将其他数据类型转化为字符串（String）

• 在javascript中，我们是可以发现实际上有很多的情况下，我们都是可以实现我们的隐式转化数据类型的

• 同时我们还是可以通过某些方法来实现转化数据类型，显式转化

• 一个字符串和其他数据类型实现使用 + 运算符的时候，那么就会实现隐式转化为字符串型

  • var numstr = "hello world"
    var num = 10
    ​
    console.log(numstr + num) // "hello world10"
    

  • 这样我们就可以发现字符串出现拼接的现象了，这个也是我们 es5之前常用的字符串和变量之间实现拼接的方式之一

• 显式转化

  • 就是使用两种方法：

    • 调用 String() 函数
    • 调用 .toString() 方法

    • var numstr = "12343"
      ​
      // 使用函数 `String()` 实现转化，注意这个函数是在我们的全局对象中的
      // 对于我们的使用，这个是函数，但是对于全局对象的使用，那就是方法
      console.log(global.String(numstr), typeof global.String(numstr))   // 12343 string
      ​
      // 开始使用方法 `toString()` 来实现转化我们的数据类型
      console.log(numstr.toString(), typeof numstr.toString())   // 12343 string
      ​
      // 这个也是我们的面向对象的思维，就是可以一直点下去，一直点 `.`
      

JavaScript 将其他数据类型转化为数值型（Number）

• 隐式转换： 通过我们的运算符实现转化的，除了 + ,其他的运算符都是可以实现隐式转化的

  • var numstr = "12"
    var num = 6
    ​
    console.log(numstr / num)  // 2
    console.log(numstr * num)  // 72
    console.log(numstr - num)  // 6
    console.log(numstr + num)  // "126"  + 简直废物
    

• 显式转换

  • 就是使用我们的函数 Number()

  • var numstr = "12"
    ​
    // 开始使用我们的 Number() 函数，由于这个是我们的全局对象，所以说可以直接调用
    // 或者说： 在我们的 node 环境下，就直接使用我们的 global 调用，浏览器环境下，通过 window 实现调用
    // 但是需要注意的是： 都是全局中的，所以说都是可以直接使用的
    console.log(global.Number(numstr))  // 通过 global 来实现调用方法
    console.log(Number(numstr))  // 直接调用函数
    console.log(global.Number === Number)  // true
    ​
    // 由于作者编译的环境是使用的是 node 环境，所以说就不演示 window 了
    

  • undefined ===> Number : 那么就是 NaN
  • null ===> Number : 那么就是 0
  • boolean ===> Number: true 1 false 0 【所有的编程语言都是这样的】
  • 注意这个自己实践一哈就可以啦！！！

JavaScript 将其他数据类型转化为布尔型（Boolean）

• 所有的数据类型都是可以实现转化为 布尔类型 的，多用于后面的分支语句以及循环语句实现条件的判断
• 在编程语言中，当含有内容的时候，就是我们的 true， 每有内容的时候就是 false,大部分情况下通吃所有编程语言
• 0 | "" | null | undefined | NaN 转化成的就是我们的 false

JavaScript 中的运算符

• 几乎所有的编程语言都是包含了运算符的，所以说把这个学习好就可以啦，也是可以叫做操作符的

  • javascript 中的运算符和我们的C/C++/ObjectC/Python 等等编程语言是一样的

• 基本所有的编程语言的运算符都是含有三种的

  • 算数运算符 —— 就是实现的是我们的对数字型的变量进行的一种操作
  • 赋值运算符 —— 就是给我们的变量机型赋值的运算符
  • 关系运算符 —— 就是用来实现比较两个变量直接的区别的运算符
  • 逻辑运算符 —— 常用的地方就是实现我们的判断语句中或者循环语句中使用的比较多，最后返回的是我们的 boolean 类型

• 运算元

  • 我们的运算符应用到的对象，就是我们的所谓的运算元

  • 可以这样来理解： 就是我们的运算符的应用场景就是我们的运算元之间的操作

    • 一个运算元对应的运算元只有一个的话，那么就是我们的 一元运算符
    • 一个运算符对应的运算元含有两个的话，那么就是我们的二元运算符
    • 一个运算符对应的运算元含有三个的话，那么就是我们的三元运算符

算数运算符

• 算数运算符

  • 应用我们的数学表达式中，他的应用和我们的数学中的应用一致

  • 含有的算数运算符含有

    • + - * / % ** 加 减 乘 除 求模 求幂
    • 但是我们需要注意的是，编程语言中，我们的 + 既可以实现在数值型中实现运算，还是可以用来连接 字符串的

• 赋值运算符

  • 就是我们前面说的 赋值操作, 就是通过的是我们的 = 来实现的赋值操作

    • var num;  // 声明变量的操作
      num = 10  // 赋值的操作
      

  • 在我们的 JavaScript 中还是可以实现 链式赋值的操作的（Chaining assignments）

    • var num1 = num2 = num3 = 321
      console.log(num1, num2, num3)  // 321 321 321
      ​
      // 不推荐这种写法，因为代码的可阅读性是很低的
      

    • 链式计算是从右到左进行计算的

• 变量的原地修改（Modify in-place）

  • 这个就是我们的原地修改的意思

  • var num = 100
    num = num + 10
    console.log(num)  // 110
    

  • 同时上面的操作我们是可以直接使用我们的新的运算符简写

  • var num = 100
    num += 10  // num = num + 10
    console.log(num)  // 110
    ​
    var num01 = 100
    num01 -= 10  // num01 = num01 - 10
    console.log(num01)  // 90
    ​
    var num02 = 100
    num02 *= 10  // num02 = num02 * 10
    console.log(num02)  // 1000
    ​
    var num03 = 100
    num03 /= 10  // num03 = num03 / 10
    console.log(num03)  // 10
    

• 变量自增和自减（注意每一种编程语言中都是含有这个的，不止是javascript, python/java/golang中都是有的）

  • 首先我们的自增和自减都是分为前后的
  • 但是前自增（减）和后自增（减） 在实现作为我们的单条语句的时候，是没有区别的
  • 但是作为表达式的时候就会出现差异
  • 前自增（减） 作为表达式的时候，是先本身实现 +1(-1) , 然后赋值运算
  • 后自增（减） 作为表达式的时候，是先赋值运算 ， 然后实现 本身+1(-1)
  • 后置形式（postfix form）| 前置形式（prefix form）

  • var num01 = 1
    var num02 = 2
    num01++  // 后自增
    ++num02  // 前自增
    console.log(num01, num02)  // 2 3
    ​
    ​
    // 开始实现作为表达式进行书写
    var num03 = num01++  
    var num04 = ++num02
    console.log(num01, num02, num03, num04)  // 3 4 2 4
    

• 运算符优先级

  • 这个我个人感觉没必要，因为，只要分不清优先级，那就添加() 来实现修改优先级即可，哈哈哈
  • 含有() 优先级最高，记住这个就行啦，哈哈哈！！！这一点想搞明白的私聊我，这部分我不想写

比较运算符

• 首先需要注意的是，这个任然是所有编程语言中都是含有的

• 可以这样理解： 这种运算符可以实现将两个数据进行一个比较，然后实现得到想要的效果，最后返回的是Boolean类型值

• 常用的比较运算符

  • 大于和小于 > <

  • 大于等于和小于等于 >= <=

  • 检查两种数据的值是否相等 ==

  • 检查两种数据类型的值是否不相等 !=

  • 检查两种数据类型的值或者数据类型是否相等 ===

    • var num = 100
      var num01 = 200
      var numstr = "100"
      ​
      console.log(num > num01)  // false
      console.log(num < num01)  // true
      console.log(num == numstr)  // true
      console.log(num === numstr)  // false
      

    • 注意我们的 == 和 === 的区别，typescript 在现在的开发中我们是会发现，使用 == 是会报错的