js示例

<!--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>