前端之JavaScript篇

  • A+
所属分类：Web前端
摘要

 javaScript是一种脚本语言，主要由下面三部分组成：注意：ES6是指ECMAScript 6。
便宜好用的国外VPS推荐

JavaScript

 javaScript是一种脚本语言，主要由下面三部分组成：

  • 核心（ECMAScript)
  • 文档对象模型（DOM)  Document object model(整合js，css，html)
  • 浏览器对象模型（BOM) Broswer object model（整合js和浏览器）

注意：ES6是指ECMAScript 6。

JavaScript引入方式

//第一种，在Script标签内写代码 <script>      js代码 </script>  //第二种，直接引入js文件 《script src="myscript.js"></script>

JavaScript语言规范

//  这是单行注释 /* 多行注释 */  //结束符 是以分号为结束符号 ；

JavaScript语言基础（与python做对比）

变量声明

1、js的变量名可以使用字母、数字、_、$组成，同样不能用数字开头

2、用var、let (let是ES6后才支持的）来声明变量

3、不能用关键字作为变量名

4、声明常量用const，一旦声明，该值就不能改变（ES6新增）

var userName='json' let id='111' const PI=3.14

注意：变量名是区分大小写的

　　　 js推荐使用驼峰式命名规则：如userName

　　    pyton 则推荐用_下划线命名规则：如user_name

var、let的区别：

　　var 声明的都是全局变量，全局变量容易受影响

　　let 声明的是局部变量，所以let可以区分

JavaScript数据类型

js跟python一样，都是拥有动态类型：

>var x; >var x=1; >var x='alex' >x
<alex

数值类型（Number)

js不区分整形和浮点型，就只用number这一种类型

var a=11 var b=11.11 typeof b <number //注意NaN也是number类型 typeof NaN <number //NaN 表示不是一个数字

类型转换

parseInt('111') //返回 111 parseFloat('11.11')  //返回11.11 parseInt('11sagljks') //返回11，如果是小数字符串则返回整数部分，如11.11返回11 parseInt("aljgla")  //返回NaN //总结：只要是数字开头就可以转换，否则会报错

字符串类型（String）

js 支持单引号、双引号，但是不止三引号

python支持引号、双引号、三引号

字符串的拼接：

　　js推荐直接用+做拼接　

　　python 推荐用join做拼接

var a="json"; var a1='pytoh'; var a2='''hello'''  //不支持  //模板字符串 var aa=`     my name is ${a1} , ${a2}world ` //返回 my name is pytoh ,hello world
//注意：${}会自动去前面寻找大括号内变量名对应的值，如果找不到，则会报错。

 字符串常用的方法：

js方法 说明 python
.length 返回长度 .len()
.trim()  移除空白  strip()
.trimLeft() 移除左边空白   lstrip()
.trimRight() 移除右边空白   rstrip()
.charAt(n) 返回第n个字符   
.concat(value,...)  拼接 join ()
.indexOf(substring,start)  子序列位置  index()
.substring(from,to)  根据索引获取子序列 []索引取值 
.slice(start.end)  切片 [] 
 .toLowerCase()  小写 lower() 
 .toUpperCase()  大写 upper() 
 .split(delimiter,limit)  分割  split()

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

h="hellowold" h.length >9  h1=" hell " h1.trim() >"hell" h1.trimLeft() >"hell "  h1.trimRight() >" hell"  h.charAt(2) >"l"  h.indexOf('ol') >6  h.substring(1,3) >"el"  h.slice(0,-1) >"hellowol"  h.toLowerCase() >"hellowold"  h.toUpperCase() >"HELLOWOLD"  h.split('o') >(3) ["hell", "w", "ld"]  name1='hello' name2='world' name1.concat(name2) >"helloworld"

注意：js使用切片的时候，用slice()方法

slice和substring的区别

string.slice(start, stop)和string.substring(start, stop)：

两者的相同点：
　　如果start等于end，返回空字符串
　　如果stop参数省略，则取到字符串末
　　如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：
　　如果 start > stop ，start和stop将被交换
　　如果参数是负数或者不是数字，将会被0替换

silce()的特点：
　　如果 start > stop 不会交换两者
　　如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
　　如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

 布尔值

js中布尔值都是小写的。python中布尔值首字母都是大写

js布尔值为false的情况有：空字符串，NaN，0，undefined，null

null和undefined的区别

  • null表示值是空，一般在需要指定或清空一个变量时才会使用
  • undefined表示当声明一个变量但是没有初始化时，该变量默认值时undefined

注意：函数没有设置return返回值的时候，函数返回的是undefined

对象（object）

js中一切皆对象，如：字符串、数值、数组、函数

js也提供了多个内建对象，如string、Data、array等

对象知识带有属性和方法的特殊数据类型

数组

js的数组类似于python中的列表

数组常用的方法如下：

js数组方法 说明 python
length 数组的大小 len(列表名)
push(ele) 尾部追加元素  append()
pop() 删除并获取尾部元素  pop()
unshift(ele) 头部插入元素  insert(0,元素）
shift() 头部移除元素并获取该元素的值  del l[0]/remove(l[0])
slice(start,end) 切片  l[0:2]
reverse() 反转  reverse()
join(seq) 将数组元素连接成字符串,join()里面参数放连接符  join()，相反，如：‘a’.join(l1)
concat(val,...) 连接数组   +
sort() 排序  sort()
forEach() 将数组的每个元素传递给回调函数  
splice() 删除元素，并向数组添加新元素  
map() 将数组的每个元素给函数处理后，返回一个处理后新的数组  map()

 

 

//例子：
var l=[1,2,3] l.pop() >3  l.push(5) >3  l.unshift(6) >4  l >(4) [6, 1, 2, 5]  l.shift() #删除头部元素 >6 l >(3) [1, 2, 5]  l.slice(0,2) >(2) [1, 2]  l.reverse() >(3) [5, 2, 1]  l.join('a') >"5a2a1"  var l2=["a","b","c"] l.concat(l2) >(6) [1, 2, 5, "a", "b", "c"]  l.sort() >(3) [1, 2, 5]

forEach()方法实例：参数最多三个，第一个参数是必须的，第二个，可选，表示当前元素的索引值，第三个参数，可选，表示当前元素所属的数组对象

前端之JavaScript篇

 

 

 splice（index,howmany,item1）方法实例：同样也是三个参数，第一个参数是必须的，表示起始位置，第二个参数也是必需的，表示删除元素个数，必须是数字，也是是“0”。如果这个参数没有设置，则会从index开始删除到数组最后一个元素，第三个参数，可选，表示要添加到数组的新元素。

前端之JavaScript篇

 

 

 map()方法实例：参数性质跟forEach一致

前端之JavaScript篇

 

 

 运算符

//算数运算符 + - * / % ++ -- var x=1; var res1=x++;    //结果是1 ，先赋值再运算 var res2=++x;    //结果是3，先运算再赋值  //比较运算符 > >= < <= != == === !== //注意： 1=="1"      //结果是true 。弱等于，会自动转换数据类型 1===“1”   //结果是false 。强等于，不会自动转换数据类型  //逻辑运算符  /* 注意：python是   and   or   not          js 是 &&  ||  ！          逻辑运算的时候，返回的是数据，而不是布尔值 */     !5&&'5' >5 5&&'5' >5 0 || 1 >1

//赋值运算符 =  += -= *= /+

流程控制

 

//if-else结构 if(条件){代码块}else{代码块｝  //if-else if - esle结构 if(条件){ 代码块 }else if{ 代码块 }else{ 代码块 }  //switch结构： switch(num){     case 0:     代码块     barek;     .....     default:     console.log("...") } //注意：case子句通常要加break语句，否则程序会继续执行后续case中语句  //for结构： for(条件）｛   代码块 ｝  //while结构： while(条件）｛代码块}  //三元运算 /* python 三元运算符是 var  res=1 if 1>2 else 3 js  三元运算符是   var res=1>3?1:3 */

函数

函数定义(可以带参数，也可以不带）

//python 是def  js是function
function f(参数1,..){ 　　代码块 } //匿名函数 var sum=function(a,b){     return a+b; } sum(1,2);  //立即执行函数 （function(a,b){     return a+b; })(1,2);  //箭头函数(ES6才运许使用） var f=v =>v;   //箭头左边是形参，右边是返回值 //等价于 var f=function(v){     return v }  var f=(arg1,arg2) => arg1+arg2; var f=function(arg1,arg2){     return arg1+arg2; }

注意：函数中arguments参数，是存放存入的参数。

　　　函数只能返回一个值，如果要返回多个值，只能将其放在数组或对象中返回

函数的全局变量和局部变量

局部变量：在函数内部声明的变量就是局部变量，只能在函数内部访问，函数执行完毕，该变量也会被删除

全局变量：在函数外部声明的变量，该变量会在页面关闭后被删除

作用域：跟python作用域关系查找一模一样。

首先在函数内部查找变量，找不到再到外层函数查找，逐步找到最外层。

自定义对象

本质就键对集合，类似于python中中的字典。

#第一种创建自定义对象的方式 var d={'user':'hell','passwd':123} #第二种创建自定义对象的方式 var d1=new Object() d1.id='alex';          d1.password=123; //等价于 d1={'id':'alex','password':123}
//遍历对象内容
for （var i in d1){
　　console.log(i,d1[i]);
}

Data对象

var d1=new Date(); var d2=new Date("2020/9/20 21:03") //参数是日期字符串 var d3=new Date(1000)         //参数是毫秒 var d4=new Date(2020,9,20,21,3,1,100)  //参数是年月日时分秒毫秒 //Date对象方法 var d=new Date() getDate()                 // 获取日 getDay ()                 //获取星期 getMonth ()              // 获取月（0-11） getFullYear ()            // 获取完整年份 getYear ()                 //获取年 getHours ()               //获取小时 getMinutes ()             //获取分钟 getSeconds ()             //获取秒 getMilliseconds ()        //获取毫秒 getTime ()                  //返回累计毫秒数(从1970/1/1午夜)

JSON对象

在python中序列化、反序列化

  • dumps  序列化
  • loads    反序列化

在js中序列化反、序列化

  • JSON.stringify()     等价于dumps   序列化
  • JSON.parse()         等价于loads     反序列化

RegExp对象

在python中，使用正则，需要借助于re模块，

在js中，则需要创建正则对象

//第一种创建正则对象方法 let reg1= new RegExp("正则语句“) //eg: let reg1 =new RegExp(^[a-zA-Z][a-zA-Z0-9]{5,11}) //第二种 let reg2 = /正则语句/ //eg: let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/   //匹配以字母开头，长度在5~11  //匹配内容，调用test方法 reg1.test('helloworld)  //全局匹配缺陷 let reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,11}/ g /* 全局模式有一个lastIndex属性，匹配结果为true是，lastIndex是字符串的长度，下次匹配会从字符串尾部开始匹配，匹配结果为false时，lastIndex会重新置0，从头开始匹配。 */ reg2.test('helloworld')   >true reg2.test('helloworld')  //此时lastIndex是10，从字母d后面开始匹配，所以结果为false >false  //第二个缺陷，当test()，不传参数的时候，默认传undefined

便宜好用的国外VPS推荐