JavaScript基础知识汇总（一）

小俊好好学前端
267 阅读8分钟

一、JavaScript简介

  1. JavaScript，就是我们通常所说的JS，是一种嵌入到HTML页面中的脚本语言，由浏览器一边解释一边执行，不需要编译，运行过程中由JS解释器（JS引擎）逐行来解释并执行。
  • 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit
  • JS 引擎：也称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8

  1. 单纯的HTML页面是静态的（只供浏览），而JavaScript的出现，把静态的页面转换成支持用户交互并响应相应事件的动态页面。在一个页面中，Html负责网页的主体内容、CSS负责外观，而JavaScript则负责是页面的行为。

  2. JavaScript包括ECMAScript、DOM、BOM组成

  • ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
  • 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
  • BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
  1. JavaScript在HTML的引用方式共有4种：
  • 页头引入（head标签内）；
  • 页中引入（body标签内）
  • 元素事件中引入（标签属性中引入）
  • 引入外部JS文件
  1. JavaScript和Java的关系。 JavaScript和Java虽然名字相似，但是本质上是不同的。
  • JavaScript往往都是在网页中使用，而Java却可以在软件、网页、手机App等各个领域中使用；
  • Java是一门面向对象的语言，而从本质上讲，JavaScript更像是一门函数式编程语言;

二、JavaScript入门基础

- 数据结构

  1. 标志符 在JavaScript中，变量、函数等都需要定义名字，这个名字就称为‘标识符’。JavaScript中标识符命名需要遵守以下三个规范。
  • 标识符由字母（严格区分大小写）、下划线、美元符号$、数字组成，但是不能以数字开头。
  • 一般遵循驼峰命名法，首字母小写，后面单词首字母大写
  • 标识符不能和JavaScript中其他关键字同名
  1. 数据类型 JavaScript是一种弱类型语言，但在程序运行过程中也会被自动确定。在运行过程中，由JS引擎根据变量右边的值的数据类型来判断，运行完毕之后，变量数据类型也就相应确定。数据类型包括五种基本数据类型和复杂数据类型（Object）
  • 数字型（Number）：包括整型、浮点型，默认值为0；可以通过pareInt(string)、pareFloat(string)、Number()等函数来达到数据类型转化的目的，同时也可以通过JavaScript中的隐式转换方式，比如使用一些算术运算符来进行数据类型的改变
  • 字符串类型(String)：字符串数据类型是指使用双引或者单引号括起来的数据值，在JavaScript中单引号双引号没有区别，但是在字符串嵌套时，外单内双或者外单内双。可以通过toString()或者String()函数转换为字符串类型，也可通过字符串拼接这种隐式转换方式来实现转换成字符串
  • 布尔类型（Boolean）,布尔类型只有两个值，true 和 false。使用Boolean()函数将其他类型转化为布尔类型，其中空值 例如''、0、NaN、null、undefined等转化为Boolean为false，其他都为true
  • 未定义类型（undefined），一个声明后没有被赋值的变量，默认值为undefined
  • 空值（null），在声明变量后，赋null,表示里面的值为空 引用数据类型（Object），包括常见的数组（Array）、函数（function）、对象（object）
  1. 运算符
  • 算术运算符：包括加（+）、减（-）、乘（*）、除(/)、取余（%）；这里注意有两个特殊的运算符递增（++）、递减（--）运算符，放在变量前面时，叫做前置递增（递减）运算符，先自加（减），后返回值；放在变量后面时，称为后置递增（递减）运算符，先返回值，在自加（减）；
  • 关系运算符：大于（>）、小于（<）、大于等于（>=）、小于等于（<=）、判等号（==）值是否相等、不等号（!=）、全等（===）表示值和数据类型都相等、不全等（！===）
  • 逻辑运算符：与（&&），全真为真、或（||）有真为真、非（！）与原逻辑取相反值；逻辑中断指当有多个表达式时，左边的表达式值可以确定结果时，就不在继续运算右边的表达式值；例如逻辑与 表达式1&&表达式2，如果第一个值为真，返回表达式2，如果第一个表达式为假，返回表达式1；
  • 赋值运算符：直接赋值（=）、加减一个数后赋值（+=、-=）、乘除取余后赋值（*=、、=、%=）
  1. 运算符优先级 运算符优先级从高到低依次是 括号（）、一元运算符（！、++等）、算术运算符（先乘除后加减）、关系运算符、相等运算符、逻辑运算符（先与后或）、赋值运算符、逗号运算符

流程控制

  1. 顺序结构 顺序结构指代码执行顺序从上至下依次执行，也是程序默认的执行方式

  2. 选择结构 选择结构是根据逻辑表达的式的真假结果，去选择执行相应的代码块。在JavaScript中，可以分为以下5种。

  • if语句 语法结构：if（条件表达式）{代码块}

执行思路：当条件表达式返回值为真时，执行代码块代码，反之跳过代码块，执行后面代码

  • if……else语句 语法结构：if(条件表达式){代码块1} else{代码块2}

执行思路：当条件表达式返回值为真时，执行代码块1代码，反之执行代码块2代码

  • if……else if语句 语法结构：if(条件表达式1){代码块1}else if(条件表达式2){代码块2}…… else{代码块n}

执行思路：从上往下依次去判断条件表达式真假，为真时执行相应代码块代码，且跳过剩余else if 和else代码的判断与对应代码块代码执行

  • switch语句 语法结构：switch(表达式){case value1：代码块；break; case value2:代码块2；break；…… case value n-1 : 代码块n-1; break; default：代码块n}

执行思路：先计算表达式里面的值，然后去匹配value值，当相同时执行对应代码块代码，然后执行break语句，跳过剩余代码的判断与执行。当最后都没有匹配到与表达式相同的值，就执行default里面的代码块

  • 三元表达式 语法结构：表达式？代码块1：代码块2；

执行思路：当表达式返回值为真时，执行代码块1代码，反之执行代码块2的代码

  1. 循环结构 循环结构是指当满足一定条件，反复执行一段代码，直到不满足条件为止。在JavaScript中，循环结构主要分为以下三种。
  • while循环

语法结构：while（表达式）{代码块}

执行思路：先判断表达式真假，为真时执行代码块代码，执行完之后，重新判断表达式真假，为真继续执行代码块代码。如此反复，直到表达式结果为假，跳过执行代码块代码，执行后面代码

  • do while循环 语法结构：do{代码块}while(表达式)

执行思路：先执行代码块代码，然后去判别表达式真假，为真继续执行代码块代码，然后再判断表达式真假，如此反复，直到表达式为假时，不再执行代码块代码，往后面执行

  • for循环

语法结构：for(初始变量值;条件表达式;操作表达式){代码块}

执行思路：执行for循环时，初始变量先执行，再去判断条件表达式真假，为真执行代码块与操作表达式代码；然后重新判断条件表达式真假，为真继续执行代码块和操作表达式代码，如此反复，直到条件表达式为假时，跳过代码块与操作表达式的执行，结束循环，往后执行代码

  • break与continue关键字 在循环中，常常使用break关键字直接跳出循环，无论条件表达式返回结果是真是假，都强制跳出循环，执行循环后面代码；而与break不同的是，使用continue关键字，只会跳过当前一轮的循环，跳过的代码是当前轮循环中continue后面未执行的代码，直接开启下一轮循环的条件表达式的判断
avatar
文章
阅读
粉丝