前端之JavaScript

于 2017-12-26 10:54:00 发布
阅读量93 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 前端 json ViewUI
原文链接：http://www.cnblogs.com/flying1819/articles/8116910.html

JavaScript

      JavaScript 是一种轻量级的编程语言；是可插入 HTML 页面的编程代码；JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

一，编写方式

1、JavaScript代码存在形式

/*方式一*/
<script type="text/javascript" src="commons.js"> //src是导入JS文件
</script>
 
 
/*方式二*/
<script>
    function func(){
        alert("Hello Welcome!")  //弹窗，并显示
    }
    func()  //执行func函数

2、JavaScript代码存放位置

把JavaScript代码放在HTML的<body>标签内的代码底部；

Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面；

如果把js代码放在代码底部这样就不会影响页面显示，后续js的代码继续加载。

 

 二、变量

 JavaScript中的变量，局部变量前必须以 var 开头 ，没有加 var 默认为全局变量。

 
<script>
     name =  "alex" ;   //全局变量
     function  f1(){
        var  name = 123;   //name是变量名，变量名前加var 表示局部变量
     }
     f1();
     alert(name);
</script><br><br> //  表示单行注释<br>/*   */  表示多行注释<br><br>PS：这注释仅在Script块中生效

 

三、数据类型

JavaScript 中的数据类型分原始类型和对象类型：

原始类型

　　数字

　　字符串

　　布尔值

对象类型

　　数组

　　"字典"

数字、布尔值、null、undefined、字符串，是不可变的。

 
// null、undefined
null 是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。
undefined是一个特殊值，表示变量未定义。

 

1、数字（Number）

JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

1）创建：

1
2
3
4
> num1 = 123;    //直接创建一个原始值
< 123
 
>num2 =  new  Number(123);   //根据Number类创建一个对象　　

2）转换：

  • parseInt(..)    将某值转换成数字，不成功则NaN
 
s1 =  "qq123" ;
"qq123"
n1 = parseInt(s1);
NaN
s2 =  "456" ;
"456"
n2 = parseInt(s2);
456　　

 

  • parseFloat(..) 将某值转换成浮点数，不成功则NaN
 
a1 = 12.345313
12.345313
z1 = parseFloat(a1)
12.345313

特殊值：

  •  NaN，非数字。可使用 isNaN(num) 来判断。
 
s1 =  "ww123" ;
n1 = parseInt(s1);
if (isNaN(n1)){   //isNaN判断是否是数字
else {
}
console.log(isNaN(n1))   　　
  • Infinity，无穷大。可使用 isFinite(num) 来判断。 flase则表示无穷；true则表示有限
  • typeof, 判断类型 
1
2
3
4
5
6
7
8
9
a =  "123"
ret =  typeof  a
"number"
 
 
a1 =  "q123"
"q123"
ret =  typeof  a1
"string"

更多数值计算：

常量
 
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中字符串是不可变的：可以访问字符串任意位置的文本

常见功能：

测试地方在浏览器上进行，按F12，找到"Console"就可以进行调试了。

obj.length 获取字符串的长度

1
2
3
4
a1 =  "alexseven"
"alexseven"
a1.length
9

obj.trim()移除两边空白

1
2
3
4
a1 =  " alexseven "
" alexseven "
b = a1.trim()
"alexseven"

obj.trimLeft()移除左边空白

1
2
3
4
a1 =  " alexseven "
" alexseven "
b = a1.trimLeft()
"alexseven "
 
obj.trimRight（）移除右边空格
1
2
3
4
a1 =  " alexseven "
" alexseven "
b = a1.trimRight()
" alexseven"
 
obj.charAt(n)根据索引，返回字符串中的第n个字符
1
2
3
4
b =  "alexseven"
"alexseven"
b.charAt(0)
"a"
 
obj.concat(value, ...) 拼接
1
2
3
4
b =  "alexseven"
"alexseven"
b.concat( "Evc" )
"alexsevenEvc"
 
obj.indexOf(substring,start)字符串找指定的字符的索引值
1
2
3
4
b =  "alexseven"
"alexseven"
b.indexOf( "x" )
3

obj.lastIndexOf(substring,start)子序列位置

1
2
3
4
5
6
b = "alexseven"
"alexseven"
b.lastIndexOf("se")
4
b.lastIndexOf("en")
7
 
obj.substring( from , to)根据索引获取子序列
1
2
3
4
5
6
b =  "alexseven"
"alexseven"
b.substring(0,3)
"ale"
b.substring(5,9)
"even"

obj.slice(start, end)切片

1
2
3
4
5
b =  "alexseven"
 
"alexseven"
b.slice(3,6)
"xse"
 
obj.toLowerCase()大写
 
obj.toUpperCase()小写
 
obj.split(delimiter, limit)分割
1
2
3
4
5
6
7
8
9
10
11
b =  "alexseven"
"alexseven"
b.split( "e" )
[ "al" ,  "xs" ,  "v" ,  "n" ]
 
a =  "alexalexalex"
"alexalexalex"
a.split( 'le' ,2)
[ "a" ,  "xa" ]
a.split( 'le' ,3)
[ "a" ,  "xa" ,  "xa" ]
 
obj.search(regexp)从头开始匹配，返回匹配成功的第一个位置
1
2
3
4
5
6
7
8
9
10
11
12
b =  "alexseven"
 
"alexseven"
b.split( "e" )
[ "al" ,  "xs" ,  "v" ,  "n" ]
b =  "alexseven"
 
"alexseven"
b.search( "e" )
2
b.search( "le" )
1
 
obj.match(regexp)全局搜索，如果正则中有 g 表示找到全部，否则只找到第一个。
 
obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，
1
2
3
4
5
6
7
a =  "alex7eric8Euuy"
"alex7eric8Euuy"
a.replace(/\d+/, "&" );   //找到一个替换后就不继续找
"alex&eric8Euuy"
 
a.replace(/\d+/g, "&" );   //加上g后就是全局，找到所有
"alex&eric&Euuy"
 
$数字：匹配的第n个组内容；
1
2
3
4
a =  "alex7eric8Euuy"
"alex7eric8Euuy"
a.replace(/(\d+)\w+(\d+)/g, "$1$2" )
"alex78Euuy" 　　
 
$&：当前匹配的内容；
1
2
3
4
a =  "alex4eric5Euuy"
"alex4eric5Euuy"
a.replace(/(\d+)/g, "$&" + "X" )
"alex4Xeric5XEuuy" 　　
 
$`：位于匹配子串左侧的文本；
1
2
3
a =  "alex4eric5Euuy"
a.replace(/\d+/, "$`" )
"alexalexeric5Euuy" 　
 
$'：位于匹配子串右侧的文本
1
2
3
4
a =  "alex4eric5Euuy"
"alex4eric5Euuy"
a.replace(/\d+/, "$'" )
"alexeric5Euuyeric5Euuy"

$$：直接量$符号；$$ = $

1
2
3
4
a =  "alex4eric5Euuy"
"alex4eric5Euuy"
a.replace(/(\d+)\w+(\d+)/g, "$$" )
"alex$Euuy"
 

3、布尔类型（Boolean）

布尔类型仅包含真假

  • ==      比较值相等
  • !=       不等于
  • ===   比较值和类型相等
  • !===  不等于
  • ||        或
  • &&      且
 

4、数组

JavaScript中的数组类似于Python中的列表。

1
2
a = [11,22,33,44,55,]   #声明一个数组
[11,22,33,44,55,]

常见功能：

1
<span style= "color: #ff00ff;" >obj.length  数组的大小</span>
1
2
3
4
a = [11,22,33,44]
[11, 22, 33, 44]
a.length
4　
obj.pop()尾部获取一个元素
1
2
3
4
a = [11,22,33, "alex" ,55]
[11, 22, 33,  "alex" , 55]
a.pop()
55
obj.shift() 头部获取元素
1
2
3
4
a = [11,22,33, "alex" ,55]
[11, 22, 33,  "alex" , 55]
a.shift()
11

追加、插入、删除：

obj.push(ele)       尾部追加元素

obj.unshift(ele)头部插入元素　　
obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
                     obj.splice(n, 0 ,val) 指定位置插入元素
                     obj.splice(n, 1 ,val) 指定位置替换元素
                     obj.splice(n, 1 )指定位置删除元素
 
a = [11,22,33,44]  #声明一个数组
[11, 22, 33, 44]
a.push(55)  #在数组最后增加一个元素
#这里是数组的长度
a
[11, 22, 33, 44, 55]
a.unshift(00)  #在数组最前面增加一个元素
#长度
a
[0, 11, 22, 33, 44, 55]
a.splice(3,0, 'insert' )   #在指定的索引增加一个元素,括号内(3为索引值,0为固定值,要插入的内容)
[]
a
[0, 11, 22,  "insert" , 33, 44, 55]
a.unshift(100)
obj. slice ( )切片
1
2
3
4
a = [11,22,33, "alex" ,55]
[11, 22, 33,  "alex" , 55]
a.slice(1,2)
[22]
 
obj.reverse( )反转
1
2
3
4
a = [11,22,33, "alex" ,55]
[11, 22, 33,  "alex" , 55]
a.reverse()
[55,  "alex" , 33, 22, 11]　
 
obj.join(sep)将数组元素连接起来以构建一个字符串
1
2
3
4
a = [11,22,33, "alex" ,55]
[11, 22, 33,  "alex" , 55]
a.join( "_" )
"11_22_33_alex_55"
 
obj.concat(val,..)合并 ；连接数组
1
2
3
4
5
6
7
8
9
10
a = [11,22]
[11, 22]
b = [44,55]
[44, 55]
a.concat(b)
[11, 22, 44, 55]
a
[11, 22]
b.concat(a)
[44, 55, 11, 22]
obj.sort( )对数组元素进行排序
1
2
3
4
a = [11,22,33, "alex" ,55]
[11, 22, 33,  "alex" , 55]
a.sort()
[11, 22, 33, 55,  "alex" ]
 

5、字典

JS的字典，是对象实现的

1
2
3
4
a = {k1:123,k2:456}
Object {k1: 123, k2: 456}
a[ 'k1' ]
123

　　

 

 四、其他

 

1、序列化

  • JSON.stringify(obj) 序列化
1
2
3
4
b = [11,22,33,44,55]
[11, 22, 33, 44, 55]
JSON.stringify(b);
"[11,22,33,44,55]"
  • JSON.parse(str) 反序列化
1
2
3
4
5
s =  "[11,22,33,44,55]"
"[11,22,33,44,55]"
JSON.stringify(s);
JSON.parse(s);
[11, 22, 33, 44, 55]
 

2、转义

  • decodeURI( ) URl中未转义的字符
  • decodeURIComponent( ) URI组件中的未转义字符
  • encodeURI( ) URI中的转义字符
  • encodeURIComponent( ) 转义URI组件中的字符
  • escape( ) 对字符串转义
  • unescape( ) 给转义字符串解码
  • URIError 由URl的编码和解码方法抛出
 
<script type= "text/javascript" >
s1 =  "http://www.cnblogs.com/?k=%E6%9D%8E%E6%9D%BO" ;
console.log(s1);
     
     ret = decodeURI(s1);   //解码
     console.log(ret);
     
     s2 = encodeURI(ret);   //编码
     console.log(s2);
 
</script>
 

3、eval

JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。

  • eval()
  • EvalError 执行字符串中的JavaScript代码
1
2
3
var  x=10document.write(eval(x+17))
 
27　

4、正则表达式

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

  • test(string) 用于检测正则是否匹配
  • exec(string) 用于获取正则匹配的内容

注：定义正则表达式时，“g”、“i”、“m”分别表示全局匹配，忽略大小写、多行匹配。

 

5、时间处理

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

  • 时间统一时间
  • 本地时间（东8区）

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

 

五、语句和异常

1、条件语句

 if(条件){
 
    }else if(条件){
         
    }else{
 
    }
switch 条件 
   switch(name){
        case '1':
            age = 123;
            break;
        case '2':
            age = 456;
            break;
        default :
            age = 777;
    }


777

 

2、循环语句

for 循环
for (var i=0;i<10;i++) {
console.log(i)
}
1
3
5
7
9
a = [11,22,33,44,55,66,77]
[11, 22, 33, 44, 55, 66, 77]
for (var item in a) {console.log(a[item])}
 22
 44
 66
while(条件){
    // break;
    // continue;
}

 

 

3、异常处理

 
<script type= "text/javascript" >
             try {   //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
                
          var  tiancai = isme
             } catch (e) {
　　　　　　　　　　
         // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
         //e是一个局部变量，用来指向Error对象或者其他抛出的对象
                 console.log(e)
             }finally{
        //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
                 console.log( "shuaige is so smart;" )
             }
</script>                 

　　

　　

 

六、函数

 1、基本函数

     
//        普通函数
        function func() {
            alert("Hello Word!")
        }<br>//　　　　function是关键字
//        定义一个可传参数的函数
        function func(arg) {
            alert(arg)
        }
        func('Superman')
//        自执行函数,顾名思义,定义好之后可以自动执行<br>//        ()():
        (function f3(arg) {alert(arg)})("we i good man");
 
//        匿名函数,了解就行
        var a = function() {
            alert('meinv');
        };
        a();

 

　　注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。

function f1(a,b,c) {<br>//　　　　console.log(arguments);//  arguments表示实际多少参数传多少参数
      console.log(a,b,c);
  }
  f1(1,2)
  //可以传一个参数也可以传多个参数，不会异常

 

 2、作用域

 JavaScript中每个函数都有自己的作用域，当出现函数嵌套时，就出现了作用域链。

当内层函数使用变量时，会根据作用域链从内到外一层层循环如果不存在，则异常。

 PS：所有的作用域在创建函数且未执行时候就已经存在 

 

 

 

<script>
//    name = "alex";
//    function f1(){
//        var name = "eric";
//        function f2(){
//            alert(name);
//        }
//        f2()
//    }
//    f1();
 
 
    name = "alex";
    function f1(){
        var name = "eric";
        function f2(){
            alert(name);
        }
        return f2
    }
    var ret = f1();
    ret();
</script>

 

 

 

注：声明提前，在JavaScript引擎“预编译”时进行。

更多：http://www.cnblogs.com/wupeiqi/p/5649402.html

　　

 3、闭包

 闭包就是，函数里面嵌套函数，并且记住所有的状态。

 

function f2(){
 
    var arg= [11,22];
 
    function f3(){
 
        return arg;
 
    }
 
    return f3;
 
}
 
  
 
ret = f2();
 
ret();
 
f2就是一个闭包，在执行调用的时候只能通过f2去调用，也就是由外向内去获取调用；而不能由内向外

 

　　

 4、面向对象

 

 

function Foo (name,age) {
 
    this.Name = name;
 
    this.Age = age;
 
    this.Func = function(arg){
 
        return this.Name + arg;
 
    }
 
}
 
   
 
var obj = new Foo('alex', 18);
 
var ret = obj.Func("sb");
 
console.log(ret);

 

对于上述代码需要注意：

  • Foo充当的构造函数
  • this代指对象
  • 创建对象时需要使用 new ，new是关键字。

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

function Foo (name,age) {<br>//表示创建一个类Foo，并且创见Foo类的构造方法
 
    this.Name = name;
 
    this.Age = age;
 
}
 
Foo.prototype = {
 
    GetInfo: function(){
 
        return this.Name + this.Age
 
    },
 
    Func : function(arg){
 
        return this.Name + arg;
 
    }
 
}
 
 
//Foo.prototype.Func = function () {returnthis.Name +this.Age}；//第二种

 

 更多详情：http://www.cnblogs.com/wupeiqi/articles/5602773.html

 

转载于:https://www.cnblogs.com/flying1819/articles/8116910.html

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值