01.js基本知识点总结

1.什么是js

1.JavaScript：简称js，是一个运行在浏览器端的解释性弱类型面向对象脚本语言。 由3部分组成，ECMAScript+DOM（和网页挂钩）+BOM（和浏览器挂钩）组成。

2.解释型：在程序执行之前，不需要检查语法是否正确，直接运行碰到错误就停止。

3.弱类型：变量保存的数据是可以随意的，数据类型由数字来决定。

4.打桩输出-帮助我们以后检查错误：有3种，1.在控制台输出日志：console.log（）不会影响页面，首选。2.在页面上输出document.write（）3.alert（）。

5.变量：创建后可以再次修改。何时使用：以后反复使用到的数据，都要提前把他保存在一个变量之中，以后使用变量名，相当于就是在使用变量的值。变量名命名不能以数字开头，要用驼峰命名法。写法：var 常量名=值。

数据类型

数据类型分为基本类型/原始类型和引用/对象类型。基本类型有5个

1. number取值有无数个，颜色为蓝色。
2. string-字符串：取值无数个，加""或",颜色为黑色
3. 布尔值boolean：取值true和false一般用于条件判断，蓝色
4. null-空，取值只有一个null，作用提升网页性能
5. undefined取值只有一个就是undefined，颜色是灰色

运算符

1. 算术运算符：+ - * / % ，其中%叫做取余，俗称模，两个数相除不取商，而是取除不尽的余数。作用：任意数%2判断奇数偶数。 注意 NaN：not a number:不是一个数字，不是一个有效数字，参与任何算术运算结果仍为NaN,参与任何比较运算结果都是false; !isNaN()结果是布尔值如果true说明是一个有效数字。+运算如果碰上字符串，左右两边会悄悄转为字符串，+运算变为拼接操作。
2. 比较关系运算符> < >= <= == != === !==（不带隐式转换的不等比较）结果一定是一个布尔值，带有隐式转换：默认左右两边都会悄悄转为数字，再比较大小。字符串比较大小数字0-9<大写A-Z<小写a-z<汉字
3. 赋值运算符：=（赋值） += -= *= /= %=,赋值=：将=右边的东西，保存到左边的变量名之中。+=这些就是运算后在进行赋值操作 i=i+1-----i+=1
4. 逻辑运算符：&&（并且） ||（或者）
5. 自增自减运算符++： 自增++固定每次只能增加1，累加+=又程序员决定。前++和后++的区别单独使用没有任何区别，如果参与其他表达式，变量始终都会加1，但两者返回结果不同，前++加了之后的新值，后++加之前的旧值
6. 位运算，2的n次方

2.三种分支结构

分支结构：通过条件的判断，条件的不同，选择对应的代码去执行

if分支

if分支的三种写法：一个条件一件事，满足谁就做谁if（条件）{操作}；一个条件两件事if（条件）{操作}else{默认操作}；多个条件多件事，if（条件）{操作}else if（条件）{操作}else{默认操作}。

switch分支

switch（变量/表达式）{case值1：操作1；break；case值2：操作2；break；default；默认操作；}

三目运算

简化简单的（操作只能有一句话）分支：条件？操作：默认操作 条件？操作：套娃

强制类型转换

强制类型转换：隐式转换出来的类型不是我们想要的，先强制转换再运算。

• 转字符串String（x）万能的，完全等效于隐式转换，还不如+“”，页面上一切东西都是字符串类型。
• 转数字 var num=parseInt/Float(str);执行原理：从左往右依次读取每个字符，碰到非数字字符则停止转化，如果一来就不认识则为NaN，Int不认识小数，float认识第一个小数。Number（x）万能的完全等效于隐式转换，还不如-0 * /
• 转布尔Boolean（x），万能的，完全等效于隐式转换，还不如!!x 。
• 只有6个会为false： 0 "" undefined null NaN false,其余均为true，不管在分支或循环中怎么写都行，只需要判断是不是这六个。

3.循环结构

循环结构：反复执行相同或者相似的操作。循环三要素：1.循环条件：开始-结束，循环次数；2.循环体：做的操作是什么；3.循环变量：记录当前执行的那一次操作，并且不断的变化

三种循环

1.               while循环：var 循环变量=几；
                 while（循环条件）{循环体；循环变量变化}
   

执行原理：首先先创建出循环变量，判断循环条件，如果条件满足，则做出一次循环体操作，并不会退出循环，会再次判断循环条件满不满足，如果满足，则做一次循环体操作，直到条件不满足，才会退出循环。循环是一次一次执行的。

• 特殊点有时候会需要使用死循环：默认永远不会停下来的循环。不确定循环次数的时候就是用死循环，while（true）{死循环}。退出死循环：break退出整个循环，大多是用来搭配死循环；continue退出本次循环，下一次依旧会执行

2. for循环：执行原理：首先先创建出循环变量，判断循环条件，如果条件满足，则做出一次循环体操作，并不会退出循环，会再次判断循环条件满不满足，如果满足，则做一次循环体操作，直到条件不满足，才会退出循环。循环是一次一次执行的。比while写法更加简洁，推荐使用。

            for（var 循环变量=几;循环条件;循环变量变化){循环体；}  
   

• 特殊：死循环语法：for（；；）{}。面试题for和while的区别：他们两个在原理上几乎没有什么区别，一般来说不确定循环次数的时候会使用，会使用while循环（死循环）；确定循环次数用for循环，大部分都使用for循环。

3.          do...while循环var 循环变量=几；
            do{循环体；循环变量的变化}while（循环条件）
   

• while和do...while的区别：区别只看第一次执行，如果第一次执行条件都满足，那么两者没有任何区别，但是如果第一次条件不满足，那么while一次都不会执行，do...while至少会执行一次

4.function函数的基础

概念：function叫函数，也叫方法，预先定义好的，以后可以反复使用扥代码段。

1. 创建函数；function 函数名（）{代码段/函数体}，注意函数创建后，不会立刻执行，需要我们去调用
2. 调用函数：1.在js内部写：函数名（）；程序员写几次就会调用几次；2.在HTML上面绑定事件，什么元素都可以绑定事件。
3. 何事使用函数：不希望打开页面立刻执行，希望用户触发提升用户体验感，以后每一个独立的功能都要封装为一个函数，函数在js中地位极高，是第一等公民
4. 创建出带有形参的函数-形参：其实就是一个变量，只不过不需要加var，而且不需要赋值，称之为形式参数简称形参。function 函数名(形参，形参，..){代码段}
5. 使用带有形参的函数时，必须传入实参—实际参数，就是传递过去的值，函数名（实参，..）,注意传参的顺序不能乱，必须和形参一一对应，数量不多不少。
6. 不带参数的函数用于执行一些固定操作
7. 循环和函数都能反复执行，他们之间的区别在哪里？循环：几乎是一瞬间就执行完成；函数则需要调用后才能执行。

5.自定义函数

1.创建函数

1. 声明方式 创建函数：

              function 函数名(形参列表){
                                        操作；
                                         return 返回值/结果；}
   

2. 直接量方式 创建函数：

              var 函数名=function（形参列表）{
                                             操作；
                                                return返回值；}函数名其实就是一个变量名
   

2.调用函数

var 接住返回结果=函数名（实参列表）；其实return的本意是退出函数，但是如果return后面跟着一个数据，顺便将数据返回到函数作用域的外部，但是return只负责返回，不负责保存，所以调用函数时要拿变量来接住。就算省略return，默认也会return一个undefined，全局需要用到函数结果就要用return

1. 作用域：

     全局作用域：全局变量和全局函数，在页面任何一个位置都可以使用
     函数作用域：局部变量和局部函数，在当前函数调用时，内部可用；变量使用规则：优先使用局部的，局部没有
     找全局要，全局没有就会报错
     缺点：在函数中对着未声明的变量直接赋值会造成全局污染；局部可以使用全局的，但是全局不能
     使用局部的（想要使用的话，解决方法加上return）
     
   

2.声明提前：声明提前的规则：在程序正式执行之前，将var声明的变量（轻）和function声明的函数（重），都会悄悄的集中定义在当前作用域的顶部，但是赋值留在原地；特殊点：声明创建的函数会完整的提前，直接量创建的函数只有变量名部分会提前。如何避免声明提前这个问题：写函数是变量名和函数名尽量不重复；先创建函数再进行使用。

3.重载：相同的函数名，根据传入的实参不同，自动选择对应的函数去执行，但是js不支持，函数名如果重了，后面的会覆盖掉前面的。解决方法：在函数内部自带一个arguments的对象（类似数组对象）：不需要我们去创建。固定套路：1.通过下标去获取传入的某一个实参：arguments[i]-i从0开始 2.通过length去获取到底传入了几个实参：argument.length通过判断传入的不同，在内部去写判断，从而变相实现重载。

DOM

1. DOM：Document Object Model：文档对象模型：专门用于操作HTML文档，提供的方法。document对象由浏览器自动创建，一个页面只有一个document树根。可以通过树根找到任何一个DOM元素（属性和方法），因为DOM会将页面上的每个元素，属性，文本，注释等都会被视为一个DOM元素/节点/对象

查找元素：

1. 通过ID查找元素 var elem=document.getElementById("id值");

2. 通过标签名查找元素 var elems=document/已经找到的父元素.getElementsByTagName("标签名");

3. 通过class查找元素 var elems=document/父元素.getElementsByClassName("class名");

• 特殊的：js只能直接操作DOM元素，不能直接操作DOM集合，解决：要么下标拿到某一个，要么遍历拿到每一个。

操作元素

操作元素首先需要先找到元素，再操作元素。 1、elem.innerHTML - 获取和设置开始标签到结束标签之间的内容，支持识别标签的

		获取：elem.innerHTML;
		设置：elem.innerHTML="新内容";

	

2.获取属性值：elem.getAttribute("属性名"); 设置属性值：elem.setAttribute("属性名","属性值");

3、绑定事件：

	elem.on事件名=function(){
		                  操作;
		               *****关键字this - 这个
			       如果单个元素绑定事件，this->这个元素
			       如果多个元素绑定事件，this->当前触发事件元素}