JS基础前端知识点总结

javascript简称为js，是一种运行于js解释器/引擎中的脚本语言
js的运行环境：
1.独立安装的js解释器（node）
2.嵌入在浏览器内核中的js解释器

1.1992年Nombas公司为自己开发了一款脚本语言SciptEase
2.1995年Netscape(网景)开发了一款脚本语言LiveScrpt,后来更名javascript
3.1996年Microsoft在IE3.0版本中克隆javascript，JScript
4.1997年，javascript提交给ECMA(欧洲计算机制造商联合会)。定义ECMAScript,简称ES5，ES6

1.核心（ECMAScript）
2.DOM (Document object model)文档对象模型
3.BOM (Browser object model)浏览器对象模型

1.语法类似于c,java
2.无需编译，由js解释器直接运行
3.弱类型语言
4.面向对象的

1.搭建运行环境
 1.独立安装的JS解释器-NodeJS
 1.在命令行界面：输入node
 console.log("你好，世界");
 在控制台打印

1.声明变量
 var 变量名;
2.为变量赋值
 变量名=值;
3.声明变量是直接赋值
 var 变量名=值;
 ex：
 var uname="张无忌";
 var age=20;
 注意：
 1.允许在一条语句中声明多个变量，用逗号隔开变量名。
 var uname="韩梅梅",uage=20;
 2.如果声明变量，但未赋值，则值默认为undefined
 3.声明变量时可以不适用var,但不推荐
 uname="tom";

1.不允许以数字开头
2.不允许使用关键词和保留关键字
3.最好见名知意
 var uname; var uage;
4.允许包含字母，数字，下划线(_),$
 var $name="Tom";
5.尽量使用小驼峰命名法
 var userName;
 var uname;
 var _uname;//下划线
 var user_name;//下划线
 var UserName;//大驼峰命名法

1.声明变量未赋值，值默认为undefined
2.使用未声明过的变量 报错
3.赋值操作
 变量名出现在=的左边，一律是赋值操作
 var uname="林妹妹";
4.取值操作
 变量只要没出现在=的左边，一律是取值操作
 var uage=30;
console.log(uage);
var num1=uage;

1.什么是常量
 在程序中，一经声明就不允许被修改的数据就是常量。
2.语法
 const 常量名=值;
 常量名在程序中，通常采用大写形式。
 const PI=3.1415926;

规定了数据在内存中所占的空间
10.1 64位 8个字节
bit:位
8bit=1byte字节
1024byte=1KB 
1024KB=1MB
1024MB=1G 
1024G=1T

1.数据类型分两大类
 原始类型（基本类型）
 引用类型
 1.原始类型
 1.Number 类型
 数字类型
 作用：可以表示32位的整数，也可以表示64位的浮点数（小数）
 整数：
 1.十进制
 10 
 2.八进制
 由0-7八个数字组成，逢八进一
 八进制中以0开始
 var num=010;
 3.十六进制
 由0-9和A-f组成，逢十六进一
 A:10
 B:11
 C:12
 D:13
 E:14
 F:15
 十六进制中以0X开始
 浮点数：又称小数
 小数点计数法：12.58 
 指数计数法：3.4e3（3.4*10的3次方）
2.String类型
 字符串类型
 作用：表示一系列的文本字符数据，如：姓名，性别，住址...
 字符串中的每个字符，都是由Unicode码的字符，标点和数字组成。
 Unicode码:每个字符在计算机中都有一个唯一的编码表示该字符，
 该码就是unicode码（他是十六进制）
 1.查找一个字符的unicode码：
 "李".charCodeAt();
 //10进制

1.隐式（自动）转换
 不同类型的数据在计算过程中自动进行转换
 1.数字+字符串：数字转换为字符串
 var num=15;
var str="Hello";
var res=num+str; //结果：15Hello
 2.数字+布尔：将布尔转换为数字true=1,false=0
 var num1=10;
var isSun=true;
var res1=num1+isSun;//结果：11
 3.字符串+布尔：将布尔转换为字符串
 var str1="Hello";
var isSun1=true;
var res2=str1+isSun1;//结果：Hellotrue
 4.布尔+布尔：将布尔转换为数字
 true=1,false=0;
 var isSun2=true;
var isSun3=flase;
var res=isSun2+isSun3;//结果1
2.强制转换 -转换函数
 1.toString()
 将任意类型的数据转换为字符串
语法：
 var num=变量.toString();
 ex:
 var num=15;
 var str=num.toString();
 console.log(typeof(str));
 2.parseInt()
 将任意类型的数据转换为整数
如果转换不成功，

由运算符连接操作数所组成的式子就是表达式。
ex：
 15+20
 var x=y=40
任何一个表达式都会有结果。

1.算术运算符
 +，-，*，/，%，++，--

 5%2=1;
 ++:自增运算，只做+1操作
 ++在前：先自增，再运算；
 ++在后：先运算，再自增；
 ex:
 var num=5;
console.log(num++);//打印5，变为6
console.log(++num);//变为7，打印7

ex:
 var num=5;
 5 (6)6 6(7) (8)8
 var res=num+ ++num +num++ + ++num +num++ +num; 
 8(9) 9
结果：42
2.关系运算符（比较）
 >,<,>=,<=,==,===(全等),!=,!==(不全等)
 关系运算的结果：boolean类型（true,false）
 问题：
 1. 5 > "10" 结果：false
 关系运算符两端，只要有一个是number的话，另外一个会隐式转换为number类型，再进行比较。
2."5">"1 0" 结果：true
 "5".charCodeAt(); //53
 "1".charCodeAt(); //49
 "张三丰" > "张无忌" 结果：false
 19977 > 26080
3."3a" > 10 结果：false
 Number("3a")--->NaN
 注意：
 NaN与任何一个数据做比较运算时，结果都是false.
 console.log("3a">10); false
 console.log("3a"==10); false
 console.log("3a"<10); false
 isNaN()函数：
 语法：isNaN(数据);
 作用：判断指定数据是否为非数字，如果不是数字，返回值为true,是数字的话返回的值为false
 console.log(isNaN("3")); //false
 console.log(isNaN("3a")); //ture 

 console.log("3a"!=10);//true
3.逻辑运算符
 !,&&,||

 !:取反
 &&：并且，关联的两个条件都为true,整个表达式的

函数，function,也称为方法（method）
函数是一段预定义好，并可以被反复执行的代码块。
 预定义：提前定义好，并非马上执行。
 代码块：可以包含多条可执行的语句
 反复执行：允许被多次调用
函数-功能
 parseInt();
 parseFloat();
 Number();
 console.log();
 alert();
 document.write();

1.普通函数的声明和调用（无参数无返回值）
 1.声明
 function 函数名(){
 //函数体
 若干可执行的语句
 
}
 2.调用函数
 在任意javascript合法的位置处通过 函数名(); 对函数进行调用。
 

2.带参函数的声明和调用
 1.声明
 function 函数名(参数列表){
 //函数体
}
参数列表：可以声明0或多个参数，多个参数间用逗号隔开
声明函数时，声明的参数，称之为“形参”
 2.调用
 函数名(参数值列表);
 注意：调用函数时，传递的参数数值，称之为“实参”。
 尽量按照声明函数的格式进行调用
3.带返回值函数声明和调用
 1.声明
 function 函数名(参数){
 //函数体
 return 值;
 //return关键字，程序碰到return关键词，就立马跳出并且把值带出去
}
注意：最多只能返回一个值
 2.调用
 允许使用一个变量接收函数的返回值
 var result=函数名(实参);

1.什么是作用域
 作用域表示的是变量或函数的可访问范围。
 JS中的作用域分两种：
 1.函数作用域
 只在函数范围内有效
 2.全局作用域
 代码的任何位置都有效

 又称为局部变量，只在声明的函数中有效
 ex：
 function test(){
 var num=10;
 }

 又称为全局变量，一经声明，任何位置都能用
 1.不在function中声明的变量，为全局变量
 2.声明变量不使用var，无论任何位置声明，都是全局变量（不推荐）

 注意：
 全局变量和局部变量冲突时，优先使用局部变量。
 3.变量的声明提前
 1.什么是声明提前
 在JS程序正式执行之前，function声明的函数，
 会将所有var声明的变量，都预读（声明）到所在作用域的顶部，但赋值还是保留在原位。

原始（基本）类型的数据（number,string,bool）,在做参数传递时，
都是按照“值传递”的方式进行传参的。
值传递：真正传递参数时，实际上传递的是值的副本（复制出来一个值），
而不是原始值。

1.分为两种
 1.局部函数
 在某个function中声明的函数。
 2.全局函数
 在最外层(<script>中)定义的函数就是全局函数，全局函数一经定义，
 任何位置处都能调用。

URL:uniform resource locator路径
URI:uniform resource Identifier
作用：对统一资源标识符进行编码，并返回编码后的字符串
所谓的进行编码，就是将地址中的多字节文字编成单字节的文字
（英文数字：单字节，汉字2-3字节不等）

作用：对已经编码的URI进行解码，并返回解码后的字符串。

在encodeURI的基础上，允许对特殊符号进行编码。

解码特殊符号

作用：执行以字符串表示的js代码

 1*2*3*4*5
 
 5*4*3*2*1
 求5!(5*4*3*2*1) 4!(4*3*2*1) 3!(3*2*1)
 2!(2*1) 1!(1*1)

 5!=5*4!
 4!=4*3!
 3!=3*2!
 2!=2*1!
 1!=1
 通过一个函数，求数字n的阶乘
 10！=10*(10-1)！
 效率：
 在本次调用还未结束时，就开始下次的调用，本次调用就会被挂起，
 直到所有的调用都完成之后，才会依次返回，调用的次数越多，效率越低。

if(条件){
 语句块；
}
注意：
 条件尽量是boolean的，如果不是boolean,以下情况会当做false处理
 if(0){...}
 if(0.0){...}
 if(""){...}
 if(undefined){...}
 if(null){...}
 if(NaN){...}
注意：if后的{}可以省略，但是不推荐，只控制if后的第一句话。

语法：
 if(条件){
 语句块
 }else{
 语句块
 }

语法：
 if(条件1){
 语句块1
 }else if(条件2){
 语句块2
 }else if(条件3){
 语句块3
 }else{
 语句块n
 }

1.作用：（使用场合）
 等值判断
2.语法
 1.switch(值/表达式){
 case 值1：
 语句块1；
 break;//结束switch结构，可选的
 case 值2：
 语句块2；
 break;
 ...
 default:
 语句块n；
 break;
 }
 2.特殊用法
 执行相同操作时：
 switch(值/表达式){
 case 值1：
 case 值2：
 case 值3：
 语句块；
 }

1.循环条件：循环的开始和结束
2.循环操作：要执行的相同或相似的语句

语法：
 while(条件){
 //循环体-循环操作
 
 //更新循环条件
 }

1.break
 作用：终止整个循环的运行
2.continue
 作用：终止本次循环的运行，继续执行下一次循环
 ex:
 循环从弹出框中录入信息，并且打印，直到输入exit为止。

1.语法
 do{
 //循环体
 }while(条件);

 执行流程：
 1.先执行循环体
 2.再判断循环条件
 如果条件为真，则继续执行循环体
 如果条件为假，则跳出循环操作

语法：
 for(表达式1;表达式2;表达式3){
 //循环操作
 }
 表达式1：循环条件的声明
 表达式2：循环条件的判断
 表达式3：更新循环变量
 执行流程：
 1.先执行表达式1
 2.判断表达式2的结果(boolean类型)
 3.如果2条件为真，则执行循环体，否则退出
 4.执行完循环体后，再执行表达式3
 5.判断表达式2的结果
 ex: for(var i=1;i<=10;i++){
 console.log(i);
 }

1.省略表达式
 三个表达式可以任意省略，分号不能省
 但一定在循环的内部或外部将表达式补充完整
2.表达式1和表达式3 允许写多个表达式，用逗号隔开表达式

在一个循环的内部，又出现一个循环
 for(var i=1;i<100;i++){ //外层循环
 for(var j=1;j<=10;j++){
 //内层循环
 }
 }
 外层循环走一次，内层循环走一轮

在一个变量中保存多个数据。
数组是按照线型顺序来排列的-线型结构
数组中：除了第一个元素外，每个元素都有一个直接的"前驱元素"。
数组中：除了最后一个元素外，每个元素都有一个会直接的"后继元素"。

1.语法
 1.var 数组名=[];
 var names=[];
 2.var 数组名=[元素1,元素2,元素3...];
 var names=["孙悟空","猪八戒","沙和尚"];
 3.var 数组名=new Array();
 var names=new Array();
 4.var 数组名=new Array(元素1，元素2...);
 var names=new Array("林黛玉","贾宝玉","王熙凤");

1.取值和赋值操作
 取值：
 数组名[下标]
 var newArr=["tom","lilei"];
 newArr[0]
 赋值：
 数组名[下标]=值；
 newArr[2]="韩梅梅";
2.获取数组的长度
 数组长度：数组中元素的个数
 属性：length
 语法：数组名.length
3.配合循环，遍历数组中的每个元素
 for(var i=0;i<names.length;i++){
 i:表示数组中每个元素的下标
 names[i]:每个元素
 }
 
 length表示数组中即将要插入的元素的下标
 var names=["tom","lili","lucy"];
 names[names.length]="lilei";

1.关联数组
 以字符串作为元素的下标的数组，就是关联数组。
 以数字作为下标的数组，就是索引数组。
$array=["name"=>"tom"]
2.js中的关联数组
 var array=[];
 array["字符串下标"]=值;
 注意：
 1.关联数组中，字符串下标的内容是不记录到length中的
2.只能通过 字符串 做下标取值
3.for...in
 遍历出任意数组中的字符串下标 以及 索引下标
 语法：for(var 变量 in 数组名){
 //变量：字符串下标 或 索引下标
 }

1.什么是冒泡
 排序算法之一，将一组数据进行排序，小的数字往前排，大的数字往后排。
 两两比较，小的靠前。
 var arr=[9,23,6,78,45]; 5个数 比4轮
 第一轮：比较了4次
 第二轮：比较了3次
 第三轮：比较了2次
 第四轮：比较了1次
 1.n个数字，则比较n-1轮
 for(var i=1;i<arr.length;i++)
 2.轮数增加，比较的次数较少
 for(var j=0;j<arr.length-i;j++)
 第一轮 5 -1=4次
 第二轮 5 -2=3次
 第三轮 5 -3=2次
 第四轮 5 -4=1次
 两两比较 小的靠前
 if(arr[j]>arr[j+1])

 arr[j]^=arr[j+1];
 arr[j+1]^=arr[j];
 arr[j]^=arr[j+1]

作用：将数组转换为字符串，并返回转换后的结果。
语法： var str=数组对象.toString();

作用：将数组的元素通过指定的字符连接到一起，并返回连接后字符串
语法：var str=数组对象.join("字符");

作用：拼接两个或更多的数组，并返回拼接后的结果
语法：var res=数组对象.concat(数组1,数组2,...);

作用：截取子数组，从指定的数组中，截取几个连续的元素组成一个新的数组
语法：var arr=数组名.slice(start,[end]);
 start:从哪个下标位置处开始截取，取值为正，从前向后算； 
 取值为负，从后向前算 0 1 2
 var arr=["中国","美国","俄罗斯"];
 -3 -2 -1 
 end:指定结束位置处的下标（不包含自己），该参数可以省略，
 如果省略的话，就是从strat开始一直截取到尾。

作用：允许从指定数组中，删除一部分元素，同时再添加一部分元素
语法：arr.splice(start,count,e1,e2...);
 start:指定添加或删除元素的起始下标
 count:指定要删除元素的个数，取值为0表示不删除
 e1:要增加的新元素，可以多个
 返回值：返回一个由删除元素所组成的数组

作用：将一个数组反转
语法：数组名.reverse();
注意：该函数会改变当前数组的内容

作用：排序，默认情况下按照数组元素们的Unicode码进行升序排序。
语法：数组名.sort();
特殊：
 允许自定义排序函数，从而实现对数字的升序或降序的排序
 ex:
 var arr=[12,6,4,115,78];
 //排序函数（升序）
 function sortAsc(a,b){
 return a-b;
 }
 arr.sort(sortAsc);
 原理：
 1.指定排序行数sortAsc，定义两个参数a和b，表示数组中相邻的两个数字
2.将排序函数指定给数组sort()函数，数组会自动传递数据到sortAsc()中，
 如果sortAsc()的返回值>0，则交互两个数字的位置，否则不变。
 使用函数完成升序排序：
 arr.sort(
 function(a,b){ //匿名函数
 return a-b;
 }
 )

入栈，在栈顶添加指定的元素，并返回新数组的长度
 var arr=[10,20,30];
 //向栈顶增加新的数据40
 var len=arr.push(40); //4

出栈，删除(删除栈顶数据)并返回删除元素
注意：改变原来数组

删除数组头部（第一个）的元素并返回删除元素
语法：数组名.shift();

在数组的头部（第一个）元素的位置处，增加元素,返回的是数组的长度。
语法：数组名.unshift(增加的数据);

在一个数组中的元素又是一个数组，也可以称为：数组的数组。

var names=[
 ["孙悟空","猪八戒","沙和尚"],
["大乔","小乔","曹操"],
["林黛玉","贾宝玉","薛宝钗"]
];
 //打印