js基础第03天

一、循环的结束语句

某些情况下，我们不一定要循环从头到尾执行，这个时候就要使用break和continue控制循环的次数

break

作用：

1.阻止switch-case结构的继续判断

2.阻止循环的继续执行，然后break之后的代码就不会执行了

continue

作用

跳过当前这一次循环，继续执行下一次循环

需求：在循环打印1到5的过程中，打印到3就停下来，但是后面的4和5还会打印。

总结：

1. break用于结束整个循环
2. continue用于结束整个循环中的一次
3. break和continue后面的代码都不会执行

小结

1.当我们需要多次执行同样的代码的时候，就可以使用循环来实现

2.while、do-while可以用于未知次数循环的

3.for可以用于已知次数循环的，也是我们程序里面最常用的

4.终止整个循环，使用break,跳过一次循环，使用continue

二、什么是数组?

数组是一个有顺序、有长度的数据集合

2.1、定义数组

// 5个人的成绩为： 91，88，72，45，63
// 先定义一个数组
var arr = [];
console.log(arr); // 输出 []  这是一个没有数据在里面的数组，称为空数组

2.2、数组存值

数组中的数据使用索引管理。索引就是序号，只不过数组中的数据从0开始

//把成绩存储到数组中
arr[0] = 91;
arr[1] = 88;
arr[2] = 72;
arr[3] = 45;
arr[4] = 63;
console.log(arr); // 输出 [91,88,72,45,63] 就是一个数据集合

但是这个方式是比较麻烦的，我们如果一开始就知道数组了，可以直接使用一个简单的语法存储数据

var arr = [91,88,72,45,63];
console.log(arr); // 输出的结果是一样的

tips : 两个方式自己可以灵活使用

2.3、数组取值（数组索引）

把数据存储在数组里面，是为了将来能使用的，所以要从里面把数据取出来。数据取值同样使用索引取。

console.log(arr[0]);
var sum = arr[0] + arr[1] + arr[2] + arr[3] + arr[4];
console.log(sum); // 输出370

把 数组[索引]格式当成一个变量使用就行

2.4、遍历数组

我们在求成绩总和的时候，一个一个地把数组里面的数组取出来了，从索引 0 到最后一个索引，里面有很多重复的代码，我们其实可以使用循环实现。

// 最初的写法
var sum = arr[0] + arr[1] + arr[2] + arr[3] + arr[4];

转化一下

var sum = 0;
sum += arr[0];
sum += arr[1];
sum += arr[2];
sum += arr[3];
sum += arr[4];

再转化

var sum = 0;
var i = 0;
sum += arr[i];
i++;
sum += [i];
i++;
// 直到i == 4 结束

写成循环

var sum = 0;
for(var i = 0; i <= 4; i++){
  sum += arr[i];
}
console.log(sum); // 输出 370，和我们一个一个相加是一样的

使用循环来遍历数组，当数组中的数据比较多的时候，会比较方便。

2.4、数组长度

我们在遍历数组的时候，发现总是从索引 0 开始遍历，到最后一个索引，但是如果数据比较多的时候，我们就不容易得到最后一个索引是多少。所以在这还有一个更简单的写法：使用数组的长度来控制遍历的次数。

数组长度：就是数组中数据的个数

console.log(arr.length); // 数组.length 就是数组的长度

如果数组的长度是5，索引的最后一个就是4，我们发现最大索引总是比长度少 1 ，所以遍历还可以这么写

for(var i = 0; i <= arr.length - 1; i++){
  console.log(arr[i]);
}
// 简化一下
// 把 <= 的 = 号 去掉，会使循环的次数少一次，我们把上限次数+1，就变成了  i < arr.length - 1 + 1 ,最终：
for(var i = 0; i < arr.length; i++){
  console.log(arr[i]);
}

String

在小娜的功能1中，我们要从一个"数字,数字,数字"的格式中获取这些数字，就要把字符串以逗号为分隔符，分割这个字符串

js中提供了一个分割字符串的方法

字符串.split(指定分隔符)

var str = '12,88,72,6';
// 以逗号为分隔符，分割字符串，得到一个数组
var arr = str.split(',');
console.log(arr); // 输出 ['12','88','72','6']

这个方法分割字符串后，会以一个数组的方式把所有的数字给我们

Date

在机器人的功能2中，需要获取当前的日期和时间。

在js中，要获取系统的当前日期和时间，需要用到一个js自带的Date对象(现在先不管什么是对象，先学习如何使用)

创建Date对象

var date = new Date();
console.log(data); // 系统时间不同，输出的结果也会不同，但是都是输出当前系统的时间

获取时间的各个部分

var date = new Date();
// 获取年份
var year = date.getFullYear();
console.log(year);
// 获取月份 ， 得到的月份是从0开始的 ，使用 0-11 表示 1-12 月
var month = date.getMonth();
console.log(month);
// 获取天
var day = date.getDate();
console.log(day);
// 获取小时
var hour = date.getHours();
console.log(hour);
// 获取分钟
var minute = date.getMinutes();
console.log(minute);
// 获取秒数
var second = date.getSeconds();
console.log(second);

Math

在js中也提供了获取随机数和取整的功能

获取随机数

// 获取随机数
var r = Math.random();
console.log(r); // 输出一个在 [0,1) 之间的浮点数，可以得到0，但是无法得到1

如果想要得到一个随机整数，需要把整机浮点数 乘以 一个 倍数 再取整

// 获取 [0,10) 之间的随机浮点数
var r = Math.random() * 10;

对浮点数取整

在js中，可以使用 Math.floor() 这个方法对浮点数取整，这个方法取整的方式是向下取整

向下取整： 将一个浮点数，向数轴的左边获取最近的一个整数

获取一个随机整数

// 获取一个 [0,10] 之间的随机整数
var r = Math.random();
r = r * (10 + 1) ;// 因为 Math.random得到的是不能得到1的浮点数，我们等下要向下取整，就得不到10了， * 11 向下取整才能得到10
r = Math.floor(r);
console.log(r); // 得到一个在 [0,10] 之间的整数

回顾

1.JavaScript中内置了很多的功能，使用这些功能，我们可以快速实现很多效果，这些内置的功能，我们称为内置对象

2.Date用于获取和日期相关的数据，Math用于实现和计算相关的功能，String用于快速实现和字符串相关的功能

三、函数

3.1、什么是函数

函数就是一段可以重复执行的代码段。

我们把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，起个名字（函数名），在后续开发中可以反复调用。

函数的作用就是封装一段代码，将来可以重复使用。

3.1、定义函数

function 函数名(){
  函数体 - 需要重复时候用的代码
}

function tellStory() {
  console.log('从前有座山，山上有座庙');
  console.log('庙里有个老和尚和一个小和尚');
  console.log('老和尚正在给小和尚讲故事');
  console.log('讲的什么呢？');
}

注意点： 函数里面的代码是不会执行的，需要调用才会执行

3.2、函数的调用

然而我们写出上面函数的代码之后，在浏览器中打开页面，却没有任务内容被输出。这是因为函数在定义的时候，里面的代码是不会执行的，只有调用了函数，函数中的代码才会执行。

调用函数的语法

函数名();

如：

tellStroy(); //此时在控制台中就会输出一个故事

如果想输出多次，就可以调用多次这个函数

tellStroy(); 
tellStroy(); 
tellStroy(); 

每调用一次，就会执行一次，做到了代码的重复使用。

tips : 一定要记住，函数定义时是不会执行的，只有调用时才会执行。可以使用代码调试工具进行代码执行过程观察。

3.3、函数的参数

我们希望在调用函数的时候，可以知道小和尚的名字是什么，而且每次可以给不同的小和尚讲故事。也就是说我们重复使用的过程里面有会变化的东西，我们使用参数解决

语法

function 函数名(参数){
  函数体
}

如：

function tellStroy(name){
  console.log("从前有座山，山里有座庙");
  console.log("庙里有个老和尚在给小和尚讲故事");
  console.log("讲的是什么呢？");
  console.log("老和尚对"+ name +"说：");
}

就是说参数就好像函数里面的一个变量一样，可以存储一个随时变量的数据

当我们调用函数的时候，再给一个真实的值

tellStroy('清风');
tellStroy('明月');

如果我们想在调用函数的时候，把老和尚的名字也明确一下，也是可以的

function tellStroy(name1,name2){
  console.log("从前有座山，山里有座庙");
  console.log("庙里有个老和尚在给小和尚讲故事");
  console.log("讲的是什么呢？");
  console.log(name1 "对"+ name2 +"说：");
}

要调用的时候：

tellStroy('圆通','清风');

tips: 函数的参数可以一个，也可以是多个，只要在重复的过程中，有多个会产生变化的数据，都可以使用参数的方式解决

在定义函数时写的占位用的参数，我们称为形参，在调用函数，实际参与函数执行的参数，我们称为实参

3.4、函数的返回值

函数执行完毕之后会有一个执行结果，该结果就叫 —— 返回值

如果你希望函数执行完毕之后，有一个你想要的数据，就可以使用返回值来实现

函数默认情况下，得到的结果是 —— undefined

想要修改可以修改，使用return修改

function 函数名(参数){
  
  return 想要的数据
}