@author: zengjiahao @date: 2018/10/21 1.前端三老铁
HTML：确定网页的结构
CSS：确定网页的样式
JavaScript(js):确定网页的行为(交互)
2.js语言组成
ECMAScript
确定js的语法规范
一些特定的可以被计算机识别的代码
DOM
js操作网页内容
BOM
js操作浏览器
3.js三种写法
行内
<button onclick="window.alert('哥')">点我就告诉你谁最帅</button>
内联
写在script标签里面
<script >alert("这是JS内联样式")</script >
外联
写在js文件中，使用script标签的src属性来导入
<script src="./01-JS外联写法.js"></script>
4.js注释
// 单行注释
/* 多行注释 */
5.js五句话
alert():网页弹窗
console.log():打印台打印消息
prompt():弹出输入框
confirm():弹出一个确认框
document.write():网页加内容，不常用
1.直接量：可以直接使用的数据
符合数据类型
string
number
boolean
获取一个变量的数据类型语法：typeof 数据或者typeof (数据) 得到的是一个变量类型的字符串
2.数据类型:
string：字符串
number: 数字
boolean：只有两个值
true：真
false：假
undefined: 只有一个值，就是undefined
undefined:未定义,当一个变量有声明，但是没有赋值，那么这个变量的值就是undefined(未定义值)
null: 只有一个值，就是null
null这个值只能手动设置，变量在任何时候它的值都不会是null
应用场景：一般用在函数中，表示这个函数返回数据失败 后面阶段会学习
3.undefined与null的区别
null == undefined: 成立，他们的值都是空
null === undefined: 不成立，他们的值相等但是数据类型不同
作用：存储数据
var:本质是内存中某一块空间
1.声明变量
var a;
声明
var num = 10
变量的初始化：在声明的时候赋值
var a,b,c;
变量的批量声明：同时声明多个变量
var num1 = 10,num2 = 20,num3 = 30;
批量声明的时候也可以赋值
2.变量赋值
a = 10;
3.变量取值
a
注意点
1.变量的重复声明:会把已经存在的变量覆盖掉
2.变量的重复赋值：修改变量里面存储的数据
3.变量的值是另一个变量的值
var n1 = 20;
var n2 = n1; //将n1的值拷贝一份赋值给n2
相关知识,后面整理
js预解析
es6 const/let
const定义常量
let 定义变量
1.js中+号的含义
字符串连接符
+号两边只要有一边是字符串
数学算术加法运算
两边是数字
相关知识,后面整理
隐式转换
算术运算符
+ - * / %
复合算术运算符
+= -= *= /= %=
自增自减运算符
++ -- 变量自身+1 - 1
前自增
++num
先+1（变量自身+1），后赋值（将变量的值赋值给自增表达式的结果）
后自增
num++
先赋值，后+1
最常用： num++
关系运算符
> >= < <= == != === !==
==:只比较值，不比较数据类型
===：先比较值，再比较数据类型
关系表达式的结果一定是布尔类型：true代表成立，false代表不成立
逻辑运算符
&&：一假则假
||：一真则真
！：取反 假变真 真变假
/**运算符优先级：确定不同运算符的运算顺序
* 1.() 小括号：作用就是提升优先级
* 2.自增与自减
* 3.算术运算符（先乘除后加减）
* 4.比较运算符
* 5.逻辑运算符
* 6.赋值运算符
运算符与表达式
表达式一定有结果，要么直接打印，要么用变量存起来
关系表达式的结果一定是布尔类型的数据
天花板向上取整:Math.ceil()
地板向下取整:Math.floor()
四舍五入:Math.round()
求最大值：Math.max()
求最小值:Math.min()
生成0-1随机数:Math.random ()
幂运算:Math.pow()
圆周率:Math.PI()
绝对值:Math.abs ()
用到时查阅文档
5种基本数据类型
string
number
NaN：not a number 不是一个数字
NaN是number数据类型中一个特殊的数值，是数学计算错误得到的一个结果
例如： '张三' - 100,在数学上这是一种错误的计算，它的结果就是NaN
NaN与任何数字都不等，包含它本身
NaN与任何数字计算得到的都是NaN
isNaN(数据)：检测一个数据是不是NaN 得到的结果是布尔类型
例如：isNaN(NaN),结果为true
例如：isNaN(123),结果为false，表示123不是NaN
number类型浮点数（小数）精度丢失问题
小数在进行数学计算时，会有一定的误差，这是计算机本身的bug，不仅是js语言，其他语言也有这个问题
解决方案：不要让两个小数比较大小，这种情况一般不会影响正常开发
boolean
undefined
只有一个值就是undefined
如果一个变量只声明，未定义，默认值就是undefined
null
只有一个值就是null
只能手动去设置这个值（变量在任何时候自己都不会是null）
undefined与null的区别
undefined == null true
undefined === null false
复杂数据类型
Object Array 等
1.显示数据类型转换（程序员主动调用关键字来转换）
转成number
parseInt（）：转换整数
从左往右逐个字符解析，遇到非数字字符结束，将已经解析好的整数返回
parseFloat（）：转换小数
与parseInt（）的区别就是可以识别第一个小数点
Number():布尔类型转成数字（0false和1true）
有任何的非数字字符得到NaN
既可以转整数也可以转小数
转成string
String()
可以识别undefined与null
与toString()的唯一区别就是如果变量的值为undefined或者null不会报错，会得到undefined或者null
变量名.toString()
如果是undefined和null程序就会报错
转成boolean
Boolean()
八种情况转成false
0 -0 undefined null NaN false '' document.all()
其他一切数据转成true
2.隐式数据类型转（编译器帮我们转换）
当运算符两边数据类型不一致时，编译器会帮我们转成一致在运算
转成number
【常用】+ :数学正号
写在一个数据前面
自增自减（++ --）
算术运算符（+ - * / %）
比较运算符(> < >= <= == != === !==)
说明：全等与不全等会先比较值（此时会隐式转换再比较），然后再比较数据类型
转成string
字符串连接符 +
+号的两边只要有一边是字符串
转成boolean
逻辑非： !
!0
!0的结果是true
Boolean(0) = false
!false
1.顺序结构
（默认）从上往下顺序执行
2.分支结构
根据条件执行代码
[常用]if分支结构
if
某种条件判断
if(条件){满足条件需要执行的代码}
if-else
两个互斥的条件
if(条件){ 成立执行 }else{ 不成立执行 }
if-else中的代码一定只会执行一个
if-esle if -else
多个条件的判断
所有大括号中的代码最多只会执行一个
if(){}else if{}else{}
switch-case分支结构
适用于固定值匹配
switch(表达式){}
case 值1:
表达式的结果 === 值1，需要执行的代码
break;
default:
表达式的结果和上面所有的case后面的值都不全等，则会执行这里的代码
break;
break关键字
结束swtich语句
防止穿透
合理利用穿透
多个值需要执行的代码相同
三元运算符
相当于if-else结构的一种简写形式
?:
条件？代码1:代码2
1.如果表达式成立则执行代码1，否则执行代码2
如果代码1或者代码2有运算结果则三元运算式的结果就是他们其中的一个循环结构
一般情况下，我们写的数字都是十进制，而且其他进制在使用时极少，所以只做了解即可
在js代码中我们在数字的前面加上进制标识符表示进制
二进制标识符:0b
八进制标识符：0
十进制无标识符：默认进制
十六进制标识符：'0x'
示例
//分别用不同进制表示数字188
//二进制 10111100
var bin = 0b10111100;
//八进制 274
var oct = 0274;
//十进制 188
var dec = 188;
//十六进制 bc
var hex = 0xbc;
1.顺序结构：（默认）代码从上往下执行
2.分支结构：代码根据条件执行
3.循环结构：代码重复执行
while循环
循环次数不固定
do-while循环
循环次数不固定，循环体至少要执行一次
for循环
循环次数固定的
关键字
break
结束循环，执行大括号后面代码
结束switch-case分支结构
continue
结束本次循环体，立即进入下一次循环
continue后面的代码都不执行
逻辑运算符短路运算符
1.短路运算：如果第左边式子就可以决定逻辑表达式的结果，右边的式子不执行
2.逻辑表达式的结果不一定是布尔类型的值
3.逻辑与表达式：找假 ，左边式子能转为false，结果就是左边式子的值，反之就是右边式子的值
4.逻辑或表达式：找真 ，左边式子能转为true，结果就是左边式子的值，反之就是右边式子的值
1.作用:
一个变量可以存储多个数据
2.数组三要素:
元素：
数组中的数据
下标：
数组中元素的位置
下标从0开始
长度：
数组中元素的数量
3.数组语法
声明
var 数组名 = [元素1，元素2…………]
取值/赋值
取值
数组名[下标]
如果下标超出最大下标：undefined
赋值
数组名[下标] = 值
如果超出最大下标，往数组添加元素
长度语法
数组名.length
数组相关特点
1. 长度 = 最大下标 + 1
2. 往数组后面添加元素： 数组名[数组名.length] = 值
3. 改变数组的长度会改变数组的元素
4.数组的遍历
固定的for循环结构
for(var i = 0;i<数组长度;i++){ 数组名[i] }
核心原理：数组两个相邻元素比较大小，交换位置
步骤
1.外层循环决定比较的轮数 arr.length - 1
2.内层循环决定每一轮比较的次数
arr.length - 1 - i
3.交换位置
补充知识点
1。数组去重
* 开关比较法
* 1.先定义个空的新数组newArr
* 2.遍历旧数组arr中所有元素
* 3.定义一个bollean变量表示开关，默认为开启状态
* 4.遍历新数组所有元素与旧数组元素比较
* 5.如果该元素存在于新数组中，开关为关闭状态。否则开关为开启状态
* 6.如果开关为开启状态，则将旧数组的元素添加到新数组中
2.二维数组
定义
var school = [ [99, 98, 75],[93, 91, 86],[90, 0, 0]];
取值
数组名[行][列] 行决定第几个元素下标，列决定该元素中的子元素下标
var zhangsan = school[1][2];//86
遍历
双重循环
for (var i = 0; i < school.length; i++) {//第一层循环遍历行
for (var j = 0; j < school[i].length; j++) {//第二层循环遍历列
console.log(school[i][j]);//获取二维数组中的每一个数据
}
}
3.数组应用案例
4.数组的另一种声明方式
简洁方式
[]
标准方式
new Array()
区别：
数组中只有一个元素的含义不同
例子:
[10]; // 简洁方式
new Array(10); // 标准模式
简洁方式：声明一个长度为1，只有一个元素10的数组
标准方式：声明一个长度为10的空数组
1.函数使用
函数特点
1.代码需要执行多次
2.完成一个独立的小功能
函数的本质
将一段代码存入变量中
声明语法
function 函数名(){ 函数体：代码 }
调用语法
函数名()
只有函数调用才会执行函数体代码
2.关于函数的参数
参数作用
1.调用者传递数据给函数
2.函数无法独立完成功能，需要调用者传递数据的时候
语法：
传： 调用者 函数名（实参）
收：函数 function 函数名(形参){ 函数体 }
函数传参的本质：
实参给形参赋值
3.关于返回值
返回值作用：函数将计算的结果告诉调用者
语法
返回：函数 function 函数名() { return 值 }
收： 调用者 函数名()
只有函数调用可以得到返回值，谁调用这个函数，函数就返回给谁
要么打印，要么使用变量来存储
return关键字：
结束函数的调用 （类似于break关键字,只能用于函数体中）
return后面的代码不会执行
1.作用域
变量可以起作用的范围
两种作用域
全局作用域：全局变量（函数外面声明）
局部作用域：局部变量（函数内声明）
js中只有函数可以开辟作用域
作用域链
变量的访问规则：
就近原则
就近原则简介:
访问变量时，会优先访问的是在自己作用域链上声明的变量，如果自己作用域链上没有声明这个变量，
那么就往上一级去找有没有声明这个变量，如果有就访问，如果没有就继续往上找有没有声明，
直到找到0级作用域链上，如果有，就访问，如果没有就报错
2.预解析
预解析：js在解析代码之前，会先看一眼。预解析的时候会做一件事：变量的提升
变量的提升
a.变量的声明会提前到当前作用域的最顶端，赋值在原地
b:函数的声明也会提前，调用在原地
1.arguments
作用：
函数中有一个arguments关键字来获取所有的实参
使用场景:
js是一门弱语言,声明函数的时候假如只有一个形参，实际上在调用的时候无论我们传入多少实参程序都不会报错,
如果想获取所有传入的实参,可以使用arguments关键字获取
特点：
1.只能在函数体中使用，在函数外使用会报错
2.是一个特殊的数组(伪数组)
（伪数组说明：只有数组的下标、元素、长度，没有数组其他方法）
3.与形参一一对应
4.修改形参，arguments也会修改
5.修改arguments，形参也会改
好处:
可以让函数变得更加灵活,可以让函数根据实参的不同而实现不同的功能(函数中,判断arguments.length的值,来实现不同的功能)
2.函数的两种声明方式
1.函数声明： function 函数名() { 函数体 }
2.表达式声明： var 函数名 = function(){ 函数体 }
3.唯一区别：函数声明在任何地方调用，表达式声明只能在声明后面调用
3.引用类型与值类型区别
引用类型（2复杂数据类型）：栈中存储的是地址，数据存在堆中
变量赋值拷贝的是地址，修改拷贝后的数据会对原数据有影响
值类型（5基本数据类型）：栈中存储的是数据
变量赋值拷贝的是值，修改拷贝后的数据不会对原数据有影响
1.什么是回调函数：
如果一个函数的参数也是一个函数，那么这个参数函数就叫做回调函数
2.2.为什么要有回调函数？
当一个函数调用执行完毕之后，我想执行另一段代码块，也就是调用另一个函数
但是有时候可能本函数执行完毕后，根据不同的情况需要调用的函数也不同，那么我们可以使用形参来接收这个函数，然后再调用
此时：这个形参函数就称之为回调函数
1.什么是自调用函数：
函数自己调用自己
最常见的：
匿名函数自调用
2.自调用函数作用
开辟作用域，js中只有函数才可以开辟作用域
3.匿名函数自调用
语法:
( function(){} ) ()
将整个函数使用小括号包裹，然后在后面再加上小括号调用
1.以后开发常用，需要掌握的重点
1.对象的使用
存储多个数据，使用键值对存储，代码易读性更高
声明一个对象： var 对象名 = {}
对象初始化 var p = { 属性名:属性值 }
2.对象的取值与赋值
取值
点语法 对象名.属性名
字符串语法 对象名['属性名']
如果对象没有这个属性，取到的是undefined
赋值：
对象名.属性名 = 值
对象名['属性名'] = 值
如果对象没有这个属性，会动态添加这个属性
3.遍历对象的属性
固定的特殊的for in循环
语法： for(var key in 对象名){ 对象名[key] }
只能用字符串语法来取值，因为key是一个属性名字符串
4.方法中的this关键字
谁调用这个方法，this就代表谁
5.new关键字作用
1.创建一个空对象
2.将this指向这个对象
3.完成对象的赋值
4.返回这个对象
1.对象有四种创建方式，如何选择？
如果我只想创建一个对象
字面量简洁方式（常用） ： {}
构造函数方式（几乎不用）： new Object()
如果需要创建多个对象（代码需要复用）
自定义构造函数方式（常用）
工厂函数方式（几乎不用）
2.字符串的恒定性
结论：字符串是不可以修改的，在调用字符串的API时，一般定义新的变量接收
容易混淆：把变量的重新赋值与字符串恒定性混淆在一起
js内置对象常用API
Date对象
Array对象
String对象
函数的三种叫法
函数
方法，通常都是对象的属性，有归属感
API：语言作者提前写好的内置对象的方法
1.基本包装类型
1.为什么要有基本包装类型
我们字符串属于基本数据类型，只有对象才可以使用点语法，为什么字符串也可以使用点语法呢？
2.什么是基本包装类型
三个特殊的对象类型：基本数据的对象类型
string对象:new String()
number对象:new Number()
boolean对象:new Boolean()
3.基本包装类型的意义
主要是为了让基本数据类型也可以调用对象的方法
对开发者影响不大，当我们在使用字符串的api的时候，编译器会自动帮我们转换
2.json对象（后面阶段会详细讲解）
为什么要有json对象：因为在实际开发中，后台并不是只是为了前端服务，他们还需要为android和ios服务 如果直接返回一个js对象，那么其他语言无法转换，为了统一，所以会返回给我们一个json对象，这样前端/安卓/ios都可以识别
3.逗号运算符
1.逗号运算符: ,
2.逗号表达式:(表达式1，表达式2，表达式3.............)
通常与小括号一起使用，逗号用于连接算式，逗号
3.运算规则:
（1）逗号运算符连接的每一个式子都会执行
（2）逗号运算式的结果是最终一个式子的结果
4.js转义符
转义符： \ 改变原来符号的作用就叫转义符
1.五种基本数据类型：只能存储一个值
string
number
boolean
只有两个值true和false
undefined
只有一个值undefined
null
只有一个值null
a.在检测数据类型的时候，得到的是object，但是仍然是一个单独的数据类型
2.两种复杂数据类型
array
obejct
函数function属于对象object
3.检测数据类型
1.除数组之外，所有的数据类型都可以使用 typeof 变量名来判断
2.数组是一个例外，如果使用 typeof 数组名得到的是object
可以使用下面方式来检测数组类型
数组名 instanceof Array：得到boolean类型
Array.isArray ( 数组名 )：得到boolean类型
758
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
