学习笔记-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"

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,734评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,931评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,133评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,532评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,585评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,462评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,262评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,153评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,587评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,635评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,237评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2 354

推荐阅读更多精彩内容

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