JavaScript基础语法


/* @Author: 陈陈陈
* @Date:   2017-08-04 17:35:49
* @Last Modified by:   陈陈陈
* @Last Modified time: 2017-08-09 16:12:03
*/

/*-------------------------------------------------------------------------------------*/

'use strict';

/*严格模式,关于严格模式详情可以参考:
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode
*/

/*-------------------------------------------------------------------------------------*/

/*引入JavaScript代码:
  (1)在HTML页面head或者body标签中加入“<script type="text/javascript"></script>”,然后在标签中写JavaScript代码;
  (2)引入外部js文件,在HTML页面的head标签中加“<script src="xxx.js" type="text/javascript"></script>”;
  (3)在body标签中加入“<a href="javascript:alert("Hello")>点我</a>”,这种方式用于JavaScript代码较少的情况。
*/

/*-------------------------------------------------------------------------------------*/

/*JavaScript是弱脚本语言,声明变量时无需指定变量的数据类型。
  JavaScript是解释时动态决定的,数据保存在内存中时也是有数据类型的,
  JavaScript常用的数据类型如下:
  (1)数值类型(number):包含整数和浮点数;
  (2)布尔类型(boolean):只有true和false两个值;
  (3)字符串类型(string):字符串必须用双引号或单引号括起来;
  (4)未定义类型(undefined):专门用来确定一个已经创建但是没有初始值的变量;
  (5)空类型(null):用于表明某个变量的值为空;
  (6)对象类型(object):JavaScript的对象、数组等。
 */

/*-------------------------------------------------------------------------------------*/

/*function show(){
    a=10;
    alert(a);
}*/
/*解析:在HTML页面中用“<a href="javascript:show()">点我</a>”来引入JavaScript这段代码。
  JavaScript是弱脚本语言,使用变量之前,可以无需定义,使用某个变量的时候直接使用即可。
  主要分为以下两种定义方式:
  (1)隐式定义:直接给变量赋值;
  (2)显式定义:使用var关键字定义变量。
*/

/*-------------------------------------------------------------------------------------*/

/*var chen%;
alert(chen%);*/
/*解析:变量名称必须是由字母、下划线(_)、数字、美元符号($)组成,且不能为关键字;
  开头不能为数字。
*/

/*-------------------------------------------------------------------------------------*/

/*var num1="abc";
var num2='abc';
alert(num1==num2);*/
/*解析:此处结果为“true”。
  在JavaScript中比较字符串用“==”,不能用equals! */

/*-------------------------------------------------------------------------------------*/

/*var a;
alert(a);*/
/*解析:运行结果为undefined。也就是说,这段代码中a为undefined数据类型。*/

/*-------------------------------------------------------------------------------------*/

/*alert(String.abc);*/
/*解析:运行结果也是undefined。属性不存在的时候,运行结果也是undefined。*/

/*-------------------------------------------------------------------------------------*/

/*var a=null;
var b;
alert(a==b);*/
/*解析:输出为“true”;
  倘若将“==”改为“===”(严格等于),则结果为“false”。*/

/*-------------------------------------------------------------------------------------*/

/*var a=10;
var b="Hello";
var c=5e2;
var d=2e-2;
var e=0xf;
var f=014;
var g=.2e2;
alert(a+" "+b+" "+c+" "+d+" "+e+" "+f+" "+g);*/

/*解析:先把此脚本最开始处的use strict注释掉,那么运行结果为:10  Hello  500  0.02  15  12  20
  (1)其实“.2e2”省略了小数点前面的0,它其实就是“0.2e2”。
  (2)如果没有把use strict注释掉,可能很多浏览器都会出不来结果,因为除了IE6、7、8、9等不支持严格模式(use strict)外,
  其他浏览器都支持严格模式,
  而严格模式禁止这种八进制语法,如“014”。
  ECMAScript并不包含八进制语法, 但所有的浏览器都支持这种以零(0)开头的八进制语法:
   0644 === 420 还有 "45" === "%".在ECMAScript 6中支持为一个数字加"0o"的前缀来表示八进制数.
   关于严格模式详情可以参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode
*/

/*-------------------------------------------------------------------------------------*/

/*var a=3;
var b=10;
var c=a.toString();
var d=b+c;
alert(d);*/
/*解析:输出结果为103。通过“+”或者“.toString()”的方法将数值转换成字符串。*/

/*-------------------------------------------------------------------------------------*/

/*document.write(parseInt("67hello")+"<br>");
document.write(parseInt("6hello7")+"<br>");
document.write(parseInt("hello67")+"<br>");
document.write(parseInt("53.4")+"<br>");
document.write(parseInt("0xC")+"<br>");//直接进制转换
document.write(parseInt("hello")+"<br>");*/
/*解析:
  输出结果为:67  6  NaN  53  12  NaN 。
  JavaScript数据类型的转换。
  "67hello"会取前面的"67",如果是前面含有数字的字符串,则会截取前面的数字,
  倘若不能讲其转换成整型,那么就会输出“NaN”(Not a Number)。*/

/*-------------------------------------------------------------------------------------*/

/*document.write(parseFloat("67chen")+"<br>");
document.write(parseFloat("6chen7")+"<br>");
document.write(parseFloat("chen67")+"<br>");
document.write(parseFloat("0xA")+"<br>");
document.write(parseFloat("435.34")+"<br>");
document.write(parseFloat("435.34.564")+"<br>");
document.write(parseFloat("hello")+"<br>");*/
/*解析:运行结果为:67  6  NaN  0  435.34  435.34  NaN 。
  注意:代码中是将“0xA”看做一个字符串,故输出为“0”;
  将“435.34.564”第二个小数点当做特殊字符处理,故输出“435.34”。
*/

/*-------------------------------------------------------------------------------------*/

/*var a="3.5";
var b=2;
var c=a-b;
var d=a*2;
var e=a+2;
alert(c+" "+d+" "+e);*/
/*解析:运行结果输出为:1.5  7  3.52 。 */

/*-------------------------------------------------------------------------------------*/

//var str="Hello,world,nice to meet you!";
//alert(str.length);//输出29
//alert(str.charAt(7));//输出“o”
//alert(str.toUpperCase());//输出“HELLO,WORLD,NICE TO MEET YOU!”
//alert(str.indexOf('o'));//输出“4”
//alert(str.lastIndexOf('o'));//输出“26”
//alert(str.indexOf('o', 7));//输出为“7”,从第7-1个位置算起,第一次出现'o'的位置
//alert(str.substring(2));//输出结果为“llo,world,nice to meet you!”
//alert(str.substring(2,4));//输出结果为“ll”
//alert(str.slice(2));//输出结果为“llo,world,nice to meet you!”
//alert(str.slice(2, 4));//输出结果为“ll”
//alert(str.slice(4, -1));//输出结果为“o,world,nice to meet you”。
//负数表示从右开始,与从左开始类似,与数组类似。
//alert(str.slice(4, -10));//输出结果为“o,world,nice to”
//alert(str.slice(-4, -1));//输出结果为“you”
//alert(str.replace('Hello', 'Hi'));//输出结果为“Hi,world,nice to meet you!”

/*var arr=str.split(',');
for(var i=0;i<arr.length;i++){
    alert(arr[i]);
}*/  /*以“,”为分割点,弹出“Hello”点击确认之后弹出“world”再点击确认弹出“nice to meet you!” 。*/

//alert(str.match('he'));//输出为“null”
//alert(str.match('Hello'));//输出结果为“Hello”

/*解析:JavaScript中字符串的常用操作方法:像数组的下标一样,第一个元素0,第二个1,第三个2。以此类推。
  charAt():获取字符串特定索引处的字符;
  toUpperCase():将字符串的所有字符转换成大写字母;
  indexOf():返回字符串中特定字符串第一次出现的位置;
  substring():返回字符串的某个子串;
  slice():返回字符串的某个子串,支持负数参数,功能强大;
  concat():用于多个字符串拼加成一个字符串;
  replace():将字符串中的某个子串以特定的字符串替换;
  split():将某个字符串分割成多个字符串,可以指定分隔符;
  match():使用正则表达式搜索目标子字符串;
  search():使用正则表达式搜索目标子字符串 ;
 */

/*-------------------------------------------------------------------------------------*/

/*正则表达式*/

/*var str="Lily loves football and basketball";
var reg=/Lily/;
document.write(reg.exec(str)+"<br>");
document.write(reg.test(str)+"<br>");*/
/*输出结果为(“<br>”表示换行):Lily  true
  若将reg改为“reg=/lily/”,那么输出结果为:null  false
*/

/*var str="Lily loves football and basketball";
var reg=new RegExp('Lily');
document.write(reg.exec(str)+"<br>");
document.write(reg.test(str)+"<br>");*/
/*输出结果为(“<br>”表示换行):Lily  true*/

/*解析:
  创建正则表达式的语法:
  (1)var reg=/xxxx/;
  (2)var reg=new RegExp('xxx');

  RegExp对象的常用方法:
  (1)reg.exec(str):检索字符串中指定的值,返回找到的值,并确定其位置;
  (2)reg.test(str):检索字符串中是否有满足指定条件的值,返回true或false。
*/

/*-------------------------------------------------------------------------------------*/

/*var str="123a";
var reg=/d/;
alert(reg.test(str));*/
/*输出结果为true*/

/*var str="chenchenchen";
var reg=/n/;
alert(reg.test(str));*/
/*输出结果为true,因为str是以n结尾*/

/*var str="chen";
var reg=/c/;
alert(reg.test(str));*/
/*输出结果为true,因为str是以c开头*/

/*正则表达式所支持的常用通配符:
  (1) .(点号):可以匹配任何字符;
  (2) d:匹配0-9的数字;
  (3) D:匹配非数字;
  (4) s:匹配所有空白字符,包括空格、制表符、换行符、回车符等;
  (5) S:匹配所有非空白字符;
  (6) w:匹配所有的单词字符,包括0-9数字、26个英文字母和下划线;
  (7) W:匹配所有非单词字符;
  (8) :匹配单词边界;
  (9) B:匹配非单词边界。
 */

/*-------------------------------------------------------------------------------------*/

/*var str="chenchen"
var reg=/[ce]/;
alert(reg.test(str));*/
/*输出结果为true,只要存在c或者e都是返回true*/

/*var str="chen";
var reg=/[^chen]/;
alert(reg.test(str));*/
/*返回值为false,因为字符串中查找不到除方括号内的任何字符。*/

/*var str="redbluewhite";
var reg=/(red|blue|green)/;
alert(reg.test(str));*/
/*返回值为true*/

/*正则表达式所支持的常用通配符:返回值true或false
  (1) [abc]:查找方括号之间任何字符;
  (2) [^abc]:查找任何不在方括号之间的字符;
  (3) [0-9]:查找任何从0至9的数字;
  (4) [a-z]:查找任何从小写a到小写z的字符;
  (5) [A-Z]:查找任何从大写A到大写Z的字符;
  (6) [A-z]:查找任何从大写A到小写z的字符;
  (7) (  |  |  ):查找任何指定的选项;
*/

/*-------------------------------------------------------------------------------------*/

/*正则表达式量词:
  (1) n+:匹配任何包含至少一个n的字符串;
  (2) n*:匹配任何包含零个或多个n的字符串;
  (3) n?:匹配任何包含零个或一个n的字符串;
  (4) n{X}:匹配包含X个n的序列的字符串;
  (5) n{X,Y}:匹配包含X或Y个n的序列的字符串;
  (6) n{X,}:匹配至少包含X个n的序列的字符串;
  (7) n$:匹配任何结尾为n的字符串;
  (8) ^n:匹配任何开头为n的字符串;
 */

/*-------------------------------------------------------------------------------------*/

/*var str="BBS";
var reg=/b/i;
alert(reg.test(str));*/
/*输出结果为true*/

/*var str="helloworld";
var reg=/o/g;
alert(reg.test(str));
alert(reg.test(str));
alert(reg.test(str));*/
/*输出结果:第一次弹出true,第二次true,第三次是false 。*/

/*var str="hello everyone";
var reg=/^e/m;
alert(reg.test(str));*/
/*输出结果为true 。假设reg=/^e/,那么输出结果为false 。*/

/*正则表达式修饰符:
  (1) i:执行对大小写不敏感的匹配;
  (2) g:执行全局匹配(查找所有匹配而非在找到第一个匹配后停止);
  (3) m:执行多行匹配;
 */

/*拓展练习:试写出邮箱的正则表达式并测试*/
/*var reg=/^[0-9a-zA-Z_-]+@[0-9a-zA-Z_-]+.(com|cn|org)$/;
alert(reg.test("chenlizhen1995@foxmail.com"));*/

/*-------------------------------------------------------------------------------------*/

/*JavaScript中定义数组的语法有以下3种:
  (1)var arr1=[2,5,6];//定义时直接给出数组元素的赋值
  (2)var arr2=[];//定义空数组
  (3)var arr3=new Array();//定义一个空数组并通过索引来赋值
     arr3[0]=1;
     arr3[3]="abc"

  提示:JavaScript为数组提供了一个length属性来得到数组的长度。

  JavaScript数组的特点:
  (1)数组的长度可变,总长度等于数组的最大索引值+1;
  (2)同一数组中的元素类型可以互不相同;
  (3)当访问未赋值的数组元素的时候,该元素值为undefined,不会出现数组越界。
*/

/*-------------------------------------------------------------------------------------*/

/*var arr=[1,2,3,4,"hello",true];
for(var i=0;i<arr.length;i++){
    document.write(arr[i]+"<br>");
}*/
/*输出结果为: 1  2  3  4  hello  true 。*/

/*var arr=[];
arr[0]=1;
arr[2]="abc";
arr[3]=true;
for(var i=0;i<arr.length;i++){
    document.write(arr[i]+"<br>");
}*/
/*输出结果为: 1  undefined  abc  true 。*/

/*-------------------------------------------------------------------------------------*/

/*JavaScript运算符:
  (1)算数运算符:+  -  *  /  %  ++
  (2)赋值运算符:=
  (3)比较运算符:>  <  >=  <=  ==  !=  ===(严格等于)  !==(不严格等于)
  (4)逻辑运算符:&&  ||  !
  (5)位运算符:&(与)  |(或)  ~(非)  ^(异或)  <<(左移)  >>(右移)
  (6)其他运算符:三目运算符(?:)  逗号运算符(值为最右边的)  void运算符  typeof(返回数据类型)  instanceof(判断是否为指定对象)
*/

/*var a="10";
var b=10;
alert(a==b);//true
alert(a===b);//false
*/

/*var a,b,c,d;
a=(b=2,c=3,d=4);
alert(a);*/
/*a的值为4,因为逗号运算符返回的值应该为最右边的,所以为4*/

/*var a,b,c,d;
a=void(b=2,c=3,d=4);
alert(a);*/
/*输出结果为undefined。void不返回任何值给a。*/

/*var a="abc";
alert(typeof(a));//输出结果为string*/
/*typeof返回的是数据类型,“typeof(a)”也可以写做“typeof a”。*/

/*var a="abc";
alert(typeof(a));//输出结果为string*/

/*var a=[1,2];
//alert(a instanceof Array);//输出结果为true
//alert(a instanceof Object);//输出结果为true*/
/*instanceof(判断是否为指定对象)*/

/*-------------------------------------------------------------------------------------*/

/*JavaScript支持的:

  (1)分支语句主要有:if语句、switch语句;
            ......switch()括号内可以是表达式,与Java不一样,Javaswitch括号内只能是整型变量、整型值,主要有byte、int、short、枚举类型等等。

  (2)循环语句主要有:while循环、do-while循环、for循环、for in循环;
            ......for in语法:
            for(变量 in 对象){
                执行的语句;
            }
              作用:遍历数组中的所有数组元素;遍历JavaScript对象的所有元素。

  (3)JavaScript也提供了break和continue来改变循环的控制流;
              ......break:跳出循环;continue:结束本次循环,直接继续下一次循环。
*/

/*-------------------------------------------------------------------------------------*/

/*for in的第一个作用:遍历数组中的所有数组元素*/
/*var arr=new Array(5);
arr[0]=1;
arr[2]=3;
arr[3]="abc";
arr[5]=true;
for(var index in arr){
    document.write(index+"&nbsp;&nbsp;&nbsp;"+arr[index]+"<br>");
}*/

/*若只是document.write(index+"<br>"); 那么只是输出有赋值数组的下标,并不是输出数组的元素值。
  上面代码的运行结果是:
  0  1
  2  3
  3  abc
  5  true
*/

/*-------------------------------------------------------------------------------------*/

/*for in的第二个作用:遍历JavaScript对象的所有元素*/
/*for(var properties in navigator){
    document.write("属性:"+properties+",属性值:"+navigator[properties]+"<br>");//其实这里可以省略分号
}*/

/*-------------------------------------------------------------------------------------*/

/*语句是JavaScript的基本执行单位,常用特殊语句:
  (1)语句块
            {
                var name="chen";
                var age=21;
                alert("hello!"+name);
            }
  (2)空语句:  “;”
  (3)异常抛出语句
  (4)异常捕捉语句
              try{
                var age=5;
                if(age==5){
                    throw new Error("年龄太小");
                }
            }catch(e){
                document.write("出错:"+e.message+"<br>");
            }finally{
                document.write("总会执行的finally块");
            }
            注意:JavaScript只有一个异常类就是Error;
                  在JavaScript是e.message,message是属性,在Java中是方法;
                  在Java中可以有很多catch,但是在JavaScript中只有一个catch
  (5)with语句
              {
                with(document){
                    write("输出第一行数据<br>");
                    write("输出第二行数据<br>");
                    write("输出第三行数据<br>");
                }
              }
              相当于:
                      document.write("输出第一行数据<br>");
                    document.write("输出第二行数据<br>");
                    document.write("输出第三行数据<br>");

*/

/*-------------------------------------------------------------------------------------*/

/*JavaScript代码复用单位是函数,JavaScript定义函数主要有下面3种方式:

  (1)第一种方式:命名函数
      function 函数名(参数列表){
        要执行的语句块;
      }
      eg.
          function show(name){
            alert("Hello,"+name);
          }
          show("chen");
          //输出结果:弹出 Hello,chen

  (2)第二种方式:匿名函数
      function (参数列表){
        要执行的语句块;
      }
      eg.
        var f=function (name){
            alert("验证匿名函数 Hello,"+name);
          }
        f("chen");
        //输出结果为:验证匿名函数(此处换行)Hello,chen

  (3)第三种方式:使用function类构造函数
      new Function(参数列表,函数执行体);
      注:参数需要加单引号,函数执行体需要加引号。
      eg.
            var f=new Function('name','age',"alert('名字:'+name+',年龄:'+age);");
          f("chen",21);
          //注意:是“Function”而不是“function”。输出结果为:名字:chen,年龄:21
          //其实,上面代码也可以写为:var f=new Function('name','age','alert("名字:"+name+",年龄:"+age);');

    注:第一种方式,函数调用可以在函数之前使用;第二种函数调用必须在函数声明之后使用;
        函数的形参不需要做任何声明,也不用加var,这是JavaScript属于弱类型语言的一种表现。
        大多数JavaScript框架都使用第二种匿名函数语法来定义函数,它的可读性好。
*/

/*-------------------------------------------------------------------------------------*/

/*函数的返回值:JavaScript中的函数没有返回类型,当函数想要返回值的时候直接加上return “值”即可,
  假如不加就代表此函数没有任何返回值。
 
  函数的局部变量和局部函数:
          根据变量的定义范围不同,变量有全局变量和局部变量之分,直接定义的变量成为全局变量,
          在函数中定义的变量称为局部变量,局部变量只能在函数内有效,
          如果全局变量和局部变量使用相同的变量名,则局部变量将覆盖全局变量。

          与局部变量对应的是局部函数,局部函数是在函数中定义的,外部函数可以直接调用其内部的函数,
          在外部函数外不能直接调用内部函数,所以只有在外部函数被调用时,内部函数才会被执行。

 */

/*function show(){

}
var f=show();
alert(f);*/
/*输出结果为:undefined。*/

/*-------------------------------------------------------------------------------------*/

/*JavaScript中,函数的调用有3种方法
  (1)直接调用函数:最常见最普通的方式
          对象.函数引用
          //当声明一个没有指明分配给哪个对象使用的时候,默认分配给的是window对象

  (2)以call方法调用函数:
          函数引用.call(调用者,参数1,参数2......)

  (3)以apply方法调用函数:
          函数引用.apply(调用者,arguments)
          //arguments相当于数组,用来存放多个参数,和call调用方式类似
*/

/*function show(name,age){
    alert(name+"----"+age);
}
//window.show('chen',21);
//show.call(window, 'chen',21);
//show.apply(window,['chen',21]);
*/

/*-------------------------------------------------------------------------------------*/

/*function show(arr,func){
    func.call(window, arr);
}
show([1,2,3,4],function(arr){
    for(var i in arr){
        document.write(arr[i]+"<br>");
    }
})
//输出结果为:1  2  3  4 。
*/

/*-------------------------------------------------------------------------------------*/

原文地址:https://www.cnblogs.com/dorra/p/7305610.html