JavaScript: 简称js ，他是基于对象和事件驱动，并且具有相对安全性的解释型的客户端脚本语言。
JS的组成包含：ES、DOM、BOM。
三种引入方式：内部式（内嵌式）、外链式（外部式）、标签内部式
区别：内部式是在html页面内引入一组标签<script></script>，在此标签内编写需要的JS代码；
外链式是在html页面之外创建一个JS文件编写JS代码，通过<script src="JS路径地址"></script>引入html中；
标签内部式是在元素标签内编写JS代码，这种方式一般不推荐，因为他没有达到结构和交互相分离。
注意：
1、Script标签中type是可选属性，如果要写，一定保证type=”text/javascript ”
2、Script 标签引入位置通常在head头部或者结束body之前(推荐结束body之前)
3、外链式：不能再script标签中书写js代码，会被xxx.js文件中代码覆盖掉
4、内嵌式：只能被一个文件使用；外链式： 可以被多个文件调用
三种输出方式：网页输出（document.write(‘输出内容‘）)、弹出框输出（alert(‘输出内容‘)）、控制台输出（console.log(‘输出内容‘)）
区别：网页输出是在浏览器网页内输出；由此，他可以解析标签。
弹出框输出和控制台输出夜歌是在弹出框内，一个是在控制台输出，不具备可以解析标签的环境，所以他们不能解析标签。
ES是JavaScript语言的核心，包含变量、数据类型、运算符、流程控制语句、函数、数组、对象等几大方面核心语法。
（一）、变量
他是存储数据的容器，用于存储程序中变化的数据。
1、如何定义变量
定义变量 = 声明变量 + 赋值；
2、声明变量的三种方式
var ES5的声明方式，他可以重新声明及赋值；
let ES6的声明方式，他不可以重新声明，但是可以重新赋值；
const ES6的声明方式，他声明的是常量，不可以重新声明及赋值；
3、如何定义多个变量
多个变量之前使用逗号（,）进行隔开；而定义单个变量，使用分号（;）进行隔开。
//举例： let name=‘小明‘,age=20,like=‘吃饭‘;
4、变量命名的规则
a、 不能使用中文命名 (服务器不能识别中文)
b、名称：数字 字母 _ $ 组成
c、不能使用数字开头
d、不能关键字 和 保留字
e、使用驼峰命名法 zhangsanfeng => zhangSanFeng（小驼峰）ZhangSanFeng（大驼峰）
f、不能使用特殊字符
（二）、数据类型
为了让计算机可以进行合理的分配内存和数据运算，avaScript中将数据的值划分成了不同的类型，例如：数字520，666和字符串“嘿嘿”、“哈哈”等。
1、分类：基本类型和引用类型（非常6+1）
基本类型：Number ( 数值 ) 、String ( 字符串 ) 、 Boolean ( 布尔 ) 、Undefined ( 未定义 ) 、Null ( 空 ) 、 Symbol ( 唯一 )
Number ( 数值 )： 整数（int）、小数(float)、特殊值（NaN(not a number) 计算错误，类型转换失败、Infinity(除数为零)）；
String ( 字符串 ) ：使用双引号("")或者是单引号(‘‘)表示的数据是字符串类型的数据；
Boolean ( 布尔 ) ：值只有连个类型，true、false；
Undefined ( 未定义 )：数据类型undefined只有一个值undefined；
Null ( 空 ) ：数据类型null只有一个值null，可以通过给一个变量赋 null 值来清除变量的内容；
Symbol ( 唯一 )：他的值是唯一的，Symbol（）不等一Symbol（），是ES6新推出的。
注意：未定义变量和未声明变量的区别：
未定义变量： 一个变量已经声明但是未赋值，默认值是undefined，他也可以叫做未赋值变量；
未声明变量： 如果我们直接使用未声明的变量将会报错，这个变量都未声明过，不在在过，错会显示变量名is not defined
2、查看数据类型：typeof( 数据/变量名)
注意：为什么typeof null得到的结果是object，而不是null？
可以理解为这是一个bug，他是一个特殊情况，是早期JS语法不够成熟及智能，而后期升级中没有修改，导致这个bug一直存在到现在。
3、数据类型的相互转换：强制转换和隐式转换（自动类型）
强制转换：
a、将其它类型转为Number类型： parseInt() parseFloat() Number()
注意：只有纯数字的字符串转换为数值Number类型，才能得到具体的值，否则智能得到NaN；
布尔转换为Numer类型：true转换的值为1；false转换的值为0；
Undefined转换的结果为NaN；
Null转换的结果为0；
b、将其它类型转为Boolean类型 : Boolean()
注意：只有0 ‘ ‘ " " Undefined Null NaN 得到的是false，其他的都为true。
c、将其它类型转为String类型： String()
引用类型：Object ( 对象 )、Array（数组）、函数等等。
4、每种类型的占位符
Number ( 数值 ) ：0
String ( 字符串 ) ：‘‘ ""
Boolean ( 布尔 ) ：false
Undefined ( 未定义 ) ：undefined
Null ( 空 )：null
类型转换失败的占位符：NaN
（三）、运算符
1、算数运算符：+ - * / % ++ --
% ：取模运算符(取余数) 除不尽剩下的整数
++：前置++和后置++是由区别的；前置++是先自增，后参与运算；后置++是先运算，在自增；
let a = 1; b = 2; let c = ++a + b; console.log(a, b, c); //2 2 4
let a = 1; b = 2; let d = a++ + b; console.log(a, b, d);//2 2 3
2、比较运算符 ：== != > >= < <= ===(全等于) !==(不全等于)
// 主要列举双等和三等,不等和不全等的区别 console.log(3 == "3"); //true console.log(3 === "3"); //false // 双等只比较大小，不比较数据类型；三等即比较大小又比较数据类型； console.log(3 != "3"); //false console.log(3 !== "3"); //true // 不等只比较大小，不比较数据类型；不全等即比较大小又比较数据类型；
3、条件运算符( 三元运算符)：(expr1) ? (expr2) : (expr3)——如果expr1为真，就执行expr2，否则就执行expr3
let a = 1, b = 2; 2 == "2" ? a++ : b++; console.log(a, b); // 2 2
4、逻辑运算符 ：&&（与） ||（或） ! (非)
a&&b(并且)：逻辑与，当a和b都为true时，返回值为true，否则返回false；
a||b(或者)： 逻辑或，只要a与b中有一个为真，结果为真；
!a(取反)：逻辑非，当a为true时，返回值为false，否则返回true；
5、字符串运算符 ：+（这个是连接符，不是传统意义上的算数运算符）
let a = 1, b = 2, c = "3"; let one = a + b; let two = a + c; console.log(one, two); //3 ‘3‘
6、赋值运算符 ： = += -= *= /= %=
注意：运算符有优先级之分，赋值优先级最低，先乘除后加减，优先级相同情况下,从左到右依次计算；
// 来点案例：判断奇偶 let num = prompt(‘请输入数字‘); if (num % 2 === 0) { console.log(`${num}是偶数`); } else { console.log(`${num}是奇数`); }
（四）、流程控制语句
1、分为三大类：逐行执行（默认）、选择执行、循环执行
逐行执行：代码逐行执行( 从上向下 )，最基本的流程。
选择执行：代码执行到某一段的时候，会根据条件判断，如果条件成立则相关执行任务；
a、单选：if(条件1){代码块1：如果条件为真是执行}
b、二选一：if(条件1){代码块1：如果条件1为真是执行}else{代码块2：条件1为假时执行}；
c、多选一：if(条件1){代码块1：如果条件1为真是执行}else if(条件2){代码块2：如果条件1为假，且条件2为真，就执行代码块2}else if( ){ }...；
switch...case语法如下：
switch(表达式/变量){
case 值1:
全等于值1,执行代码块A;
break; //结束
case 值2:
全等于值2,执行代码块B;
break;
default:
以上都不等于,执行代码块N
break;
}
循环执行：代码根据条件，重复的执行，但是条件应该保证会执行到某个时间点时不成立（false），或者任务就不会停止。
a、for循环
四要素：初始化循环变量表达式、更新循环变量表达式、循环条件表达式 、循环体
语法：for(初始化循环变量; 循环条件; 更新循环变量){循环体;}
注意：更新循环变量表达式一定是赋值运算。
b、死循环
死循环：循环条件表达式永远为真时，他将永久的执行下去，所以被称为死循环。
场景1：
for( ; ; ){ //循环条件默认为真
console.log(“哦豁,停不下来了...”);
}
场景2：
for(let a=0;a<10;a+1){
console.log(a);
}
注意：一般不要书写死循环，严重时会内存溢出；一定要使用的话必须要书写结束条件，当达到结束条件时就停止循环。
c、终止循环：break，continue
区别：break : 终止了当前循环，还终止了后面所有循环；continue: 终止了当前循环， 继续后面的所有循环
d、双重for循环（嵌套循环）（了解）
for( ){
for(){ }
}
（五）、函数
函数概念：封装的一个方法，封装的一个功能
函数特点：必须要调用，可以调用多次
函数作用：减少代码冗余（重复代码）；方便后期对代码进行维护；代码复用。
1、自定义函数（声明式、表达式）
a、声明式：
function 函数名( ){
//功能代码 (函数体)
}
b、表达式：
let 变量 = function(){ //匿名函数
//功能代码(函数体)
};
c、调用并执行
调用函数： 函数名 执行函数： ()
注意：声明式和表达式的区别：声明式定义的函数，可以在定义前后调用；而表达式定义的函数，只能在定义之后调用。
2、形参与实参
语法：
function 函数名字( 形参1, 形参2，...形参n ){
功能代码…
}
let 变量 = function 函数名字( 形参1, 形参2，...形参n ){
功能代码…
}
调用并执行函数：
函数名( 实参1, 实参2, ...实参n )
注意：形参是变量，是一个占位符，是我们在封装一个函数不知道具体实参时需要的一个替代参数，他在封装时代替了实参；而实参使我们调用时实际传入的参数，而调用并执行返回的结果是实参的结果。实参的顺序和形参的顺序一一对应；实参的类型和形参的数据类型一一对应。
3、返回值函数（return）
希望函数执行后得到的结果参与其他的运算 或者 再次被其他的程序调用，所以产生了返回值函数return。
语法：
function 函数名(形参1,形参2){
//功能代码.
return 功能代码运算结果;
}
let 变量 = function (形参1,形参2){
//功能代码.
return 功能代码运算结果;
}
注意：
a、函数第一次遇到return就结束执行，不管return后面还有多少代码都不执行。
b、如果函数没有指明return，函数默认的返回值为undefined，否则以return返回值为准。
c、函数内可以有多个return，但是一般是在条件语句中进行判断后执行的
了解知识：变量作用域--了解很少，后续再进行优化
就是变量作用的范围，分为函数内部变量和函数外部变量；函数内部的变量只能作用域函数内部，且只能在函数内部进行访问；函数外部变量作用于整个JS脚本中。
（六）、数组
数组：是一组数据有序排列的集合。
数组关键词：数组元素、索引、数组的长度、数组元素的访问：数组名称[ 索引 ] 。
1、定义数值的方法：
a、new字符实例化数组
let arr = new Array();
b、字面量实例化数组
let arr = [];
2、数组赋值
方法一：声明数组时直接添加元素
let arr = ["Number","String","Boolean","Undefined","Null","Symbol"];
方法二：通过数组索引添加元素
let arr = [];
arr[0] = 元素1; //添加数组元素
arr[1] = 元素2;
arr[2] =元素3;
......
注意：访问的索引不存在值，默认用undefined占位；数组元素最后一个元素后面不加逗号；数组元素： 可以是任意类型的值(基本 引用)。
3、数组的长度
变量名.length 变量名[‘length‘]
4、遍历数组
a、for循环遍历
for( let i= 0; i < 数组名称.length; i++ ){
let 变量名= 数组变量[ i ]; //代表数组中每个元素
}
b、forEach遍历
数组名称.forEach(function(item,index，arr){
item : 数组元素
index : 索引
arr：数组
})
5、二维数组
举例：let arr=[ [0,1],2,3,4,5 ]
数组降维：arr.flat( )
6、数组的内置方法（详见数组的内置方法随笔）
concat()、join()、slice()、push()、unshift()、pop()、shift()、reverse()、splice()、indexOf()、includes()
（七）、对象
所有的实体都是一个对象，万物皆对象。
1、分类：自定义对象、内置对象
2、自定义对象
a、分类：
new字符实例化对象
let obj = new Object()
字面量方式创建对象
let obj = {}
b、对象添加属性和方法：
方法一：
let person = new Object();//let person = {} //添加属性： 对象名.属性名 = 值; person.name = "小明"; person.age = 12; person.fav = "吃饭"; //添加方法 person.showName = function () { console.log("小明，哆啦恶魔呢？？") } person.showFav = function () { console.log("我是小明，我喜欢看电视！！") } //访问对象 console.log(person); //访问属性 对象.属性名 console.log(person.name); console.log(person.age); console.log(person.fav); //访问方法 console.log(person.showName())//打印返回值：默认返回undefined
方法二（字面量独有的）：
let obj = { //属性 name: "小明", age: 10, fav: "吹牛", //方法： //ES5写法 showName: function () { console.log("我是小明，我的好朋友是哆啦恶魔"); }, //ES6写法 showFav() { console.log("我是小明,我的爱好是：吹牛") } } //访问对象 console.log(obj) //访问属性 console.log(obj.name) console.log(obj.age) console.log(obj.fav) console.log(obj[‘name‘]) console.log(obj[‘age‘]) console.log(obj[‘fav‘]) //访问方法 obj.showName(); obj.showFav();
3、遍历对象
语法：
for(let key in Object){
//key 对象的属性名
//Object[key] 对象的属性值
//Object 对象
}
4、内置对象
分类：String对象、Number对象、Math对象、Data对象
a、String对象
属性：str.length 获取字符串的长度
str[index] 获取字符串当前索引的值
方法：详见请见字符串的内置方法
indexOf()、lastindexof()、replace()、substr()、substring()、toLowerCase()、toUpperCase()
b、Number对象
number.toFixed( num ) 保留几位小数点
// 为什么0.1+0.2不等于0.3？ // 计算机是以二进制保存的数据，保存的是近似值，并非精确值，在计算过程中丢失了精度，故0.1加上0.2不等于0.3
c、Math对象
Math.PI圆周率
Math.ceil() 向上取整
Math.floor()向下取整
Math.max()最大值
Math.min()最小值
Math.random() 求[0,1)之间的随机数
// 需求：循环产生10个[30,100]之间的随机整数，组成数组，并求出数组中的最大值和最小值 let arr = [], sum = 0, max = 30, min = 100; for (i = 0; i < 10; i++) { let num = Math.floor(Math.random() * (100 - 30 + 1)) + 30; arr.push(num); sum = sum + num; //总和 if (max < arr[i]) max = arr[i]; if (min > arr[i]) min = arr[i]; } console.log(arr); console.log(sum); console.log(max); console.log(min);
d、Date对象
// 创建当前系统时间 let currentTime = new Date(); // 创建指定时间 里面的参数是字符串 // let assignTime = new Date(‘指定的时间‘); // 时间戳 gettime() let timee = currentTime.getTime(); //返回指定时间到1970年1月1日的总毫秒数
e、设置间隔调用及清楚间隔调用
let a = 6; let time = setInterval(function () { //设置间隔调用 a--; if (a == 0) { clearInterval(time) //清楚间隔调用 } }, 1000)
f、设置超时调用及清楚超时调用
setTimeout(function () { //设置间隔调用，只调用一次 // 条件 }, 1000) clearTimeout(time) //清楚间隔调用
来个倒计时案例：
<script> let time = setInterval(foo, 1000) function foo() { let now = new Date(); let fur = new Date(‘2021-02-03 20:00:00‘) let dif = fur - now; let day = Math.floor(dif / 1000 / 60 / 60 / 24); let hour = Math.floor((dif / 1000 / 60 / 60) % 24); if (hour < 10) { hour = ‘0‘ + hour; } let minutes = Math.floor((dif / 1000 / 60) % 60); if (minutes < 10) { minutes = ‘0‘ + minutes; } let second = Math.floor((dif / 1000) % 60); if (second < 10) { second = ‘0‘ + second; } if (dif <= 0) { clearInterval(time) } else { document.querySelector(‘div‘).innerHTML = `距离学校春节放假倒计时：${day}天${hour}小时${minutes}分钟${second}秒` } } foo(); //先立即调用执行一次，弥补1秒的间隙 </script>
暂时先写到这里，现在学的知识还在初级，后续再跟进。。。。。。
原文：https://www.cnblogs.com/Lilianyang/p/14251586.html