day07

day07

1.es5的数组方法

            【1】map() 映射 
                语法：
                    arr.map(function(item,index,arr){
                        return 你对数组中数据的操作
                    })
                item:表示数组中的每一个数据
                index：表示数据的索引
                arr：表示循环的这个数字
                返回值：一个新数组（长度和原数组一样，你操作之后的数据）
            【2】forEach() 循环
                语法：
                    forEach(function(item,index,arr){
                        
                    })
                forEach中不可以使用break和continue
            【3】filter() 过滤
                语法：arr.filter(function(item,index,arr){
                    return 条件
                })
                返回值：一个新数组，新数组中的数据：满足条件的数据
            【4】some() 
                语法：
                arr.some(function(item){
                    return 条件
                })
                返回值：布尔值 如果数组中有一个满足条件 就返回 true，如果一个都没有就返回false
            【5】every()
                语法：
                arr.every(function(item,index,arr){
                    return 条件
                })
                返回值：布尔值，数组有所有的数据都满足条件就返回 true，有其中一个不满足就返回 false   
        */

2.ruduce

 <script>
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        // var sum = 0;
        // for (var i = 0; i < arr.length; i++) {
        //     sum += arr[i]
        // }
        // console.log(sum);

        /* 
            arr.reduce(function(pre,item,index,arr){
                return 
            },value)
            pre 是return的结果，当没有value参数的时候，pre的初始值Wie数组中第一个数据
            value 是pre的初始化的值（可选）,当没有value的时候，会少循环一次，从索引为1 的位置开始循环
        */
        var res = arr.reduce(function (sum, item, index, arr) {
            // sum 用于存放结果 ，也适用于存放每一次return的值
            // console.log("a");
            console.log(index);
            return sum + item
        }, 0);
        console.log(res);
    </script>

3.冒泡排序

var arr = [3, 44, 38, 5, 47, 27, 2, 46, 4, 19, 50, 48];
        /* 
            两两之间的数据进行比较，如果前面的数据 比后面的数据要大的时候，那么久让这两个数据 交换位置
        */
        /* 
        【1】i = 0 arr[0] > arr[1] ===>false  i++ i = 1
        【2】i = 1 arr[1] > arr[2] ===>true  44 和 38 交换 i++ i=2
           [3, 38, 44, 5, 47, 27, 2, 46, 4, 19, 50, 48]; 
        【3】i = 2 arr[2] > arr[3] ===>true 44 和 5 交换 i++ i =3
           [3, 38, 5, 44, 47, 27, 2, 46, 4, 19, 50, 48]; 
        【4】i = 3 arr[3] > arr[4] ===>false i++ i = 4
          [3, 38, 5, 44, 47, 27, 2, 46, 4, 19, 50, 48]; 
        【5】 i = 4 arr[4] > arr[5]===>true 47 和 27 交换  i++ i = 5
           [3, 38, 5, 44, 27, 47, 2, 46, 4, 19, 50, 48];  
        【6】 i = 5 arr[i] > arr[6]===>true 47 和 2 交换 i =6
            [3, 38, 5, 44, 27, 2, 47, 46, 4, 19, 50, 48]; 
        【7】i = 6 arr[6] > arr[7]===>true 47  和 46 交换
            [3, 38, 5, 44, 27, 2, 46, 47, 4, 19, 50, 48]; 
        【8】i = 7 arr[7] > arr[8]===>true 47和4交换
            [3, 38, 5, 44, 27, 2, 46, 4, 47, 19, 50, 48]; 
        【9】i = 8 arr[8] > arr[9]===>true 47和19交换
            [3, 38, 5, 44, 27, 2, 46, 4, 19, 47, 50, 48]; 
        【10】i = 9 arr[9] > arr[10]===>false 
            [3, 38, 5, 44, 27, 2, 46, 4, 19, 47, 50, 48]; 
        【11】i = 10 arr[10] > arr[11]===>true 50 和48 交换 i++ i=11
          [3, 38, 5, 44, 27, 2, 46, 4, 19, 47, 48, 50];  
        【12】 i = 11 arr[11] > arr[12] 这次的循环对比不需要，
            最后一位数的索引为11   没有索引为12 的这个数据        
        */
        // 已经排序号11个数，最后一个数已经最小的数，不需要再次跟别的数据对比排序   
        for (var j = 0; j < arr.length - 1; j++) {
            for (var i = 0; i < arr.length - (j + 1); i++) {
                if (arr[i] > arr[i + 1]) {
                    // 交换数据的位置
                    var temp = arr[i];
                    arr[i] = arr[i + 1];
                    arr[i + 1] = temp;
                }
            }
        }
        console.log(arr);

4.选择排序

 <script>
        var arr = [5, 44, 38, 3, 47, 27, 2, 46, 4, 19, 50, 48];
        /* 
            它的工作原理：
                首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置
                然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。
            定义一个两个变量：
                index 用来记录排序的时候最小值的索引
                假设一个最小值的索引值 min = 0  用于跟真正的最小值交换位置
        */

        for (var j = 0; j < arr.length - 1; j++) {
            var index = j; //记录真正最小值的索引
            var min = j; //假设索引为0 的数据值小
            // j = 0 index = 0 i=0 自己没有必要跟自己对比
            for (var i = j + 1; i < arr.length; i++) {
                if (arr[i] < arr[index]) {
                    index = i;
                }
            }
            if (min !== index) {
                // 把最小值的索引跟 第一个数交换
                var temp = arr[min];
                arr[min] = arr[index]
                arr[index] = temp;
            }
        }

        // var index1 = 1;
        // var min1 = 1;
        // for (var i = 1; i < arr.length; i++) {
        //     if (arr[i] < arr[index1]) {
        //         index1 = i;
        //     }
        // }
        // // 把最小值的索引跟 第一个数交换
        // var temp1 = arr[min1];
        // arr[min1] = arr[index1]
        // arr[index1] = temp1;

        console.log(arr);
    </script>

5…javascript中的常用来比较的情况

 <script>
        /* 
            【1】纯数字 与 纯数字比较的时候 单纯比较数字的大小
            【2】纯数字 与 字符串的数字比较， 会把字符串的数字转化为纯数字来比较数字的大小
            【3】纯数字 与 非纯数字数字串比较 也会把淄川转化为数字（NaN）
                  所有的数字 与 NaN 比较都会得到 false
            【4】字符串与 字符串比较的时候，会把字符串转化为ASCII值来进行比较
                当一个字符串有多个字母组成的时候，一位一位字母比较
        */
        // console.log(122 < "a");
        // console.log("a" < "b");
        console.log("db" > "ae");
        console.log("123" > "13"); //false 
        // A === 65
        // a === 97 b === 98 c === 99 d ===100
    </script>

7.javascript的严格模式

 // JavaScript中多的严格模式
        // 在所有js代码的最前面添加 "use strict" 说明这份代码开启了严格模式
        /* 
            在严格模式下的注意点：
                【1】变量必须使用关键字声明
                【2】函数的形参名不能一样
                【3】在严格模式下面，直接调用函数，函数中的this 为undefined
                    如果想要this指向window的话，必须使用window来调用
        */
        "use strict"
        // var num = 20;
        // console.log(20);

        var num = 20;
        window.fun();
        // fun(10, 20);

        function fun(a, b) {
            // 函数的形参是一样的 
            // console.log(a);
            console.log(this);
        }

8.sort的别一种方法

 <style>
        ul,
        li {
            list-style: none;
        }

        * {
            padding: 0;
            margin: 0;
        }

        ul {
            display: flex;
        }

        ul li {
            width: 160px;
            height: 240px;
            border: 1px solid red;
            box-shadow: 0px 0px 20px 0px;
            margin-right: 10px;
        }

        ul li p {
            text-align: center;
            height: 30px;
        }
    </style>
</head>

<body>
    <ul id="box">
        <!-- <li>
            <p>
                id: <span>8</span>
            </p>
            <p>
                姓名： <span>老谢</span>
            </p>
            <p>
                年龄： <span>58</span>
            </p>
            <p>
                性别： <span>女</span>
            </p>
        </li> -->
    </ul>
    <script>
        var jishi = [{
                name: "老谢",
                age: 48,
                sex: "男",
                id: 8
            },
            {
                name: "田田",
                age: 58,
                sex: "女",
                id: 38
            },
            {
                name: "余美丽",
                age: 30,
                sex: "女",
                id: 1
            },
            {
                name: "通配符",
                age: 28,
                sex: "不详",
                id: 2
            }
        ];
        // 按照对象id的属性值的大小排序
        //  a b 分别是数组中的数据  
        // 按照数组中 对象的 id升序排序
        jishi.sort(function (a, b) {
            return b.id - a.id
        })

        var box = document.getElementById("box");
        var str = "";
        // 循环数组（数据） 渲染成li 写入ul中（渲染数据）
        for (var i = 0; i < jishi.length; i++) {
            // `` 反引号，也是字符串 "" 或者''  不可以换行
            // `` 反引号可以让字符串换行

            // jishi[i] ===》{name:老谢,age:48,sex:"女"，id:8}
            //  jishi[i].name ==>老谢
            // 反引号中写变量 ：${变量}
            str += `<li>
            <p>
                id: <span>${jishi[i].id}</span>
            </p>
            <p>
                姓名： <span>${jishi[i].name}</span>
            </p>
            <p>
                年龄： <span>${jishi[i].age}</span>
            </p>
            <p>
                性别： <span>${jishi[i].sex}</span>
            </p>
        </li>`
        }
        box.innerHTML = str;
    </script>

10.数组和对象的结合

 <script>
        /* 
            数组与对象的结合：
                数组中的数据可以是一个对象
                对象的属性值 也可以是一个数组

        */
        var obj = {
            name: "张三",
            age: 18,
            aihao: ["rap", "唱跳", "打篮球"]
        };
        var person = [{
                name: "余美丽",
                age: 30,
                sex: "女"
            },
            {
                name: "李漂亮",
                age: 40,
                sex: "中"
            }
        ];
    </script>