Heim > Artikel > Web-Frontend > Zusammenfassung der grundlegenden JS-Front-End-Wissenspunkte
Zusammenfassung der grundlegenden JS-Front-End-Wissenspunkte
- 小云云Original
- 2018-02-28 13:04:211274Durchsuche
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，ES6
3.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=1T
2.数据类型详解
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); //4
2.pop()
出栈，删除(删除栈顶数据)并返回删除元素 注意：改变原来数组
3.shift()
删除数组头部（第一个）的元素并返回删除元素 语法：数组名.shift();
4.unshift()
在数组的头部（第一个）元素的位置处，增加元素,返回的是数组的长度。 语法：数组名.unshift(增加的数据);
3.二维数组
1.什么是二维数组
在一个数组中的元素又是一个数组，也可以称为：数组的数组。
2.二维数组的使用
var names=[ ["孙悟空","猪八戒","沙和尚"], ["大乔","小乔","曹操"], ["林黛玉","贾宝玉","薛宝钗"] ]; //打印输出“小乔” console.log(names[1][1]);
相关推荐：
Das obige ist der detaillierte Inhalt vonZusammenfassung der grundlegenden JS-Front-End-Wissenspunkte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS-Implementierungscode für den einfachen Webseiten-FortschrittsbalkenNächster Artikel：JS-Implementierungscode für den einfachen Webseiten-Fortschrittsbalken