JavaScript基础ECMAScript知识点复习整理

**本篇文章食用的简单说明**

本篇文章为复习JavaScript基础ECMAScript进行了知识点梳理，加粗部分为重点！！！加粗加红为重重点！！！

由于JavaScript内容比较多，本篇文章只是基础部分，Web APIs(DOM和BOM)等知识在后续过程中会继续更新，欢迎小伙伴在评论区补充~

推荐大家按记忆梳理部分的内容自行回忆知识点，如有遗忘部分在目录处点击相应部分可以进行跳转。

又是努力学习前端的一天，希望大家共同进步~~~（QAQ我只是一个表情）❤

***记忆梳理***

一、JavaScript是什么，用来做什么

二、JavaScript由什么组成

三、JavaScript可以实现什么效果

四、JavaScript书写位置

五、JavaScript基础

1. JavaScript结束符
2. JavaScript注释
3. 输入输出语法
4. 字面量

六、变量

1. 变量声明与变量赋值

七、检测数据类型的关键字

八、运算符

1. 算数运算符，优先级
2. 赋值运算符
3. 一元运算符
4. 比较运算符
5. 逻辑运算符
6. ***优先级***

九、表达式和语句的区别

十、三大结构

十一、分支语句

十二、循环语句、区别·

十三、数组·

1. 数组声明
2. 数字取值
3. 遍历数组
4. 数组的使用：增---删---改---查

十四、函数

1. 函数命名
2. 函数复用
3. 函数复用和循环的区别
4. 函数传参
5. 函数返回值

十五、作用域和变量

十六、具名函数和匿名函数

1. 匿名函数的调用

十七、对象

1. 对象声明
2. 对象使用：增---删---改---查
3. 对象调用
4. 遍历对象
5. 内置对象
6. ***生成任意范围N-M之间随机数***

十八、JavaScript术语

十九、基本数据类型和引用数据类型、区别

二十、逻辑中断

二一、显示转换和隐式转换

一、JavaScript是一种运行在客户端(浏览器)的编程语言，实现人机交互，为网页增加可交互性。此前的HTML，CSS均为标记语言，HTML定义网页的结构与内容，CSS定义布局(格式与样式)

二、JavaScript由核心语言ECMAScript与Web APIs(DOM和BOM)组成。(本篇主要梳理ECMAScript）

ECMAScript：规定了JavaScript基础语法核心知识。如：变量、分支语句、循环语句、对象等。

Web APIs:DOM页面文档对象模型:操作文档，如对页面元素进行移动、大小、添加删除等操作。

                  BOM浏览器对象模型:操作浏览器，如页面弹窗、检测窗口宽度、存储数据到浏览器。

三、JavaScript用来实现，网页特效(监听)，表单验证(数据合法性判断)，数据交互(获取后台数据渲染到前端)，服务器编程(node.js)。

四、JavaScript 书写位置

(1)行内：写在标签内部vue中常用。

(2)外部：外部.js文件通过<script src="XX.js">引入html页面。

(3)内部：直接写在html文件里，在</body>上面用<script>包住，尽量在HTML页面底部。

JavaScript 代码放在 HTML页面的底部,原因是浏览器按照代码在文件中的顺序加载 HTML,如果先加载的 JavaScript 后修改其下方的 HTML，可能由于 HTML 尚未被加载而失效。

五、JavaScript基础

5.1 JavaScript结束符 ;

JavaScript借鉴了Java 的大部分语法,字母区分大小写，指令也叫语句，用分号;进行分隔，单条语句;可以省略(不推荐)。在实际开发中，为了风格统一，结束符要么每句都写，要么每句都不写。

5.2 JavaScript注释

单行注释        //这是一条单行注释

多行注释        /*  这是一个多行注释  */

5.3 输入输出语法

5.3.1 输入prompt：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

prompt('请输入Hello World!')

5.3.2 输出语法

(1)document.write:向body内输出，输出内容为标签会被解析成网页元素，显示在网页上。

(2)alert：页面弹出警告对话框

(3)console.log：控制台输出语法，程序员调试使用

5.3.3 执行顺序

按HTML文档流顺序执行JavaScript代码

alert() 和 prompt() 它们会跳过页面渲染先被执行

5.4 字面量

字面量是在JavaScript按字面意思给出的固定的值，而不是变量。

数字字面量：整数数字和以10为基数的浮点数

浮点数字面量：小数部分. 和指数部分 必带小数点至少一位数字后加以'e'或'E'开头后跟整数3.1415926、.12345、3.1E+12、.1e-23

字符串字面量:被单引号' '或双引号" "包住的字符,不允许单/双引号套单/双引号，可以单里套双反之亦然。

布尔字面量:布尔类型的原始值true和false

数组字面量 [ ]

对象字面量 { }

转义字符 \：引号前加上反斜线 \，可以在字符串中插入引号。"我是字符串\"字符串\"串"

模板字面量` `:可以包括多行字符串

RegExp字面值：正则表达式是字符被斜线包住 re = /ab+c/

六、 变量：是计算机存储数据的"容器"，就是用来装有变化物品的盒子。

6.1 变量声明与变量赋值

(1)var

(2)let：需要先创建变量才能使用，不允许一个变量名多次声明。

let age        //let 变量名---这是一个变量声明

age = 18    //变量通过等于号=来变量赋值，也叫变量初始化，=叫作赋值运算符

alert(age)   //输出变量：通过变量名来获得变量里面的数据

--------------------------------------------------------------------------------------------------------------------------

let age = 18//也可以声明时进行赋值/初始化

(3)const:声明常量

七、typeof 关键字检测数据类型

八、运算符

8.1 算术运算符的优先级

JavaScript中优先级越高越先被执行，优先级相同时以书从左向右执行。

先乘、除、取余后加、减，有 () 先执行括号里面。

8.2 赋值运算符：将等号右边的值赋予给左边, 要求左边必须是一个容器。

=、+=、-=、*=、/=、%=

num += 1        //等同于num = num + 1

8.3 一元运算符：自增++、自减--。让变量的值+1或-1，经常用于计算次数。

前置自增自减：++i/--i先自加再使用

后置自增自减：i++/i--先使用再自加

8.4 比较运算符：比较两个数据大小、是否相等，比较结果为boolean类型，值为true 或 false。

>、<、>=、<=、==、===、!=、===

==:左右两边值是否相等

===:左右两边是否类型和值都相等,推荐

!=:左右两边值是否不相等

!==:左右两边是否不全等

字符串比较，比较的字符对应的ASCII码。

A：ASCII码为65

a：ASCII码为97

 NaN进行比较不等于任何值，包括它本身，返回结果都为false

=、==和===区别

= 是赋值

== 是判断，只要求值相等，不要求数据类型相等

=== 是全等，要求值和数据类型都相等

8.5 逻辑运算符：解决多重条件的判断

非！：真假切换

与&&：一假则假

或||：一真则真

8.6 ***优先级***

小括号()>一元! ++ -->算数*/后+->关系> > >= < <= >相等== != === !== >逻辑&&后||>赋值=>逗号,

九、表达式和语句区别

表达式： 可以被求值，可以写在赋值语句的右侧。

语句：语句不一定有值。如：alert()、for、break语句

 十、三大结构：顺序结构、分支结构、循环结构。

十一、分支语句：有选择性的执行。如：if语句、三元运算符、switch语句。

11.1 if语句：单分支、双分支、多分支。

if(条件){                                //单分支

        满足条件才会执行的部分

}

--------------------------------------------------------------------------------------------------------------------------

if(条件){                                //双分支

        满足条件才会执行的部分

}else{

        不满足条件才会执行的部分

}

--------------------------------------------------------------------------------------------------------------------------

if(条件){                                //多分支

        满足条件1才会执行的部分

}else if(条件2){

        满足条件2才会执行的部分

}else if(条件3){

        满足条件3才会执行的部分

}else{

        条件都不满足才会执行的部分

}

11.2 ？：三元运算符 ：用来取值

条件？满足条件执行的代码：不满足条件执行的代码

11.3 switch语句:数据找到全等的case值，执行里面对应的代码；若没有则执行defaut部分代码。

 switch(数据){

        case 值1:

                代码1

                break

        case 值2:

                代码2

                break

        defaut:

                代码n

                break

}

 switch语句一般用于等值判断,不适合于区间判断；没有break会造成case穿透。

十二、循环语句

12.1 循环while

while(循环条件){                 //条件为true才会进入循环体，直到为假才会跳出循环

         //循环体

}

--------------------------------------------------------------------------------------------------------------------------

let i = 1                              //变量起始值

while(I<=10){                    //终止条件

        代码1

        i++                           //变量变化量

}

12.2 循环for：循环数组

for(let i=0;i<=10;i++){        //for(变量起始值;终止条件;变量变化量)

        //循环体

}

循环嵌套：外部循环内再套内部循环，一般用于for循环。

 for循环和while循环区别

for:明确了循环的次数。

while:不明确循环的次数。

12.3 退出循环continue与break

continue：仅退出本次循环，进入下一次循环。

break：退出整个循环，结束循环。

12.4 无限循环

for(;;)为无限循环，可以使用break退出循环。

while(true)为无限循环 ，可以使用break退出循环。

十三、数组：有序的数据集合，可以按顺序保存数据的数据类型。有多个数据可以用数组保存放到一个变量中。

13.1 数组声明

数组是按顺序保存，所以每个数据都有下标/索引,从0开始。可以存储任意类型的数据。

let 数组名 = [数据1,数据2,...,数据n]                //方法1

--------------------------------------------------------------------------------------------------------------------------

let arr = new Array(数据1,数据2,...,数据n)      //方法2

数组中的数据也叫元素，数据的编号叫下标，数据的个数为数组的长度length。 

13.2 数组取值

数组名[下标]

13.3 遍历数组 :for循环把数组中每个元素都访问到。

13.4 数组的使用：增---删---改---查

(1)数组添加新的数据：arr.push(元素1,...,元素n)；将元素添加到数组末尾，返回数组新长度。

                                arr.unshift(元素1,...,元素n);将元素添加到数组开头，返回数组新长度。

(2)删除数组中数据：   arr.pop()；从数组中删除最后一个元素，不带参数，返回该元素的值。

                                arr.shift()；从数组中删除第一个元素，不带参数，返回该元素的值。

                                arr.splice(起始位置,删除的个数)；指定修改的位置(从0计数),移除元素个数。

(3)重新赋值/修改数据：数组[下标] = 新值

(4)查询/访问数组数据：数组[下标]

十四、函数function：用function关键字声明函数，是执行特定任务的代码块。

把具有相同或相似逻辑的代码封装起来，通过函数调用执行这些被封装的代码，实现代码复用，提高开发效率。如：alert()、prompt()、console.log()都是j封装号的js函数。

14.1 函数的命名：常用动词约定 

can:判断是否可执行某个动作

has:判断是否含义某个值

is:判断是否为某个值

get:获取某个值

set:设置某个值

load:加载某些数据

14.2 函数复用：函数的使用

function 函数名(){

        函数体           //函数体将要使用的相同代码封装起来

}

函数名()                //函数调用，函数一次声明可以多次调用，不调用则函数不执行

函数名() 

14.3 函数复用和循环的区别

循环代码写完即执行，不能控制执行

函数复用随时调用，随时执行，可重复调用

14.4 函数传参：极大的提高了函数的灵活性

function 函数名(参数列表){

        函数体          

}

--------------------------------------------------------------------------------------------------------------------------

function 函数名(参数1,参数2,...,参数n){        //形参可以是变量,用逗号隔开

        函数体          

}

函数名(参数1,参数2,...,参数n)  //实参,调用函数时，需要传入几个数据就写几个，用逗号隔开

参数默认值:实参传递时，有参数优先执行传递过来的实参，否则形参没接收值，默认为undefined，不过可以给形参设置默认值。

14.5 函数返回值：把处理结果返回给调用者

return 数据  //return后的代码不执行，立即结束当前函数，可以没有return默认返回undefined

十五、作用域和变量

全局作用域：函数外部或者整个script 有效。  全局变量在任何区域都可以访问和修改。

局部作用域/函数作用域：函数内部有效。       局部变量只能在当前函数内部访问和修改。

如果函数内部，变量没有声明就赋值，也当全局变量看(不推荐)。

函数内部的形参可以当局部变量看。

变量访问原则：在能够访问到的情况下先局部，局部没有在找全局，就近原则查找变量最终的值

十六、具名函数和匿名函数 

(1)具名函数：声明和调用有函数名的函数

(2)匿名函数：声明时没有给函数名

16.1 匿名函数的调用：没有名字的函数, 无法直接使用。

(1)函数表达式：将匿名函数赋值给一个变量，通过变量名称进行调用。

let fn = function (){

        函数体

}

fn()        //函数名()

(2)立即执行函数:防止全局变量之间的污染。多个立即执行函数要用；隔开。无需调用，立即执行。

(function () {函数体})();        //方式1

--------------------------------------------------------------------------------------------------------------------------

(function () {函数体}());        //方式2

十七、对象：一种数据类型，无序的数据集合，可以详细的描述描述某个事物。

17.1 对象声明

let 对象名 = {                   //声明对象，{ }是对象字面量

        属性名：属性值,      //对象的使用，多个属性用逗号分隔

        方法名：函数

}               

或 

let 对象名 =new Object()//声明对象

17.2 对象的使用：增---删---改---查

(1)增加数据：对象名.新属性名 = 新值

(2)删除对象中属性：delete 对象名.属性名

(3)重新赋值(改)：对象名.属性 = 新值

(4)查询对象：对象名.属性

                      对象['属性']:对于多词属性不能用.属性名的方式,使用对象['属性']，单引号和双引号都可以。

let obj = {

'user-name' : 'bottle Shen',

age : 18

}

console.log(obj['user-name'])

17.3 调用：调用对象中函数

let obj = {

        'user-name' :'bottle Shen',

        age : 18

        sayHello:function(){        //形参

                document.write('Hello World')

}

}

obj.sayHello()                        //实参

17.4 遍历对象for in：对象里面是无序的键值对, 没有数组的length长度和下标。

let obj = {

        uname : 'bottle Shen',    //属性名: 属性值

        age : 18，

        sex : '保密‘

}

for(let k in obj){                      //k是变量

        console.log(k)               //变量获得属性名

        console.log(obj[k])        //对象[变量]获得属性值

}

17.5 内置对象：JavaScript内部提供的对象。如：document.write()、console.log()

Math对象:做数学运算。

random：生成0-1之间的随机数（包含0不包括1）

ceil：向上取整

floor：向下取整

max：找最大数

min：找最小数

pow：幂运算

abs：绝对值

17.5.1 ***生成任意范围N-M之间随机数***

Math.floor(Math.random() * (M - N + 1)) + N

十八、JavaScript术语

关键字：JavaScript中有特殊意义的词汇。如：let、var、function、if、else、 switch等

保留字：目前的JavaScript中没意义，未来可能有意义。如：int、short、long、char

标识符(标识)：变量名、函数名的另一种叫法

表达式：能产生值的代码

语句：一段可执行的代码，不一定产生值

十九、基本数据类型和引用数据类型

(1)基本数据类型，也叫简单类型或值类型。string字符串 ，number数字，boolean布尔，undefined未定义，null空

(2)复杂数据类型，也叫引用类型。Object对象、Array数组、Date函数

19.1 区别

值类型：存储时变量中存储的是值本身，值放到栈里面。

引用类型：在存储时变量中存储的仅仅是地址，地址放到栈里面，值放到堆里面。

二十、逻辑中断：逻辑运算符里的短路

短路：只存在于&&逻辑与和||逻辑或中，当满足一定条件会让右边代码不执行。

&&左边为false就短路

||左边为true就短路

二十一、显示转换和隐式转换

21.1 显示转换

转换为Boolean型后都是false和true

21.2 隐式转换

有字符串的加法" "+数值型1，转换为字符串"1"

减法-会使字符串转为数值型，空字符串为0

null数字转换为0

undefined数字转换为NaN