js基础总计

js：javascript（ECMA+DOM+BOM）

JS是一个运行在js解释器中的一个解释类弱类型面向对象的脚本语言。

js打桩输出

在控制台输出日志：console.log(内容)
在页面输出：document.write（内容）
用警告框输出：alert（内容）

变量和常量

变量

简单来说就是一个值可以发生变化的数据
语法：var 变量名=变量值；

常量

一旦被创建后就不允许被修改了
语法：const 常量名=值；

算术运算符

加减乘除 %
%:取余，俗称模，两个数相处除，取余数。用来判断数字奇偶性。特殊

算术运算符具有隐式转换，默认为数字。“+”运算，如果碰到了一个字符串，两边都会变成为字符串，变成了一个拼接操作。
-*/%:其实字符串也能转为数字，但前提是一个纯数字组成的字符串，只要包含一个非数字字符，则为NaN；

数据类型

string-字符串：取值有无数个，但是必须写上“”或'';
number-数字：取值有无数个，直接书写数字；
Boolean-布尔值，取值只有两个，true和false；
undefined-变量如果声明了，但是没有赋值，就为undefined；
null-空，取值只有一个null，释放内存。

数据类型的转变

一切的页面上获取的数据类型都是字符串，查看数据类型typeof

隐式转换

算术运算符具有隐式转换，默认转为数字，在运算

特殊

不管是什么运算，只要没碰上字符串，都会转为数字。
+运算符碰上字符串，则为拼接。
-*%/,就算是字符串也可以转为数字，前提是是纯数字组成的字符串，但如果包含了一个非数字字符，则为nan。
NaN不等于大于小于任何值，包括自己，参加任何算术运算，结果仍为NaN。
因为NaN参与任何比较运算都为false，所以没办法用普通比较运算来判断x是不是NaN。解决办法：！isNaN（X）：此方法会将X隐式转换为数字。目的：防止用户恶意输入
特殊：1、如果参与比较的左右两边都是字符串，则是按位PK每个字符的十六进制unicode号（十进制ascii码） 0-9<A-Z<a-z<汉字：常识：汉字的第一个字：一：unicode：4E00 - ascii：19968 最后一个字：龥：unicode：9FA5 - ascii：40869

显式转换（强制转换）

隐式转换转换不是需求值，先强制转换 1. 转为字符串
var str=xx.tostring（）；不如+“ ”；
xx不能是undefined和null 2. 转为数字
parseInt（x）；解析为一个整数；执行原理：从左往右，依次读取每个字符，碰到非数字字符就停下来，不认识小数点，如果以来就不认识则为NaN。作用：去掉单位，300px。
parseFloat（x）；解析为一个Float；执行原理：几乎和Int一致，但是认识第一个小数点。
Number（x）；万能的，任何人都可以转为数字；此方法完全等效于隐式转换，不如-0 *1 /1； 3. 转为布尔值
boolean（x）；万能的，还不如：！！x；只有六个会为false：0，“”，undefined，null，NaN,false，其他都为true。在分支，循环的条件中，不管写什么，都会悄悄的隐式转换为布尔值，只需要考虑true或为false。

函数

Function：需要提前创建好的，以后可以反复使用的代码段 - 时机：要么程序员调用几次就执行几次，要么用户触发几次就执行几次
何时： 1.不希望打开页面立刻执行 2.希望可以反复执行 3.独立的功能体 - 每一个作业（轮播、选项卡、购物车、正则验证、数据渲染...） 4.函数调用完毕会自动释放内存
如何： 1、创建函数 function 函数名(形参,...){ 函数体; }

2、调用函数函数名(实参,...);
要不要带参数的函数具体看你自己：如果函数体是固定的，则不用如果函数体需要根据实参的不同，进行略微不同的操作，则需要带参数的函数
实参的个数以及顺序和形参的个数以及顺序都要一一对应。

分支结构

比较运算符：> < >= <= == !=

结果一定都是一个布尔值，注意：==才叫比较，=叫赋值。

逻辑运算符：

&&：全部满足，才满足；一个不满足，则不满足。
||：全部不满足，才不满足；一个满足，则满足。
!：颠倒布尔值
特殊：

短路逻辑：如果前一个条件，已经能够得出最后结论了，则不看后续

&&短路：如果前一个条件满足，才执行后续操作，如果前一个条件不满足，则不管后续操作

目的：简化【简单的】分支：

1、一个条件一件事满足就做，不满足就不做 if(){}

2、操作只能有一句话条件&&(操作);
```
  	  举例：原来：if(money>=500){money*=0.8};
  		现在：money>=500&&(money*=0.8);

  	||短路：浏览器兼容：二选一操作 
  		e=e||window.event;
```

以上的所有的运算符结果都是布尔值

if(条件){默认操作}
if(){}else{}
if(){}else if(){}else{}

循环

循环：反复执行相同或相似的代码 - 时机：程序员写好的，而且几乎就一瞬间做完了，其实一次一次执行的，只不过速度很快

   while(条件){
	操作;
	变量变化
   }
   死循环推荐用

for(var 变量=几;条件;变量变化){
	操作
   }
一般循环用

死循环：while(true){} for(;;){}

退出循环：break;

数组

数组：一个内存空间，可以保存多个数据

如何：

创建：var arr=[ ]; var arr=new Array();
访问：arr[i]; - 下标越界：undefined
添加：arr[i]=新值; - 下标越界：稀疏数组，下标不连续，遍历的时候就会得到很多很多的undefined
arr.length：获取数组的长度

三个固定套路：
1. 末尾添加：arr[arr.length]=新值;
1. 获取末尾第n个元素：arr[arr.length-n];
1. 缩容：arr.length-=n;

数组三大不限制：类型、长度、下标越界（缺点）
遍历数组：

for(var i=0;i<arr.length;i++){
        arr[i];//当前元素
		}

javascript的解释

ECMAScript - 核心语法

DOM：Document Object Model - 文档对象模型，专门用于操作文档（HTML）

DOM树：DOM将HTML看做了是一个倒挂的树状结构，树根：document对象，不需要创建 DOM将每一个【元素】、文本、属性、注释，都看为是一个DOM节点/元素/对象树根作用：找到任何元素，找到元素后就可以操作元素

查找元素

1. 通过 HTML 特性：

id：单个元素 - 没找到返回null
标签/class名：

var elems=document/parent.getElementsByTag/ClassName("标签/class名");

特殊： 1、DOM集合 - 不允许直接做操作的，要么加下标拿到某个，要么加遍历拿到所有

2、parent：你之前已经找到的某个父元素

3、没找到：[]

2. 通过关系：至少要找到一个人，才能使用关系网

                父元素：elem.parentNode;
		子元素：elem.children; - 集合
		第一个儿子：elem.firstElementChild;
		最后一个儿子：elem.lastElementChild;
		前一个兄弟：elem.previousElementSibling;
		后一个兄弟：elem.nextElementSibling;

操作元素

1. 内容：innerHTML(能识别标签)/innerText(纯文本)/value(专门为input准备的)

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

2. 属性：

获取属性值：elem.getAttribute("属性名") -> elem.属性名
设置属性值：elem.setAttribute("属性名","属性值") -> elem.属性名="属性值"
简化版有缺陷： 1、class写为className 2、自定义属性不能操作到

3. 样式：内联样式

获取：elem.style.css属性名
设置：elem.style.css属性名="css属性值";
特殊：1、css属性名有横线去掉横线变成小驼峰命名法 2、只能访问内联

获取用于判断，设置就是修改

绑定事件

单个元素： elem.onclick=function(){}

多个元素：

for(var i=0;i<elems.length;i++){
	elems[i].onclick=function(){}
		  }

this关键字：目前只能在【事件】中使用

单个元素绑定事件this->这个元素：绑定事件的这个元素

多个元素绑定事件this->当前元素：当前触发事件的元素

位运算

左移：m<<n，读作m左移了n位，翻译：m*2的n次方

右移：m>>n，读作m右移了n位，翻译：m/2的n次方

缺点：底数只能2

赋值运算

+= -= *= /= %=

一个操作两件事，先计算，在赋值回去。

	i++;//递增：每次只会固定+1
	i+=1;//累加：每次+几由我们程序员自己决定

	i++ === i+=1 === i=i+1;

	鄙视题：++i和i++的区别：
		单独使用，放前放后无所谓，效果一样。
		但是如果参与了别的表达式，变量中的值都会+1
			前++返回的是加了过后的新值
			后++返回的是加了之前的旧值

三木运算

简化if...else 简化if...else if...else

语法： 1、条件?操作1:默认操作;

2、条件1?操作1:条件2?操作2:条件3?操作3:默认操作;

特殊： 1、只能简化简单的分支 - 操作只能有一句话 2、默认操作不能省略

总结：

if === &&短路
if else === 三目
if else if else === 三目

Javascript基础整理