流程控制语句

if语句的基本使用

if语句是最简单的条件语句，也称选择语句。它通常结合else一起使用，表示如果……就……否则……。

if (测试条件) {// 语句块1// 当测试条件为真，则执行这里
} else {// 语句块2// 当测试条件为假，则执行这里
}

用户输入一个数字，如果这个数字是偶数，则弹出对话框显示“偶数”，否则弹出对话框显示“奇数”。

var a = Number(prompt('请输入一个数字'));
if (a % 2 == 0) {alert('偶数');
} else {alert('奇数');
}

用户输入年龄，判断用户是否可以申领驾照。申领驾照的条件是年龄必须为18到70岁

//让用户输入年龄
var age = Number(prompt('请输入年龄'));
//判断
if (age >= 18 && age <= 70) {alert('可以考取驾照');
} else {alert('年龄不符合要求');
}

else可以省略

在if语句中else可以省略

var a = Number(prompt('请输入一个数字'));
if (a == 5) {alert('这是我喜欢的数字！');
}

单行if语句

如果if语句体中只有一行语句，可以省略大括号和换行

var a = Number(prompt('请输入一个整数'));
if (a > 5) alert('这个数字大于5');
if (a % 2 == 0) alert('这个数字是偶数');
alert('再见');

if, else if多条件分支

var score = Number(prompt('请输入成绩'));
if (score >= 85) {alert('优秀');
} else if (score >= 70) {alert('良好');
} else if (score >= 60) {alert('及格');
} else {alert('不及格')
}

必须注意“否则如果”

else if()条件分支“暗含”不符合之前所有条件，要深刻理解什么叫“否则如果”

if (测试表达式1) {// 当测试表达式1为true时执行
} else if (测试表达式2) {// 当测试表达式1为false时，测试表达式2为true时执行
} else if (测试表达式3) {// 当测试表达式1为false时，测试表达式2为false，测试表达式3为true时执行
}
……
else {// 当所有测试表达式都为false时执行
}

数字分离

方法一

var num = 123;
var ge = num%10;
var shi = Math.floor(num/10)%10;
var bai = Math.floor(num/100);

方法二

var num = 123;
var str = num.toString();
var ge = str.charAt(2);
var shi = str.charAt(1);
var bai = str.charAt(0);

随机生成[a,b]的整数

Math.random返回也给0-1(不包含1)的小数

var n = Math.floor(Math.random()*(b-a+1))+a; // 包含a和b
var n = Math.parseInt(Math.random()*(b-a+1))+a; // 包含a和b
var n = Math.floor(Math.random()*(b-a))+a; // 包含a但不包含b
var n = Math.floor(Math.random()*(b-a)+1)+a; // 不包含a但包含b

Switch语句

switch用法

除if语句之外，JS还提供了另外一种选择语句：switch语句。
switch语句的用途：当一个变量被分类讨论的情形。
在switch()的圆括号中一般是一个变量名，这个变量将被分类讨论。
case表示“情况”，它后面没有圆括号，直接跟一个值。程序会依次将case后面的值与switch圆括号中的值进行全等比对，如果比对相同，则执行这条case冒号后面的语句。default表示默认情况。多条case可以共用同一个语句体。
多条case可以共用同一个语句体。
要求用户输入一个1~12中的任意一个数字，显示这个月份的天数。

if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {alert('这个月有31天');
} else if (month == 4 || month == 6 || month == 9 || month == 11) {alert('这个月有30天');
} else if (month == 2) {alert('这个月有28天或29天');
} else {alert('请输入正确的月份');
}switch (month) {case 1:case 3:case 5:case 7:case 8:case 10:case 12:alert('这个月有31天');break;case 4:case 6:case 9:case 11:alert('这个月有30天');break;case 2:alert('这个月有28天或29天');break;default:alert('请输入正确的月份');
}

break很重要

switch语句并不像if语句那样当执行了某一个分支之后会自动跳出if语句体，程序员必须主动调用break来跳出switch语句体。如果不书写break，则后面的所有case都将被视为匹配，直到遇见break。

var a = 10;
switch (a) {case 10:console.log('A');case 4:console.log('B');case 88:console.log('C');break;case 2:console.log('D');
}
//Output:     A B C

三元运算符

JavaScript中提供了一种叫做“三元运算”的语法形式，让我们可以方便地实现选择

条件表达式 ? 表达式1 ：表达式2

问号前面是判断的条件，问号后面用冒号隔开两个表达式。当条件表达式为真时调用表达式1，为假时调用表达式2。
三元运算符的用途：根据某个条件是否成立，在两个不同值中选择变量的值。

循环语句

for循环语句

for的圆括号中有三个表达式:

表达式var i = 1; 表示定义一个“循环变量”i，并赋值为1；
表达式i <= 10; 表示继续执行循环的条件，只要这个条件为真，则会一直执行；
表达式i++用来更新循环变量，使循环变量的值越来越趋向终点。

for (var i = 1; i <= 10; i++) {console.log(i);
}

for语句执行机理

准确遍历for循环

根据for循环执行机理，必须要会准确遍历for循环

for(var i = 3 ; i <= 13 ; i += 3){console.log(i);
}
//Output: 3 6 9 12
for (var i = 15; i > 2; i -= 3) {console.log(i);
}
//Output:15 12 9 6 3
for (var i = 2; i < 12; i += 3) {i += 4;console.log(i);
}
//Output: 6 13
for (var i = 1; i < 10; i ++) {}
console.log(i);
//Output:10
for (var i = 1; i < 10; i --) {console.log(i);
}
//浏览器可能会崩溃控制台不会输出

while循环语句

while语句也是一种循环结构，是一种“不定范围”循环，和for循环各有不同的用武之地。
几乎所有的编程语言，都同时提供for循环和while循环。
while语句事先不指定循环开始、结束的范围，只要测试条件满足，就一直执行循环体

while循环注意事项

while循环没有显式定义循环变量，必须自己在while循环外先定义好循环变量，有时甚至可以没有循环变量。
循环体内的语句，必须使循环测试条件趋向不成立，否则会死循环。

更适合while循环的场景

寻找最小的满足n2>456789的整数n
小兔子拔萝卜，第1天拔1个，第2天拔2个，第3天拔3个，以此类推。请问小兔子多少天能把500个萝卜拔光？

break和continue

break表示立即终止循环，它只能用在循环语句中，在for循环和while循环中都可以使用

break用在while语句中，通常和while(true){}搭配使用

var n = 1;
while (true) {if (n * n > 456789) {console.log(n);break;}n++;
}
//Output 676

可以使用break语句跳出外层循环

outer:for(var i=0;i<10;i++){for(var j=0;j<10;j++){if(j==2) break outer;}
}
alert(j); // 2;

continue用于跳过循环中的一个迭代，并继续执行循环中的下一个迭代。for循环更经常使用continue

do while语句

do while循环是一种“后测试循环语句”。它不同于for循环和while循环每次都是“先测试条件是否满足，然后执行循环体”，do-while循环是“先执行循环体，然后测试条件是否满足”。
do-while循环将循环执行条件写到了循环体的后面，这样一来，循环体一定会至少执行一次，然后再检测循环执行条件是否为true，决定是否继续执行循环体。

数组

数组简介和定义

什么是数组

数组（Array），顾名思义，用来存储一组相关的值，从而方便进行求和、计算平均数、逐项遍历等操作。

var scoreArr = [96, 97, 76, 87, 87, 90, 91, 100, 78, 56];

每种高级编程语言中都有数组，它是一种非常重要的数据结构

定义数组

方法一：定义一个数组非常的简单，只需要使用方括号[]即可

var arr = ['A','B','C','D'];

方法二：使用new Arr()

var arr = new Array('A','B','C','D');
//arr=['A','B','C','D'];
var cc = new Array("he")
// cc= ["he"]
var cc = new Array(1,2)
// cc = [1,2];
var arr = new Array(1,'hello',true);
arr[2] = false;
arr[3] = null;
arr[4] = undefined;
console.log(arr); //[1, "hello",false,null,undefined]

方法三：下面的代码表示定义一个长度为4的数组，但是这4项都是undefined

var cc = new Array (4)
// cc = [empty,empty,empty,empty]

访问数组项

数组每一项都有下标，下标从0开始

可以使用方括号中书写下标的形式，访问数组的任一项

下标越界

JavaScript规定，访问数组中不存在的项会返回undefined，不会报错

// 删除偶数元素
var arr = [1,2,3,4,5,6];
for(var i=0;i<arr.length;i++){if(arr[i]%2==0) arr.splice(i--,1);  //注意这里要减去1
}
console.log(arr);

数组的长度

数组的length属性表示它的长度

var arr = ['A', 'B', 'C', 'D'];
console.log( arr.length); // 4

数组的长度就是数组最后一项的下标加1

var arr = ['A', 'B', 'C', 'D'];
console.log( arr[arr.length - 1]); // D
arr[100] = 'E';
console.log(arr.length); //101

更改数组项

数组并不是只读的，我们可以修改它其中任何项的值

var arr = [2, 6, 7, 3];
arr[1]++;
arr[2] = 0;
console.log( arr); // [2, 7, 0, 3]

如果更改的数组项超过了length-1，则会创造这项

数组的遍历

数组的最大的优点就是方便遍历

//方法一
var arr = ['A', 'B', 'C', 'D'];
for (var i = 0; i < arr.length; i++) {console.log(arr[i]);
}//方法二
let fruits = ["Apple", "Orange", "Plum"];
// for..of 不能获取当前元素的索引，只是获取元素值，但大多数情况是够用的。
for (let fruit of fruits) {alert( fruit );
}//方法三
for(i in fruits){alert(fruits[i]);
}//方法四
arr.forEach(function(item, index, array) {// ... do something with item
});
["Bilbo", "Gandalf", "Nazgul"].forEach(alert);["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {alert(`${item} is at index ${index} in ${array}`);
});

数组的类型检测

数组用typeof检测结果是object
Array.isArray()方法可以用来检测数组
在后面课程中，还将介绍使用“鸭式辨型”检测方法

Array.isArray([1,2,3]); //true

数组的常用方法

数组的头尾操作方法

方法	功能	返回值
push()	在尾部插入	无
pop()	在尾部删除	返回尾部被删除的项
unshift()	在头部插入	无
shift()	在头部删除	返回头部被删除的项

push()方法

push()方法用来在数组末尾推入新项，参数就是要推入
的项
如果要推入多项，可以用逗号隔开
调用push()方法后，数组会立即改变，不需要赋值

pop()方法

与push()相反，pop()方法用来删除数组中的最后一项
pop()方法不仅会删除数组末项，而且会返回被删除的项

unshift()方法

unshift()方法用来在数组头尾插入新项，参数就是要插入的项
如果要插入多项，可以用逗号隔开
调用unshift()方法后，数组会立即改变，不需要赋值

shift()方法

与unshift()相反，shift()方法用来删除数组中下标为0的项
shift()方法不仅会删除数组末项，而且会返回被删除的项

splice()方法

splice()方法用于替换数组中的指定项

splice()方法可以用于在指定位置插入新项

var arr = ['A', 'B', 'C', 'D'];
arr.splice(2 , 0 , 'X' , 'Y' , 'Z');
console.log(arr);
// ['A', 'B', 'X', 'Y', 'Z', 'C', 'D']

splice()方法可以用于删除指定项

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.splice(2, 4); // 没有设置替换的新项，仅删除4项
console.log(arr); // ['A', 'B', 'G']

splice()方法会以数组形式返回被删除的项

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var newArr = arr.splice(2, 4);
console.log(newArr) //['C', 'D', 'E', 'F']

splice()方法

slice()方法用于得到子数组，类似于字符串的slice()方法。
slice(a, b)截取的子数组从下标为a的项开始，到下标为b（但不包括下标为b的项）结束。
slice(a, b)方法不会更改原有数组。
slice()如果不提供第二个参数，则表示从指定项开始，提取所有后续所有项作为子数组
slice()方法的参数允许为负数，表示数组的倒数第几项

let arr = ["t", "e", "s", "t"];
alert( arr.slice(1, 3) ); // e,s（复制从位置 1 到位置 3 的元素）
alert( arr.slice(-2) ); // s,t（复制从位置 -2 到尾端的元素）
alert(arr.slice()); //t,e,s,t;

join()和split()方法

数组的join()方法可以使数组转为字符串；字符串的split()方法可以使字符串转为数组。

join()的参数表示以什么字符作为连接符，如果留空则默认以逗号分隔，如同调用toString()方法，调用对象位数组
split()的参数表示以什么字符拆分字符串，一般不能留空，调用对象位字符串
字符串也可以使用方括号内写下标的形式，访问某个字符，等价于charAt()方法
字符串的一些算法问题有时候会转换为数组解决

concat()方法

concat()方法可以合并连结多个数组
concat()方法不会改变原数组

var arr1 = [1, 2, 3, 4];
var arr2 = [5, 6, 7, 8];
var arr3 = [9, 10, 11];
var arr = arr1.concat(arr2 , arr3);
console.log(arr);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]

reverse()方法

reverse()方法用来将一个数组中的全部项顺序置反
reverse()方法改变原数组

var arr = ["A","B","C","D"];
arr.reverse();
console.log(arr); // ["D", "C", "B", "A"]

indexOf()，lastIndexOf()和includes()方法

indexOf()方法的功能是从左到右搜索数组中的元素，并返回它所在的位置，如果元素不存在，则返回-1
lastIndexOf()方法的功能是从右到左搜索数组中的元素，并返回它所在的位置，如果元素不存在，则返回-1
includes()方法的功能是判断一个数组是否包含一个指定的值，返回布尔值

数组的排序

数组有sort(fn)方法可以用于数组排序，默认按照字符序列排序
arr.sort 方法对数组进行 原位（in-place） 排序，更改元素的顺序。(译注：原位是指在此数组内，而非生成一个新数组。)
它还返回排序后的数组，但是返回值通常会被忽略，因为修改了 arr 本身。
这个函数中的a、b分别表示数组中靠前和靠后的项，如果需要将它们交换位置，则返回任意正数；否则就返回负数。

let arr = [ 1, 2, 15 ];// 该方法重新排列 arr 的内容
arr.sort();
alert( arr );  // 1, 15, 2function compareNumeric(a, b) {if (a > b) return 1;if (a == b) return 0;if (a < b) return -1;
}
let arr = [ 1, 2, 15 ];
arr.sort(compareNumeric);
alert(arr);  // 1, 2, 15arr.sort((a,b)=>return a-b) //升序
arr.sort((a,b)=>return b-a) //降序

冒泡排序

var arr = [6, 2, 9, 3, 8, 1, 45, 23, 45, 49];
// 一趟一趟比较，趟数序号就是i
for (var i = 1; i < arr.length; i++) {// 内层循环负责两两比较for (var j = arr.length - 1; j >= i; j--) {// 判断项的大小if (arr[j] < arr[j - 1]) {// 这一项比前一项还小了，那么就要交换两个变量的位置var temp = arr[j];arr[j] = arr[j - 1];arr[j - 1] = temp;}}console.log(arr);}console.log(arr);

基本类型和引用类型

基本类型：number、boolean、string、undefined、null
引用类型：array、object、function、regexp…

基本类型值变量传值的内存变化

引用类型值变量传值的内存变化

相等判断时的区别

基本类型进行相等判断时，会比较值是否相等
引用类型进行相等判断时，会比较址是否相等，也就是说它会比较是否为内存中的同一个东西

深克隆浅克隆

使用arr1=arr2的语法不会克隆数组
浅克隆：只克隆数组的第一层，如果是多维数组，或者数组中的项是其他引用类型值，则不克隆其他层
深克隆：克隆数组的所有层，要使用递归技术，在后面课程介绍

var arr1 = [1, 2, 3, 4, [6, 9, 4]];// 结果数组
var result = [];// 遍历原数组中的每一项，把遍历到的项推入到结果数组中
for (var i = 0; i < arr1.length; i++) {result.push(arr1[i]);
}console.log(result);
console.log(result == arr1);    // 期望false，因为引用类型值进行比较的时候，等等比较的是内存地址
console.log(result[4] == arr1[4]);  // 藕断丝连let res1 = Object.assign(arr1); //浅克隆

前端学习笔记之流程控制语句和数组（六）相关推荐

前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型常见的HTML事件 DOM 冒泡与捕获流程控制语句 for..in 计时器 let,var,const的区别 ...
Python学习笔记五：控制语句
Python学习笔记五:控制语句 Pycharm 开发环境的下载安装配置_项目管理控制语句 Pycharm 开发环境的使用 Pycharm 下载和安装激活和选择不同UI 风格创建项目和初始化配置 ...
【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...
OpenCL学习笔记——整体流程（向量相加）
OpenCL学习笔记--整体流程 OpenCL可以实现混合设备的并行计算,这些设备包括CPU,GPU,以及其他处理器,比如Cell处理器,DSP等.使用OpenCL编程,可以实现可以值得并行加速代码. ...
web前端学习笔记（最新）
web前端学习笔记大家好,我是链表哥,新的学期,新的学习,我会为您展示我的学习进程. 一:什么是WEB前端? 所谓的Web前端指的是用户所能接触到的,并服务于用户的前沿端口,经我们程序员编辑修饰后展 ...
2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
前端学习笔记：Bootstrap框架入门
前端学习笔记:Bootstrap框架入门一.Bootstrap概述 1.基本信息 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS. ...
LabView学习笔记（九）：数组与簇
Labview学习笔记: LabView学习笔记(一):基础介绍 LabView学习笔记(二):滤波器实验 LabView学习笔记(三):基本控件 LabView学习笔记(四):动态数据类型 LabV ...
day4 vue 学习笔记组件生命周期数据共享数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...

前端学习笔记之流程控制语句和数组（六）

流程控制语句

if语句的基本使用

else可以省略

单行if语句

if, else if多条件分支

必须注意“否则如果”

数字分离

随机生成[a,b]的整数

Switch语句

switch用法

break很重要

三元运算符

循环语句

for循环语句

for语句执行机理

准确遍历for循环

while循环语句

while循环注意事项

更适合while循环的场景

break和continue

do while语句

数组

数组简介和定义

什么是数组

定义数组

访问数组项

下标越界

数组的长度

更改数组项

数组的遍历

数组的类型检测

数组的常用方法

push()方法

pop()方法

unshift()方法

shift()方法

splice()方法

splice()方法

join()和split()方法

concat()方法

reverse()方法

indexOf()，lastIndexOf()和includes()方法

数组的排序

基本类型和引用类型

基本类型值变量传值的内存变化

引用类型值变量传值的内存变化

相等判断时的区别

深克隆浅克隆

前端学习笔记之流程控制语句和数组（六）相关推荐

最新文章

热门文章