1. 浏览器内核
通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。
-
blink（webikt 内核的升级）（Google Chrome/ Safari /Opera/ 大部分的国产和手机浏览器）。
-
Gecko（[ˈɡekəʊ]）内核（Firefox 火狐）。
-
Presto （[ˈprestəʊ]）欧朋。
-
Trident （ie浏览器）。
2. 服务器渲染与客户端渲染
2.1 服务器渲染
客户端（浏览器html+css+js发送消息给服务器要数据）-----> 服务器（去数据库查找相关的数据）-----> 数据库（返回数据）-----> 服务器（拿到数据，并渲染成一个完整的页面返回）-----> 客户端（将接收到的页面进行展示）。
2.2 服务器渲染的缺点
-
服务器渲染数据压力过大。
-
每次修改数据都需要服务器重新渲染一个页面，不能局部更新。
-
不利于团队协作。
2.3 客户端渲染
客户端（浏览器页面局部需要数据）-----> 服务器（去数据库查找相关的数据）-----> 数据库（返回数据）-----> 服务器（拿到数据，返回给客户端）-----> 客户端（将接收到的数据进行循环渲染）。
2.4客户端渲染的优点
-
减少了服务器的压力。
-
能局部更新数据。
-
有利于团队协作。
3. 为什么学JavaScript
-
所有主流浏览器都支持JavaScript。
-
目前，全世界大部分网页都使用JavaScript。
-
他可以让网页呈现各种动态效果。
-
作为一个Web开发工程师，如果你想提供漂亮的网页、令客户满意的上网体验，JavaScript是必不可少的工具。
4. JS的构成(背)
-
ECMAScript：语言的核心（语法）。
-
DOM（文档对象模型）：Document Object Model，提供了一系列的应用程序接口（api），供我们开发者对DOM的添加删除修改等（说白了就是操作标签的）。
-
BOM（浏览器对象模型）：Browser Object Model，客户端和浏览器端窗口操作的基础（操作浏览器窗口的），可以使用BOM对浏览器窗口进行访问和操作，比如移动窗口位置、返回历史记录等等，但是BOM没有一个成型的规范，但是所有的浏览器都支持。
5. 什么是JavaScript
5.1 简介
JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
5.2 JS的3种引入方式
5.2.1 行内JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="box"></div>
<!-- 行内式：通过事件引入（有限制性） -->
<div onclick="alert('月薪过万')">点击</div>
</body>
</html>5.2.2 内部JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
alert('月薪过万')
</script>
</body>
</html>5.2.3 外部JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="Demo-01.js"></script>
</body>
</html>6. JavaScript命名规范
-
区分大小写
-
名字以数字，字母、下划线、$ 符号组成，（但是不能以数字开头）。
-
不能是关键字或者保留字，关键字，就是代表特殊含义和功能的名字。
-
命名要有语义化，可以遵循：
1.小驼峰命名法（驼峰命名法）：首单词的首字母小写，其余单词的首字母大写，例如：studentMessage
2.大驼峰命名法(又叫帕斯卡命名法)：跟小驼峰命名法类似，只不过是每个单词的首字母都大写，例如：StudentMessage。
3.下划线命名法：要求单词与单词之间通过下划线连接即可。例如：my_name
7. JS的基础知识
7.1 注释
单行注释： //
多行注释 : /*多行注释*/
7.2 语句
js的语句是以；为结尾的，虽然不一定是必须的，但是我们建议不省略，代码块结束以后可以省略。
7.3 变量
7.3.1 简介
变量相当于容器，值就是容器中盛放的内容，变量名字就是贴在容器上的标签，通过这个标签可以找到变量，读取使用它。
在ECMAScript中，变量是松散类型的（弱类型、动态类型），也就是一个变量可以保存任何类型的值。
7.3.2 定义一个变量并使用
声明变量的关键字是var/let
1. 声明一个变量未赋值，默认是undefined（未定义）。
语法1：var/let 变量名;2. 声明一个变量并赋值。
语法2：var/let 变量名 = 数据;案例：
var name="xiaoxiaohui" (把等号后面的值赋给了前面定义的变量)3. 还可以给多个变量同时赋值，或者是同时定义，使用英文逗号隔开。
var sex="女",age="18"；
let sex="女",age="18"；4. 可以给同一个变量多次赋值或者多次定义。
var age=18;
age=19;
var age=20;
console.log(age);7.3.3 var与let的区别
var关键字可以重复声明同一个变量，let关键字不可以重复声明同一个变量。
7.4 常量
1. 声明一个变量并赋初始值。
语法：const 变量名 = 数据;2. 常量的特点：
8. JS的数据类型
8.1 基础数据类型（原始值类型）（7个）
-
Number 数值 ：（数字，整数，小数，NaN（Not a Number））。
-
String 字符串：可以使用单引号或双引号或反引号（字符串模板）表示字符串。
-
Boolean 布尔： true(真)，false（假）。
-
Null （空）
-
Undefined （未定义）
-
Symbol（唯一值，es6新增）
-
BigInt（大数，es6新增）
8.2 引用数据类型（11个）
-
Array
-
Object
-
Function
-
RegExp（正则表达式）
-
Math
-
Date
-
..........
9. 基础数据类型详解
9.1 number 数值类型
1. number 数值类型运行原理：把十进制数据转为二进制数据，二进制数据再转十进制数据。
2. number 数值类型包括：整型 （整数） 、浮点型 （小数） 、特殊的数值 NaN。
注意！！！
浮点型 （小数）的计算要注意浮点的精度问题（十进制小数转为二进制小数，大部分无法精确转换；整数不存在这个问题）。
0.1 + 0.2 = 0.30000....43. JS中数值的范围
JS 中的Number数据类型只能安全地表示-9007199254740991 (-(2^53-1)) 和9007199254740991(2^53-1)之间的整数，任何超出此范围的整数值都可能失去精度。
4. 特殊的数值 NaN 的特点
-
NaN是number类型，是一个数值，表示非有效数字。
-
特点1：NaN与任何数进行任何运算结果都是NaN。
-
特点2：NaN与任何数都不相等，包括自己。
5. 数值相关的运算符
+ :加
- ：减
* ：乘
/ ：除
% ：取余
6. 相关的函数
isNaN() ：验证一下n是不是有效数字，如果是有效数字，则返回false；如果不是有效数字，则返回true。
isNaN()函数的底层运行逻辑：先把任何类型转化为数字类型Number()，再使用isNaN()函数判断。
<body>
<script>
console.log(isNaN(1)); //false
console.log(isNaN(NaN));//true
console.log(isNaN('AA'));//true
//"12.5"---Number("12.5")---12.5 isNaN(12.5) false
console.log(isNaN('12.5'));//false
//Number("12.5px")---NaN isNaN(NaN) true
console.log(isNaN('12.5px'));//true
//Number([])---0 false
console.log(isNaN([]));//false
//Number([10])---10 false
console.log(isNaN([10]));//false
//Number([10, 20])---NaN true
console.log(isNaN([10, 20]));//true
// Number({}) NaN true
console.log(isNaN({}));//true
//Number(null)---0 isNaN(0) false
console.log(isNaN(null));//false
//Number(undefined)--NaN true
console.log(isNaN(undefined));//true
console.log(isNaN(Symbol(1)));//报错
</script>
</body>注意！！！！几个特殊值
NaN 转为数字类型值为NaN --- ture
null转为数字类型值为0 --- false
[] 转为数字类型值为0 --- false
[10，30] 转为数字类型值为NaN --- ture
{} 转为数字类型值为NaN--- true
undefined转为数字类型值为NaN --- true
Symbol(1) --- 报错
Number（）：Number是JS内置的转换方法，可以把其它数据类型“强制”转换为数字类型。
Number（）的底层实现逻辑：把其它数据类型先转为字符串类型，再转为数字类型。
转换规则：
1.把字符串转换为数字：一但字符串中出现非有效数字字符（只要不是数字），则结果为NaN。
2.只有都是有效数字字符，才能转换为具体的数字。
3.把布尔转换为数字：true转换为1 false转换为0。
4.把null转换为数字：null转换为0 undefined转换为NaN。
5.不能把Symbol类型转换为数字，否则会报错。
案例：
<body>
<script>
console.log(Number('111'));//111
console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(null));//0
console.log(Number(undefined));//NaN
console.log(Number(Symbol());//报错
</script>
</body>练习题：
console.log(Number('12')); //12
console.log(Number('12.5'));//12.5
console.log(Number('12px'));//NaN
console.log(Number('12.5.0'));//NaN
console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(null));//0
console.log(Number(undefined));//NaN
console.log(Number(function func() { }));//NaN
console.log(Number(Symbol(13)));//报错parseInt()/parseFloat()：把其它数据类型转换为number类型。
parseInt()：其他类型转化为number，整数部分。
parseFloat()：其他类型转化为number，整数+小数部分。
从字符串最左边开始查找，把找到的有效数字字符转换为数字，遇到不是数字的时候停止。如果找不出来，就是NaN。
console.log(Number('12px'));//NaN
console.log(parseInt('12px'));//12
console.log(parseInt('12px24'));//12
console.log(parseInt('width:12px'));//NaN
console.log(parseInt('12.5px'));//12
console.log(parseFloat('12.5px'));//12.5
console.log(parseFloat('12px'));//12
console.log(Number(true)); //1
console.log(parseInt(true));//NaN
console.log(parseInt('true'));//NaN
console.log(parseInt(NaN));//NaN
console.log(Number(null));//0
console.log(parseInt(null));//NaN
console.log(isNaN(Number(parseInt("0.8"))));//false
console.log(Number(''));//0
console.log(parseInt('')); //NaNtoFixed( )：保留小数点后面N位（最后的结果是一个字符串），要四舍五入。
var num = 12.349594354;
//装箱
console.log(num.toFixed(2)); //四舍五入
console.log(num.toFixed(1)); //四舍五入
console.log(num.toFixed(3)); //四舍五入Number.MAX_SAFE_INTEGER ：JS能够有效识别的最大整数。
console.log(Number.MAX_SAFE_INTEGER); //=>9007199254740991
最大安全数（JS能够有效识别的最大整数）
console.log(9007199254740992 == 9007199254740993); //=>true
应该是不一样的，但是超过了最大数值，JS无法精准计算9.2 值类型string 字符串
-
定义字符串 ：在JS中用 单引号/双引号/反引号 包起来的都是字符串。
-
string 字符串类型的特点：
-
字符串有长度length。
-
字符串有索引，但没有负索引，虽然能够使用负索引不报错，但是取不到值，默认为undefined。
-
数值类型的字符串没有方法。
//没有负索引
var str = "10ased";
console.log(str.length); //length 求长度
console.log(str[2]); //a [index] 求索引（下标） 0---X
console.log(str[5]); //d
console.log(str[-1]); //undefined 索引取不到值，默认 undefined
console.log(str[10]); //undefined3. 相关函数
String( )：将其他类型转化为字符串。
console.log(String(100)); //"100"
console.log(String(null)); //"null"
console.log(String(undefined)); //"undefined"
console.log(String(true)); //"true"
console.log(String(false)); //"false"
console.log(String(Symbol())); //"Symbol()"9.3 boolean 布尔类型
- 布尔值表示真或假 ，开或关，是或否。有 true 和 false 两个值。
- 数字转为布尔值： 0转为false，NaN转为false；其他都是true。
-
字符串转为布尔值： 空字符串转为false， 其他都是true。
-
null 转为 flase。
-
undefined 转为 false 。
6. 相关函数
Boolean()：将其他类型转化为布尔类型。
console.log(Boolean(0)); //false
console.log(Boolean("")); //false
console.log(Boolean(null)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean(" ")); //true
console.log(Boolean([])); //true
console.log(Boolean({})); //true! 非（取反 ）： 间接转化为布尔类型。
console.log(!"11"); // false "11"--真 !"11"---假
console.log(!null); //true null--假 !null--真
console.log(!!null); //false null--假 !null--真 !!null--假9.4 null 和 undefined
null表示没有，即该处不应该有值：
undefined表示缺少值，即此处应该有值，但没有定义：
- 定义了变量没有给值，显示 undefined。
- 定义了形参，没有传实参，显示 undefined。
- 对象属性名不存在时，显示 undefined。
- 函数没有写返回值，即没有写return，拿到的是 undefined。
- 写了return，但没有赋值，拿到的是 undefined。
var str = "hello";
console.log(str[10]); //undefined
var arr = [10, 20, 30];
console.log(arr);
console.log(arr[100]); //undefined
var arr = null; //未来要存放引用类型的值，释放内存9.5 Symbol类型
//es6 新增
var s1 = Symbol("a");
console.log(s1);
var s2 = Symbol("a");
console.log(s2);
console.log(s1 === s2); //false 唯一 可以用作对象的key,唯一的key9.6 BigInt类型
BigInt类型：管理超过安全数值的数字。
ES6中提供了一个新的数据类型 BigInt：管理超过安全数值的数字。
console.log(BigInt(9007199254740992), BigInt(9007199254740993));10 .引用数据类型详解
10.1 数组类型
1. 数组类型：可以放任何数据类型。
3. 数组的两种写法：
写法一：通过new的方式
var/let 变量名 = new Array(数据1，数据2，...);
写法二：通过[]字面量的方式，[]是数组字面量
var/let 变量名 = [数据1，数据2，...];var arr1 = new Array(10, 20, 30);
console.log(arr1);
console.log(arr1[0]); //10
console.log(arr1.length); //3
//在数组的尾部添加一个值
arr1.push("hello");
console.log(arr1);
var arr2 = [100, 200, 300, 400];
console.log(arr2);10.2 String引用数据类型
语法：var/let 变量名 = new String("变量值");var str2 = new String("apple");
console.log(str2);2. 值类型的string与引用类型的String的区别：
-
值类型的string有长度length，有索引，但是没有方法，而引用类型的string是有方法的。
-
声明的方法不同。 值类型的string的声明语法为var/let 变量名 = 变量值；，而引用类型的string的声明语法是var/let 变量名 = new String("变量值");。
3. 为什么值类型的string会有长度length和索引？
是因为装箱。
4. 装箱与拆箱的概念：
- 装箱：把值类型---转换成---引用类型用---转换成---值类型
- 拆箱：把引用类型---转换成---值类型---转换成---引用类型
10.3 Number引用数据类型
语法：var/let 变量名 = new Number(变量值);2. 值类型的number与引用类型的Number的区别：
-
声明的方法不同。
-
值类型的number没有方法，引用类型的Number有方法。
10.4 Object引用数据类型
10.4.1 创建Object对象
Object引用数据类型把多组键值对用大括号{}包起来 ,并且属性与属性之间用“英文逗号”进行分割。
声明语法：var/let 对象名 = {
属性名1：属性值，
属性名2：属性值
......}
使用属性的语法：对象名['key'] 或 对象名.key var obj = {
name: "lili", //"name":"lili"
age: 18,
"for one": true,
};
console.log(obj);
console.log(obj["name"]); //"lili"
console.log(obj.age); //18
console.log(obj["for one"]); //true
console.log(obj.school); // undefined注意！！！
1. 属性名（key）不是使用string字符串类型，而是其它基础类型，属性名要使用[ ]包裹起来，会自动把其它基础类型转为字符串。
var obj = {
name : "lili",
age : 18,
[Symbol()] : 100,
[true]:true
}3.虽然Symbol()可以使用[ ]包裹起来作为键，但是无法访问到数据。因为Symbol()是唯一的，下面的写法相当于声明了两个Symbol()，所以取不到值，默认是undefined的。如果使用常量把Symbol()装起来，就可以访问到同一个Symbol()。
<body>
<script>
var obj = {
name: "lili",
age: 18,
[Symbol()]: 100
};
console.log(obj[Symbol()]);//undefined
</script>
</body>
-------------------------------------------
<body>
<script>
const sym = Symbol('10');
var obj = {
name: "lili",
age: 18,
[sym]: 100
};
console.log(obj[sym]);//100
</script>
</body>4. 对象的属性名不能是引用数据类型值 。
基于对象[属性名] 的方式操作，需要保证属性名是一个值（字符串/数字/布尔等都可以），如果不是值而是一个变量，它会把变量存储的值作为对象的属性名进行操作。
基于对象.属性名的方式操作，属性名就是点后面的。
let n = {
x: 100
};
let m = [100, 200];
let obj = {};
obj[n] = "高高";
obj[m] = "培训";
console.log(obj); 10.4.2 属性名和属性值
-
属性名：就是用来描述某种特征或者特点的名字，（又被称作键，key）。
-
属性值：就是这个特征的具体值（又被称作值，value）。
-
合称键值对。
基本操作：增、删、改、查。
10.4.3 获取属性值的方法
对象的属性名一般都是字符串格式(还可以是数字格式)，属性值可以是任意类型数据。
方法一：对象.属性名;
方法二：对象['属性名']; 或 对象[“属性名”]; :如果key的类型是字符串，使用该方法必须加“ ”，不然是获取不到值的。默认为undefined的。
方法三：如果key的类型是变量或常量，获取语法：对象[属性名];
<body>
<script>
const sym = Symbol('10');
var obj = {
name: "lili",
age: 18,
[sym]: 100
};
console.log(obj.age);//18
console.log(obj.name);//lili
console.log(obj['name']);//lili
console.log(obj[name]);//undefined
console.log(obj[sym]);//100
</script>
</body>注意!!!!
1.如果对象里面没有这个属性名，得到的值就是“undefined”。
2.如果key的类型是特殊类型（for age）、数字类型（number）、Symbol()、变量必须使用[ ]进行访问，点（.）只能访问字符串类型的数据。
10.4.4 增、改
对象的属性名（键）是不允许重复的，之前没有这个属性则为新增，之前有这个属性，则是修改对应的属性值。一般新增一项的key都是string类型。
语法：
方法一：对象[“属性名”] = 属性值；
方法二：对象.属性名 = 属性值；
var obj={
"name":"lili",
"age":18
}
obj.name="dawei"; ====>修改
obj.sex="男"; =====> 增加
obj.true = 180; =====>这种增加会把true转为字符串"true"
console.log(obj)10.4.5 删除
彻底删除语法： delete 对象名["属性名"]
普通删除语法： 只是让对象中的属性值为空， 对象名["属性名"] = null；
var obj={
"name":"lili",
"age":18
}
//彻底删除
delete obj["age"];
//普通删除
obj.name=null;
console.log(obj);思考题：
var obj={
name:"lili",
age:18
}
var name="zhufengpeixun";
console.log(obj.name);//lili
console.log(obj["name"]);//lili
//obj[name] === obj["zhufengpeixun"] ---对象中没有这个属性名 ----/undefiend
console.log(obj[name]);//undefiend
987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
