2021-08-16

day04-js笔记

1.三元运算符

格式：表达式 ? 为true执行该表达式 : 为false执行该表达式。
简化：
表达式 ? 结果1 : 结果2
表达式的结果为布尔值
值为真 取 结果1 返回
值为假 取 结果 2 返回

2.语句

1.while && do…while
while 和 do…while 的区别：
while：先判断，后执行，至少执行0次
do…while：先执行，后判断，至少执行一次
代码：

<script>
        var n = 10;
        var sum = 0;
        //先判断，后执行，至少执行0次
        while (n > 0) {
            sum += n--;
            //修改判断条件
            // n--;
        }
        console.log(sum);

        var m = 10;
        var t = 0;
        //先执行，后判断，至少执行一次
        do {
            t += m--; 
        } while (m > 0);
        console.log(t);
    </script>

2.try{}catch(error){}finally{}
语法格式：
try {
可能报错的代码
} catch(error) {
打印错误信息
} finally {
不管上面是否报错,这里总是会执行的
}

try{}catch(error){}finally{}里面的代码对它之后的代码没有影响。
代码：

<script>
        
        try {
            console.log(a);
        } catch (error) {
            console.log(error.message);
        } finally {
            console.log('不管上面是否报错,这里总是会执行的');
        }

        //对下面的代码没有影响
        console.log(200);
    </script>

3.for循环
for循环练习之模拟服务器的数据输送到页面上1(重要，需掌握)：
html代码：

<ul>
        
</ul>
   <script src="./js/04.js"></script>//引入js

js代码：

<script>
//模拟来自服务器的数据
var result = {
    codde:1,
    error:0,
    data:[{
        title:'望远镜1',
        price:12000,
        sku:80,
        keywords:['天文爱好者', '火星', '精密仪器']
    },{
        title:'望远镜2',
        price:12000,
        sku:80,
        keywords:['天文爱好者', '火星100', '精密仪器']
    },{
        title:'望远镜3',
        price:12000,
        sku:80,
        keywords:['天文爱好者', '火星', '精密仪器']
    }]
};

//对商品信息进行循环处理
var html = '';
for (var i = 0; i < result.data.length; i++) {
    html += `<li>商品名称:${result.data[i].title}, 库存:${result.data[i].sku},价格:${result.data[i].price},关键词:${result.data[i].keywords.join(' ')}</li>`;
}
console.log(html);
document.querySelector('ul').innerHTML = html;
</script>

效果如图：

for循环练习之模拟服务器的数据输送到页面上2(重要，需掌握)：
html代码：

<table border="1px" cellspacing = 0 width = "500px">
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
    </table>
    <script src="./js/05.js"></script>

js代码：

<script>
//向服务器发起请求，拿到需要的数据   进行数据模拟
var $data = {
    code: 200,
    msg: '数据获取成功',
    error: '0',
    data: [{
        id: 1,
        name: '海绵宝宝',
        gender: 1, //数字进行筛选效率特别高，1表示男，2表示女，0表示保密
        age: 20,
        QQ: '15461311',
        tel: '15548451645'
    }, {
        id: 2,
        name: '派大星',
        gender: 2,
        age: 21,
        QQ: '15461311',
        tel: '15548451645'
    }, {
        id: 3,
        name: '章鱼哥',
        gender: 0,
        age: 22,
        QQ: '154554311',
        tel: '1531451645'
    }]
};

var str = '';
var genderArr = ['保密','男','女'];
for (var i = 0; i < $data.data.length; i++) {
    /* $data.data[i].gender == 1 ? '男' : '女'*/ 
    str += `<tr>
            <td>${$data.data[i].id}</td>
            <td>${$data.data[i].name}</td>
            <td>${genderArr[$data.data[i].gender]}</td> 
            <td>${$data.data[i].age}</td>
        </tr>`;

}
console.log(str);
document.querySelector('tbody').innerHTML = str;
</script>

注：数字进行筛选效率特别高，如筛选性别，0表示保密，1表示男，2表示女。 以后多用。
效果如图：

3.函数

1.函 数的声明: function; (暂时) 。
2.小括号里面放的是形参， 在整个函数内部任何地方都可以使用，相当于是函数内部的全局变量。
3. {}里面放的是函数体。
4.在函数体里面,使用return作为函数的返回值, return后面的代码不会执行，没有返回值则函数返回undefined。
5，函数名后面跟 上小括号()表示函数的执行。

1.函数的分类
1.function声明的函数：有函数提升
2.表达式函数：无函数提升，需要赋值后才能调用
3.自运行函数：函数后面加小括号()表示函数自运行
4.对象里的函数：方法
代码：

 <script>
        //函数提升
        function functionname(a, b, c) {
            return a + b +c;
        }

        //对象里面的函数叫方法
        var obj = {
            a:1,
            b:2,
            fn:function() {
                console.log(100);
            }
        }
        //函数的调用
        console.log(functionname(1,2,3));
        console.log(obj.fn);

        //表达式函数  需要赋值后才能调用
        var fn = function(n,m){
            return n + m;
        }
        console.log(fn(1,2));

        //匿名的自运行函数
        (function() {
            console.log('自运行函数');
        })();
        
    </script>

2.this
1.函数在执行的时候，会在函数内部产生一个this；
2.谁调用这个function声明的函数，this就指向谁(暂时,后面需要完善，如用bind,apply和call可以强制更改this的指向);
注意：访问不存在的变量会报错，访问不存在的属性会报undefined
代码：

<script>
        //谁调用这个方法，this就指向谁
        var a = 100;
        function fn() {
            console.log(this.a);//将a 追加到window身上
            return 1;
        }
        fn();

        //谁调用这个方法，this就指向谁
        var obj = {
            a:1,
            fn:function() {
                console.log(this.a);
            }
        };
        obj.fn();
        //注意this的指向
        var f = obj.fn;
        f();
        </script>

3.方法劫持-强制更改this的指向（call、apply、bind）
1.call()
call() 可以改变this的指向，有两个或多个参数，第一个参数定义this的指向，后面的参数用于传参，使用散列的方式进行传参

2.apply()
apply() 可以改变this的指向，有两个参数，第一个参数用于定义this的指向，第二个参数用于传参，使用数组进行传参

注： call()与apply()都是更改 this的指向，并且直接就执行函数

3.bind()
bind(): 可以改变this的指向，有两个参数，第一个参数用于定义this的指向,后面的参数用于传参,使用散列的方式进行传参;返回函数本身
代码：

<script>
        var obj = {
            a:1,
            fn:function(m) {
                console.log(m);
                console.log(a);
            }
        }
        obj.fn();
        console.dir(obj.fn);
        //把obj.fn这个方法劫持过来，用在window身上-->把this指向window
        var a = 200;
        obj.fn.call(window);

        var obj1 = {a:300};
        //让this指向obj1
        obj.fn.call(obj1, 10);
        obj.fn.apply(obj1, [20]);
        obj.fn.bind(obj1, 30)();//bind()不会立即执行，需要调用

        //使用bind改变this的指向， 返回一个函数，在需要的时候再调用
        var obj2 = {a:500}
        var f = obj.fn.bind(obj2,999);
        f();
    </script>

4.闭包
1.子函数保持了对父级函数声明的变量的引用，这种情况我们称为是闭包
2.引用在，空间不灭
3.父级函数每次在执行的时候会产生一个新的镜像(空间)
代码：

 <script>
        /*闭包：
        1.子函数保持了对父级函数声明的变量的引用，这种情况我们称为是闭包
        2.引用在，空间不灭
        3.父级函数每次在执行的时候会产生一个新的镜像(空间)
        */

        function count() {
            var n = 0;
            return function() {
                return ++n;
            }
            
        }
        
        var c = count();
        console.log(c());//1
        console.log(c());//2
        console.log(c());//3
        console.log(c());//4


        var d = count();
        console.log(d());//1
        console.log(d());//2

    </script>

**5.函数可以作为对象来看 **
length：形参的个数
name：函数名
arguments：保存了实参对象，是个类数组

6.递归函数
指函数直接或间接调用函数本身，则该函数称为递归函数
代码：

<script>
        //1,1,2,3,5,8,13,21
        function f(n) {
            if (n==1 || n ==2) return 1;
            return f(n-2) + f(n-1);
        }
        console.log(f(1));
        console.log(f(5));

        //阶乘
        function dec(n) {
            if(n==1) return 1;
            return n*dec(n-1);
        }
        console.log(dec(10));
    </script>

在有需求 有小数时保留小数，没有小数时为0时，用如下方法：

//结果最后不要有0   保留小数和不保留0
console.log(t.toFixed(1) * 10 / 10);

以上方法保留几位小数就乘以1后面几个0，再除以1后面几个0。

小练习代码：

需求：
假设某人有100, 000现金。
每经过一次路口需要进行一次交费。交费规则为:
当他现金大于50, 000时每次需要交5%;
如果现金小于等于50，000时每次交5，000。

代码：

<script>
        /* 假设某人有100, 000现金。
            每经过一次路口需要进行一次交费。交费规则为:
            当他现金大于50, 000时每次需要交5%;
            如果现金小于等于50，000时每次交5，000。
            请写一程序计算此人可以经过多少次这个路口。
        */
        var money = 100000;
        var count = 0;
        while (money > 5000) {
            if (money > 50000) {
                money *= 0.95;//乘以0.95为大于50000时交费剩下的钱
                count++;
            } else {
                money -= 5000;
                count++;
            }
        }
        console.log('此人可以经过' + count + '次路口');//23
    </script>

结果：