JS深入学习 — 循环、函数、数组、字符串、Date对象，Math对象

JS深入学习

一、循环结构

1.定义

• 控制一段代码重复执行多次

2.分类

2.1 for循环

2.1.1 定义

• 控制一段代码反复执行很多次。

2.1.2 for循环格式

for (初始化语句; 循环条件; 迭代语句) {
循环体语句(重复执行的代码);
}

示例

// 输出3次HelloWorld
for (int i = 0; i < 3; i++) {
System.out.println("Hello World");
}

执行流程：

• 循环一开始，执行int i = 0 一次。
• 此时 i=0 ，接着计算机执行循环条件语句：0 < 3 返回true , 计算机就进到循环体中执行，输出 ：helloWorld ，然后执行迭代语句i++。
• 此时 i=1 ，接着计算机执行循环条件语句：1 < 3 返回true , 计算机就进到循环体中执行，输出 ：helloWorld ，然后执行迭代语句i++。
• 此时 i=2 ，接着计算机执行循环条件语句：2 < 3 返回true , 计算机就进到循环体中执行，输出 ：helloWorld ，然后执行迭代语句i++。
• 此时 i=3 ，然后判断循环条件：3 < 3 返回false, 循环立即结束！！

2.1.3 for循环的应用场景

• 比如淘宝、京东等平台的商品列示，后台管理平台的信息展示，减少代码的重复编写，灵活的控制程序的执行

2.1.4 for循环案例

需求1：求1-5之间的数据和，并把求和结果在控制台输出。

int sum = 0；
for (int i = 1; i <= 5; i++) {
sum += i；}

需求1:求1-10之间的奇数和，并把求和结果在控制台输出。

for (int i = 1; i <= 10; i+=2) {
}

2.2 while循环

2.2.1 while循环格式

初始化语句;
while (循环条件) {
循环体语句(被重复执行的代码);迭代语句;
}

示例

int i = 0;
while (i < 3) {
System.out.println("Hello World");
i++;
}

执行流程:

• 循环一开始，执行int i = 0 一次。
• 此时 i=0 ，接着计算机执行循环条件语句：0 < 3 返回true , 计算机就进到循环体中执行，输出 ：helloWorld ，然后执行迭代语句i++。
• 此时 i=1 ，接着计算机执行循环条件语句：1 < 3 返回true , 计算机就进到循环体中执行，输出 ：helloWorld ，然后执行迭代语句i++。
• 此时 i=2 ，接着计算机执行循环条件语句：2 < 3 返回true , 计算机就进到循环体中执行，输出 ：helloWorld ，然后执行迭代语句i++。
• 此时 i=3 ，然后判断循环条件：3 < 3 返回false, 循环立即结束！！

2.2.2 while和for的区别和for和while的应用场景

• 功能上是完全一样的，for能解决的while也能解决，反之亦然。
• 使用规范：知道循环几次：使用for；不知道循环几次建议使用：while。

2.2.3 while循环案例

需求：世界最高山峰珠穆朗玛峰高度是：8848.86米=8848860毫米，假如我有一张足够大的纸，它的厚度是0.1毫米。请问：该纸张折叠多少次，可以折成珠穆朗玛峰的高度？

分析：

• 定义变量存储珠穆朗玛峰的高度、纸张的高度。

double peakHeight = 8848860;  // 山峰高度
double paperThickness = 0.1;  // 纸张厚度

• 使用while循环来控制纸张折叠，循环条件是（纸张厚度<山峰高度），循环每执行一次，就表示纸张折叠一次，并把纸张厚度变为原来两倍。
• 循环外定义计数变量count，循环每折叠一次纸张，让count变量+1；

完整代码：

double peakHeight  = 8848860;//山峰高度
double paperThickness = 0.1;//纸张厚度
int count = 0;//声明一个变量，用来记住折叠的次数while(paperThickness <= peakHeight){paperThickness = paperThickness * 2;//折叠一次，纸张厚度是原来的两倍count++;//折叠一次，次数count加1
}System.out.println("纸张折叠的次数为：" + count);//折叠次数为27

2.3 do-while循环

2.3.1 格式

初始化语句;
do {循环体语句;迭代语句;
} while (循环条件);

示例：

int i = 0;
do {
System.out.println(“Hello World！");
i++;
} while( i < 3);

2.3.2 do-while循环的特点

• 先执行后判断。

2.4 总结三种循环的区别

• for循环 和 while循环（先判断后执行）; do…while （先执行后判断）
• for循环和while循环的执行流程是一模一样的，功能上无区别，for能做的while也能做，反之亦然。
• 使用规范：如果已知循环次数建议使用for循环，如果不清楚要循环多少次建议使用while循环。
• 其他区别：for循环中，控制循环的变量只在循环中使用。while循环中，控制循环的变量在循环后还可以继续使用。

2.5 死循环

2.5.1 定义

• 可以一直执行下去的一种循环，如果没有干预不会停下来。

2.5.2 死循环的写法

写法一

for ( ; ; ) {
System.out.println("Hello World1");
}

写法二（经典写法）

while (true) {
System.out.println("Hello World2");
}

写法三

do {
System.out.println("Hello World3");
} while (true);

二、函数

1.定义

• 多行代码的一个集合

2.无参函数的声明和调用

声明函数有多种方式，常用的有两种：

• 第一种方式： function 函数名( ){ //函数体; }

function cul(){}
cul();

注意：

1. function：定义函数的关键字。
2. 函数名后的小括号中写参数。
3. 如果函数体中有return语句时，就表示函数有返回值。

• 第二种方式：** let 函数名 = function(){ //函数体; }

let cul = function(){}
cul();

3.有参函数的声明和调用

//第一种
function add(num1,num2){let sum = num1 + num2return sum;
}
console.log(add(10,20));//第二种
let add = function(num1,num2){return num1 + num2;
}
console.log(add(10,20));

三、数组

1.定义

• 数组对象是使用单独的变量名来存储一系列的值

2.创建数组

//方式1：创建数组时直接赋值（常用）
let arr = [];
let arr = [66,80,90,77,59];
//方式2：创建数组时指定长度
let arr = new Array(5); 
//方式3：创建数组时直接赋值
let arr = new Array(40,20,80); 
//方式1：创建数组时不指定长度
let arr = new Array(); 

• javaScript中的数组有如下特点：

  • 数组下标从0开始。

  • 最大索引值 = 数字的长度 - 1

    • 虽然创建数组时，指定了长度，但实际上数组都是可变长度的，即使超出指定长度也不会有任何问题。
    • 数组存储的数据可以是任何类型。

3.操作数组

获取数组的长度

let arr = [11,22,33,44,55];  
console.log(arr.length); 

对数组进行遍历，获取数组中的所有元素

//遍历数组
for(let i=0;i<arr.length;i++){console.log(arr[i]);
}

四、Array数组

方法详解

• push();

  • 功能: 在数组最后一位添加一个或多个元素,并返回新数组的长度,改变原数组.(添加多个元素用逗号隔开)

var arr = [1, 2, "c"];var rel = arr.push("A", "B");console.log(arr); // [1, 2, "c", "A", "B"]

• pop();

  • 功能：删除数组的最后一位，并且返回删除的数据，会改变原来的数组

 var arr = [1, 2, "c"];var rel = arr.pop();console.log(arr); // [1, 2]

• reverse();

  • 功能：将数组的数据进行反转，并且返回反转后的数组，会改变原数组

 var arr = [1, 2, 3, "a", "b", "c"];var rel = arr.reverse();console.log(arr); //    ["c", "b", "a", 3, 2, 1]

• slice();

  • 功能： 裁切指定位置的数组，返回值为被裁切的元素形成的新数组 ，不改变原数组

• .toString();

  • 功能: 直接将数组转换为字符串,并且返回转换后的新数组,不改变原数组

var list = ["a", "b", "c", "d"];var rel = list.toString();console.log(rel);   // a,b,c,d   (字符串类型)

• indexOf();

  • 功能: 查询某个元素在数组中第一次出现的位置 存在该元素,返回下标,不存在 返回 -1 (可以通过返回值 变相的判断是否存在该元素)

 var list = [1, 2, 3, 4];var index = list.indexOf(4); //3var index = list.indexOf("4"); //-1console.log(index);

• lastIndexOf();

  • 功能: 查询某个元素在数组中最后一次出现的位置 (或者理解为反向查询第一次出现的位置) 存在该元素,返回下标,不存在 返回 -1 (可以通过返回值 变相的判断是否存在该元素)

 var list = [1, 2, 3, 4];var index = list.lastIndexOf(4); //3var index = list.lastIndexOf("4"); //-1console.log(index);

• sort();

  • 方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串Unicode码点。

//当对数字进行排序时，就会出现问题，此时，可以自定义排序规则函数进行排序
let arr2 = [11,33,55,4,66];
arr2.sort(rule);
function rule(num1,num2){return num1-num2;
}
console.log(arr2);

• shift();

  • 功能：删除数组的第一位数据，并且返回被删除的数据，会改变原来的数组

  var arr = ["a","b", "c"];var rel = arr.shift();console.log(arr); // ['b', "c"]

• unshift();

  • 功能: 在数组第一位添加一个或多个元素，并返回新数组的长度，改变原数组。(添加多个元素用逗号隔开)

 var arr = [1, 2, "c"];var rel = arr.unshift("A", "B");console.log(arr); // [ "A", "B",1, 2, "c"]

五、String 字符串

1.定义

• 字符串对于保存可以以文本形式表示的数据很有用。一些最常用的字符串操作是检查它们的长度，使用 + 和 += 字符串运算符字符串运算符)来构建和连接它们，使用 indexOf()方法检查子字符串的存在或者位置，或使用 substring() 方法提取子字符串。

2.创建字符串

方式1

const string1 = "Java编程"";

方式2

const string4 = new String("Java编程");

3.使用字符串

方法	解释	参数
indexOf(substr,index )lastIndexOf(substr)	substr:子字符串index: 开始检索的位置（可选）	返回子字符串值在字符串中首次出现的位置如果要检索的字符串没有出现，则返回-1
charAt( index )	index: 要找字符索引位置
length（）		获取字符串的长度
split( substr )	substr: 按照次参数化指定的字符进行分割。如果参数为空字符串，那么每个字符都将被分割	将字符串分割为字符串数组，并返回此数组
substring( begin, end )	begin: 开始截取的索引位置end: 结束位置（可选）	用于截取字符串中介于两个指定下表之间的字符
join( arr )	arr: 数组	将数组元素按照参数指定字符连接
substr( begin , length )	begin: 开始截取的索引位置length: 截取字符的长度（可选）	用于从指定位置截取指定长度的字符串
toUpperCase( )toLowerCase( )		将字符转换成大写字符将字符转换成小写字符
replace(oldstr, newstr)	oldstr: 原字符串中子字符串newstr: 替换的新字符串	用新字符串替换原字符串中的子字符串
search( str )	str: 原字符串中子字符串	返回子字符串在原字符串中首次出现的位置

常用方法示例

• charAt();

let s = 'JAVA';
console.log(str.charAt(2));   //v

• split();

let str = '2020 04 18';
let arr = str.split(' ');
console.log(arr);  

• indexOf();

let str = 'hello.js';
console.log(str.indexOf('.'));       //5

• substring();

let s = "3148657412@qq.com";
console.log(str.substring(str.indexOf('@')+1)); 

六、Date 日期

1.定义

• Date 对象用于处理日期与时间

2.创建

创建对象

var d = new Date();
var d = new Date(milliseconds); // 参数为毫秒
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

• milliseconds 参数是一个 Unix 时间戳（Unix Time Stamp），它是一个整数值，表示自 1970 年 1 月 1 日 00:00:00 UTC（the Unix epoch）以来的毫秒数。
• dateString 参数表示日期的字符串值。
• year, month, day, hours, minutes, seconds, milliseconds 分别表示年、月、日、时、分、秒、毫秒。

3.常用方法

方法	描述
getDate	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

七、Math 数学对象

1.定义

• Math 对象用于执行数学任务。

• Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。

2.语法

var x = Math.PI;

3.常用方法

方法	说明
ceil( x )	对数据进行向上取整
floor( x )	对数据进行向下取整
max( x, y )	返回两个数据的最大值
min( x, y )	返回两个数据的最小值
round( x )	对数据四舍五入为最接近的整数,如果想精确到小数则使用toFixed() (了解)
random( x )	返回0~1之间的随机数
abs( x )	返回数据的绝对值

示例

//返回0-9的随机数
console.log(Math.floor(Math.random()*10));