JavaScript

认识编程语言

计算机语言

人与计算机之间通讯的语言，比编程语言更广泛，如HTML是标记语言，也是计算机语言，但不是编程语言

编程语言

用来定义计算机程序的形式语言，用来向计算机发出指令，准确定义计算机所需要使用数据的计算机语言。

• 数据和数据结构
• 指令及流程控制
• 引用机制和重用机制
• 设计哲学

编程语言发展史

• 机器语言：二进制编码
  • 优点：
    • 可以直接被计算机识别，不需要编译解析
    • 执行效率非常高
  • 缺点：
    • 可读性差，容易出错
    • 不易编写
• 汇编语言：用符号代替0、1代码，由汇编器，转为二进制编码
  • 优点：
    • 像机器语言一样，可以直接访问、控制计算机的各种硬件设备
    • 占用内存少，执行速度快
  • 缺点：
    • 不同机器有不同的汇编语言和编译器，代码缺乏可移植性
    • 符号多，难记
  • 场景：操作系统内核、驱动程序、单片机程序
• 高级语言：自然语言，符号人类思维方式
  • 优点：
    • 简单、易用，易理解
    • 远离对硬件的直接操作
    • 可移植
  • 缺点：
    • 不能直接被计算机识别，需要经编译器翻译成二进制指令
    • 种类繁多：JavaScript/python/c++/c#/Objective-C/Java

JavaScript历史

• 1994年，Navigator,第一个较为成熟的网页浏览器
• 网景公司需要一种网页脚本语言，使得浏览器可以与网页互动
• Brendan Eich, Scheme
• 1995 Sun Oak->Java,网景公司希望将Java嵌入网页运行
• Breadan Eich 10天设计了JavaScript。Mocha(摩卡)，Navigator2.0beta版更名为LiveScript, Navigator2.0 beta 3版本正式命名JavaScript,为了蹭Java热度
• 借鉴了C语言的基本语法，Java的数据类型和内存管理、Scheme语言的函数提升到第一公民的地位，Self使用原型（prototype）的继承机制
• 1995微软对Navigator进行了逆向工程，创建了JScript
• 1996,网景公司向ECMA(欧洲计算机制造商协会)提交语言标准
• 1997年，以JavaScript为基础，制定了ECMAScript标准规范ECMA-262,它是一份标准，定义了ECMAScript
• JavaScript是ECMAScript最著名的实现之一，除此之外，还有ActionScript和JScript

JavaScript运行引擎

• SpiderMonkey：第一款JavaScript引擎

• Chakra：微软

• JavaScriptCore:WebKit中的JavaScript引擎，Apple公司

• V8：Google

JavaScript应用场景

• web开发
  • 原生js
  • React
  • Vue
  • Angular
• 移动端开发
  • RN
  • Weex
• 小程序开发
• 桌面引用开发
  • Electron
• 后端开发
  • Node框架：koa/express/egg.js

交互方式

• alert

• console.log

• document.write(xxx)

• prompt(提示):

  const inp = prompt('用户输入内容：')
  alert('输入的内容是：'+inp)
  

注释

• 单行注释：// 单行注释

• 多行注释

  /*
  多行注释
  
  */
  

• 文档注释

  /**
  *@param {} name 姓名
  *
  */
  

数据类型

基本数据类型

• Number：整数与小数

  • Infinity:无穷

  • NaN: not a number

  • 进制表示

    • 16进制：0x100; 256
    • 8进制：0o100; 64
    • 2进制：0b100; 4

  • 数字表示范围：

    • Number.MAX_VALUE
    • Number.MIN_VALUE
    • Number.MAX_SAFE_INTEGER
    • Number.MIN_SAFE_INTEGER

  • isNaN

  • 方法：

    • toString(base): 2~36

      var num = 10
      num.toString(2) // 1010
      num.toString(8) // 12
      num.toString(16) // a
      
      10..toString(2) // 1010
      

    • toFixed(): 四舍五入保留小数位数

      var pi = 3.141592
      pi.toFixed(3) // 3.142
      

    • 类方法

      var num1 = '123.123'
      Number(num1)  // 123.123 
      Number.parseInt(num1) // 123 
      Number.parseFloat(num1)  // 123.123
      
      /*
      window上也有parseInt/parseFloat
      */
      

• String

  • 单引号

  • 双引号

  • 反引号

  • 转义：使用反斜杠\

  • length: 字符串长度

  • + 连接符

  • 方法

    • padStart(num,string)

    • padEnd(num,string)

    • indexof

    • includes

    • toUpperCase

    • toLowerCase

    • replace(str|Reg, str|function)

    • slice(start,end)

    • substring(start,end)

    • substr(start,length)

    • concat()：拼接

      str.concat(str1).concat(str2)
      

    • trim(): 删除首位空格

    • split():切割

      str.split('-') // 以‘-’分割成数组
      

• Boolean

  • true
  • false
  • 0 、空字符、null 都是false

• Undefined

  • 声明变量时，未赋值时，就是undefined

• Null

• BigInt

• Symbol

复杂数据类型

• Object：引用类型

typeof操作符

目的是确定任意变量的数据类型

• undefined: 值未定义时
• boolean
• string
• number
• object
• function
• symbol

var info = 'aaa'
console.log(typeof info) // string
info = null;
console.log(typeof info) // object

// typeof(x) 与 typeof x 相同

类型转换

隐式转换

// string 转换
var num2str = num1 + ""

// number 转换
var num3 = num1 * num2

// boolean类型转换：直观上为空的值，转为boolean类型都是false。0、null、""、undefined、NaN

显式转换

// string 转换
var num2str = String(num1)
// var num2str = num1.toString()

var num3 = Number(num1)

• 其他类型转数字类型：

运算符

++和--位置区别

/*
如果单独使用，没有任何区别
如果在其他表达式中使用，有区别，
++a 先自增，再在表达式中计算
a++ 先在表达式中计算，然后再自增
*/

和=区别

• ==运算符，会将运算元先转为Boolean类型的值，再进行比较。null比较特殊，
• ===运算符，类型不相同的时，直接返回false

循环

while

while(循环条件){
    // do thing
}

do-while

/*
do循环会先执行一次，再去判断条件
*/
do {
    
} while (条件)

for

for(begin;condition;step){
    /*
    	先执行一次begin,
    	开始判断条件condition
    	然后是循环体
    	最后是step,每次迭代完以后执行
    */
}
/*99乘法表*/
document.write('<table>')
for (let i = 0; i < 9; i++) {
  var lineNum = i+1
  document.write('<tr>')
  for (let j = 0; j < lineNum; j++) {
    var col = j+1
    document.write(`<td style="border:1px solid red;padding:10px">${lineNum}*${col}=${lineNum*col}</td>`)
  }
  document.write('</tr>')
}
document.write('</table>')

循环控制

• break：跳出循环
• continue:跳过本次循环