JavaScript学习记录day3-if语句、循环

简介:

1. if语句

JavaScript使用if () { ... } else { ... }来进行条件判断。

'use strict';
var age = 20;

if (age >= 6 && age < 18) {
    alert('teenager');
} else if (age >= 18) {
    alert('adult');
} else {
    alert('kid');
}

其中else语句是可选的。如果语句块只包含一条语句,那么可以省略{}。建议永远都要写上{},因为js对齐不像python处于同一级别。

var age = 20;
if (age >= 18)
    alert('adult');
else
    console.log('age < 18'); // 添加一行日志
    alert('teenager'); // <- 这行语句已经不在else的控制范围了

JavaScript把nullundefined0NaN空字符串视为false,其他值一概视为true

2. 循环

for
利用for循环计算1 ... 10的结果:

'use strict';

var x = 10;
var i;
for (i=1; i<=10; i++){
    x = x * i;
}

console.log('1 x 2 x 3 x ... x 10 = ' + x);

for循环最常用的地方是利用索引来遍历数组:

var arr = ['Apple', 'Google', 'Microsoft'];
var i, x;
for (i=0; i<arr.length; i++) {
    x = arr[i];
    console.log(x);
}

结果:

Apple
Google
Microsoft

for循环的3个条件都是可以省略的,如果没有退出循环的判断条件,就必须使用break语句退出循环,否则就是死循环:

var x = 0;
for (; ;) { // 将无限循环下去
    if (x > 100) {
        console.log('停止时x为' + x);
        break; // 通过if判断来退出循环
    }
    x++;
}

结果:

停止时x为101

for ... in
for循环的一个变体是for ... in循环,它可以把一个对象的所有属性依次循环出来:

var me = {
    name: 'ygqygq2',
    age: 28,
    sex: 'male'
};

for (var key in me) {
    console.log(key, me[key])
}

要过滤掉对象继承的属性,用hasOwnProperty()来实现:

var me = {
    name: 'ygqygq2',
    age: 28,
    sex: 'male'
};

for (var key in me) {
    if (me.hasOwnProperty(key)){  // 对象me的key属性存在时
        console.log(key, me[key])
    }
}

由于Array也是对象,而它的每个元素的索引被视为对象的属性,因此,for ... in循环可以直接循环出Array的索引:

var a = ['A', 'B', 'C'];
for (var i in a) {
    console.log(i); // '0', '1', '2'
    console.log(a[i]); // 'A', 'B', 'C'
}

<font color=red>请注意</font>,for ... inArray的循环得到的是String而不是Number

while

for循环在已知循环的初始和结束条件时非常有用。而上述忽略了条件的for循环容易让人看不清循环的逻辑,此时用while循环更佳。

while循环只有一个判断条件,条件满足,就不断循环,条件不满足时则退出循环。比如我们要计算100以内所有奇数之和,可以用while循环实现:

var x = 0;
var n = 99;
while (n > 0) {
    x = x + n;
    n = n - 2;
}

console.log(x); // 2500

在循环内部变量n不断自减,直到变为-1时,不再满足while条件,循环退出。

do ... while

最后一种循环是do { ... } while()循环,它和while循环的唯一区别在于,不是在每次循环开始的时候判断条件,而是在每次循环完成的时候判断条件:

var n = 0;
do {
    n = n + 1;
} while (n < 100);
console.log(n); // 100

do { ... } while()循环要小心,循环体会至少执行1次,而forwhile循环则可能一次都不执行。

练习
请利用循环遍历数组中的每个名字,并显示Hello, xxx!:

'use strict';
var arr = ['Bart', 'Lisa', 'Adam'];

for (var name in arr) {
    console.log("Hello, " + arr[name] + "!");
}


本文转自 ygqygq2 51CTO博客,原文链接:http://blog.51cto.com/ygqygq2/2043375,如需转载请自行联系原作者	
相关文章
|
3月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
3月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
4月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
169 0
|
6月前
|
消息中间件 JavaScript 前端开发
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您
|
10月前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
189 5
|
10月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
83 2
|
10月前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
126 1
|
10月前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
85 2
|
11月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
106 2