JavaScript

目录

JavaScript简介

  • 能直接写入HTML输出流中

    <script>document.write("<h1>我是一级标题</h1>")</script>

  • 能对事件的反应

    <button type="button" onclick="alert('欢迎')">使劲点我</button>

  • 能改变HTML内容

    <p id="demo">JavaScript能改变HTML的内容</p>
<script>
    function myFunction() {
        x = document.getElementById("demo");//找到元素
        x.innerHTML = "Hello JavaScript";//改变内容
    }//document.getElementByid("some id")是由DOM（Document Object Model）（文档对象模型）定义的，用于访问HTML元素的正式W3C标准
</script>
<button type="button" onclick="myFunction()">点击这里</button>

  • 改变HTML图像

    <script>
function changeImage()
{
	element=document.getElementById("myimage")//都是用双引号
	if (element.src.match("bulbon"))//检索img标签中的src属性值有没有包含bulbon这个字符串
	{
		element.src="https://www.runoob.com/images/pic_bulboff.gif";
	}
	else
	{
		element.src="https://www.runoob.com/images/pic_bulbon.gif";
	}
}
</script>
<img id="myimage" onclick="changeImage()" src="https://www.runoob.com/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>

  • 能改变HTML样式，属于改变HTML属性的变种

    <p id="demo">JavaScript能改变HTML的样式</p>
<script>
    function myfunction() {
        x=document.getElementById("demo") //找到元素
        x.style.color="#ff0000"; //改变样式
    }
</script>
<button type="button" onclick="myfunction()">使劲点击我</button>

  • 用于验证用户的输入

    <p>请输入数字</p>
<input id="demo" type="text">
<script>
    function myFunction() {
        var x=document.getElementById("demo").value;
        if(x==""||isNaN(x))
        {
            alert("不是数字");
        }
    }
</script>
<button type="button" onclick="myFunction()">点击这里</button>

JavaScript用法

浏览器会解释并执行位于<script></script>之间的JavaScript代码。

<script>alert('hello world')</script> //内部引入方式
<script src="myScript.js"></script> //外部导入方式，不能包含<script>标签

JavaScript输出

  • 使用window.alert()弹出警告框

    <script>window.alert(5+6);</script>
<script>window.alert("5+6");</script> //注意二者区别

  • 使用document.write()方法将内容写到HTML文档中

    <script>document.write(Date());</script>

  • 如果在文档已完成加载后执行document.write，整个HTML页面将被覆盖

    <p>我是标题标签</p>
<button onclick="myFunction()">使劲戳我</button>
<script>
    function myFunction() {
        document.write(Date())
    }
</script>

  • 使用innerHTML写入或获取HTML元素

    <p id="demo">hello world</p>
<script>
    document.getElementById("demo").innerHTML="世界你好";
</script>

  • 使用console.log()写入到浏览器的控制台

    <script>
    a=5;
    b=6;
    c=a+b;
    console.log(c);
</script>
<p>浏览器使用F12来启用调试模式，在console菜单查看</p>

JavaScript语法

在编程语言中，一般固定值称为字面量，如3.14。

JavaScript字面量(typeof)-值

  • 数字（Number）字面量：整数、小数、科学计数
3.14 1000 123e5

  • 字符串（String）字面量：单引号、双引号

  • 表达式字面量：用于计算，如5+6

  • 数组（Array）字面量：定义一个数组

var nums = [2,5,7,1,9]
  • 对象（Object）字面量：定义一个对象
var person = {firstName:"allen",lastName:"jin",age:18}
  • 函数（Function）字面量：定义一个函数
function myFunction(a,b){return a * b;}

JavaScript变量-名称

变量用于存储数据值，使用关键字var定义变量，使用等号为变量赋值。

<p id="demo"></p>
<script>
    var length;
    length=4;
    document.getElementById("demo").innerHTML=length;

需求：假设y=5，计算x=y+2并显示结果

<p>假设y=5，计算x=y+2并显示结果</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var y=5;
        var x=y+2;
        var demoP=document.getElementById("demo");
        demoP.innerHTML="x="+x;
    }
</script>

JavaScript操作符

用算术运算符来计算值；

<p id="demo"></p>
<script>
    document.getElementById("demo").innerHTML=(5+6)*10;
</script>

用赋值运算符给变量赋值

<p id="demo"></p>
<script>
    var x,y,z;
    x=5;
    y=6;
    z=(x+y)*10;
    document.getElementById("demo").innerHTML=z;
</script>

注：关键字用于标识要执行的操作，语句用分号分隔，注释用//表示，对大小写敏感，使用Unicode字符集，驼峰法命名规则lastName。

JavaScript语句标识符

语句 描述
break 用于跳出循环。
catch 语句块，在 try 语句块执行出错时执行 catch 语句块。
continue 跳过循环中的一个迭代。
do ... while 执行一个语句块，在条件语句为 true 时继续执行该语句块。
for 在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function 定义一个函数
if ... else 用于基于不同的条件来执行不同的动作。
return 退出函数
switch 用于基于不同的条件来执行不同的动作。
throw 抛出（生成）错误 。
try 实现错误处理，与 catch 一同使用。
var 声明一个变量。
while 当条件语句为 true 时，执行语句块。

JavaScript数据类型

  • 值类型：字符串（String）、数字（Number）、布尔（Boolean）、对空（Null）、未定义（Undefined）、Symbol（独一无二的值）

  • 引用数据类型：对象（Object）、数组（Array）、函数（Function）

  • JavaScript拥有动态类型，即相同变量可用作不同的类型

    var x; //x为undefined
var x=5; //现在x为数字
var x="allen"; //现在x为字符串

  • 声明新变量时，可使用关键词"new"来声明其类型

    var cars=new Array;
var x=new Number;
//JavaScript变量均为对象。当声明一个变量时，就创建了一个新的对象。

  • Undefined表示变量不含有值，可通过将变量的值设置为null来清空变量。

  • JavaScript对象由花括号分隔。括号内部是对象的属性以名称和值对的形式（name:value）来定义。属性由逗号分隔：

    var person={firstname:"allen",lastname:"jin",age=20};
//对象属性有两种寻址方式：
name=person.lastname;
name=person["lastname"];

  • 创建数组有四种方式：

    var arr1=new Array('a','b','c');//创建时初始化
var arr2=['a','b','c'];//同上，更简洁
var arr3=new Array(); //空数组
var arr4=[]; //空数组

JavaScript对象

JavaScript对象是拥有属性和方法的数据，是键值对的容器。键值对（对象属性）通常写法为name：value（键与值以冒号分隔）

<p id="demo"></p>
<script>
    var person={
        firstName:"allen",
        lastName:"jin",
        age:18
    };
    document.getElementById("demo").innerHTML=person["firstName"]+""+person.lastName; //访问对象属性
</script>

JavaScript函数

函数是由事件驱动的或当它被调用时执行的可重复使用的代码块。

<p>点击这个按钮，来调用带参数的函数</p>
<button onclick="myFunction('allen','IT')">点击这里</button>
<script>
    function myFunction(name,job){
        alert("welcome "+name+",the "+job);
    }
</script>

带有返回值的函数

有时，我们会希望函数将值返回调用它的地方，通过使用return语句可以实现。使用时，函数会停止运行，并返回指定的值。

<p id="demo"></p>
<script>
    function myFunction(a,b) {
        return a*b;
    }
    document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

JavaScript作用域

  • 局部变量：在函数中通过var声明的变量
  • 全局变量：在函数外通过var声明的变量。
  • 没有声明就使用的变量，默认为全局变量，不论这个变量在哪里被使用。

JavaScript事件

HTML事件是发生在HTML元素上的事情，当在HTML页面上使用JavaScript时，JavaScript可以触发这些事件。

<button onclick="this.innerHTML=Date()">现在的时间是？</button>
代码将修改自身元素的内容，使用this关键字

常见的HTML事件

事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

JavaScript字符串

JavaScript字符串用于存储和处理文本。

<script>
    var txt="hello world!"
    document.write("<p>"+txt.length+"</p>");
</script> //求字符串的长度

特殊字符

代码 输出
' 单引号
" 双引号
\ 反斜杠
\n 换行
\r 回车
\t tab(制表符)
\b 退格符
\f 换页符

字符串属性

属性 描述
constructor 返回创建字符串属性的函数
length 返回字符串的长度
prototype 允许您向对象添加属性和方法

字符串方法

方法 描述
charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的 Unicode 值
concat() 连接两个或多个字符串，返回连接后的字符串
fromCharCode() 将 Unicode 转换为字符串
indexOf() 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
localeCompare() 用本地特定的顺序来比较两个字符串
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分
split() 把字符串分割为子字符串数组
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase() 把字符串转换为小写
toString() 返回字符串对象值
toUpperCase() 把字符串转换为大写
trim() 移除字符串首尾空白
valueOf() 返回某个字符串对象的原始值

JavaScript运算符

运算符=用于赋值；运算符+用于加值；！==：不绝对等于；++：自增；--：自减；===绝对等于（值和类型均相等）；&&：and；||：or；！：not；。

需求：如果变量age中的值小于18，则向变量voteable赋值“年龄太小”，否则赋值“年龄已达到”。

<p>点击按钮检测年龄</p>
年龄：<input id="age" type="text" value="18">
<p>是否达到投票年龄？</p>
<button onclick="myFunction()">点击按钮</button>
<p id="demo"></p>
<script>
    function myFunction(){
        var age,voteable;
        age=document.getElementById("age").value;
        voteable=(age<18)?"年龄太小":"年龄已达到";
        document.getElementById("demo").innerHTML=voteable;
    }
</script>

JavaScript条件语句

条件语句基于不同的条件来执行不同的操作。

需求：如果时间小于 10:00，则生成问候 "Good morning"，如果时间大于 10:00 小于 20:00，则生成问候 "Good day"，否则生成问候 "Good evening"

    <script type="text/javascript">
        var d = new Date();
        var time=d.getHours();
        if (time<10)
        {
            document.write("<b>Good morning</b>")
        }
        else if(time>=10 && time<16)
        {
            document.write("<b>Good day</b>")
        }
        else
        {
            document.write("<b>Good evening</b>")
        }
    </script>

JavaScript switch语句

switch语句基于不同的条件来执行不同的操作。

工作原理：首先设置表达式n（通常是一个变量）。随后表达式的值会与结构中的每个case的值作比较。如果存在匹配，则与该case关联的代码块会被执行。请使用break来阻止代码自动地向下一个case运行。

需求：显示今天的星期名称。注意Sunday=0，Monday=1...等等

<p>点击下面按钮显示今天星期几：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var x;
        var d = new Date().getDay();
        switch (d) {
            case 0:
                x = "今天是星期日";
                break;
            case 1:
                x = "今天是星期一";
                break;
            case 2:
                x = "今天是星期二";
                break;
            case 3:
                x = "今天是星期三";
                break;
            case 4:
                x = "今天是星期四";
                break;
            case 5:
                x = "今天是星期五";
                break;
            case 6:
                x = "今天是星期六";
                break;
        }
        document.getElementById("demo").innerHTML=x;
    }
</script>

default关键词

用于匹配不存在时做的事情

需求：如果今天不是星期六或星期日，则会输出默认的消息

<p>点击按钮，显示今日消息：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var x;
        var d = new Date().getDay();
        switch (d) {
            case 6:
                x = "今天是星期六";
                break;
            case 0:
                x = "今天是星期日";
                break;
            default:
                x = "期待周末"
        }
        document.getElementById("demo").innerHTML = x;
    }
</script>

JavaScript 循环

循环可以将代码块执行指定的次数。

  • for——循环代码块一定的次数

    <script>
    nums = ["11", "22", "33", "44"]
    for (var i = 0; i < nums.length; i++) {
        document.write(nums[i] + "<hr>");
    }
</script> //for循环写法

<script>
    nums = ["11", "22", "33", "44"];
    var i = 0;
    while (nums[i]) {
        document.write(nums[i] + "<hr>");
        i++;
    }
</script> //while写法

  • for/in——循环遍历对象的属性

    <button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var x;
        var txt = "";
        var person = {fname: "allen", lname: "jin", age: 18};
        for (x in person) {
            txt = txt + person[x];
        }
        document.getElementById("demo").innerHTML = txt;
    }
</script>

  • while——当指定的条件为true时循环指定的代码块

    <button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var x = "", i = 0;
        while (i < 5) {
            x = x + "该数字为" + i + "<hr>";
            i++;
        }
        document.getElementById("demo").innerHTML = x;
    }
</script> //如果忘记增加条件中所用变量的值，该循环永远不会结束，可能导致浏览器崩溃

  • do/while——同样当指定的条件为true时循环指定的代码块

    <button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var x = "", i = 0;
        do {
            x = x + "该数字为" + i + "<hr>";
            i++;
        }
        while (i < 5)
        document.getElementById("demo").innerHTML = x;
    }
</script>

JavaScript Break和Continue语句

  • break语句用于跳出循环

    <button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var x = "", i = 0;
        for (i = 0; i < 10; i++) {
            if (i == 3) {
                break;
            }
            x = x + "该数字为" + i + "<hr>";
        }
        document.getElementById("demo").innerHTML = x;
    }
</script>

  • continue用于跳出循环中的一个迭代

    <button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var x = "", i = 0;
        for (i = 0; i < 10; i++) {
            if (i == 3) {
                continue;
            }
            x = x + "该数字为" + i + "<hr>";
        }
        document.getElementById("demo").innerHTML = x;
    }
</script>

typeof、null、undefined

  • typeof操作符检测变量的数据类型

    typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object
//数组是一种特殊的对象类型

  • null表示什么都没有，一个值得特殊类型。表示一个空对象引用

    var person = null;           // 值为 null(空), 但类型为对象
var person = undefined;     // 值为 undefined, 类型为 undefined

  • undefined是一个没有设置值的变量。

    var person;  // 值为 undefined(空), 类型是undefined
person = undefined;          // 值为 undefined, 类型是undefined
//任何变量都可以通过设置值为 undefined 来清空。 类型为 undefined

  • undefined和null的区别

    typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true
// null和undefined的值相等，但类型不等

JavaScript类型转换

Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。

在JavaScript中有5种不同的数据类型：

  • string
  • number
  • boolean
  • object
  • function

在JavaScript中有3中对象类型：

  • Object
  • Date
  • Array

在JavaScript中有2个不包含任何值得数据类型：

  • null
  • undefined

typeof操作符

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object
  • NaN的数据类型是number
  • 数组（Array）的数据类型是object
  • 日期（Date）的数据类型为object
  • null的数据类型是object
  • 未定义变量的数据类型为underfined
  • 若对象是JavaScript Array或JavaScript Date，我们无法通过typeof来判断类型，因为返回都是object。

constructor属性

返回所有JavaScript变量的构造函数

"John".constructor      // 返回函数 String()  { [native code] }
(3.14).constructor      // 返回函数 Number()  { [native code] }
false.constructor       // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor   // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor   // 返回函数 Date()    { [native code] }
function () {}.constructor  // 返回函数 Function(){ [native code] }

使用constructor属性来查看对象是否为数组（包含字符串"Array"）

<p>判断是否为数组</p>
<p id="demo"></p>
<script>
    var nums = ['11', '22', '33', '44'];
    document.getElementById("demo").innerHTML = isArray(nums);

    function isArray(myArray) {
        return myArray.constructor.toString().indexOf("Array") > -1;
    }
</script>

使用constructor属性来查看对象是否为日期（包含字符串"Date"）

<p>判断是否为日期</p>
<p id="demo"></p>
<script>
    var myDate = new Date();
    document.getElementById("demo").innerHTML = isDate(myDate);

    function isDate(myDate) {
        return myDate.constructor.toString().indexOf("Date") > -1;
    }
</script>

JavaScript类型转换

  • 通过使用JavaScript函数
  • 通过JavaScript自身自动转换

将数字转换为字符串

String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String(100 + 23)  // 将数字表达式转换为字符串并返回
x.toString()
(123).toString()
(100 + 23).toString()

将布尔值转换为字符串

String(false)        // 返回 "false"
String(true)         // 返回 "true"
false.toString()     // 返回 "false"
true.toString()      // 返回 "true"

将日期转换为字符串

Date() //返回字符串
String(new Date()) //转成字符串
obj=new Date()
obj.toString() //返回字符串
方法 描述
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

将字符串转换为数字

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0
Number("")        // 返回 0
Number("99 88")   // 返回 NaN,不是数字
方法 描述
parseFloat() 解析一个字符串，并返回一个浮点数。
parseInt() 解析一个字符串，并返回一个整数。

将布尔值转换为数字

Number(false)     // 返回 0
Number(true)      // 返回 1

将日期转化为数字

d = new Date();
Number(d)          // 返回 1404568027739
d = new Date();
d.getTime()        // 返回 1404568027739

下表展示使用不同数值转换：

原始值 转换为数字 转换为字符串 转换为布尔值
false 0 "false" false
true 1 "true" true
0 0 "0" false
1 1 "1" true
"0" 0 "0" true
"000" 0 "000" true
"1" 1 "1" true
NaN NaN "NaN" false
Infinity Infinity "Infinity" true
-Infinity -Infinity "-Infinity" true
"" 0 "" false
"20" 20 "20" true
"Runoob" NaN "Runoob" true
[ ] 0 "" true
[20] 20 "20" true
[10,20] NaN "10,20" true
["Runoob"] NaN "Runoob" true
["Runoob","Google"] NaN "Runoob,Google" true
function(){} NaN "function(){}" true
NaN "[object Object]" true
null 0 "null" false
undefined NaN "undefined" false

JavaScript正则表达式

用于所有文本搜索和文本替换的操作，语法：/正则表达式主体/修饰符（可选）

  • search()方法使用正则表达式——文本搜索

    var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i); 

var str = "Visit Runoob!"; 
var n = str.search("Runoob"); //字符串作为参数

  • replace()方法使用正则表达式——文本替换

    var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"Runoob");

var str = document.getElementById("demo").innerHTML; 
var txt = str.replace("Microsoft","Runoob");

正则表达式修饰符

修饰符可以在全局搜索中不区分大小写

修饰符 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。

正则表达式模式

方括号用于查找某个范围内的字符：

表达式 描述
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
(x|y) 查找任何以 | 分隔的选项。

元字符是拥有特殊含义的字符：

元字符 描述
\d 查找数字。
\s 查找空白字符。
\b 匹配单词边界。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

量词 描述
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。

需求：正则表达式表单验证实例

/*是否带有小数*/
function    isDecimal(strValue )  {  
   var  objRegExp= /^\d+\.\d+$/;
   return  objRegExp.test(strValue);  
}  

/*校验是否中文名称组成 */
function ischina(str) {
    var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验是否全由8位数字组成 */
function isStudentNo(str) {
    var reg=/^[0-9]{8}$/;   /*定义验证表达式*/
    return reg.test(str);     /*进行验证*/
}

/*校验电话码格式 */
function isTelCode(str) {
    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
    return reg.test(str);
}

/*校验邮件地址是否合法 */
function IsEmail(str) {
    var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
    return reg.test(str);
}

JavaScript错误处理

  • try语句测试代码块的错误

  • catch语句处理错误

  • throw语句创建自定义错误

  • finally语句在try和catch语句之后，无论是否触发异常，该语句都会执行。

    try {
    ...    //异常的抛出
} catch(e) {
    ...    //异常的捕获与处理
} finally {
    ...    //结束处理
}

    function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
    message.innerHTML = "错误: " + err + ".";
  }
  finally {
    document.getElementById("demo").value = "";
  }
}

JavaScript调试

  • 浏览器调试

    a = 5;
b = 6;
c = a + b;
console.log(c);

  • debugger关键字

    var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

JavaScript变量提升

函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

JavaScript只有声明的变量会提升，初始化的不会

//例1
var x = 5; // 初始化 x
var y = 7; // 初始化 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y
//例2
var x = 5; // 初始化 x
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y
var y = 7; // 初始化 y

实例 2 的 y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。

实例 2 类似以下代码:

var x = 5; // 初始化 x
var y;     // 声明 y
elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y
y = 7;    // 设置 y 为 7

为了避免这些问题，通常在每个作用域开始前声明这些变量，这才是正常的JavaScript解析步骤。

JavaScript严格模式

"use strict"指令只允许出现在脚本或函数的开头

  • 不允许使用未声明的变量

    "use strict";
x = 3.14;                // 报错 (x 未定义)

  • 不允许删除变量或对象

    "use strict";
var x = 3.14;
delete x;                // 报错

  • 不允许删除函数

    "use strict";
function x(p1, p2) {};
delete x;                // 报错

  • 不允许变量重名

    "use strict";
function x(p1, p1) {};   // 报错

  • 不允许使用转义字符

    "use strict";
var x = \010;            // 报错

  • 不允许对只读属性赋值

    "use strict";
var obj = {};
Object.defineProperty(obj, "x", {value:0, writable:false});
obj.x = 3.14;            // 报错

  • 不允许对一个使用getter()方法读取的属性进行赋值

    "use strict";
var obj = {get x() {return 0} };
obj.x = 3.14;            // 报错

  • 变量名不能使用"eval"与"arguments"字符串

    "use strict";
var eval = 3.14;         // 报错
"use strict";
var arguments = 3.14;    // 报错

  • 由于一些安全原因，在作用域eval()创建的变量不能被调用

    "use strict";
eval ("var x = 2");
alert (x);               // 报错

  • 禁止this关键字指向全局对象

    function f(){
    return !this;
} 
// 返回false，因为"this"指向全局对象，"!this"就是false

function f(){ 
    "use strict";
    return !this;
} 
// 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。

JavaScript使用误区

赋值运算符应用错误

var x=0;
if (x==10) //if 条件语句返回 false (是我们预期的)因为 x 不等于 10
var x=0;
if (x=10) //if 条件语句返回 true (不是我们预期的)因为条件语句执行为 x 赋值 10，10 为 true
var x=0;
if (x=0) //if 条件语句返回 false (不是我们预期的)因为条件语句执行为 x 赋值 0，0 为 false

比较运算符常见错误

var x=10;
var y="10";
if (x==y) //在常规的比较中，数据类型是被忽略的，以下 if 条件语句返回 true
var x=10;
var y="10";
if (x===y) //在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型，以下 if 条件语句返回 false
var x = 10;
switch(x) {
    case 10: alert("Hello");
} // 这种错误经常会在 switch 语句中出现，switch 语句会使用恒等计算符(===)进行比较:以下实例会执行 alert 弹窗
var x = 10;
switch(x) {
    case "10": alert("Hello");
} //由于类型不一致不会执行 alert 弹窗

加法与连接注意事项

加法是两个数字相加，而连接是两个字符串连接，两者都使用+运算符

var x = 10 + 5;          // x 的结果为 15
var x = 10 + "5";        // x 的结果为 "105"

var x = 10;
var y = 5;
var z = x + y;           // z 的结果为 15
var x = 10;
var y = "5";
var z = x + y;           // z 的结果为 "105"

浮点型数据使用注意事项

JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：

var x = 0.1;
var y = 0.2;
var z = x + y            // z 的结果为 0.3
if (z == 0.3)            // 返回 false

为解决以上问题，可以用整数的乘除法来解决：

var z = (x * 10 + y * 10) / 10;       // z 的结果为 0.3

JavaScript字符串分行

JavaScript 允许我们在字符串中使用断行语句,但是，在字符串中直接使用回车换行是会报错的，字符串断行需要使用反斜杠()

var x =
"Hello World!"; //正确
var x = "Hello
World!"; //错误
var x = "Hello \
World!"; //正确

错误的使用分号

if 语句失去方法体，原 if 语句的方法体作为独立的代码块被执行，导致错误的输出结果

if (x == 19);
{
    // code block 
} //错误

return语句使用注意事项

JavaScript 默认是在代码的最后一行自动结束。以下两个实例返回结果是一样的(一个有分号一个没有):

function myFunction(a) {
    var power = 10 
    return a * power
}
function myFunction(a) {
    var power = 10;
    return a * power;
}

JavaScript 也可以使用多行来结束一个语句。以下实例返回相同的结果:

function myFunction(a) {
    var
    power = 10; 
    return a * power;
} //正确

function myFunction(a) {
    var
    power = 10; 
    return
    a * power;
} //undefined 不用对return语句进行断行

解析

如果是一个不完整的语句，如下所示:

var

JavaScript 将尝试读取第二行的语句：

power = 10;

但是由于这样的语句是完整的:

return

JavaScript 将自动关闭语句:

return;

在 JavaScript 中，分号是可选的 。由于 return 是一个完整的语句，所以 JavaScript 将关闭 return 语句。

数组中使用名字来索引

许多程序语言都允许使用名字来作为数组的索引。使用名字来作为索引的数组称为关联数组(或哈希)。JavaScript 不支持使用名字来索引数组，只允许使用数字索引。

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length 返回 3
var y = person[0];             // person[0] 返回 "John"

在 JavaScript 中,对象 使用 名字作为索引。如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象。执行这样操作后，数组的方法及属性将不能再使用，否则会产生错误:

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length 返回 0
var y = person[0];             // person[0] 返回 undefined

定义数组元素或对象，最后不能添加逗号

添加逗号虽然语法没有问题，但是在不同的浏览器可能得到不同的结果。

var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。
websites = {site:"菜鸟", url:"www.ru.com", like:460,}

正确的定义方式：

points = [40, 100, 1, 5, 25, 10];
websites = {site:"菜鸟", url:"www.ru.com", like:460}

Undefined不是Null

在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。对象只有被定义才有可能为 null，否则为 undefined。如果我们想测试对象是否存在，在对象还没定义时将会抛出一个错误。

错误的使用方式：

if (myObj !== null && typeof myObj !== "undefined")

正确的方式是我们需要先使用 typeof 来检测对象是否已定义：

if (typeof myObj !== "undefined" && myObj !== null)

程序块作用域

在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用域都是全局的。以下代码的的变量 i 返回 10，而不是 undefined：

for (var i = 0; i < 10; i++) {
    // some code
}
return i;

posted on 2019-10-14 22:28  岱宗夫  阅读(440)  评论(0)  编辑  收藏  举报

导航