js基本语法

js语言的组成

javascript = ECMAScript + BOM + DOM

1. 核心(ECMAScript)
2. 浏览器对象模型(BOM)
3. 文档对象模型(DOM)

语法

---

js代码的编写位置

• script标签

  <script type="text/javascript">
      alert('你好')
  </script>

• js文件
  独立的js文件需要引入页面才能执行

  <script type="text/javascript" src="js/common.js"><script>

  script标签属性

  • type:类型
  • src :js文件路径
    带src属性的script标签内不能写js代码

JS变量的定义、关键字

• 变量定义(使用var关键字)：变量是存储数据的容器
  var age; //var 是关键字，age是变量名

• 赋值：
  age = 20;

• 定义的同时赋值：
  var age=20;

• 可以一次定义多个变量：
  var name="zhangsan", age=18, weight=108;

JS代码规范:

• JS变量的命名规范
  • 变量名必须是数字,字母,下划线_和美元符组成;
  • 第一个字符不能为数字
  • 不能使用关键字或保留字
• 代码可读性
  • 标识符区分大小写，如：age和Age是不同的变量。但强烈不建议用同一个单词的大小写区分两个变量。
  • 变量命名尽量遵守驼峰原则: myStudentScore
  • 变量命名尽量见名知意
  • 保持代码缩进
  • JS语句的末尾尽量写上分号;
  • 运算符两边都留一个空格, 如 var n = 1 + 2;
  • 注释
    • 单行注释：//注释内容
    • 多行注释（和CSS注释一样）
      • /*注释内容*/
      • 多行注释不能嵌套

JS数据类型

• 基本数据类型

  • Number：数字
    • NaN：是一个特殊的值，即非数值(Not a Number)。数学运算无法得到数字时，就会返回NaN
      • 不代表任何值，也不等于任何值，甚至自己都不等于自己
      • 任何数据与它运算都返回NaN
      • isNaN(a)：用来判断a到底是不是非数字,返回布尔值
  • String：字符串
    用引号（单/双引号）括起来的内容
  • Boolean: 布尔类型
    Boolean 类型有两个值：true和false

• 引用数据类型

  • Array：数组
  • Object：对象

• 特殊数据类型

  • Null
    Null 类型是一个只有一个值的数据类型，即特殊的值 null。它表示一个空对象引用(指针)，而 typeof 操作符检测 null 会返回 object
  • Undefined
    Undefined类型只有一个值，即特殊的 undefined，在使用 var 声明变量，但没有对其初始化时，这个变量的值就是 undefined
    • 与not defined的区别(not defined:未声明)

• 数据类型判断

  • typeof

    typeof 'html5'; //=>string
    typeof 100; //=>number
    typeof true //=>boolean
    typeof null //=>object

• 数据类型转换

  • 基本数据类型转换：利用内置函数进行转换

  • 隐式转换
    如果运算不能进行下去，内部就会尝试进行数据类型的转换
    支持隐式转换的运算：逻辑运算、关系运算、算术运算

运算

---

算术运算：

+, -, *, /, %:加,减,乘,除,取余(取模)

• toFixed(num): 在数字后面调用，num为小数位，有四舍五入的功能，得到一个字符串
• parseInt()：取整:获取到第一个不为数字的字符为止
• parseFloat()：取小数

+ 的特殊用法：字符串拼接

+号两侧只要有一个是字符串则为字符串拼接

赋值操作：

• =
  var num1=10;//表示把10赋值给num1变量
• +=：在原来的内容基础上追加内容
  str += 'test' <==> str = str + 'test'
• -=：
  var n=10; n -= 2 <==> n = n - 2
• *=,/=,%=

关系运算（返回布尔值）

• ==(等于), !=(不等于)

• <(小于)、>(大于)、<=(小于等于)、>=(大于等于)

• ===、恒等于/全等于，比较的时候要求值和类型都相等（不会进行类型隐式转换）

• !==、不全等于

• 关系运算符的比较规则:
  1. 数字和数字比较, 直接比较大小
  2. 数字和字符串比较, 字符串转换为数字后再比较
  3. 字符串和字符串比较, 进行字符的ASCII码值比较

逻辑运算（返回布尔值）

• &&: 逻辑与

  &&比||优先级高

• ||：逻辑或

• !: 逻辑非

  !true //=> false
  !false //=> true

一元运算

• ++: 自增1（在原来的数值基础上加1）

• –：自减1（在原来的数值基础上加1）

• 前置：

  var num = 10;
  ++num;--num;

  返回值：返回值是减1（加1）之后的值

• 后置：

  var num = 10;
  num++;num--

  返回值：返回值是没减1（加1）之前的值

八进制和十六进制的介绍

• 二进制
  var num = 0b10101101;
• 八进制
  var num = 0o0123
• 十进制
• 十六进制
  var num = 0xef9302;

相互转换

• 十进制转其他

  var number = 20;
  number.toString(2); //转成2进制
  number.toString(8);//转成8进制

• 其他转十进制

  var x='110';  
  parseInt(x,2);  
  parseInt(x,8);  
  parseInt(x,16);

• 其他转其他
  先用parseInt转成十进制再用toString转到目标进制

关键字

break

do

instanceof

typeof

case

else

new

var

catch

finally

return

void

continue

for

switch

while

debugger

function

this

with

default

if

throw

delete

in

try

保留字

class

enum

extends

super

const

export

import

操作符优先级

运算符

描述

., [], ()

对象成员存取、数组下标、函数调用、分组等

++, –, ~, !, delete, new, typeof, void

一元运算符

*, /, %

乘法、除法、取模

+, -

加法、减法、字符串连接

<, <=, >, >=, instanceof

关系比较、检测类实例

==, !=, =, !

等于、恒等(全等)

&&

逻辑与

||

逻辑或

?:

三元运算条件

=, +=, -=, *=, /=, %=

赋值、运算赋值

,

多重赋值、数组元素

术语

• 表达式的概念:

  • 由运算符和操作数（变量或常量）组成的式子

  • 算术运算符组成的式子叫算术表达式

  • 关系运算符组成的式子叫关系表达式或者条件表达式

  • 逻辑运算符组成的式子叫做逻辑表达式

    如：2+3；a+5；c>3; a&&b等

• 返回值：运算后得到的值

• 程序的三大流程控制

  我们的计算机在执行一个程序的时候，最基本的方式是一条语句接一条语句的执行。但不可能所有的问题都能用顺序执行方式就能解决，总会有一些跳转。采用结构化的程序设计，可以大大提高开发程序的速度、提高程序的可读性、程序运行的速度和效率

  • 顺序：从上朝下执行的代码就是顺序
  • 分支(选择)：根据不同的情况，执行对应代码
  • 循环：重复做一件事情