开发者社区> 库库的码农> 正文

JavaScript

简介: JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应的代码,浏览器可以解释并作出相应的处理。 1·JavaScript代码存在形式 1 2 3 4 5 6 7 js代码内容.
+关注继续查看

JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应的代码,浏览器可以解释并作出相应的处理。

1·JavaScript代码存在形式

1 <!--方式一-->
2 <script type"text/javascript" src="js文件"></script>
3 
4 
5 <!--方式二 -->
6 <script type"text/javascript">
7         js代码内容...
8 </script>

2·JavaScript代码存在位置

·HTML的head中

·HTML的body代码块底部(强烈推荐)

由于html代码是从上到下执行,如果Head中的js代码耗时严重,就会导致用户长时间无法看到页面,如果放置在body代码块底部,那么及时js代码耗时严重,也不会影响用户看到页面的效果,只是js实现特效慢而已。

1 如:
2 <script src="https://www.xxxx.com"></script>
3 <script>
4     alert("123");
5 </script>
6 
7 
8 //alert(弹窗)

3·变量

·全局变量

·局部变量

JavaScript中变量的声明是一个非常容易出错的点,局部变量必须以个var开头,如果未使用var,则默人表示声明的是全局变量·

1 var name ="xxxx"     //局部变量
2 age = 18             //全局变量

注:单行注释  //   多行注释    /* */

4·基本数据类型

javascript 中的数据类型分为原始类型和对象类型:

·原始类型

  ·数字

  ·字符串

  ·布尔值

·对象类型

  ·数组

  ·"字典"

  ·...

特憋的,数字,布尔值,null,undefined,字符串是不可变的.

null和undefined
//null, undefined
null,是JavaScript语言的关键字,它表示以个特殊的值,常用来描述"空值".
undefined是一个特殊值,表示变量未定义.

 

1·数字(Number)

JavaScript中不区分整数值和浮点数值,java中所有数字均使用浮点数值表示·

转换:

  ·parseIne(变量名) 将某个值转换成数字,不成功则返现NaN

  ·parseFloat(变量名)将某个值转换成浮点数,不成功则返现NaN

特殊值:

  ·NaN:非数字,可使用isNaN(num)来判断·

  ·Infinity:无穷大,可使用isFinite(num)来判断·

更多数值计算:

常量

Math.E
常量e,自然对数的底数·

Math.LN10
10的自然对数·

Math.LN2
2的自然对数·

Math.LOG10E
以10为底的e的对数·

Math.LOG2E
以2为底的e的对数·

Math.PI
常量figs/U03C0.gif·

Math.SQRT1_2
2的平方根除以1·

Math.SQRT2
2的平方根·

##静态函数

Math.abs()
计算绝对值·

Math.acos()
计算反余弦值·

Math.asin( )
计算反正弦值。

Math.atan( )
计算反正切值。

Math.atan2( )
计算从X轴到一个点的角度。

Math.ceil( )
对一个数上舍入。

Math.cos( )
计算余弦值。

Math.exp( )
计算e的指数。

Math.floor( )
对一个数下舍人。

Math.log( )
计算自然对数。

Math.max( )
返回两个数中较大的一个。

Math.min( )
返回两个数中较小的一个。

Math.pow( )
计算xy。

Math.random( )
计算一个随机数。

Math.round( )
舍入为最接近的整数。

Math.sin( )
计算正弦值。

Math.sqrt( )
计算平方根。

Math.tan( )
计算正切值。
math

2·字符串(String)

字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法·

常见功能:

a = "huanyingguanglin"
"huanyingguanglin"
a.length    (查看长度)
16


a = " wyc "
" wyc "
a.trim()       (去除字符串的两边空格)
"wyc"
a.trimleft()      (去除字符串的左边空格)
a.trimright      (去除字符串的右边空格)



a = "nihao"
"nihao"
a.charAt(2)     (返回字符串中的参数的字符)!参数可以定义,看字符串的长度定义
"h"


a = "wyc"
"wyc"
b = "nihao"
"nihao"
a.concat(b)             (字符串的拼接)
"wycnihao"

 

 

a = "wycnihao"
"wycnihao"
a.indexOf("ni",2)     (寻找子序列位置)
3

 

a = "wycnihao"
"wycnihao"
a.lastIndexOf("yc",2)      (子序列位置 )
1

 

a = "wycnihao"
"wycnihao"
a.substring("yc",4)      (根据索引获取子序列)
"wycn"

 

a = "wycnihao"
"wycnihao"
a.slice(1,6)          (切片,从字符串的1位置到6位置)
"ycnih"

 

 

a = "wycnihao"
"wycnihao"
a.toLowerCase()       (将字符串变小写)
"wycnihao"
a.toUpperCase()      (将字符串变大写)
"WYCNIHAO"

 

 

a = "wycnihao"
"wycnihao"
a.split("cn")       (字符串的分割)
["wy", "ihao"]

a = "wycwyc9wycwyc"
"wycwyc9wycwyc"
a.split(/(\d+)/)          (字符串的分割,支持正则分割)
["wycwyc", "9", "wycwyc"]

 

a = "wycwycwyc"
"wycwycwyc"
a.match(/w/)         (全局匹配)
["w"]
a.match(/w/g)       (匹配的元素后边加个g,表示把字符串里边所有的w全部匹配出来)
["w", "w", "w"]

 

a = "wycwycwyc"

"wycwycwyc"
a.search(/y/)        (匹配出元素的位置)
1

 

 

a = "wyc7wycwyc9"
"wyc7wycwyc9"
a.replace(/(\d+)/g,"X")      (将匹配到的数字全部替换为"X")
"wycXwycwycX"
a.replace(/(\d+)/g,"$&"+"L")   (将匹配到的数字后边的元素替换为“L”)    
"wyc7Lwycwyc9L"

a.replace(/(\d+)/g,"&")         (将所有匹配到的数字替换成艾特符号“&”)
"wyc&wycwyc&"

 

a = "wyc7wycwyc9"
"wyc7wycwyc9"
a.replace(/(\d+)\w+(\d+)/g,"$2$1")      (将匹配到数字的7,9交换一下位置)
"wyc97"

 

a = "wyc7wycwyc9"
"wyc7wycwyc9"
a.replace(/\d+/,"$`")       (用于匹配左侧文本)
"wycwycwycwyc9"

 

a = "wyc7wycwyc9"
"wyc7wycwyc9"
a.replace(/(\d+)\w+(\d+)/g,"$$")        (直接量"$"符号)
"wyc$"

 

 

3·布尔值 

布尔类型仅包含真假,与python不同的是,python第一个字母是大写,("True","False"),则JavaScript里是小写("true","false")

· ==   (比较值相等)

· !=     (不等于)

· ===    (比较值和类型相等)

· !===    (不等于)

·  ||      (或)

·  &&       (且)

4·数组

JavaScript中的数组类似于python中的列表[]

常见功能:

 1 obj.length      //数组的大小
 2 
 3 obj.push(ele)       //尾部追加元素
 4 
 5 obj.pop         //尾部获取元素
 6 
 7 obj.shift()     //头部移除元素
 8 
 9 obj.splice(start,deleteCount,value,......)       //插入·删除或替换数组的元素
10 
11                       obj.splice(n,0,val)    //指定位置插入元素
12                       obj.splice(n,1,val)    //指定位置替换元素
13                       obj.splice(n,1)         //指定位置删除元素
14 
15 obj.slice()      //切片
16 
17 obj.reverse()      //反转
18 
19 onj.join(sep)         //将数组元素链接起来以构建一个字符串
20 
21 obj.concat(val,...)        //连接数组
22 
23 obj.sort()         //对数组元素进行排序

 

 

//查看数组元素的长度
a = [11,22,33,44,55]
[11, 22, 33, 44, 55]
a.length
5


// 给数组尾部添加元素
a.push(66)
6
a
[11, 22, 33, 44, 55, 66]


//删除数组元素
[11, 22, 33, 44, 55, 66]
ret = a.pop()
66
ret
66
a
[11, 22, 33, 44, 55]



//在数组头部添加元素
[11, 22, 33, 44, 55]
a.unshift(77)
6
a
[77, 11, 22, 33, 44, 55]


//在数组头部移除元素
[77, 11, 22, 33, 44, 55]
a.shift()
77
a
[11, 22, 33, 44, 55]



//splice即删除既添加
a
[11, 22, 33, 44, 55]
a.splice(1,0,"wyc")        (表示在1的位置,0表示不删除,"wyc"表示在1的               
                                            位置添加进去)
[]
a
[11, "wyc", 22, 33, 44, 55]



//splice能添加多个元素
[11, "wyc", 22, 33, 44, 55]
a.splice(1,0,"wyc","nihao")     (splice,可以在数组一次里边添加多个元素       )
[]
a
[11, "wyc", "nihao", "wyc", 22, 33, 44, 55]      


//splice删除
[11, "wyc", "nihao", "wyc", 22, 33, 44, 55]
a.splice(1,2)      (表示从数组的第一个位置删除两个元素)
["wyc", "nihao"]
a
[11, "wyc", 22, 33, 44, 55]


//splice替换
[11, "nihao", "wyc", 22, 33, 44, 55]
a.splice(1,1,"hi")     (表示在元素1的位置删除1在添加一个新的元素)
["nihao"]
a
[11, "hi", "wyc", 22, 33, 44, 55]


//切片
a
[11, "hi", "wyc", 22, 33, 44, 55]
a.slice(1,2)
["hi"]

 

//反转

[11, "hi", "wyc", 22, 33, 44, 55]
a.reverse()          (将数组元素反转过来)
[55, 44, 33, 22, "wyc", "hi", 11]

 

 

//将数组元素拼接起来(join)

[55, 44, 33, 22, "wyc", "hi", 11]
a.join("_")             //将数组元素用下滑线拼接起来
"55_44_33_22_wyc_hi_11"

 

//sort排序

[55, 44, 33, 22, "wyc", "hi", 11]
a.sort()     //将数组进行排序
[11, 22, 33, 44, 55, "hi", "wyc"]

 

四·其他  

1丶序列化

·JSON.stringify(obj)      序列化

·JSON.parse(str)           反序列化

 

a = 3
3
JSON.stringify(a)        (将a序列化成字符串)
"3"
JSON.parse(a)          (将a在反序列化成整数)
3
序列化,反序列化

 

2丶转义

·decodeURI()     URI中为转义的字符

·decodeURIComponent()       URI组件中的未转义字符

·encodeURI()            URI中的转义字符

·encodeURIComponent()         转义URI组件中的字符

·escape()             对字符串的转义

·unescape()          给转义字符串解码

·URIError               由URI的编码和解码方法抛出

3丶eval

JavaScript中的eval是python中eval和exec的合集,既可以编译代码也可以获取返回值·

·eval()

·EvalError 执行字符串中的JavaScript代码

4丶正则表达式

JavaScript中支持正则表达式,其主要提供了两个功能:

  ·test(string)   用于检测正则是否匹配

    ·exec(string)  用于获取正则匹配的内容

注:定义正则表达式时,"g","i","m"分别表示去全局匹配,忽略大小写,多行匹配·

5丶时间处理

JavaScript中提供了时间相关的操作,时间操作中分为两种时间:

·时间统一时间

·本地时间(东8区)

更多操作参见:http://www.shouce.ren/api/javascript/main.html

五丶语句和异常

1丶条件语句

javascript中支持两个条件语句分别是:if和switch

    if(条件){
    
    }else if(条件){

    }else{
    }

  

switch(name){
      case"1":
          age = 123;
          break;
      case"2":
          age = 456;
          break
      default:
          age = 777;        
}

2丶循环语句  

javascript中支持三种循环语句,分别是:

 

var names = ["wyc","nihao"];
for(var i=0;i>names.lengith;i++){
     console.log(i);
     console.log(name[i]);
}
方式一
var name = ["wyc","nihao"]
for (var index in name ){
    console.log(index);
    console.log(name[index]);
}
方式二
while(条件){
     //break;
     //continue;  
}
View Code

3丶异常处理

 1 try{
 2      //这段代码从上到下运行,其中任何一个语句抛出异常该代码块就结束运行·
 3 }
 4 catch(e){
 5     //如果try代码中抛出异常,catch代码块中的代码就会被执行.
 6     //e是一个局部变量,用来指向Error对象或者其他抛出的对象
 7 }
 8 finally{
 9    //无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行·
10 }
View Code

注:主动跑出异常throw Error("xxxxx")

六丶函数

1·基本函数

javascript中函数基本可分为一下三类:

//普通函数
function function(arg){        //创建函数
    return true;  
}

//匿名函数
var func = function(arg){
    return "tony";
}

//自动执行函数
(function(arg){
    console.log(arg);
})("123")
View Code

注意:对于javascript中函数参数,十几参数的个数可能小于形参的个数,函数内的特殊值arguments中封装了所有的实际参数·

2·作用域

javascript中每个函数都有自己的的作用域,当出现函数嵌套时,就出现了作用域链,当内层函数使用变量时,会根据作用域链从内到外一层层的循环,如果不存在则异常·

!切记:所有的作用域在创建函数且未执行的时候就已经存在了·

 1 function f2(){
 2     var arg = 111;
 3     function f3(){
 4         conlose.log(arg);
 5     }
 6     return f3();
 7 }
 8 
 9 ret = f2();        //执行函数
10 ret();
function f2(){
    var arg = [11,22];
    function f3(){
        console.log(arg);
    }
    arg = [44,55];
    return f3;
}
ret = f2();
ret();
View Code

注:声明提前,在javascript引擎"预编译"时进行·

更多:

3丶闭包

[闭包],是指拥有多个变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分·

闭包是个函数,而他[记住了周围发生了什么]·表现为由[一个函数]体中定义了[另一个函数],由于作用域链只能从内向外找,默认外部无法获取函数内部变量.闭包、在外部获取函数内部的变量.

 

function f1(){
    var arg = [11,22];
    function f2(){
         return arg;
    }
    return f2;
}

ret = f2();
ret();

 

 面向对象·

function Foo (name,age){
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
           return this.name + arg;
    }
}

var obj = new Foo("Wyc",19);
var ret = obj.Func("nihao");
console.log(ret);

对于上述代码需要注意:

  · Foo充当的构造方法         在python构造方法代指的是(__init__)

  · thif 代指对象

  · 创建对象是需要使用 new

上述代码中每个对象中均保存了一个相同的Func函数,从而浪费内存.使用原型和可以解决该问题.

 

function Foo(name,age){
    this.Name = name;
    this.Age = age;
}
Foo.prototype = {
    GetInfo:function(){
        return this.Name + this.Age
    },
    Func : function(arg){
         return this.Name + arg;
    }
}

 

  

 

 

 

 

  

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vue动态组件的实践与原理探究
Vue动态组件的实践与原理探究
10 0
从零打造一个Web地图引擎
从零打造一个Web地图引擎
7 0
JDK1.8新特性(二):为什么要关注JDK1.8
版本的不断更新、升级,无非是对bug的修复、新功能的增加、优化等,在JDK版本中,JDK1.8变得备受关注,也成了各大公司面试中常常被问及的话题。
11 0
为了实践微前端,重构了自己的导航网站
为了实践微前端,重构了自己的导航网站
6 0
C++中常用的std标准容器(全部容器功能介绍)
C++中常用的std标准容器(全部容器功能介绍)
7 0
JDK1.8新特性(三):Lambda表达式,让你爱不释手
它可以写出更简洁、更灵活的代码。作为一种更紧凑的代码风格,使Java语言的表达能力得到了提升。
6 0
SQL Server——SQL Server视图及索引技术
SQL Server——SQL Server视图及索引技术
7 0
Mycat实现单库水平分表、按月分表
Mycat实现单库分表,实现按月分表,实现时间戳按月分表
35 0
如何使用FlowUs、Notion等笔记软件建立工作台?
关于 All in One 使用过 Notion 的用户,绝大多数都知道 Notion 提倡都 All in One 理念。All in One 作为一种理念,准确描述了 Notion 类应用的特点:你可以在这类应用中进行时间管理、任务管理、项目管理、文档管理、数据库管理、资讯管理。对于多数普通人,如果你没有很专业的需求,那么你使用 Notion 类应用便能满足你绝大多数生产力需求。
9 0
JDK1.8新特性(四):函数式接口
Lambda表达式是如何实现、定义,你可能不太清楚。本篇将会详细介绍 函数式接口 ,让你在使用JDK新特性时,做到心中有数,自信满满。
3 0
+关注
64
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载