前端知识点总结——JS基础
1.javascript概述(相识)
1.什么是javascript
javascript简称为js，是一种运转于js诠释器/引擎中的剧本言语
js的运转环境：
1.自力装置的js诠释器（node）
2.嵌入在浏览器内核中的js诠释器2.js的发展史
1.1992年Nombas公司为本身开发了一款剧本言语SciptEase
2.1995年Netscape(网景)开发了一款剧本言语LiveScrpt,厥后改名javascript
3.1996年Microsoft在IE3.0版本中克隆javascript，JScript
4.1997年，javascript提交给ECMA(欧洲盘算机制造商联合会)。定义ECMAScript,简称ES5，ES63.js构成部份
1.中心（ECMAScript）
2.DOM (Document object model)文档对象模子
3.BOM (Browser object model)浏览器对象模子4.js的特性
1.语法类似于c,java
2.无需编译，由js诠释器直接运转
3.弱范例言语
4.面向对象的
2.JavaScript的基础语法
1.运用javascript
1.搭建运转环境
1.自力装置的JS诠释器-NodeJS
1.在命令行界面：输入node
console.log("你好，天下");
在掌握台打印输出
申明：js是能够自力在js诠释器中运转
2.运用浏览器内核中嵌的js诠释器
浏览器内核担任页面内容的衬着，由两部份构成：
内容排版引擎-剖析：HTML/CSS
剧本诠释引擎-剖析：javascript
1.直接在Console（掌握台）中输入剧本并运转
2.将js剧本嵌入在HTML页面中实行
1.html元素的事宜中实行js剧本
事宜-onclick-鼠标单击时要实行的操纵
2.在<script>中编写剧本并实行
网页的任何位置处，嵌入一对<script>标记，而且将剧本编写在<script>标记中。
3.运用外部剧本文件(.js为后缀)
1.建立剧本文件（.js）并在文件中编写剧本
2.在运用的网页中援用剧本文件
<script src="剧本文件的url"></script>
3.js调试，F12检察毛病，失足时不影响别的代码块，后续代码继承实行。
<script>
/*这个剧本毛病*/
document.writ("<h3>周芷若</h3>");
</script>
<script>
/*继承实行*/
console.log("金花婆婆");
</script>
3.经由过程语法范例
1.语句：可实行的最小单位
必需以;完毕
严厉辨别大小
一切的标记必需是英文
2.解释:
// :单行解释
/**/:多行解释
3.变量和常量
1.变量声明
1.声明变量
var 变量名;
2.为变量赋值
变量名=值;
3.声明变量是直接赋值
var 变量名=值;
ex：
var uname="张无忌";
var age=20;
注重：
1.许可在一条语句中声明多个变量，用逗号离隔变量名。
var uname="韩梅梅",uage=20;
2.假如声明变量，但未赋值，则值默以为undefined
3.声明变量时能够不实用var,但不引荐
uname="tom";2.变量名的范例
1.不许可以数字开首
2.不许可运用关键词和保留关键字
3.最好见名知意
var uname; var uage;
4.许可包括字母，数字，下划线(_),$
var $name="Tom";
5.只管运用小驼峰定名法
var userName;
var uname;
var _uname;//下划线
var user_name;//下划线
var UserName;//大驼峰定名法
4.变量的运用
1.声明变量未赋值，值默以为undefined
2.运用未声明过的变量 报错
3.赋值操纵
变量名出如今=的左侧，一概是赋值操纵
var uname="林妹妹";
4.取值操纵
变量只需没出如今=的左侧，一概是取值操纵
var uage=30;
console.log(uage);
var num1=uage;
5.常量
1.什么是常量
在递次中，一经声明就不许可被修正的数据就是常量。
2.语法
const 常量名=值;
常量名在递次中，一般采纳大写情势。
const PI=3.1415926;
5.1数据范例
1.数据范例的作用
划定了数据在内存中所占的空间
10.1 64位 8个字节
bit:位
8bit=1byte字节
1024byte=1KB
1024KB=1MB
1024MB=1G
1024G=1T2.数据范例详解
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进制输出
"李".charCodeAt().toString(2);
//二进制输出
"李".charCodeAt().toString(16);
//十六进制
李的unicode码是：674e
2.如何将674e转换为汉字？
用\u
ex:
var str="\u674e";
console.log(str);//效果是“李”
汉字的Unicode码的局限：
\u4e00~\u9fa5
3.特别字符须要转义字符
\n: 换行
\t: 制表符（缩进）
\": "
\': '
\\: \
3.Boolean范例
布尔范例
作用：在递次中示意真或假的效果
取值：
true或false
var isBig=true;
var isRun=false;
在介入到数学运算时，true能够当作1做运算，false能够当作0做运算。
var res=25+true; //效果为26
4.Undefined范例
作用：示意运用的数据不存在
Undefined范例只要一个值,即undefined当声明的变量未赋值（未初始化）时，
该变量的默许值就是undefined.
5.Null范例
null用于示意不存在的对象。
Null范例只要一个值，即null,假如函数或要领要返回的是对象，
找不到该对象，返回的就是null。
5.2数据范例的转换
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()
将恣意范例的数据转换为整数
假如转换不成功，效果为NaN(Not a Number)
语法：var result=parseInt(数据);
3.parseFloat()
将恣意范例的数据转换为小数
假如转换不成功，效果为NaN
语法：var result=parseFloat(数据);
4.Number()
将恣意范例数据转为Number范例
注重：假如包括不法字符，则返回NaN
语法：var result=Number(数据);
6.运转符和表达式
1.什么是表达式
由运算符衔接操纵数所构成的式子就是表达式。
ex：
15+20
var x=y=40
任何一个表达式都邑有用果。2.运算符
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,全部表达式的效果为true
||:或许，关联的两个前提，只需有一个前提为true,全部表达式的效果就为true
短路逻辑：
短路逻辑&&：
当第一个前提为false时，团体表达式的效果就为false,不须要推断第二个前提
假如第一个前提为true,会继承推断或实行第二个前提
短路逻辑||：
当第一个前提为true时，就不再实行后续表达式，团体效果为true。
当第一个前提为false时，继承实行第二个前提或操纵。
4.位运算符
<<,>>,&,|,^
右移是把数变小，左移是把数变大
&：按位与，推断奇偶性
恣意数字与1做按位与，效果为1，则为奇数，效果为0，则为偶数。
var num=323;
var result=num & 1
console.log(result); //效果为1
|：按位或，对小数取整
将恣意小数与0做按位或，效果则取整数部份。
^：按位异或，用于交流两个数字
二进制位数，逐位比较，差别则为1，雷同则为0
a=a^b;
b=b^a;
a=a^b;
5.赋值运算符和扩大赋值运算符
1.赋值运算 =
var uname="TOM";
2.扩大赋值运算符
+=,-=,*=,/=,%=,^=...
a=a+1 a+=1;a++;++a
a=a^b
a^=b
6.前提（三目）运算符
单目（一目）运算符，只须要一个操纵数或表达式
ex: a++,b--,!isRun
双目（二元）运算符，须要两个操纵数或表达式
+，-，*，/，%，>,<,>=,<=,==,!=,===,!==,&&,||,&,|,^
三目（三元）运算符，须要三个操纵数或表达式
前提表达式？表达式1:表达式2;
先推断前提表达式的值，
假如前提为true,则实行表达式1的操纵
假如前提为false,则实行表达式2的操纵
ex:结果大于60合格，不然，输出不合格
7.函数-function
1.什么是函数
函数，function,也称为要领（method）
函数是一段预定义好，并能够被重复实行的代码块。
预定义：提早定义好，并不是立时实行。
代码块：能够包括多条可实行的语句
重复实行：许可被屡次挪用
函数-功用
parseInt();
parseFloat();
Number();
console.log();
alert();
document.write();2.定义和运用函数
1.一般函数的声明和挪用（无参数无返回值）
1.声明
function 函数名(){
//函数体
多少可实行的语句
}
2.挪用函数
在恣意javascript正当的位置处经由过程 函数名(); 对函数举行挪用。
2.带参函数的声明和挪用
1.声明
function 函数名(参数列表){
//函数体
}
参数列表：能够声明0或多个参数，多个参数间用逗号离隔
声明函数时，声明的参数，称之为“形参”
2.挪用
函数名(参数值列表);
注重：挪用函数时，通报的参数数值，称之为“实参”。
只管根据声明函数的花样举行挪用
3.带返回值函数声明和挪用
1.声明
function 函数名(参数){
//函数体
return 值;
//return关键字，递次遇到return关键词，就立马跳出而且把值带出去
}
注重：最多只能返回一个值
2.挪用
许可运用一个变量吸收函数的返回值
var result=函数名(实参);
8.作用域
1.什么是作用域
作用域示意的是变量或函数的可接见局限。
JS中的作用域分两种：
1.函数作用域
只在函数局限内有用
2.全局作用域
代码的任何位置都有用2.函数作用域中变量
又称为部分变量，只在声明的函数中有用
ex：
function test(){
var num=10;
}
3.全局作用域中的变量
又称为全局变量，一经声明，任何位置都能用
1.不在function中声明的变量，为全局变量
2.声明变量不运用var，不管任何位置声明，都是全局变量（不引荐）
注重：
全局变量和部分变量争执时，优先运用部分变量。
3.变量的声明提早
1.什么是声明提早
在JS递次正式实行之前，function声明的函数，
会将一切var声明的变量，都预读（声明）到地点作用域的顶部，但赋值照样保留在原位。
9.按值通报
1.什么是按值通报
原始（基础）范例的数据（number,string,bool）,在做参数通报时，
都是根据“值通报”的体式格局举行传参的。
值通报：真正通报参数时，实际上通报的是值的副本（复制出来一个值），
而不是原始值。2.函数的作用域
1.分为两种
1.部分函数
在某个function中声明的函数。
2.全局函数
在最外层(<script>中)定义的函数就是全局函数，全局函数一经定义，
任何位置处都能挪用。
10.ECMAScript供应一组全局函数
1.parseInt()
2.parseFloat()
3.isNaN()
4.encodeURI()
URL:uniform resource locator途径
URI:uniform resource Identifier
作用：对一致资本标识符举行编码，并返回编码后的字符串
所谓的举行编码，就是将地点中的多字节笔墨编成单字节的笔墨
（英文数字：单字节，汉字2-3字节不等）5.decodeURI()
作用：对已编码的URI举行解码，并返回解码后的字符串。6.encodeURIComponent()
在encodeURI的基础上，许可对特别标记举行编码。7.decodeURIComponent()
解码特别标记8.eval()
作用：实行以字符串示意的js代码
11.递归挪用
递归：在一个函数的内部再一次挪用本身
题目：
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)！
效力：
在本次挪用还未完毕时，就最先下次的挪用，本次挪用就会被挂起，
直到一切的挪用都完成以后，才会顺次返回，挪用的次数越多，效力越低。
12.分支构造
1.if构造
if(前提){
语句块；
}
注重：
前提只管是boolean的，假如不是boolean,以下状况会当作false处置惩罚
if(0){...}
if(0.0){...}
if(""){...}
if(undefined){...}
if(null){...}
if(NaN){...}
注重：if后的{}能够省略，然则不引荐，只掌握if后的第一句话。
2.if…else…构造
语法：
if(前提){
语句块
}else{
语句块
}3.if….else if…else…
语法：
if(前提1){
语句块1
}else if(前提2){
语句块2
}else if(前提3){
语句块3
}else{
语句块n
}
4.switch…case
1.作用：（运用场所）
等值推断
2.语法
1.switch(值/表达式){
case 值1：
语句块1；
break;//完毕switch构造，可选的
case 值2：
语句块2；
break;
...
default:
语句块n；
break;
}
2.特别用法
实行雷同操纵时：
switch(值/表达式){
case 值1：
case 值2：
case 值3：
语句块；
}
12.轮回构造
1.特性
1.轮回前提：轮回的最先和完毕
2.轮回操纵：要实行的雷同或类似的语句2.轮回-while
语法：
while(前提){
//轮回体-轮回操纵
//更新轮回前提
}
3.轮回的流程掌握
1.break
作用：停止全部轮回的运转
2.continue
作用：停止本次轮回的运转，继承实行下一次轮回
ex:
轮回从弹出框中录入信息，而且打印，直到输入exit为止。
4.轮回-do…while
1.语法
do{
//轮回体
}while(前提);
实行流程：
1.先实行轮回体
2.再推断轮回前提
假如前提为真，则继承实行轮回体
假如前提为假，则跳出轮回操纵
5.轮回-for
语法：
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);
}
13.for的特别用法
1.for(表达式1;表达式2;表达式3;){}
1.省略表达式
三个表达式能够恣意省略，分号不能省
但一定在轮回的内部或外部将表达式补充完全
2.表达式1和表达式3 许可写多个表达式，用逗号离隔表达式
14.轮回嵌套
1.轮回嵌套
在一个轮回的内部，又涌现一个轮回
for(var i=1;i<100;i++){ //外层轮回
for(var j=1;j<=10;j++){
//内层轮回
}
}
外层轮回走一次，内层轮回走一轮
15.数组
1.什么是数组
在一个变量中保留多个数据。
数组是根据线型递次来分列的-线型构造
数组中：除了第一个元素外，每一个元素都有一个直接的"先驱元素"。
数组中：除了末了一个元素外，每一个元素都有一个会直接的"后继元素"。2.声明数组
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("林黛玉","贾宝玉","王熙凤");
3.数组的运用
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";
16.关联数组
1.关联数组
以字符串作为元素的下标的数组，就是关联数组。
以数字作为下标的数组，就是索引数组。
$array=["name"=>"tom"]
2.js中的关联数组
var array=[];
array["字符串下标"]=值;
注重：
1.关联数组中，字符串下标的内容是不记录到length中的
2.只能经由过程 字符串 做下标取值
3.for...in
遍历出恣意数组中的字符串下标 以及 索引下标
语法：for(var 变量 in 数组名){
//变量：字符串下标 或 索引下标
}
17.冒泡排序
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]
18.数组的经常使用要领
1.toString();
作用：将数组转换为字符串，并返回转换后的效果。
语法： var str=数组对象.toString();2.join()
作用：将数组的元素经由过程指定的字符衔接到一同，并返回衔接后字符串
语法：var str=数组对象.join("字符");3.concat()
作用：拼接两个或更多的数组，并返回拼接后的效果
语法：var res=数组对象.concat(数组1,数组2,...);
19.数组的函数
1.slice()
作用：截取子数组，从指定的数组中，截取几个一连的元素构成一个新的数组
语法：var arr=数组名.slice(start,[end]);
start:从哪一个下标位置处最先截取，取值为正，夙昔向后算；
取值为负，从后向前算 0 1 2
var arr=["中国","美国","俄罗斯"];
-3 -2 -1
end:指定完毕位置处的下标（不包括本身），该参数能够省略，
假如省略的话，就是从strat最先一向截取到尾。2.splice()
作用：许可从指定数组中，删除一部份元素，同时再增加一部份元素
语法：arr.splice(start,count,e1,e2...);
start:指定增加或删除元素的肇端下标
count:指定要删除元素的个数，取值为0示意不删除
e1:要增添的新元素，能够多个
返回值：返回一个由删除元素所构成的数组3.reverse()
作用：将一个数组反转
语法：数组名.reverse();
注重：该函数会转变当前数组的内容4.sort()
作用：排序，默许状况下根据数组元素们的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;
}
)
20.收支栈操纵
JS是根据规范的“栈式操纵”来接见数组
一切的“栈式操纵”的特性就是“后进先出”
1.push()
入栈，在栈顶增加指定的元素，并返回新数组的长度
var arr=[10,20,30];
//向栈顶增添新的数据40
var len=arr.push(40); //42.pop()
出栈，删除(删除栈顶数据)并返回删除元素
注重：转变本来数组3.shift()
删除数组头部（第一个）的元素并返回删除元素
语法：数组名.shift();4.unshift()
在数组的头部（第一个）元素的位置处，增添元素,返回的是数组的长度。
语法：数组名.unshift(增添的数据);3.二维数组
1.什么是二维数组
在一个数组中的元素又是一个数组，也能够称为：数组的数组。2.二维数组的运用
var names=[
["孙悟空","猪八戒","沙和尚"],
["大乔","小乔","曹操"],
["林黛玉","贾宝玉","薛宝钗"]
];
//打印输出“小乔”
console.log(names[1][1]);
