JavaScript基础——数据类型、操作符、语句

一、<script>元素

常用属性

   async:表示应立即下载脚本,但不妨碍页面其他操作。只对外部脚本文件有效。
   defer:表示脚本可延迟至文档完全被解析和显示后再执行。只对外部脚本文件有效。
   src:表示包含要执行代码的外部文件。文件既可以是与包含它的页面位于同一服务器的文件,也可是其他领域中的文件。
   type:表示用于编写代码用的脚本语言,默认属性:text/javascript。
注:若<script>不包含defer和async属性,浏览器则会按照<script>元素在页面中出现的先后进行解析。

使用方式
  • 直接在页面内嵌入:<script type="text/javascript"></script>
  • 包含外部javascript文件:<script type="text/javascript" src="文件名.js"></script>
  • 使用外部文件的优点:可维护性(将所有JavaScript文件放在一个文件夹,可在不触及HTML标记情况下编写JavaScript)、可缓存(若两个页面都用到同一文件,这个文件只需下载一次,提高加载速度)、适应未来。
标签位置
  • 一般把全部JavaScript引用放在<body>元素中页面内容的后面
  • 传统做法<script>放在页面<head>元素中。这样,所有文件的引用放在了相同地方,但浏览器遇到<body>标签才开始呈现内容,所以要等javascript代码都被下载、解析和执行完后才开始呈现页面内容。导致页面延迟。
延迟脚本

设置defer=”defer” ,相当于告诉浏览器立即下载,但延迟执行。延迟脚本不一定会按照顺序执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本最好将延迟脚本放在页面底部

异步脚本
  • 设置async=”async”,相当于告诉浏览器立即下载文件。但,标记为async的脚本并不保证按照指定先后顺序执行。因此,要确保标记async的脚本之间互不依赖。
  • 设置此属性的目的:不让页面等待脚本下载和执行,从而异步加载页面其他内容,异步脚本不要在加载器件修改DOM.

二、<noscript>元素

当浏览器不支持脚本或脚本被禁用时,浏览器会显示<noscript>中的内容。

三、基本概念

标识符
  • 字符可包含字母、下划线、美元符号、数字。但是不能以数字开头。
  • 按照惯例,采用驼峰式大小写,例如:firstSecond;
关键字

break case catch continue default delete do else

finally for function if in instanceof new return switch

this throw try typeof var void while with

保留字

abstract boolean byte char class const debugger

double enum export extends final float goto

implements import int interface long native

package private protected public short static

super synchronized throws transient volatile

变量
  • var message=”hi”;
  • 两个过程先申请,后赋值;
  • 变量message保存了字符串”hi”。这样初始化变量不会把它标记为字符串类型,只是单纯给变量赋值;
  • 作用域:若在函数中用var定义一个变量,这个变量在函数退出后被销毁。
  • 若省略var则变为全局变量,但局部作用域定义全局变量不好维护,因此次不推荐这样做。
数据类型

Undefined Null Boolean Number String Object

typeof操作符

对一个值使用typeof操作符,可能返回下列值:

  "undefined"//若这个值未定义;
  "boolean"//若这个值是布尔值;
  "string"//若这个值是字符串;
  "number"//若这个值是数值;
  "object"//若这个值是对象或null;
  "function"//若这个值是函数;
Undefined类型
  • 在使用var声明变量但未对其加以初始化时,这个变量的值就是undefined。
  • 在实际编程中,显示初始化更好。这样typeof返回”undefined”,就可以知道变量是未声明。
Null类型
  • typeof 检测 null 返回”object”。
  • 若定义的变量准备再将来用于保存对象,最好将该变量初始化为null;
if(car!=null){
//对car对象执行操作
}
Boolean类型
  • 该类型有两个字面值:true和false;
  • 存在自动执行的相应Boolean转换,如 if 语句;
  • 各种数据类型及其对应的转换规则
数据类型 转换为true的值 转换为false的值
Boolean true false
string 任何非空子串 “”(空字符串)
Number 任何非零数字值(包括无穷大) 0和NaN
Object 任何对象 null
Undefined n/a(not applicable 不适用) undefined
Number类型
  • 十进制整数
    var intNum=10;
  • 八进制
    var octalNum1=070; //八进制56;
    var octalNum2=079;//无效八进制,解析为79;
  • 十六进制
    var hexNum=0xA; //十六进制的10;
    在进行算数计算时,所有八进制和十六进制表示的数值最终被转换为十进制数值。
  • 浮点数值
    • 该数值中必须包含一个小数点且小数点后面必须至少有一位数字。
    • var floatnum=1.0; var floatnum1=1.; //这两种写法都将解析为整数1;
    • 极大极小值用e表示,eg floatnum=3.125e7;
    • 最高精度是17位小数,但算数计算精度较差。0.1+0.2的值是0.30000000000000004,因此不能测试特定浮点数值。
  • 数值范围
    • Number.MIN_VALUE=5e-324        Number.Max_VALUE=1.7976931348623157e+308
    • 若计算结果超出数值范围,数值将会自动转换为Infinity或-Infinity,(可用isFinite()函数检测一个数值是否有穷);
  • NaN(Not a Number 即非数值)
    • 任何数值除以非数值都会返回NaN;
    • NaN与任何值都不相等,包括NaN本身;
    • isNaN()函数,可判断数值是否不是数值。任何不能被转换为数值的值都会返回true。
    alert(isNaN(NaN)); //true
    alert(isNaN(10));  //false
    alert(isNaN("10"));//false(可以被转换成10)
    alert(isNaN("blue"));//true
    alert(isNaN(true));//false(可被转换为1)
  • 数值转换

    • Number()函数可用于任何数据类型、parseInt()和parseFloat()函数专门把字符串转换为数值

    • Number()转换例子

var num1 = Number("Hello world!");    //NaN
var num2 = Number("");                //0
var num3 = Number("00011");          //11
var num4 = Number(true);             //1
  • parseInt()转换例子
var num1 = parseInt("1234blue");    //1234
var num2 = parseInt("");           //NaN
var num3 = parseInt("0xA");        //10十六进制
var num4 = parseInt(22.5);         //22
var num5 = parseInt("070",16);     //56八进制,第二个参数指定进制
  • parseFloat()转换例子
var num1 = parseFloat("1234blue");    //1234
var num2 = parseFloat("0xA");         //0
var num3 = parseFloat("22.5");         //22.5
var num4 = parseFloat("22.35.12");         //22.35
var num5 = parseFloat("0908.5");         //908.5
String类型
  • 访问length属性获得长度 eg:alert(数组名.length);//输出数组长度;
  • 字符串一旦创建,它们的值就不能改变。要改变就要销毁原来的字符串,再用另一个包含新值的字符串填充改变量;eg:var lang=”Java”; lang=lang+”script”;
  • 转换为字符串:
    • toString()
var num=10;
alert(num.toString());   //"10"
alert(num.toString(2));   //"1010"
alert(num.toString(8));   //"12"
alert(num.toString(16));   //"a"
  • 在不知道要转换的值是不是null或defined时,可使用String()
var value1 = 10;
var value2 = true;
var value3 = null;
var value4;

alert(String(value1));    //"10"
alert(String(value2));    //"true"
alert(String(value3));    //"null"
alert(String(value4));    //undefined
Object类型
  • 对象是一组数据和功能的集合。对象可通过执行new操作符后跟要创建的对象类型的名称来创建。 var o = new Object();
  • Object的每个实例都具有下列属性和方法。
    • constructor:保存着用于创建当前对象的函数;
    • hasOwnProperty(propertyname):用于检查给定属性在当前对象实例中是否存在。参数的属性名必须以字符串形式制定。如:o. hasOwnProperty(“name”);
    • isPrototypeof(object):检查传入对象是否是当前对象的原型;
    • propertyIsEnumerable(propertyname):检查给定的属性是否能够用for-in语句来枚举;
    • toLocaleString();返回对象的字符串表示,该字符串与执行环境的地区对应;
    • toString();返回对象的字符串表示;
    • valueOf();返回对象的字符串、数值或布尔值表示。
操作符

一元操作符:只能操作一个值

  • 递增递减操作符 与C语言相同
    它们也适用于字符串、布尔值、浮点数值和对象。
var s1="2";
var s2="z";
var b=false;
var f=1.1;
var o={
    valueOf:function(){
            return -1;
      }
};

s1++;//先转换为数字再自加,值变为3
s2++;//值变为NaN
b++;//值变为1
f--;//值变为0.10000000000000009(由于浮点舍入错误所致)
o--;//值变为-2
  • 一元加和减操作
    • 一元加操作放在数值前,对数值不会产生任何影响。
    • 一元减操作放在数值前,相当于将数值变为相反数。

位操作符
按位非 与 或 异或(同假异真) 左移 有符号右移 无符号右移与C语言相同。
布尔操作符

  • 逻辑非(!)
    逻辑非操作首先会将它的操作数转换为一个布尔值,然后求其反。
alert(!false);   //true
alert(!"blue");   //非空字符串返回false
alert(!"");//空字符串返回true
alert(!0);//true
alert(!NaN);//NaN返回true
alert(!123);//任何非0数值返回false

     逻辑非也可将一个数值转换为与其对应的布尔值。同时使用两个逻辑非操作。

alert(!!false);   //false
  • 逻辑与(&&)
    操作数不是布尔值的情况:
    • 若第一个操作数是对象,则返回第二个操作数;
    • 若第二个操作数是对象,则只有在第一个操作数的求值结果为true时返回该对象;
    • 若两个操作数都是对象,则返回第二个操作数;
    • 若第一个操作数是null,则返回null;
    • 若第一个操作数是NaN,则返回NaN;
    • 若第一个操作数是undefined,则返回undefined;

先看第一个表达式的布尔值结果,若为真,继续看第二个。若只有两个返回第二个表达式。

  • 逻辑或(||)
    操作数不是布尔值的情况:
    • 若第一个操作数是对象,则返回第一个操作数;
    • 若第一个操作数求值结果为false,返回第二个操作数;
    • 若两个操作数都是对象,则返回第一个操作数;
    • 若两个操作数都是null,则返回null;
    • 若两个操作数都是NaN,则返回NaN;
    • 若两个操作数都是undefined,则返回undefined;

先看第一个表达式的布尔值结果,若为假,继续看第二个。若只有两个返回第二个表达式。

乘性操作符

  • 乘法
操作数 结果
都是数值 常规计算,超范围时返回Infinity或-Infinity
一个是NaN / Infinity与0 NaN
Infinity与非0数值 Infinity或-Infinity
Infinity与Infinity Infinity
有一个数不是数值 后台调用Number()将其转为数值,再应用以上规则
  • 除法
操作数 结果
都是数值 常规计算,超范围时返回Infinity或-Infinity
一个是NaN / Infinity与Infinity相乘 / 0被0除 NaN
非0有限数被0除 / Infinity被任何非零数值除 Infinity或-Infinity
有一个数不是数值 后台调用Number()将其转为数值,再应用以上规则
  • 求模
操作数 结果
都是数值 常规计算
被除数无限大,除数有限大 / 被除数有限大,除数是0 / Infinity和Infinity NaN
被除数有限大,除数无穷大 被除数
被除数为0 0
有一个数不是数值 后台调用Number()将其转为数值,再应用以上规则

加性操作符

  • 加法
操作数 结果
都是数值 常规计算
有一个是NaN / Infinity加-Infinity NaN
Infinity加Infinity Infinity
-Infinity加-Infinity -Infinity
+0加+0 / -0加-0 / +0加-0 +0 / -0 / +0
两个都是字符串 将第二个操作数与第一个操作数拼接
一个操作数是字符串 另一个操作数转换为字符串,然后拼接
有一个操作数是对象、数值或布尔值 调用toString()取得相应字符串值,再应用字符串规则
undefined和null 分别调用String()取得字符串”undefined”和”null”

这里举个例子:

var num1 = 5;
var num2 = 10;
var message1="The sum of 5 and 10 is" + num1 + num2;
var message2="The sum of 5 and 10 is" + (num1 + num2);
alert(message1);  //"The sum of 5 and 10 is 510"
alert(message2);  //"The sum of 5 and 10 is 15"
  • 减法
操作数 结果
都是数值 常规计算
有一个是NaN / -Infinity减-Infinity /Infinity减Infinity NaN
Infinity减-Infinity Infinity
-Infinity减Infinity -Infinity
+0减+0 / -0减-0 / +0减-0 +0 / +0 / -0
有一个是字符串、数值、布尔值、undefined或null 调用Number()转换为数值,再应用减法规则
有一个操作数是对象 valueOf()取得表示该对象的值,若无valueOf()则用toString()

关系操作符:<、 >、 <=、 >=

返回值为true或false

var result = "Black"<"apple";  //true  B字符编码66,a为97
var result = "Black".toLowercase()<"apple".toLowercase(); //false toLowercase()大写转小写
var result = "23"<"3";  //true  比较字符编码
var result = "23"<3;    //false"23"转为23
var result = "a"<3;     //false  a被转换为NaN NaN与任何操作数比较都是NaN

相等操作符:相等(==)和不相等(!=)、全等(===)和不全等(!==)
相等和不相等——先转换再比较
转换规则

  • 一个是布尔值时,转换为0或1;
  • 一个字符串,一个数值时,转字符串为数值; var a=("55"==55); //true
  • 一个是对象,一个不是对象,调用对象的valueOf(),再按照前面规则进行比较;
  • 比较遵循规则:
    • null==undefined
    • 比较相等性之前,null和undefined不转换为其他值
    • 存在NaN,相等操作返回false,不相等返回true(NaN!=NaN);
    • 若都是对象,比较它们是不是同一对象。

全等和不全等——仅比较不转换
全等:两者的值和类型都要相同。null与undefined为不同类型。

var result1 = ("55"==55);   //true 转换后相等
var result2 = ("55"===55); //false 数据类型不等

条件操作符(?:) 赋值操作符 逗号操作符 与C语言相同

语句

for-in语句:精准的迭代语句,可以用来枚举对象的属性。
语法:for(property in expression) statement
eg:

for(var propName in window){
    document.write(propName)
} 

若要迭代的对象变量值为null或undefined,for-in会抛出错误。因此在使用之前要检测对象值不是null或undefined。
lable break continue语句

var num = 0;
outermost:
for(var i=0;i<10;i++){
   for(var j=0;j<10;j++){
       if(i==5&&j==5){
        break outermost;  //i与j同时为5时,跳出循环
       }
     num++;  
   }
}
alert(num);//55
var num = 0;
outermost:
for(var i=0;i<10;i++){
   for(var j=0;j<10;j++){
       if(i==5&&j==5){
        continue outermost;  //i与j同时为5时,跳到outermost,相当于j少执行了五次
       }
     num++;  
   }
}
alert(num);//95

with语句
* 作用:将代码的作用域设置到一个特定的对象中。
* 语法:with (expression) statement;

with(location){
 var qs=search.substring(1);  //相当于var qs=location.search.substring(1);
 var hostName=hostName;//相当于var hostName=location.hostName;
} 

with语句虽然暂时简化代码,但js的解释器需要检查with块中的变量是否属于with包含的对象,这将使with语句执行速度大大下降,并且导致js语句很难被优化,因此不常用。

switch case与C语言相同,不过JS中switch语句中可以使用任何数据类型。

函数
function doAdd(num1,num2){
   if(arguments.lenght==1){   //若函数只有一个参数传入
      alert(num1+10);
   }
   else if(arguments.lenght==2){  //若函数有两个参数传入
      alert(arguments[0]+num2);
  }
}
  • 无需指定函数返回值,任何ECMAScript函数都可以在任何时候返回任何值。
  • 未指定返回值的函数返回的是一个特殊的undefined值。
  • ECMAScript没有函数签名的概念,因为其参数是以一个包含零或多个值的数组的形式传递。不存在函数签名特性,函数不能重载。
  • 可以向ECMAScript函数传递任意数量参数,并可以通过arguments对象来访问这些参数。

猜你喜欢

转载自blog.csdn.net/gaoshanyangzhi_1999/article/details/81129925
今日推荐