学习JavaScript基础

JavaScript基础

JavaScript简介

• 什么是javascript?

  JS是一种脚本, 动态, 弱类型语言. 基于在网页上实现复杂功能而产生的语言.

  虽然JS做为开发web页面的脚本语言而出名. 但是如今已被用到了很多非浏览器环境当中, 比如NodeJS, Apache, Electron, Frida.

  • 动态语言意味着JS不需要提前声明变量的类型;
  • 弱类型意味着JS可以隐式地转换类型;

• JavaScript可以做什么?

  • 操作页面
  • 响应网页发生的事件
  • 数据处理
  • 胶水语言, 连接各种语言环境.

• Java和JavaScript有什么关系?

  雷锋和雷峰塔的关系. 除了语法相似以外, 几乎没有任何关系.

• JavaScript和JQuery有什么关系?

  JQuery其实是JS的一个框架, 它封装了很多原生函数, 提供了更丰富的函数库. Vue和React等框架也是同样的道理, 只是它们在高度封装的过程中, 发展出了自己的抽象内涵.

运行环境

• 浏览器页面内

  浏览器为什么可以直接运行js

  在浏览器内核中提供了JS引擎, 所以可以直接执行JS. 该JS引擎只是浏览器的一个线程, 用来执行js.

• 浏览器页面外

  本质就是封装了浏览器内核当中的JS引擎, 达到了浏览器外运行JS的目的.

  • Node.Js
  • PyV8

环境搭建

• 安装Node.js

  https://nodejs.org/en/
  1

• 安装IDE

  https://www.jetbrains.com/webstorm/
  1

• 配置IDE

  File -> Settings -> Language&Frameworks -> Node.js and NPM
  1

变量声明

• 可变变量

  声明一个可变变量

  var a = 1;
  let b = 2;
  1
  2

  • let和var的区别

    • var不会引起变量作用域的改变

      a = 1
      function foo(){
      	console.log(a)
      }
      
      // var a;
      let a;
      1
      2
      3
      4
      5
      6
      7

    • let只在代码块区域中有效

      function foo(){
          {
              var a = 1;
              let b = 2;
          }
          console.log(a);
          console.log(b);
      }
      
      foo()
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10

• 不可变变量/常量

  const NAME = "tunan"
  NAME = "chihai"
  1
  2

函数声明

• 普通函数

  • 关键字是function

  • 函数体在代码块{}中声明

  • 每一句语句结束以;结尾

    let minNum = 20;
    let maxNum = 90;
    // 0~maxNum之间的整数
    parseInt(Math.random()*maxNum)
    
    // minNum ~ (maxNum+minNum)之间的整数
    parseInt(Math.random()*maxNum) + minNum
    
    // minNum ~ maxNum之间的整数
    parseInt(Math.random()*(maxNum-minNum)) + minNum
    
    
    function randInt(minNum, maxNum){
        return parseInt(Math.random()*(maxNum-minNum)) + minNum
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    如果需要做到像python那样闭区间, 需要对(maxNum-minNum) + 1

• 匿名函数

  (function(minNum, maxNum){
      console.log(parseInt(Math.random()*(maxNum-minNum)) + minNum)
  })
  1
  2
  3

  • 调用匿名函数

    (function(minNum, maxNum){
        console.log(parseInt(Math.random()*(maxNum-minNum)) + minNum)
    })(20 ,90)
    1
    2
    3

• 构造函数

  略

命名规范

• 变量和函数都是使用小驼峰命名法

  let myVariable = 1
  1

• 常量使用大写

  CONST MAX_NUM = 1000
  1

• 类和构造函数使用大驼峰命名法

  function Dog(){
  	this.color = 'black'
  }
  1
  2
  3

• 私有属性用_表示

  function Dog(){
  	this.color = 'black'
  	this._owner = 'tunan'
  }
  1
  2
  3
  4

• 注释

  • 单行注释

    // .....
    1

  • 多行注释

    /* ... */
    1

基本数据类型

• 6种原始类型

  • undefined

    typeof False
    "undefined"     // 返回undefined的原因是js当中false是小写, False的话就变成了一个变量. 没有赋值声明的变量, 默认会指向undefined
    1
    2

  • boolean(布尔类型)

    typeof false
    typeof true
    1
    2

  • number

    typeof 1
    typeof 1.0
    1
    2

  • Bigint

    typeof 1n
    1

  • String(字符串)

    typeof '1'
    1

  • Symbol(符号)

    了解即可

    let a = Symbol(1)
    let b = Symbol(1)
    
    a === b
    1
    2
    3
    4

• Object

  一种类似字典, 用键对值表示属性关系的数据类型. 键是字符串或者Symbol, 值可以是任意值.

  let obj = {undefined: 1, false:2, 1:3, 1n:4, '1':5}
  
  // 正确赋值Symbol的方法
  let a = Symbol(1)
  obj[a] = 6
  1
  2
  3
  4
  5

  • null

    • null和undefined有什么区别?

      null表示一个空指针.  undefined表示"无" 这样的一个值.
      1

• Function

基本数据结构

• 对象

  表面像字典, 但本质和python中的类相似, 里面的键对值相当于python类中的类属性

  • 直接声明

    let obj = {undefined: 1, false:2, 1:3, 1n:4, '1':5}
    1

  • 通过New一个对象

    function Dog(){
    	this.color = 'black'
    }
    
    new Dog()   // 返回了一个对象
    1
    2
    3
    4
    5

• 数组

  类似python中的list, 但是扩容机制有区别

  • 声明一个数组

    let myArray = [1, 2]
    
    myArray[3] = 'a'
    1
    2
    3

  • Uint8Array

    表示8位无符号整型数组, 表示0~255.

    new Uint8Array(length)
    1

  • Uint16Array

  • Uint32Array

• Map

  可以认为是有序的字典

  let myMap = new Map()
  1

  • Map和HashMap(字典)的区别?
    • 对象可能通过继承关系获取自带的一些属性, 而Map不会.
    • Map提供了很多字典常用功能.

• Set

  let mySet = new Set()
  mySet.add(1)
  1
  2

数据类型的CRUD操作

• 字符串

  • Create

    • 声明一个字符串

      let myString = "abcdefg"
      
      // 可以包含换行符等空白字符
      let myString = `abcdef
      g`
      1
      2
      3
      4
      5

    • 合并两个字符串并返回一个新的字符串

      let myString2 = '1234567'
      let myString3 = myString + myString2
      1
      2

  • Retrieve

    • 获取当前字符串的长度

      myString.length
      1

    • 通过索引值获取单个字符

      myString[index]
      1

    • 通过索引值获取一段范围内的字符串

      myString.slice(start, end)
      1

    • 获取某个元素的索引值

      myString.indexOf(value)
      
      // 如果不存在该元素, 则返回-1
      // 对-1进行位取反后得到的是0, 代表false
      if (~myString.indexOf(value){
      	....
      }
      1
      2
      3
      4
      5
      6
      7

  • Update

    • 替换目标字符串

      // 只会替换掉它最先找到的元素
      myString.replace(value_1, value_2)
      
      // 替换掉所有匹配的子字符串
      myString.replaceAll(value_1, value_2)
      1
      2
      3
      4
      5

    • 大小写转换

      // 转为大写
      myString.toUpperCase()
      // 转为小写
      myString.toLowerCase()
      1
      2
      3
      4

  • Delete

    pass

  • 字符串格式化

    `get myString => ${myString}`
    1

• 数组(Array)

  • Create

    • 复制一个数组

      let myArray = [1, 2, 3, 4]
      let myArray2 = myArray
      console.log(myArray === myArray2)
      myArray2 = Array.from(myArray)
      console.log(myArray === myArray2)
      1
      2
      3
      4
      5

    • 合并两个数组

      > myArray + myArray2
      // 返回的是字符串拼接的结果
      < "1,2,3,41,2,3,4"
      
      // js中合并数组的方法, 返回一个新的数组
      let myArray3 = myArray.concat(myArray2)
      1
      2
      3
      4
      5
      6

  • Retrieve

    • 查看当前数组的大小

      myArray.length
      1

    • 通过索引值查询单个元素

      myArray[index]
      
      // 超过索引范围不会报错, 返回undefined
      myArray[10086]
      1
      2
      3
      4

    • 通过索引值获取一定范围内的元素

      myArray.slice(1,3)
      1

    • 通过元素获取索引值’

      myArray.indexOf(index)
      1

  • Update

    • 通过索引去替换元素

      myArray[0] ='a'
      
      // 超过索引范围, 会自动补全empty元素
      myArray[1008] = 'b'
      1
      2
      3
      4

    • 添加一个元素至末尾

      myArray.push('c')
      1

    • 向指定下标插入元素

      // splice默认用来删除, 如果数量参数为0, 则为添加
      myArray.splice(起始索引, 数量, item)
      
      myArray.splice(1, 0, 'd')
      1
      2
      3
      4

  • Delete

    • 从末尾删除元素

      myArray.pop()
      1

    • 通过索引值删除元素

      myArray.splice(5, 10082)
      1

  • 排序

    • 倒序

      myArray.reverse()
      1

    • 排序

      // 数组排序是将元素转为string后进行排序
      myArray.sort()
      [10086, 2, 3, 4, "a", "b", "d"]
      
      function compare(a, b){
          if(a < b){
              return -1
          }
          if(a > b){
              return 1
          }
      
          return 0
      }
      
      myArray  = [1, 10087, 2, 9, 4]
      myArray.sort(compare)
      console.log(myArray)
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18

• 对象(Object)

  • Create

    • 合并两个对象, 并返回一个新对象

      let myObj = {"a":1, "b":2}
      let myObj2 = {"c":3, "d": 4}
      
      Object.assign(myObj,myObj2)
      1
      2
      3
      4

  • Retrieve

    • 获取当前对象所有key

      Object.keys(myObj)
      1

    • 获取当前对象所有value

      Object.values(myObj)
      1

  • Update

    • 键对值复制

    • Object.definePropery

      Object.defineProperty(navigator, 'webdriver', {value: true, writable:true}) 
      1

  • Delelte

    delete myObj.a
    1

  • JSON转换

    let jsonData = JSON.stringify(myObj)
    JSON.parse(jsonData)
    1
    2

Date模块操作

• 获取当前时间

  new Date()
  1

• 时间格式化

  new Date().toISOString()
  1

• 获取时间戳

  new Date().getTime() //精确到毫秒
  1