JavaScript的基本语法

一、历史

1.战国时代

1995 年 Netscape(网景) 发明了 LiveScript 后改名为 JavaScript 。

1996 年,微软发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版,叫做 JScript。

2.一统江湖

ECMAScript:欧洲计算机制造商协会(ECMA)通过 ECMA-262 标准化的脚本程序设计语言:

1997 年 06 月,ECMAScript 1.0 版

1998 年 06 月,ECMAScript 2.0 版

1999 年 12 月,ECMAScript 3.0 版

2007 年 10 月,ECMAScript 4.0 版(版本改变太激进,死了)

2009 年 12 月,ECMAScript 5.0 版

2011 年 06 月,ECMAscript 5.1 版发布,成为 ISO/IEC(国际标准化组织及国际电工委员会)16262:2011)标准

2015 年 06 月 17 日,ECMAScript 6 版,可以叫 ECMAScript 6(ES6),也可以叫ECMAScript 2015(ES2015)

3.未来发展

JavaScript 未来将由 ECMA 以每年一个版本的方式进行迭代更新,版本号也会按照年份来排序,ES2015、ES2016……

二、语法约定

1、区分大小写

与Java一样,变量、函数名、运算符以及其他一切东西都是区分大小写的。

比如:变量test与变量TEST是不同的。

2、变量是弱类型的

与Java和C不同,ECMAScript中的变量无特定的类型,定义变量时只用var运算符,可以将它初始化为任意值。因此,可以随时改变变量所存数据的类型(尽量避免这样做)。

3、每行结尾的分号可有可无

Java、C和Perl都要求每行代码以分号(;)结束才符合语法。

ECMAScript则允许开发者自行决定是否以分号结束一行代码。如果没有分号,ECMAScript就把折行代码的结尾看做该语句的结尾(与Visual Basic和VBScript相似),前提是这样没有破坏代码的语义,但这样会消耗一些系统资源,且浏览器有些时间会加错分号,因此,在开发中分号是必须写的。

4、注释与 Java、C 和 PHP 语言的注释相同

ECMAScript借用了这些语言的注释语法。

有两种类型的注释:

单行注释以双斜杠开头(//)

多行注释以单斜杠和星号开头(/*),以星号和单斜杠结尾(*/)

//注释文字

/*

* 多行注释1

* 多行注释2

* /

5、括号表示代码块

从Java中借鉴的另一个概念是代码块。

代码块表示一系列应该按顺序执行的语句,这些语句被封装在左括号({)和右括号(})之间。

6、代码格式化

JavaScript中会忽略多个空格和换行,所以我们可以利用空格和换行对代码进行格式化。

三、变量

(一)变量的声明与赋值

1、什么是变量?

变量是存储信息的容器

2、变量声明

在JavaScript里声明变量使用关键词 var ,例var name 就声明了一个name空变量,其中name为变量名。也可以同时声明多个变量,变量之间用逗号分隔。

//声明一个变量

var name;   //声明了name变量

//声明多个变量时,变量之间用逗号分隔

var x,y,z;   //声明了x,y,z三个变量

3、变量赋值(等号)

var name;            //变量的声明

name="xx学院";        //变量赋值

//也可以声明变量时对其赋值

var name="xx学院院";    //变量的声明且赋值

//一条语句,多个变量(变量之间用逗号分隔)

var x=1,y=2,c="于";

(二)标识符

Javascript中的标识符其实就是指我们给变量、函数及函数参数取的名字。

1、标识符的格式规则

标识符可以千变万化,但是也有其中的规则需要遵守(必须遵守的);

(1)由数字、字母、下划线组成的,其中字母里大小写字母均可;

(2)首位不是能数字,可以是字母、下划线(_)或者美元符号($);

(3)不能使用关键字和保留字作为变量的名字(需要避开的名字);

关于关键字和保留字,这个可以拿生活中的现象举例子,大人给小孩起名字的时候,小孩的名字一定不能和他父亲母亲的名字一样;当然也不能和爷爷,奶奶,外公,外婆,舅舅,姑姑等等这些名字一样;这个就是现实中约定俗成的规则;

在JS中,也有些单词是有特殊意义的,或者是为了以后语言升级做准备的;而这些单词就不能作为变量名;比如前面接触的typeof,function;这样的单词就不能作为变量名;

(4)区分大小写,test和Test是不一样的,必须严格一样,才算是同一个标识符;(在javascript里,onclick 必须要写出onclick,不能写成onClick)

2、常见的关键字和保留字

(1)关键字

ECMA-262定义了ECMAScript支持的一套关键字(keyword)。

这些关键字标识了ECMAScript语句的开头和/或结尾。根据规定,关键字是保留的,不能用作变量名或函数名。

下面是ECMAScript关键字的完整列表:

break    case    catch    continue    debugger    default    delete    do    else    finally   false  for    function    if    in    instanceof    new    null    return    switch    this    throw    try    typeof    var    void    while    with

注意:如果把关键字用作变量名或函数名,可能得到诸如"Identifier Expected"(应该有标识符、期望标识符)这样的错误消息。

(2)保留字

ECMA-262定义了ECMAScript支持的一套保留字(reserved word)。

保留字在某种意思上是为将来的关键字而保留的单词。因此保留字不能被用作变量名或函数名。

ECMA-262第三版中保留字的完整列表如下:

abstract    boolean    byte    char    class    const   double    enum    export   extends    final    float    goto    implements    import    int    interface    long    native    package    private    protected    public    short    static    super    synchronized    throws    transient    volatile

注意:如果将保留字用作变量名或函数名,那么除非将来的浏览器实现了该保留字,否则很可能收不到任何错误消息。当浏览器将其实现后,该单词将被看做关键字,如此将出现关键字错误。

3、标识符命名的优化方法

优雅的变量命名方法是可以一眼扫过就知道什么意思的;不会浪费时间在思考变量名所代表的意义;

如果给"门"命名为name1,给"桌子"命名为name2,给"冰箱"命名为name3;那么日常生活就乱套了,听起来这种在现实生活中会很奇怪和搞笑;

标识符命名的意义是直观易理解,读到第一行代码时候就知道什么意思,假如隔了几十上百行代码后仍然可以明确他的意义;

下面是收集的一些变量命名方法;

“-”连接符方法;

比如给我桌子上门钥匙命名;my-room-door-key 和 my_room_door_key;

这种方法用”-”和下划线"_"连接符来链接单词,区别是下划线在选择变量的时候,鼠标双击可以全部选择;

驼峰命名法;这种命名方法有两种方式

大驼峰:每个单词的首字母大写;MyRoomDoorKey

小驼峰:第一个字母小写,其它字母大写;myRoomDoorKey

匈牙利命名法;变量由类型+对象描述组成;

对象(Object)用o表示;

函数(function)用fn表示;

数组(array)用a表示;

扩展:var、let和const的区别

1、let声明变量

在ES5中只有全局作用域和函数作用域,没有块级作用域,这带来了很多不合理的作用场景,let实际上为JavaScript新增l块级作用域,在ES6中,用let声明变量,只在let命令所在的代码块有效。

案例比较:

var name;            //变量的声明

name="泸职院";        //变量赋值

//也可以声明变量时对其赋值

var name="泸职院";    //变量的声明且赋值

//一条语句,多个变量(变量之间用逗号分隔)

var x=1,y=2,c="周静";

2、const声明变量

const也是用来声明变量,但是声明的是常量,而且必须初始化。不可以修改,否则会报错。

const b = 2;  //正确

const b;//错误,必须初始化

const b = 2;

b = 5;

console.log('函数外修改const定义b:' + b);//无法输出

四、数据类型

(一)数据的相关概念

1、什么是数据?

数据是信息的表现形式和载体,可以是符号、文字、数字、语音、图像、视频等。数据和信息是不可分离的,数据是信息的表达,信息是数据的内涵。数据本身没有意义,数据只有对实体行为产生影响时才成为信息。

2、数据类型

数据类型在数据结构中的定义是一个值的集合以及定义在这个值集上的一组操作。简而言之就是指各种数据信息的类型。

(二)JavaScript数据类型

代码

输出

\'

单引号  '

\"

双引号  "

\\

反斜杠   \

\n

换行符

\t

制表符

(3)用算术运算符 + 可以完成字符串拼接 

alert("welcome" + "to" + "china");

alert("welcome" + " " + "to" + " " + "china");

2.数字(Number)

JS 不区分整数和浮点数,统一用 number 表示,以下都是合法的 number 类型。

123; //整数

0.456; //浮点数

1.2345e6; //科学计数法

-99; //负数

NaN; //NaN 表示 Not a Number,当无法计算结果是用 NaN 表示

Number.MAX_VALUE:最大值,1.7976931348623157e+308

Infinity:正无穷大,比如,Number.MAX_VALUE*2

-Infinity:负无穷大

NaN:not a Number

Number.MIN_VALUE:最小值,5e-324,最小的正值

3.布尔(Boolean)

布尔值只有两个值,true和false。主要用来逻辑判断的。

4.Null

Null类型的值只有一个,就是null,专门用来表示一个为空的对象,“什么都没有”的意思,用来表示无值,通常用作一个空引用或一个空对象的预期,就像一个占位符。使用typeof函数来检测一个null值是,返回object。

5.Undefined

Undefinded类型的值也是只有一个,就是undefined。当声明一个变量,但不给这个变量赋值时,这个变量的值就为undefined。

//undefined 有两种结果

//1.真的没定义

alert(typeof b); //undefined

//2.定义了,但是没有放东西进去

var b;

alert(b); //undefined

6.对象(Object)

在 ECMA-262 中把对象定义为:“无序属性的集合,其属性可以包含基本值、对象、或者函数”。js 中内置了如下的对象:

对象说明
Object

是所有 JS 对象的超类(基类),JS 中的所有对象都是继承自 Object 对象的

Array数组对象--定义数组属性和方法
Number数字对象
Boolean 布尔对象--布尔值相关
Error错误对象--处理程序错误
Function函数对象--定义函数属性和方法
Math数学对象
Date日期对象
RegExp 对象正则表达式对象--定义文本匹配与筛选规则
String 字符串对象--定义字符串属性和方法

(三)强制转换数据类型 

1.强制转换为String类型

方式一:调用被转换数据类型的toString()方法,a=a.toString()

该方法不会影响到原变量,它会将转换的结果返回。

注意:null和undefined这两个值没有toString()方法。

方式二:调用String()函数,a=String(a)

2.强制转为Number类型

方式一:调用Number()函数,a=Number(a)

(1)String  ->  Number

如果是纯数字字符串,则直接转其为数字

如果字符串中包含非数字字符,则转为NaN

如果是空字符串,则转为0

(2)Boolean ->  Number

true转为1,false转为0

(3)null -> Number,转为0

(4)undefined -> Number,转为NaN

方式二:这种方法转门用来将String -> Number

parseInt():把一个字符串转为一个整数

        parseInt('13.14')          ->    13

        parseInt('13.14ab')      ->      13

parseFloat():把一个字符串转为一个浮点数

        parseFloat('13.14')          ->    13.14

        parseFloat('13.14ab')      ->      13.14

注意:对于非String使用parseInt()或parseFloat()时,它将会将其转换为String,然后再操作。

parseInt(true),parseInt(false),parseInt(null),parseInt(undefinded)  -> NaN

parseFloat(true),parseFloat(false),parseFloat(null),parseFloat(undefinded)  -> NaN

3.强制转为Boolean类型

使用Boolean()函数可以将非布尔类型的数据转为布尔类型数据,其结果只有true或false两种。

(1)Number -> Boolean

0和NaN转为false,其余数字都转为true

(2)String -> Boolean

空字符中转为false,非空字符串转为true

(3)Null ,Undefined-> Boolean

null值和undefined值转都为false

注意:对象都转为true

四、运算符

(一)算术运算符

通过运算操作数据(事物)的行为,运算表示行为。 例:蜗牛爬井,一口井 10 米,蜗牛白天爬 3 米,晚上滑 2 米,蜗牛几天爬出?

/当前位置在井底 ,默认是 0

var position = 0;

//白天爬 3 米

position = position + 3;

//晚上滑 2 米

position = position - 2;

alert(position); //1 2 3 4 ....

//加赋值 1 表示爬行一米

//position = position + 1;

//position++;

console.log("往上爬了"+ position + "步");

算术运算 (arithmetic operators) 符号,就是用来处理四则运算的符号,这是最简单,也最常用的符号,尤其是数字的处理,几乎都会使用到算术运算符号。

算术运算符以数值(字面量或变量)作为其操作数,并返回一个单个数值。

1.常用算数运算符

运算符描述
+加法
-减法
*乘法
/除法
%取模(余数)

 

注意:

1.任何数字与NaN进行算术运算是其结果都为NaN。

2.非数字类型的数据进行算术运算时,首先会将非数字类型的数据调用Number()函数转为Number类型,然后再进行运算。也可以利用这个特点把非数字类型隐形转为Number类型,如非Number类型-0,非Number类型/1,非Number类型*1

关于+运算需注意:

1.两个数字字符串进行+运算时,执行的是拼串的操作,比如"123"+"1"=1234

2.任何数据类型与字符串进行+运算时,先转为String类型,然后执行的拼串操作,可以根据该特点,把任数据类型和空字符串进行+运算,转为String类型。

2. 关于自增和自减

运算符描述
++递加
--递减

(1)自增++

通过自增可以使变量在自身的基础上增加1,对于一个变量自增以后,原变量的值会立即自增1;

自增分成两种:后++(a++)和前++(++a);

无论是a++还是++a,都会使原变量的值自增1,不同的是a++和++a的值不同:

a++的值为原变量的值

++a的值为原变量自增后的新值

var a=5;

console.log(a++);    //5

console.log(a);        //6

var a=5;

console.log(++a);    //6

console.log(a);        //6

(2)自减--

通过自减可以使变量在自身的基础上减少1,对于一个变量自减后,原变量的值立即减少1;

自减分成两种:后--(a--)和前--(--a);

无论是a--还是--a都会使原变量的值自减1,不同的是a--和--a的值不同:

a--的值为原变量的值

--a的值为原变量自减后的新值

var a=5;

console.log(a--);    //5

console.log(a);        //4

var a=5;

console.log(--a);    //4

console.log(a);        //4

(二) 逻辑运算符

逻辑运算符通常用于测定变量或者值之间的逻辑。

给定(x=8,y=4)

1. !非运算

所谓非运算就是对一个布尔值进行取反操作,true变为false,false变为true;

对于非Boolean数据取反操作时,先将非Boolean数据使用Boolean()函数转为Boolean数据,再进行取反操作。

2. &&与运算

&&可以对符号两端的值进行与运算并返回结果,其运算规则:

两个值中,只要有一个值为false,则返回false;只有两个值为true,才返回true。

result=true && true           //true

result=true&&false            //fasle

result=false&&true            //false

result=false&&false           //false

在JavaScript中,&&运算属于短路的"与"。如果第一个值为false,则不会看第二个值;如果第一个值为true,则会看第二个值。

true&&alert("看我能不能出来");

false&&alert("看我能不能出来");

3. ||或运算

||可以对符号两端的值进行或运算并返回结果,其运算规则:

两个值中,只要有一个为true,则返回true;只有两个值为false,才返回false。

result=false|| false           //false

result=true||false            //true

result=false||true            //true

result=true||true            //true

在JavaScript中,||运算属于短路的"或"。如果第一个值为true,则不会看第二个值;如果第一个值为false,则会看第二个值。

true||alert("看我能不能出来");

false||alert("看我能不能出来");

4. 关于非Boolean数据之间的&&和||运算

对于非Boolean数据之间的&&和||运算,首先要把非Boolean数据转为Boolean数据,再进行运算,最后再返回原值。

(1)关于&&运算的规则:

如果第一个值为true,则必然返回第二个值

result=2&&3         //3

result="a"&&"b"    //"b"

如果第一个值为false,则直接返回第一个值

result=0&&2            //0

result=NaN&&0        //NaN

result=0&&NaN        //0

(2)关于||运算的规则

如果第一个值为true,则直接返回第一个值

result=2||3        //2

result=2||0        //2

result=2||NaN        //2

result=2||""        //2

如果第一个值为false,则必然返回第二个值

result=0||NaN        //NaN

result=NaN||0        //0

(三)赋值运算符

赋值运算符(赋值运算符用于给 JavaScript 变量赋值 ),  =(将右边表达式的值赋给左边的变量),常见的赋值运算符如下所示:

运算符例子等同于
=x = yx = y
+=x += yx = x + y
-=x -= yx = x - y
*=x *= yx = x * y
/=x /= yx = x / y
%=x %= yx = x % y

(四)比较运算符

关系运算符用来比较两个值之间的大小关系的,常见的比较运算符如下:

运算符描述
>大于
<小于
>=大于或等于
<=小于或等于
?三元运算符

关系运算符的规则和数学中一致,用来比较两个值之间的关系,如果关系成立则返回true,关系不成立则返回false。

- 如果比较的两个值是非数值,会将其转换为Number然后再比较。

- 如果比较的两个值都是字符串,此时会比较字符串的Unicode编码,而不会转换为Number。

(五)相等运算符

运算符描述
==等于
===等值等型
!=不相等
!==不等值或不等型

1. ==

- 相等,判断左右两个值是否相等,如果相等返回true,如果不等返回false

- 相等会自动对两个值进行类型转换,如果对不同的类型进行比较,会将其转换为相同的类型然后再比较,转换后相等它也会返回true

2. !=

- 不等,判断左右两个值是否不等,如果不等则返回true,如果相等则返回false

- 不等也会做自动的类型转换。

3. ===

- 全等,判断左右两个值是否全等,它和相等类似,只不过它不会进行自动的类型转换,如果两个值的类型不同,则直接返回false

4. !==

- 不全等,和不等类似,但是它不会进行自动的类型转换,如果两个值的类型不同,它会直接返回true

特殊的值:

- null和undefined

- 由于undefined衍生自null,所以null == undefined 会返回true。但是 null === undefined 会返回false。

- NaN

- NaN不与任何值相等,报告它自身 NaN == NaN         //false

- 判断一个值是否是NaN, 使用isNaN()函数

六)条件运算符

条件运算符又称为三元运算符,该运算符需要三个操作数。

- 语法: 条件表达式?语句1:语句2;

- 执行流程:

先对条件表达式求值判断, 如果条件表达式的值不为布尔值,则会强制转化为布尔值。

         - 如果判断结果为true,则执行语句1,并返回执行结果

- 如果判断结果为false,则执行语句2,并返回执行结果

var score=85;

score>60?alert("及格"):alert("不及格");

//求a,b两数的最大值

var a=3,b=5;

var max;

max=a>b?a:b;

alert("max="+max);

求a,b,c三个数的最大值

var a=3,b=5,c=6,max;

max=a>b?a:b;

max=max>c?max:c;

alert("max="+max);

(七)运算符的优先级

就和数学的运算符一样,在JavaScript中,运算符也有优先级。、

表1 :运算符优先级和结合性

运算符结合性优先级
.、[ ]、( )从左到右
 ↑
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
++、--、-、!、new、typeof从右到左
*、/、%从左到右
+、-从左到右
<、<=、>、>=、in、instanceof从左到右
==、!=、===、!==从左到右
&&从左到右
II从左到右
?:从右到左
=、*=、/=、%=、+=、-=、&=、^=、!=从右到左
,从左到右

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值