前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript

JavaScript

作者头像
Wyc
发布2018-09-11 11:26:21
1.1K0
发布2018-09-11 11:26:21
举报
文章被收录于专栏:Python研发

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

1·JavaScript代码存在形式

代码语言: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实现特效慢而已。

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

3·变量

·全局变量

·局部变量

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

代码语言:javascript
复制
1 var name ="xxxx"     //局部变量
2 age = 18             //全局变量

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

4·基本数据类型

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

·原始类型

  ·数字

  ·字符串

  ·布尔值

·对象类型

  ·数组

  ·"字典"

  ·...

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

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

1·数字(Number)

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

转换:

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

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

特殊值:

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

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

更多数值计算:

代码语言:javascript
复制
常量

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( )
计算正切值。

2·字符串(String)

字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是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中的列表[]

常见功能:

代码语言:javascript
复制
 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()         //对数组元素进行排序
代码语言:javascript
复制
//查看数组元素的长度
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]
代码语言:javascript
复制
//切片
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)           反序列化

代码语言:javascript
复制
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

代码语言:javascript
复制
    if(条件){
    
    }else if(条件){

    }else{
    }
代码语言:javascript
复制
switch(name){
      case"1":
          age = 123;
          break;
      case"2":
          age = 456;
          break
      default:
          age = 777;        
}

2丶循环语句  

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

代码语言:javascript
复制
var names = ["wyc","nihao"];
for(var i=0;i>names.lengith;i++){
     console.log(i);
     console.log(name[i]);
}
代码语言:javascript
复制
var name = ["wyc","nihao"]
for (var index in name ){
    console.log(index);
    console.log(name[index]);
}
代码语言:javascript
复制
while(条件){
     //break;
     //continue;  
}

3丶异常处理

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

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

六丶函数

1·基本函数

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

代码语言:javascript
复制
//普通函数
function function(arg){        //创建函数
    return true;  
}

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

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

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

2·作用域

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

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

代码语言: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();
代码语言:javascript
复制
function f2(){
    var arg = [11,22];
    function f3(){
        console.log(arg);
    }
    arg = [44,55];
    return f3;
}
ret = f2();
ret();

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

更多:

3丶闭包

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

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

代码语言:javascript
复制
function f1(){
    var arg = [11,22];
    function f2(){
         return arg;
    }
    return f2;
}

ret = f2();
ret();

 面向对象·

代码语言:javascript
复制
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函数,从而浪费内存.使用原型和可以解决该问题.

代码语言:javascript
复制
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;
    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-07-07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1·JavaScript代码存在形式
  • 2·JavaScript代码存在位置
  • 3·变量
  • 4·基本数据类型
  • 3·布尔值 
  • 4·数组
  • 四·其他  
  • 1丶序列化
  • 2丶转义
  • 3丶eval
  • 4丶正则表达式
  • 5丶时间处理
  • 五丶语句和异常
  • 1丶条件语句
  • 2丶循环语句  
  • 3丶异常处理
  • 六丶函数
  •  面向对象·
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档