前端——JS(ECMAScript)

1 介绍

1. 组成
   ECMAScript：核心部分，语言规范
   DOM：文档对象
   BOM：浏览器对象
2. 样式
   行内样式：直接在标签里面写
   内部样式：<script>写内容</script>
   外部样式：<script src="外部文件路径"></script>
3. 注释
   //       /**/
4. 调试：浏览器开发者工具——>Sources可设置断点调试，Watch是监视某个变量

2 变量

1. 使用
   用var关键字声明：var m=6;
2. 命名规范
   驼峰命名法：除第一个单词外，其他单词的首字母大写
   以 ‘$’ / ‘_’ / 字母开头，大小写区分
3. 交换两个变量的两种方法
   ①n1=n1+n2 n2=n1-n2 n1=n1-n2
   ②t=n1 n1=n2 n2=t
4. 获取变量的类型
   var s=typeof 变量名

3 数据类型

3.1 简单类型——存储在栈

1. Number
2. String
3. Boolean
4. Undefined：只声明未赋值
5. NaN：isNaN()——>判断不是一个数字

3.2 复杂类型——存储在堆

类型：

1. Object
2. 数组
   存储：地址存储，栈中存储的是堆中的地址，指向堆中存储，

3.3 类型转换

1. 转换成字符串
   toString()：null和undefined没有此方法
   String()：null和undefined没有此方法
   
   '+'拼接：可以适用任何类型
   var a=null; console.log(a+'');
2. 转换成数值
   Number()
   -布尔类型可以相应转换成1和0
   -字符串类型时转换如下：

var str1='82kun';
var str2='82';
var num1=Number(str1);
var num2=Number(str2);
console.log(num1);//注：针对有字母的字符串，返回的是NaN
console.log(num2);//82

parseInt()
parseFloat()
-布尔类型转换时不会转换成数值类型，是NaN
-字符串类型转换如下：

var str1='82kun82';
var str2='82';
var num1=parseInt(str1);
var num2=parseInt(str2);
console.log(num1);//注：针对有字母的字符串，转换到第一个字母处停止，82
console.log(num2);//82

3. 转换成布尔
   Boolean()
   转换成false：’’    0   null     NaN   undefined
   转换成true：除以上五种情况，其他都是转换成true

4 操作符

代码规范：操作符前后要有空格

1. 算术：+, -, *,/ ,%
2. 逻辑：&&, || ,!
3. 关系：> ,<, <= ,>=
   == !=:判断值是否相等(或者不等)
   === !==:先判断类型是否相同(或者不同)，再判断值是否相等(或者不等)
4. 赋值：=,+=.-=,*=,/=,%=
5. 一元：++, - -

5 流程控制

1. 顺序
2. 分支：注意使用三元表达式
3. 循环：注意break和continue，根据是否知道循环次数选择循环结构

6 数组

1. 字面量：[]
2. 数组长度：变量名.length
3. 创建数组：
   ①字面量：var array=[];
   ②new：var arr=new Array();
4. 清空数组：
   arr=[];
   arr.length=0
   arr.splice(0，arr.length)——参数一：开始位置，参数二：删除个数
5. 判断是否是数组
   ①arr instanceof Array
   ②isArray()——HTML5新增，有兼容问题
6. 方法
   ①toString():以’,'分割成字符串
   valueOf():返回数组本身
   join(‘分隔符’):数组以某个分隔符连接
   ②增删
   push():插入数组末尾位置
   pop():删除数组最后一个数据
   shift():删除数组第一个数据
   unshift():插入数组开始位置
   ③reverse():反转数组
   sort():按照字符编码排序
   ④改
   concat():拼接数组
   slice(开始索引，结束索引):截取新数组，不包括结束索引位置的字符
   splice(开始索引,删除个数):删除或替换数组元素
   ⑤索引
   indexOf(字符,[开始位置]):从前寻找，寻找对应字符的索引，未找到返回-1
   lastiIndexOf():从后寻找

7 函数

声明——>调用——>参数——>返回值

1. function 函数名() { }
2. 参数
   多参数：arguments 类数组
3. 返回值
   不写return：返回undefined
   写return，后面不加内容，结束函数，不执行return后面的任何语句，返回undefined
   写return，后面写返会内容，返回对应的值
4. 匿名函数和自调用函数
   匿名函数：var fn=function() {}
   自调用函数：(function fn(){ } )()
5. 作用域(链)
   作用域：全局和局部作用域
   作用域链：全局是0级作用域链，局部一级一级往下排，1级，2级
   使用变量时，首先从自身作用域链寻找变量，没有，去上一级作用域链，直到找到为止
6. 预解析
   ①变量提升：变量声明提升到当前作用域最前面，不包括赋值
   ②函数提升：函数声明提升到当前作用域最前面，不包括调用
   ③函数和变量名称相同时，函数优先

8 对象

1. 字面量：{}
2. 组成：属性和方法
3. 函数与方法
   函数是独立存在的函数，方法是属于对象的函数
4. 创建方式
   ①字面量：{}
   ②new：new Object()——>Object是构造函数
   ③工厂方法：创建多个对象

function  createStudent(name,sex,age){
	var student=new Object();
	student.name=name;
	student.sex=sex;
	student.age=age;
	return student;
}
var student1=createStudent('小葵','男',18);
var student2=createStudent('小蒙','女',20);

④自定义构造函数

function  createStudent(name,sex,age){
	this.name=name;
	this.sex=sex;
	this.age=age;
}
var student1=new createStudent('小葵','男',18);
var student2=new createStudent('小蒙','女',20);

5. 遍历对象属性和删除对象属性
   遍历：for(var key in obj) {console.log(key,obj[key]); }
   删除：delete 对象.属性名
6. new和this
   new执行过程：
   ①在内存中创建一个空白的对象
   ②构造函数中this指向刚创建的对象
   ③构造函数中设置属性和方法
   ④返回当前对象
   this指向
   ①方法：指向方法所属的对象
   ②构造函数：指向构造函数创建的对象
   ③函数：指向window

9 内置对象

JavaScript中对象：自定义对象，内置对象，浏览器对象
ECMAScript中对象：自定义对象，内置对象
主要介绍Date对象

1. 与Math对比
   Math:不是一个构造函数，提供静态成员
   Date:是一个构造函数，提供实例成员
2. 存储
   内存中以毫秒存储
3. 创建
   var d = new Date();
   new Date();当前的时间
   new Date(毫秒值);
   new Date(日期字符串);比如：2020-5-8
   new Date(数字);必须有年、月，比如：2020,5,8
4. 获取毫秒值
   d.valueOf()
   d.getTime()
5. 获取指定部分
   getFullYear()—— getMonth() ——getDate() 年 月 日
   getDay() 星期
   getHour() ——getMinute()—— getSeconds() 时 分 秒
6. 判断日期对象
   date instanceof Date
7. 返回多个值时使用对象
   return { a:8,b:2}

10 字符串

1. 基本包装类型：String (Number Boolean基本不使用)
   var s = new String('123abx');
   PrimitiveValue:指的是原始值，基本类型的值
2. 特点：不可变
   每一次给字符串赋值时，都会另开辟空间，当大量字符串拼接的时候，存在性能问题。
3. 方法
   ①charAt():返回指定索引处的字符
   ②charCodeAt():返回指定索引处的字符ASCII码
   ③str[i]:返回指定索引处的字符，是HTML5新增的，类数组访问
   .
   ①concat(): a.concat(b)拼接字符串
   ②str.slice(开始索引,[结束索引]):截取字符串,不包括结束索引
   ③str.substring(开始索引,[结束索引]):截取字符串，不包括结束索引
   ④str.substr(开始索引,[截取个数]):截取字符串
   ⑤split(分割符):分割字符串，以某种符号分割成数组
   ⑥replace(旧字符，新字符):替换字符
   ⑦tirm():去空白，不能去掉字符串中间的空白
   .
   ①indexOf():返回指定字符的索引，从左往右，为字符串时，返回第一个字符的索引
   ②lastIndexOf():返回指定字符的索引，从右往左，为字符串时，返回第一个字符的索引
   ③search():返回指定字符的索引，从左往右，为字符串时，返回第一个字符的索引，注意：支持正则表达式
   .
   ①toUpperCase():大写
   ②toLowerCase():小写