<!--1. switch分支流程控制 -->
switch( 表达式 ){
case value1:
// 表达式 等于 value1 时要执行的代码
break;
case value2:
// 表达式 等于 value2 时要执行的代码
break;
default:
// 表达式 不等于任何一个 value 时要执行的代码
}
处理 case为比较确定值的情况, switch 语句进行条件判断后直接执行到程序的条件语句，效率更高
<!--2. for循环 -->
for(初始化变量; 条件表达式; 操作表达式 ){
//循环体
}
for(var i = 1; i <= 10; i++){
console.log('媳妇我错了~');
}
<!-- 2.1for循环 -->
for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
需执行的代码;
}
}
外层循环执行一次，内层循环要执行全部次数
// 0. 求1-100之间所有数的和
/* var sum = 0; // 总和变量
for (var i = 1; i <=100; i++) {
// 第一次循环 i = 1 sum = 0 + 1
// 第er次循环 i = 2 sum = 0 + 1 + 2
// sum = sum + i
sum += i
}
console.log(sum)
<!--2.2 双重for循环 语法结构 -->
for (var i = 1; i <= 3; i++) {
console.log('这是外层循环第' + i + '次');
for (var j = 1; j <= 3; j++) {
console.log('这是里层的循环第' + j + '次');
}
}
<!-- 2.3 // 打印n行n列的星星 -->
<script>
var rows = prompt('请您输入行数:');
var cols = prompt('请您输入列数:');
var str = '';
for (var i = 1; i <= rows; i++) {
for (var j = 1; j <= cols; j++) {
str = str + '★';
}
str += '
';
}
// i = 1 str = '★★★★★
'
// i = 2 str = '★★★★★
★★★★
'
// i = 5 str = '★★★★★
★★★★★
★★★
★★
★
'
console.log(str);
</script>
<!-- 2.4 // 打印倒三角形案例 -->
<script>
var str = ''
for (var i = 0; i <= 5; i++) {
for (var j = 0; j <= 5 - i; j++) {
str += '☆'
}
str += '
'
}
// i = 0 str = '★★★★★
' // 5 - 0
// i = 1 str = '★★★★★
★★★★★
' // 5 - 1
console.log(str)
</script>
<!-- while循环 -->
while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。
while (条件表达式) { // 循环体代码 }
var num = 1;
while (num <= 100) {
console.log('好啊有');
num++;
}
<!-- do-while循环 -->
do {
// 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);
var i = 1;
do {
console.log('how are you?'); //先执行一次代码块 打印100次
i++;
} while (i <= 100)
<!--3.1 求数组最大值 -->
<script>
var arr = [2, 6, 1, 77, 52, 25, 7, 99];
var max = arr[0];
for (var i = 1; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
console.log('该数组里面的最大值是：' + max);
</script>
<!-- 3.2 数组去重-->
<script>
// 将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]中的 0 去掉后，形成一个不包含 0 的新数组。
// 1、需要一个新数组用于存放筛选之后的数据。
// 2、遍历原来的数组， 把不是 0 的数据添加到新数组里面(此时要注意采用数组名 + 索引的格式接收数据)。
// 3、新数组里面的个数， 用 length 不断累加。
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] != 0) {
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);
</script>
<!-- 方法2 -->
扩展运算符和 Set 结构相结合，就可以去除数组的重复成员。
let arr = [1,2,2,2,2,"2",24,5,6];
//step1:数组转集合
let set = new Set(arr);//已经去掉重复值，当前不是数组，而集合 Set { 1, 2, '2', 24, 5, 6 }
//step2:集合转数组
arr = [...set];//[ 1, 2, '2', 24, 5, 6 ]
<!-- 3.3翻转数组 -->
<script>
// 将数组 ['red', 'green', 'blue', 'pink', 'purple'] 的内容反过来存放
// 1、声明一个新数组 newArr
// 2、把旧数组索引号第4个取过来（arr.length - 1)，给新数组索引号第0个元素 (newArr.length)
// 3、我们采取 递减的方式 i--
var arr = ['red', 'green', 'blue', 'pink', 'purple', 'hotpink'];
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) { // arr 下标的变换 5 ,4 ,3 ,2,1,0
newArr[newArr.length] = arr[i] ; // newArr 下标的变换 0 ,1,2,3,4,5;
}
console.log(newArr);
// var b = arr.reverse()
</script>
<!-- 方法2 -->
// 1. 翻转数组
var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);
<!-- 3.4冒泡排序 -->
<script>
// 冒泡排序
// var arr = [5, 4, 3, 2, 1];
var arr = [4, 1, 2, 3, 5];
for (var i = 0; i <= arr.length - 1; i++) { // 外层循环管趟数
for (var j = 0; j <= arr.length - i - 1; j++) { // 里面的循环管 每一趟的交换次数
// 内部交换2个变量的值 前一个和后面一个数组元素相比较
if (arr[j] < arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
// i = 0
// j = 0 arr[0] < arr[1] 4 < 1 arr = [4, 1, 2, 3, 5]
// j = 1 arr[1] < arr[2] 1 < 2 arr = [4, 2, 1, 3, 5]
// j = 2 arr[2] < arr[3] 1 < 3 arr = [4, 2, 3, 1, 5]
// j = 3 arr[3] < arr[4] 1 < 5 arr = [4, 2, 3, 5, 1]
// i = 2
// arr = [4, 5, 3, 2, 1]
// i = 3
// arr = [5, 4, 3, 2, 1]
// i = 4
// arr = [5, 4, 3, 2, 1]
console.log(arr);
</script>
<!-- 方法2 -->
// 2. 数组排序（冒泡排序）
var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function(a, b) {
// return a - b; 升序的顺序排列
return b - a; // 降序的顺序排列
});
console.log(arr1);
<!-- 3.5求函数最大值 -->
<script>
// 利用函数求数组 [5,2,99,101,67,77] 中的最大数值。
function getArrMax(arr) { // arr 接受一个数组 arr = [5,2,99,101,67,77]
var max = arr[0];
for (var i = 1; i <= arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
return max;
}
var re = getArrMax([3, 77, 44, 99, 143]);
console.log(re);
</script>
<!-- ----------------------------------------函数------------------------------------------------ -->
<!-- 4.1利用函数翻转任意数组 -->
<script>
// 利用函数翻转任意数组 reverse 翻转
function reverse(arr) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
}
var arr1 = reverse([1, 3, 4, 6, 9]);
console.log(arr1);
var arr2 = reverse(['red', 'pink', 'blue']);
console.log(arr2);
</script>
<!-- 4.2利用函数冒泡排序 -->
<script>
// 利用函数冒泡排序 sort 排序
function sort(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
var arr1 = sort([1, 4, 2, 9]);
console.log(arr1);
</script>
<!-- 4.3 利用函数判断闰年 -->
<script>
// 利用函数判断闰年
function isRunYear(year) {
// 如果是闰年我们返回 true 否则 返回 false
var flag = false;
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
flag = true;
}
return flag;
}
console.log(isRunYear(2000));
console.log(isRunYear(1999));
</script>
<!-- 4.4递归 -->
<script>
function fn(n) { // 利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..n
if (n == 1) {
return 1;
}
return n * fn(n - 1);
}
console.log(fn(3));
// 详细思路 假如用户输入的是3
//return 3 * fn(2)
//return 3 * (2 * fn(1))
//return 3 * (2 * 1)
//return 3 * (2)
//return 6
</script>
<!-- ------------------------------遍历---------------------------------------- -->
<!-- 5.1.for in循环 -->
for(var k in obj){
console.log("姓名："+k+";"+"对应值："+obj[k]);
}
实例2:
var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {
text += person[x];
console.log(x) //fname lname age
}
text 输出结果为: John Doe 25
<!-- 5.2.数组方法forEach遍历数组 -->
arr.forEach(function(value, index, array) {
//参数一是:数组元素
//参数二是:数组元素的索引
//参数三是:当前的数组
})
<script>
// forEach 迭代(遍历) 数组
var arr = [1, 2, 3];
var sum = 0;
arr.forEach(function(value, index, array) {
sum += value;
})
console.log(sum);
</script>
<!-- 5.3.数组方法filter过滤数组 -->
var arr = [12, 66, 4, 88, 3, 7];
var newArr = arr.filter(function(value, index,array) {
//参数一是:数组元素
//参数二是:数组元素的索引
//参数三是:当前的数组
return value >= 20;
});
console.log(newArr);//[66,88] //返回值是一个新数组
<!-- 5.4.数组方法some -->
some 查找数组中是否有满足条件的元素
var arr = [10, 30, 4];
var flag = arr.some(function(value,index,array) {
//参数一是:数组元素
//参数二是:数组元素的索引
//参数三是:当前的数组
return value < 3;
});
console.log(flag);//false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环
<!-- 3.jQuery 元素操作 遍历 -->
A. 遍历元素 .each()
给同一类元素做不同操作，就需要用到遍历。
$("div").each(function (index,domEle) {})
1.each()方法遍历匹配每一个元素,主要用DOM处理
2.index是每个元素索引,domEle是每个Dom元素对象,不是jquery对象
3.想要使用jquery方法,需转换$(domEle)
$.each(object,function (index,element) {})
1.$.each()方法可用于遍历任何对象,主要处理数据,数组.对象
2.index索引,element遍历内容
<div>1</div>
<div>2</div>
<script>
$(function() {
// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
var arr = ["red", "green", "blue"];
// 1. each() 方法遍历元素
$("div").each(function(i, domEle) {
// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称
// 回调函数第二个参数一定是 dom 元素对象，也是自己命名
// 使用jQuery方法需要转换 $(domEle)
$(domEle).css("color", arr[i]);
})
// 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
// $.each($("div"), function(i, ele) {
// console.log(i);
// console.log(ele) });
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 输出的是 name age 属性名
console.log(ele); // 输出的是 andy 18 属性值
})
})
</script>