js学习总结

1. 基础语法

1. 打印方式

• document.write 页面打印
• console.log 控制台打印

2. 添加js代码方式

• 页面内添加，直接在script标签内进行书写
• 页面外引入，直接在script标签的src属性中引入文件，可以出现多个script标签，但引入文件的标签体内不能再书写js代码

3. 执行顺序，同步代码自上而下依次执行
4. 注释方式：

• // 单行注释
• /* */ 多行注释

5. 变量个常量

• 常量：程序运行中其值不可改变的量
• 变量： 在程序运行过程中，其值不可改变的量，常用var或let作为表示符，变量名应该遵循驼峰命名法，且只能由数字，字母，下划线改成，首位不能为数字，变量必须先定义后使用
• 初始化：变量定义的同一行赋予其值
• 赋值：给变量赋值（除了初始化都是赋值）

6. 数据类型
   • 数据类型的作用：
     • 检验算法合法性的表要条件
   • 内置基本类型
     1. 数字类型：number 有整型和浮点型
     2. 字符串：string
     3. 布尔值：true/false
     4. undefined: 变量未被定义时的值
     5. null: 给未被赋值的变量，赋一个空值
        引用类型
   1. 数组：可以存储更多数据的变量
   2. 函数： 储存方法
   3. 对象：
   • 判断数据类型的函数：typeOf
7. 运算符
   • 赋值运算符
     • = 将等号右值赋值给左值
   • 自增自减：++，-- 为自身加1或者减一
   • 前++/–：先算后用
   • 后++/–： 先用后算，过了该条语句再算
8. 关系运算符
   • 连接的表达式为关系表达式，结果一定为布尔值(逻辑量)

   • ,>=,<,<=

   • ==:逻辑等，判断左右操作数是否一致
   • != :逻辑不等
   • === : 严格等，数值和类型都得相等
9. 逻辑运算符
   • 将关系表达式或者逻辑量连接起来的表达式，结果时布尔值
     1. &&：和
     2. || ： 或
     3. ! ： 非
10. 数字和字符串的转换规则
    • 隐式转换
      1. 加：结果会转化为字符串，等同于字符串拼接
      2. 除加以外的符号，如-,*,/,%…结果都转化为数字
    • 显式转化
      1. 字符串转数字
         • parseInt(字符串)：返回一个整型数字；如果传入非数值的字符串的化会返回NaN
         • parseFloat(字符串)：返回一个浮点数
         • Namber(字符串)：返回一个数字
      2. 数字转字符串
         • toString() : 将数字转化为其对应的字符串
11. if(条件表达式){语句} elss if(表达式){语句} else{语句} //选择不要嵌套超过5层
12. 闰年算法：
    • 四年一闰 && 百年不闰 || 四百年再闰
13. 条件运算符：
    • 表达式1？表达式2 ：表达式2
    • switch case结构
    • while循环
    • do…while循环
    • for循环
    • break ： 跳出本层循环
    • continue ： 跳出本次循环

函数

- 概念：函数式具有包裹性的最小功能模块
- 作用：提升代码的复用性
- 函数的调用语法： 函数名();
- 函数的形参和实参是不同的内存单元，只有函数被调用的时候才会开辟空间
- 返回值return，会返回数据并跳出函数
- 嵌套调用：在另一个函数体内调用另一个函数

15. 事件与函数的关系
    • 事件的本质就是函数调用
    • 事件与函数进行绑定
      1. 通过html元素进行绑定
      2. 通过js的方式绑定事件
    • 变量提升：未被声明的变量，编译器会在首行进行变量定义且赋值为undefined
    • 变量的作用域：变量能够使用的作用域
      1. 全局变量：没有被任何括号括起来的变量，作用域为整个文件
         - 注意事项：1. 生命周期与页面生命周期一致。 2。 检验函数体内少使用全局变量，会降低函数的独立性
      2. 局部变量：被任何括号括起来的变量，作用域为括号内；
    • 函数的嵌套定义：子函数可以使用父函数的局部变量，反之父函数却不能使用子函数的局部变量

数组

- 数组的定义：可以存储更多数据的变量
- 定义方式：
	1. 构造函数方式：使用new关键字在堆上开辟空间
	2. 字面量形式： let arr = [];
- 访问方式：数组名[下标]；
- 遍历：对数组每个元素都操作一遍的过程
- 常见数组函数：
	- pop，push, unshift, shift, splice, join, slice, concat, reverse, sort
- 多维数组：通过数组嵌套来实现
- 冒泡排序：相邻元素相互比较进行排序
- 选择排序：每次选出最小的进行排序

17. json对象
    • 是描述数据的一种格式，将若干个繁杂的属性和函数封装成了一个整体
    • var json = {key1:value1,key2:value2};
    • 属性的读写
      1. 通过点读写
      2. 通过下标访问
      3. 添加自定义属性，对象.新属性 = 属性值
      4. 自己的函数访问其他的成员属性，需要加前缀this
      5. 遍历json对象.使用for…in（通常被遍历的json对象是没有函数的）
18. 严格模式
    • 添加“use strict”;
19. indexOf: 功能：数组元素的查找，找到返回下标，找不到返回-1
20. 回调函数：一个被当作函数参数的函数（当有时拿到一个函数后，需要对其返回值在另一个函数中操作，则需要使用回调函数）
21. 数组三个迭代函数
    • forEach：功能：遍历（迭代）整个数组，执行某种功能；参数：forEach（回调函数);
    • map:功能：遍历（迭代）整个数组，执行某种功能；参数：map(回调函数);返回值：回调函数return的数据组成的新数组
    • filter： 功能：过滤，根据回调函数return的布尔值，组成新的数组
22. 字符串的定义和创建
    • 构造函数：引用类型
    • 字面量：内置基本类型
23. 常见asc码值： 13 回车，32空格， 48 0， 65 A，97 a;
24. 字符串常见api：length charAt fromCharCode indexOf lastIndexOf replace slice split

Math对象

floor：向下取整 ；ceil：向上取整; round: 四舍五入；sqrt: 平方根；pow：开方；min：返回参数中最小的；max：返回参数中最大的；abs：绝对值；random：生成随机数；

Date对象

通过new Date()创建；getFullYear()：返回年份；getMonth()：返回月份; getDate():返回日；getDay():返回星期几 0~6；getHours(): 小时；getMinutes(): 分；getSeconds(): 秒 字符串转时间: toLocalString();

window对象

所有的属性和方法都需要前缀调用，全局遍历和全局函数的前缀是window，window可以不加
三个弹出框：alert， prompt，confirm；弹出框会阻塞行为。
两个定时器： setInterval：连续定时执行； setTimeout：定时执行后关闭；
onload：延迟网页加载；document.write: 自带文本解析，与事件连用时会覆盖原页面
location：定位跳转

dom元素相关操作

document绑定dom对象：id查找；tagName查找；类名查找；querySelector查找；querySeleorAll查找；name名查找；
检测节点类型：nodeType
dom元素的操作：
创建：createElement; 连接节点：appendChild；节点删除：节点.remove();
parentsNode:找父元素节点
childNodes：批量获取父元素的子元素，存储至数组中（返回元素和文本节点）
children：批量获取父元素的子元素，存储至数组中（只返回元素节点）
获取元素中的文本：innerHTML，innerText，输入框中value
属性的读写：a. 对象.属性
b. getAttribute(“属性”)/setAttribute(“属性”,“值”)
样式的读写：
- 行内杨树的读写：对象.样式
- 非行内样式的读写：getComputedStyle(dom对象,false)[“属性名”]:返回属性值 /dom对象.style.属性名 = 属性值;
insertBefore作用：将目标节点添加至参照节点之前；使用方法： insertBefore(目标节点,参照节点)；
offset相关属性：offsetWidth;offsetHeight;offsetLeft;offsetTop;
onscroll：滚动条事件

事件

事件三要素：事件元素，事件类型，【事件对象】
事件兼容；键盘事件兼容，事件流：冒泡，捕获；阻止事件冒泡兼容
事件绑定的方式：a：通过HTML元素绑定；b: 通过js方式绑定；c：事件监听绑定
事件监听的好处:
a.可以为相同的元素多次绑定相同的事件
b.可以决定事件流的传递方式为冒泡或者捕获
ps：事件流顺序：先捕获后冒泡
事件委托：依赖于冒泡机制，可以批量微子元素添加事件，且之后的新增元素也会自动绑定事件
json：是一种通用的数据结构类型，在对象类型和字符串类型转化时使用stringify和parse方法

正则

正则对象的创建方式：1. new方法（对象形式，可以传变量）2. /表达式/（字面量方法）
/^$/,//;

Es6

let: 1.先定义后使用。2.不能重复定义。3， 块级作用域。4，暂时性死区
const：1.只能读不能改. 2.必须初始化，3.其余属性跟let一致
this：函数的内置对象，只能在函数体内使用
this指向：1.与事件连用：代表触发事件的元素；2.与普通函数连用：代表调用该函数的对象；
3，与构造函数连用：指代构造的对象 4：在箭头函数中指父元素的前缀
修改this指向：bind(), apply(), call()
for…in…遍历下标；for…of…遍历元素内容
字符串扩展方法：includes，startWith，endsWidth
解构赋值
set集合：无下标，自动去重；有add方法，delete方法，has方法，clear方法；
模板字符串：可以减少字符串拼接
类的创建方法