学习笔记-js-2017.2.22

一、while 循环

1、while 循环会在指定条件为真时循环执行代码块。

语法：

while (条件)
{
    需要执行的代码
}

<button onclick="myFunction()">点击</button>
    <P id="demo"></P>
    <script type="text/javascript">
        function myFunction(){
            var x="",i=0;
            while(i<5){
                x=x+"该数字为 "+i+"<br>";
                i++;
            }
                document.getElementById("demo").innerHTML=x;
        }
    </script>

2、do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

语法：

do
{
    需要执行的代码
}
while (条件);

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

3、比较 for 和 while

二、Break 和 Continue 语句

1、break 语句可用于跳出循环。

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

2、continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。

<script type="text/javascript">
    function myFunction(){
        var x="",i=0;
        for(;i<10;i++){
            if(i==3){
                continue;
            }
            x=x+"该数字为 "+i+"<br>"    
        }
        document.getElementById("demo").innerHTML=x;
    }
</script>

3、JavaScript 标签
需标记 JavaScript 语句，语句之前加上冒号：


label:
statements

break 和 continue 语句仅仅是能够跳出代码块的语句。


break labelname; 
 
continue labelname;

continue 语句（带有或不带标签引用）只能用在循环中。

break 语句（不带标签引用），只能用在循环或 switch 中。

通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：

<script type="text/javascript">
    cars=["a","b","c","d"];
    list:{
        document.write(cars[0]+"<br>");
        document.write(cars[1]+"<br>");
        document.write(cars[2]+"<br>");
        break list;
        document.write(cars[3]+"<br>");
        document.write(cars[4]+"<br>");
        document.write(cars[5]+"<br>");
    }
</script>

三、 typeof, null, 和 undefined

1、typeof 操作符

<script type="text/javascript">
    document.getElementById("demo").innerHTML=
        typeof "John"+"<br>"+typeof 3.14+"<br>"+typeof false +"<br>"+typeof [1,2,3,4]+"<br>"+typeof {name:'john',age:34};
</script>

2、在 JavaScript 中 null 表示 "什么都没有"。

null是一个只有一个值的特殊类型。表示一个空对象引用。

设置为 null 来清空对象

<script type="text/javascript">
    var person = {firstName:"John",lastName:"Doe",age:50,eyeColor:"blue"};
    var person = null;
    document.getElementById("demo").innerHTML = typeof person;
</script>

设置为 undefined 来清空对象

<script type="text/javascript">
    var person = {firstName:"John",lastName:"Doe",age:50,eyeColor:"blue"};
    var person = undefined;
    document.getElementById("demo").innerHTML = typeof person;
</script>

3、在 JavaScript 中, undefined 是一个没有设置值的变量。

typeof 一个没有值的变量会返回 undefined。

<script type="text/javascript">
    var person; // 值为 null(空), 但仍然是一个对象
    document.getElementById("demo").innerHTML=person+"<br>"+typeof person;
</script> 

<script type="text/javascript">
var person = {firstName:"John",lasrName:"Doe",age:50,eyeColor:"blue"};
var person=undefined;// 值为 undefined, 类型是undefined
document.getElementById("demo").innerHTML=person+"<br>"+typeof person;
</script>

4、Undefined 和 Null 的区别

<script type="text/javascript">
    document.getElementById("demo").innerHTML=
    typeof undefined+"<br>"+typeof null + "<br>"+(null===undefined)+"<br>"+(null==undefined);
</script>

四、类型转换

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

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

string
number
boolean
object
function

3 种对象类型：

Object
Date
Array

2 个不包含任何值的数据类型：

null
undefined

<script>
document.getElementById("demo").innerHTML = 
    typeof "john" + "<br>" +
    typeof 3.14 + "<br>" +
    typeof NaN + "<br>" +
    typeof false + "<br>" +
    typeof [1,2,3,4] + "<br>" +
    typeof {name:'john', age:34} + "<br>" +
    typeof new Date() + "<br>" +
    typeof function () {} + "<br>" +
    typeof myCar + "<br>" +
    typeof null;
</script>
  • NaN 的数据类型是 number
  • 数组(Array)的数据类型是 object
  • 日期(Date)的数据类型为 object
  • null 的数据类型是 object
  • 未定义变量的数据类型为 undefined

2、constructor 属性返回所有 JavaScript 变量的构造函数。

<script>
document.getElementById("demo").innerHTML = 
    "john".constructor + "<br>" +
    (3.14).constructor + "<br>" +
    false.constructor + "<br>" +
    [1,2,3,4].constructor + "<br>" +
    {name:'john', age:34}.constructor + "<br>" +
    new Date().constructor + "<br>" +
    function () {}.constructor;
</script>

3、使用 constructor 属性来查看是对象是否为日期 (包含字符串 "Date"):

<script type="text/javascript">
    var myDate=new Date();
    document.getElementById("demo").innerHTML=isDate(myDate);
    function isDate(mydate){
        return myDate.constructor.toString().indexOf("Date")>-1;
    }
</script>

4、JavaScript 类型转换

JavaScript 变量可以转换为新变量或其他数据类型：

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

5、将数字转换为字符串

全局方法 String() 可以将数字转换为字符串。

该方法可用于任何类型的数字，字母，变量，表达式

<script type="text/javascript">
    var x=123;
    document.getElementById("demo").innerHTML=
        String(x)+"<br>"+String(123)+"<br>"+String(100+23);
//  String(X)将变量 x 转换为字符串并返回
// String(123)将数字 123 转换为字符串并返回
// String(100+23)将数字表达式转换为字符串并返回
</script>

6、Number 方法 toString() 也是有同样的效果。

<script type="text/javascript">
    var x=123;
    document.getElementById("demo").innerHTML=
        x.toString()+"<br>"+(123).toString()+"<br>"+(100+23).toString();
</script>

7、将布尔值转换为字符串
全局方法 String() 可以将布尔值转换为字符串。

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

Boolean 方法 toString() 也有相同的效果。

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

8、将日期转换为字符串

全局方法 String() 可以将日期转换为字符串。

Date 方法 toString() 也有相同的效果。

9、将字符串转换为数字

全局方法 Number() 可以将字符串转换为数字。

字符串包含数字(如 "3.14") 转换为数字 (如 3.14).

空字符串转换为 0。

其他的字符串会转换为 NaN (不是个数字)。

10、一元运算符 +

<script type="text/javascript">
    function myFunction(){
        var y="5";
        var x= + y;
        document.getElementById("demo").innerHTML=typeof y +"<br>"+typeof x;
    }
</script>

11、将布尔值转换为数字

全局方法 Number() 可将布尔值转换为数字。

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

12、将日期转换为数字

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

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

13、自动转换类型

当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。

5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"   null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1" 
"5" - 1     // 返回 4         "5" 转换为 5

14、自动转换为字符串

document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
// if myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
// if myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"


// if myVar = 123             // toString 转换为 "123"
// if myVar = true            // toString 转换为 "true"
// if myVar = false           // toString 转换为 "false"
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • JS高级程序设计3学习笔记（一）
    有人说过，很多弯路到最后都成了直路，所有的坑到最后也都成了坦途；所谓的直路和坦途并不是摆在眼前的，都是不断的的...
    老衲法号一眉道人阅读 1,360评论 0赞 4
  • RYF javascript笔记1
    标签： 我的笔记 ---学习资料：http://javascript.ruanyifeng.com/ 1. 导论 ...
    暗夜的怒吼阅读 836评论 0赞 1
  • JavaScript 高级程序设计 笔记一
    第1章 JavaScript 简介 JavaScript 具备与浏览器窗口及其内容等几乎所有方面交互的能力。 欧洲...
    力气强阅读 1,172评论 0赞 0
  • 胡说八道系列|004
    《只要你肯努力，我愿做你的后盾》 北上广深就像是中国的四大家族的小姐，而我就是一个为生计奔波的打工男，虽然一直以来...
    南宫元晖阅读 245评论 0赞 1
  • 霾
    心像一片羽毛 有时轻飘飘的逍遥 突然又坠入深渊万丈 一粒石子袭来 又负重不堪 坠落 沉入 扑通 消失 终究放不下啊...
    紫晴沐雪阅读 253评论 0赞 2