ECMAScript javascript基础语法（复习用）（超详细版）（持续更新中）

原创已于 2023-05-22 10:59:58 修改 · 397 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ecmascript #echarts

于 2023-05-13 23:35:27 首次发布

该文是Pink老师关于前端开发的教程，涵盖了JavaScript的基础语法，包括ECMAScript、DOM和BOM的介绍，变量、数据类型、运算符和流程控制的使用，以及前端开发中的输入输出语句和数据可视化工具Echarts的简介。文章适合初学者入门，详细讲解了JavaScript的核心概念和实际运用。

整理来源：pink老师的前端课程
链接：JavaScript前端课程-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续

预备知识

JS组成

ECMAScript：javascript语法
DOM：页面文档对象模型
BOM：浏览器对象模型

ECMAScript
ECMAScript是由ECMA国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript 语言的实现和扩展。

ECMAScript: ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准.

DOM
文档对象模型(DocumentObiet Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
BOM
BOM(Browser Object Model，简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等

JS三种书写方式

JS有3种书写位置，分别为行内、内嵌和外部。

行内

<body>
    <!-- 1.行内的js：直接写在元素内部 -->
    <input type="button" value="行内js" onclick="alert('HELLO,行内js')">
</body>

位置：标签内。

内嵌

<!-- 2.内嵌的js -->
    <script>
        alert('hello，内嵌js')
    </script>

位置：<head>标签内或者<body>标签内或者</body>和</html>之间都可以。

外部

    <!-- 3.外部的js -->
    <!-- 引用方法 -->
    <script src="my.js"></script>

在这里插入图片描述

位置：<head>标签内或者<body>标签内或者</body>和</html>之间都可以。
注意：外部引用时，<script>和</script>之间不要写代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 2.内嵌的js（位置1） -->
    <script>
        alert('hello，内嵌js')
    </script>

    <!-- 3.外部的js （位置1）-->
    <!-- 引用方法 -->
    <script src="my.js"></script>
    
    <!-- 注意：外部引用时，<script>和</script>之间不要写代码。 -->
    
    <title>JS的三种书写方式</title>
</head>
<body>

    <!-- 1.行内的js：直接写在元素内部 -->
    <input type="button" value="行内js" onclick="alert('HELLO,行内js')">

    <!-- 2.内嵌的js（位置1） -->
    <script>
        alert('hello，内嵌js')
    </script>
    
    <!-- 3.外部的js （位置2）-->
    <!-- 引用方法 -->
    <script src="my.js"></script>
</body>

<!-- 2.内嵌的js（位置2） -->
<script>
    alert('hello，内嵌js')
</script>

<!-- 3.外部的js（位置3） -->
<!-- 引用方法 -->
<script src="my.js"></script>

</html>

JS输入输出语句

JS提供的一些输入输出语句：

方法	说明	归属
`alert(msg)`	浏览器弹出警示框	浏览器
`console.log(msg)`	浏览器控制台打印输出信息	浏览器
`prompt(info)`	浏览器弹出输入框，用户可以输入	浏览器

怎么找控制器console在这篇博文中有描述->link
实现代码：

//输出语句

// 1.alert(msg)，弹出警示框，展示给用户看的
alert("hello,alert()")

//2.console.log(msg)，控制台输出，展示给程序员测试用的
console.log("hello,console")

//输入语句
//prompt('info')，弹出一个输入框，展示给用户看
prompt('请输入你的姓名')

拓展

解释型语言vs编译型语言

计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。
在这里插入图片描述

翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同。
编译器是在代码执行之前进行编译，生成中间代码文件。
解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)。

执行过程
在这里插入图片描述

标识符、关键字、保留字

标识符
标识(zhi4)符：就是指开发人员为变量、属性、函数、参数取的名字。
标识符不能是关键字或保留字。
关键字
关键字：是指JS本身已经使用了的字，不能再用它们充当变量名、方法名
包括：break、 case、 catch、 continue、 default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with等.
保留字
保留字：实际上就是预留的“关键字”意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。
包括：boolean、byte、char、class、const、debugger、double、enum、 export、extends、fimal、float、goto、implements、import、int、interface、long、mative、 package、private、protected、public、short、static、super、synchronized、throws、transient、volatile等。

变量

变量的声明

声明变量方式：var、let

//变量
// 1.声明一个age变量
var age;
// 2.赋值  把值存入这个变量中
age = 18;
// 3.输出结果
console.log(age);
// 4.变量的初始化
var myname = "dodo";
console.log(myname);

效果：
在这里插入图片描述
案例输出：
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS输入输出</title>
    <script>
        var hername='长野原宵宫'
        var address='长野原烟花店'
        var jpname='Yoimiya'
        var birthday='6月21日'
        var age=18
        var mingzuo='琉金座'
        console.log(hername); 
        console.log(address);
        console.log(jpname);
        console.log(birthday);
        console.log(age);
        console.log(mingzuo);

    </script>
</head>
<body>
    
</body>
</html>

效果：
在这里插入图片描述

变量的使用

案例：
1.弹出一个输入框，提示用户输入姓名。
2.弹出一个对话框，输出用户刚刚输入的姓名。

代码：

//1.用户输入姓名，存储到一个uname的变量里面
var uname = prompt('请输入您的姓名');
//2.输出这个用户名
alert('欢迎您！'+uname)

效果：

点击前	点击后

变量细节

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量细节拓展</title>
    <script>
        //1.更新变量后，以最后一次更新的值为准
        var myname='dodo';
        console.log(myname);
        myname='dodola';
        console.log(myname);

        //2.可以同时声明多个变量,逗号隔开
        var age=18,address='稻妻',hername='Yomiya';
        
        //3.声明变量的特殊情况
        //3.1只声明不赋值，结果是undefined 未定义的
        var sex;
        console.log(sex);//undefined

        //3.2不声明，不赋值，直接使用会报错
        //console.log(lover);
        //报错

        //3.3不声明直接赋值，在js中是允许的，会变成全局变量
        tel=110;
        console.log(tel);
    </script>
</head>
<body>
    
</body>
</html>

效果
在这里插入图片描述

变量命名规范

由字母(A-Z a-z)、数字(0-9)、下划线(_)、美元符号($)组成，如: usrAge,num01，name。
严格区分大小写。var app;和 var App;是两个变量。
不能以数字开头。18age 是错误的。
不能是关键字、保留字。例如 :var、for、while。
变量名必须有意义。MMD、BBD、nl、age。
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName。

数据类型

基本数据类型

javascript中的简单数据类型及其说明如下：

简单数据类型	说明	默认值
`Number`	数字型，包含整数值和浮点数值，如21、0.21	`0`
`Boolean`	布尔值类型，如true、false，等价于1和0	`false`
`String`	字符串类型，如“张三”，注意js里面字符串都带引号	`""`
`Undefined`	var a;声明了变量a但是没有给值，此时a=undefined	`undefined`
`Null`	var a=null;声明了变量a为空值	`null`

数字型 Number

var num = 10;//num数字型
var pi = 3.14;//pi数字型

//1.八进制
//0~7 我们程序里面数字前加0表示八进制
var num1 = 010;
console.log(num1);//8
//console.log()输出的时候会默认以10进制输出
var num2 = 012;
console.log(num2);//10

//2.十六进制
//0~9 a~f
//#ffffff数字的前面加0x表示十六进制
var num3 = 0x9;
console.log(num3);//9
var num4 = 0xa;
console.log(num4);//10

//3.数字型的最大值
console.log(Number.MAX_VALUE);//1.7976931348623157e+308

//4.数字型的最小值
console.log(Number.MIN_VALUE);//5e-324

/*————————————————————————————————————*/

//5.无穷大
console.log(Number.MAX_VALUE * 2);//Infinity 无穷大

//6.无穷小
console.log(-Number.MAX_VALUE * 2);//-Infinity 无穷小

//7.非数字
//NaN，Not A Number，代表一个非数值
console.log('pink' - 100);//NaN

结果展示
在这里插入图片描述
isNaN()
这个方法用来判断非数字，并且返回一个值，如果是数字返回的是false，如果不是数字返回的是true。

console.log(isNaN(12));//false
console.log(isNaN('pink'));//true

在这里插入图片描述

字符串型 String

字符串型可以是引号中的任意文本，其语法为双引号""和单引号''

var mystr1 = "江山 我站在云端";
var mystr2 = '慢慢 往中原方向';

var mystr3=前方 散落着村庄
//报错，没有使用引号会被认为是js代码，但js并没有这些语法

因为html标签里属性使用的是双引号，这里我们更推荐单引号。

字符串引号嵌套
外双内单，外单内双

var mystr3 = "'长安' 在兵荒马乱";//外双内单
var mystr4 = '"长安" 在兵荒马乱';//外单内双

//var mystr5 = '长安 在兵荒马乱";//报错
//不能单双混用

字符串转义符

转义字符都是\开头

转义符	解释说明
`\n`	换行符，n是newline的意思
`\\`	斜杠\
`\'`	单引号’
`\"`	双引号"
`\t`	tab缩进
`\b`	空格，b是blank的意思

字符串长度
通过字符串的length属性可以获取整个字符串的长度

//检测获取字符串的长度length
var str1 = "But a man is not made for defeat.A man can be destroyed but not defeated.";
console.log(str1.length);//73
var str2 = "人不是生来要给打败的，你尽可把他消灭掉，可就是打不败他。";
console.log(str2.length);//28

字符串拼接

多个字符串之间可以使用+进行拼接，拼接方式为字符串+任何类型=拼接之后的新字符串
拼接前会把字符串相加的任何类型转成字符串，再拼接成一个新的字符串。

//字符串拼接+
//字符串+任何类型=拼接之后的新字符串
console.log('望着天' + ' ' + '眼看北斗七星坠入地平线');
//望着天 眼看北斗七星坠入地平线
console.log('瞬间' + 2000);
//瞬间2000
console.log(1999 + '英雄豪杰');
//1999英雄豪杰
console.log('如同鬼魅般出现'+true);
//如同鬼魅般出现true
console.log(12 + 12);
//24
console.log('12'+13);
//1213

//变量和字符串相连
var age = 4;
console.log('图图今年'+age+'岁啦');
//图图今年4岁啦

数值相加，字符相连。

布尔型Boolean

布尔型有两个值：true和false。其中true表示真（对），false表示假（错）。

var flag1 = true;
var flag0 = false;
console.log(flag1 + 1);//2
console.log(flag0 + 1);//1

Undefined和Null

Undefined：一个声明后没有被赋值的变量会有一个默认值undefined（如果进行相连或相加时，注意结果）。
Null：一个声明变量给null值，里面存的值为空（学习对象时，我们继续研究null）。

//undefined：未定义数据类型
var str;
console.log(str);//undefined
var variable = undefined;
console.log(variable);//undrfined
//undefined+字符串型，以字符串型输出
console.log(variable + 'Asuka');//undefinedAsuka
//undefined+数字，输出是NaN(Not a Number)
console.log(variable + 1);//NaN

//null：空值
var space = null;
console.log(space);//null
console.log(space + 'Asuka');//nullAsuka
console.log(space + 1);//1

输出结果：
在这里插入图片描述

获取数据类型

`typeof`使用

var num = 10;
console.log(typeof num);//number
var str = 'Asuka';
console.log(typeof str);//string
var flag = true;
console.log(typeof flag);//true
var vari = undefined;
console.log(typeof vari);//undefined
var tim = null;
console.log(typeof tim);//object

//--------------小细节
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);//string
//说明prompt取过来的值是字符串型

输出结果：
在这里插入图片描述
也可以通过代码颜色、编译器输出的值的颜色、控制器的输出值颜色快速判断

字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。（一眼看上去就知道它表示的是什么类型）

数字字面量：8，9，10
字符串字面量：‘别看我只是一只羊’、“羊儿的聪明你难以想象”
布尔字面量：true、false

数据类型转换

如上小细节中展示的，使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型，通俗来讲，就是把一种数据类型转换的变量为另一种数据类型

转换为字符串类型

方式	说明	使用案例
`toString()`	转成字符串	`var num=1;alert(num.toString();`
`String()`强制转换	转成字符串	`var num=1;alert(String(num);`
加号拼接字符串	和字符串拼接的结果都是字符串	`var num=1;alert(num+'我是字符串');`

var num1 = 10;
console.log(num1);//10

//1.利用变量属性 变量.toString()
var str1 = num1.toString();
console.log(num1.toString());//10
console.log(str1);//10
//2.利用函数方法 String(变量)
var num2 = 20;
console.log(String(num2));//20
console.log(num2);//20
//3.利用+拼接字符串实现转换(隐式转换)
num3 = 30;
console.log(num3+' is a string');

输出结果：
在这里插入图片描述

转换为数字型（重点）

方式	说明	案例
`parseInt(string)`函数	将string类型转成整数数值型	`parseInt('11415')`
`parseFloat(string)`函数	将string类型转成浮点数数值型	`parseFloat('114.15')`
`Number()`强制转换函数	将string类型转换为数值型	`Number('12')`
js隐式转换(-*/)	利用算术运算隐式转换为数值型	`'12'-11`

parseInt(string)函数和parseFloat(string)函数

var age = prompt('请输入您的年龄')
//1.parseInt(变量) 可以把变量转换为数字型，得到的是整数
console.log(parseInt(age));
console.log(parseInt('3.14'));//3取整
console.log(parseInt('114.15'));//114取整
console.log(parseInt('120px'));//120之后的px去掉
console.log(parseInt('Asuka'));//NaN

//2.parseFloat(变量)
console.log(parseFloat('3.14'));//3.14
console.log(parseFloat('120px'));//120
console.log(parseFloat('Asuka'));//NaN

//3.利用Number(变量)
var str = '123';
console.log(Number(str));//123
console.log(Number('456'));//456

//4.利用算术运算- * / (隐式转换)
console.log('123'-23);//100

控制器输出结果展示：
在这里插入图片描述
注意不要用加号，否则会被认为是拼接字符串

转换为布尔型

方式	说明	案例
`Boolean()`函数	其他类型转换为布尔型	`Boolean('true)`

代表空、否定的值会被转换为false，如''、0、NaN、null、undefined。
其余值都会被转换为true。

//Boolean()函数
console.log(Boolean(''));
console.log(Boolean(0));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log(Boolean('你好吗？'));
console.log(Boolean('我很好'));
console.log(Boolean(123));

运算符

算术运算符

运算符	名称	作用	示例
`+`	加法	两个数相加。	`6 + 9`
`-`	减法	从左边减去右边的数。	`20 - 15`
`*`	乘法	两个数相乘。	`3 * 7`
`/`	除法	用右边的数除左边的数	`10 / 5`
`%`	求余 (有时候也叫取模)	在你将左边的数分成同右边数字相同的若干整数部分后，返回剩下的余数	`8 % 3` (返回 2，8 除以 3 的倍数，余下 2。)
`**`	幂	取底数的指数次方，即指数所指定的底数相乘。它在 EcmaScript 2016 中首次引入。	`5 ** 5` (返回 3125，相当于 `5 * 5 * 5 * 5 * 5` 。)

注意浮点数！

//1.加减乘除幂
console.log(5 + 2);//7
console.log(5 - 2);//3
console.log(5 * 2);//10
console.log(5 / 2);//2.5
console.log(5 ** 5);//3125

console.log('------------------');

//2.取模
console.log(5 % 2);//1
console.log(2 % 5);//2
console.log(4 % 2);//0

console.log('------------------');


//3.1浮点数运算里面会有问题（注意）
console.log(0.1 + 0.2);//0.30000000000000004
console.log(0.07 * 100);//7.000000000000001
//3.2不能直接拿浮点数来进行相比较是否相等
var num = 0.1 + 0.2;
console.log(num == 0.3);//false

控制器结果：
在这里插入图片描述

表达式和返回值

表达式：是由数字、运算符、变量等以能求得数值有意义排列方式所得的组合。
简单理解：是由数字、运算符、变量等组成的式子。
比如：

console.log(1+1);//2

1+1是表达，而2是这个表达式的返回值。

递增和递减运算符

运算符	名称	作用	示例
`++`、`--`	自加、自减	反复把一个变量加 1 或减 1	`Count++;`、`x--;`、`++num1`、 `--num2`

++和--可以放在变量前面，也可以放在变量后面。放在变量前面时，可以称为前置递增（递减）运算符，放在变量后面时，可以称为后置递增（递减）运算符。

前置递增运算符
++num;前置递增，就是自加1，类似于num=num+1;但是++num写起来更简单。
先加1，再返回值。
后置递增运算符
num++后置递增，也是自加1，类似于num=num+1;但是是先返回原值，后自加1。
注意加以区别判断。

var num1 = 10, num2 = 30;

console.log(++num1);//11
console.log(num1);//11
console.log(num2++);//30
console.log(num2);//31

console.log(++num1 + 10);//22
console.log(num2++ + 10);//41

开发时，大多使用后置递增/递减，并且代码独占一行，例如：num++、或num--。

比较运算符

概念：比较运算符（关系运算符）是两个数据进行比较时所使用的的运算符，比较运算后，会返回一个布尔值（true/false）作为比较运算的结果。

运算符	名称	作用	示例
`===`	严格等于	测试左右值是否相同	`5 === 2 + 4`
`!==`	严格不等于	测试左右值是否不相同	`5 !== 2 + 3`
`<`	小于	测试左值是否小于右值。	`10 < 6`
`>`	大于	测试左值是否大于右值	`10 > 20`
`<=`	小于或等于	测试左值是否小于或等于右值。	`3 <= 2`
`>=`	大于或等于	测试左值是否大于或等于正确值。	`5 >= 4`

console.log(3 >= 5);//false
console.log(3 <= 5);//true

//1.程序运算里面的等于符号是==，默认转换数据类型会把字符串型的数据转换为数字型。
console.log(3 == 5);//false
console.log('喂' == '楚雨荨');//false
console.log('甄玉娆' == '甄玉娆');//true
console.log(18 == 18);//true
console.log(18 == '18');//true
console.log(14 != 14);//false

//2.我们程序里的全等===要求两边的值和数据类型都一样
console.log(18==='18');//false

=小结

符号	作用	用法
`=`	赋值	把右边赋给左边
`==`	判断	判断两边的值是否相等（注意此时有隐式转换）
`===`	全等	判断两边的值和数据类型是否完全相同

逻辑运算符

概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值，后面开发中经常用于多个条件的判断。

运算符	名称	作用	示例
`&&`	与	/	`(x < 10 && y > 1)` 为 true
$\mid$ $\mid$	或	/	(x == 5 $\mid$ $\mid$ y == 5) 为 false
`!`	非	/	`!(x == y)` 为 true

逻辑中断

短路运算的原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值。

逻辑与

语法：表达式1&&表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

//1.逻辑与
console.log(123 && 456);//456
console.log(0 && 123);//0
console.log(0 && 1 + 2 && 456 + 789);//0

逻辑或

语法：表达式1||表达式2
如果表达式1结果为真，则返回表达式1
如果表达式1结果为假，则返回表达式2

//2.逻辑或
console.log(123 || 456);//123
console.log(123 || 456 || 789);//123
console.log(0 || 456 || 123);//456

练习：

//练习
var num = 0;
console.log(123 || num++);//123
console.log(num);//0

赋值运算符

运算符	名称	作用	示例
`=`	赋值	只是将右边的值赋给左边的变量	`let x = 3`、`x=y`
`+=`	加法赋值	右边的数值加上左边的变量，然后再返回新的变量。	`x = 3; x += 4;`等价于`x = 3; x = x + 4;`
`-=`	减法赋值	左边的变量减去右边的数值，然后再返回新的变量。	`x = 6; x -= 3;`等价于`x = 6; x = x - 3;`
`*=`	乘法赋值	左边的变量乘以右边的数值，然后再返回新的变量。	`x = 2; x = 3;`等价于`x = 2; x = x 3;`
`/=`	除法赋值	左边的变量除以右边的数值，然后再返回新的变量。	`x = 10; x /= 5;` 等价于`x = 10; x = x / 5;`

运算符优先级

优先级	运算符	顺序
1	小括号	`()`
2	一元运算符	`++`、`--`、`!`
3	算术运算符	先`*`、`/`、`%`后`+`、`-`
4	关系运算符	`>`、`>=`、`<`、`<=`
5	相等运算符	`==`、`!=`、`===`、`!==`
6	逻辑运算符	先`&&`后 $\mid$ $\mid$
7	赋值运算符	`=`
8	逗号运算符	`,`