jsvascript学习（六）- 基础总结

基础总结

    从前面总结的点来说，关于js的基础我们已经了解的差不多了，有了这些基础内容铺垫，我们已经可以着手实现一些比较简单的特效案例，这里简单将之前的学习板块做一个总结然后之后展示一些课程中的案例演示
    前面熟悉了js的基本操作，包括浏览器属性、内置对象、DOM操作、函数定义、参数、对象、变量、域的定义、运算符、流程控制等等，DOM里面的节点操作比较重要，在函数生成过程中，也会涉及不少流程控制的内容比如for循环等(使用最广的循环方式)，变量那一块的变量提升可能不好理解，那就按照常规的方式一步一步编写即可，练习的多了自然就能够理解一些比较方便的操作，其他的对象、方法等等都和以前的程序语言有异曲同工之妙，稍稍看看文档即可理解了，之后就是需要大量训练了。

• 这里补充一点，关于函数定义方面的，在逻辑定义中，许多模块不可避免的会有不少重复的地方，此时可以将它们封装为单独的函数之后进行调用，比如这里比较常用的就是通过id获得指定对象的话，如下：

box = $('box');

function $(id) {
            return typeof id === "string" ? document.getElementById(id) : null;
        }

问题探讨

1. 变量域
       这里涉及到变量提升，但是对a来说并没有进行赋值，相当于只是在函数中进行var a声明，所以结果显示undefine

var a = 123;
    f1();
    function f1(){
        var a;
        var b=456;
        console.log(a); // undefined
        console.log(b); // 456
        a = '12306';
    }

2. 逻辑运算
       "与"操作,"或"操作之间都可以任意组合，但是只用记住这个类似交集和并集的关系，这里和python里面的运算符逻辑差不多，and就是&&,or就是||可以参考一下：

Python语言支持逻辑运算符，以下假设变量 a 为 10, b为 20:

运算符	逻辑表达式	描述	实例
and	x and y	布尔"与" ， 如果 x 为 False，x and y 返回 False，否则它返回 y 的计算值。	(a and b) 返回 20。
or	x or y	布尔"或"，如果 x 是非 0，它返回 x 的值，否则它返回 y 的计算值	(a or b) 返回 10

var aa = 0&&1;
    alert(aa); // 0
    var bb =  1&&0;
    alert(bb); // 0
    var cc =  1&&8;
    alert(cc); // 8


console.log(0||1); // 1
    console.log(1||0); // 1
    console.log(1||3); // 1
    console.log(3||1); // 3


var i = 5 && 0 || 1; // 1
    var j = 4 || 0 &&  8; // 4
    var k= 0 || 8 && 9;  // 9
    alert(i),alert(j),alert(k);

3. 数组高级API

• 了解typeof和instanceof的区别
• 了解数组构造方法
• 了解数组的toString、valueOf、indexOf、lastIndexOf等方法

    //typeof
    var arr = [1, 2, "哈哈哈"]; // Array
    console.log(typeof arr); // object
    console.log(arr instanceof Object);

    #数组构造
    var arr = [1, 2, "哈哈哈"];
    var arr2 = new Array();
    var name = "jack";
    console.log(Array.isArray(arr2));//false


// 3. toString()
    var arr = [1, 2, "哈哈哈", 212121, 323232];
    console.log(typeof arr.toString()); // string

    // 4.valueOf()
    console.log(arr.valueOf()); //(5) [1, 2, "哈哈哈", 212121, 323232]

    // 5. indexOf()、lastIndexOf()
    var arr = [1, 2, 33, 2, 1];
    console.log(arr.indexOf(12));   //-1
    console.log(arr.lastIndexOf(22));   //-1

4. 字符串操作

• 了解字符串相关操作，包括定义、获取下标
• 为了保证各种语言间的转换一致，可以通过string操作中的charCodeAt返回统一的字符码

// 1.定义
    var str = '张三';
    var age = 18;
    console.log(typeof str); // string


    console.log(typeof (age + ''));// string
    console.log(typeof age.toString());// string
    console.log(typeof String(age));// string


//2. 下标操作
    var str = "a,Hello World";
    var str1 = "你好,中国!";
    console.log(str.charAt(1)); //,
    console.log(str1.charAt(4));    //国

    console.log(str.charCodeAt(0)); //97
    console.log(str1.charCodeAt(0));    //20320

//3. 大小写转换
    var str = "hello world!";
    var str1 = "HELLO WORLD!";

    console.log(str.toUpperCase());
    console.log(str1.toLowerCase());

    获取不同语言间字符的长度

 // 1.字符串
    var str = "Hello World!";
    var str1 = "你好,世界!12121";

    /* console.log(str.length);
     console.log(str1.length * 2 - 2);*/

    console.log(getStrLength(str1));
    console.log(getStrLength(str));

    /**
     * 获取字符串的真实长度
     * @param {string}str
     * @returns {number}
     */
    function getStrLength(str) {
        // 1.定义变量
        var len = 0, code = 0;

        // 2. 遍历
        for (var i = 0; i < str.length; i++) {
            // 2.1 Unicode码
            code = str.charCodeAt(i);
            // console.log(code);

            // 2.2 判断
            if (code >= 0 && code <= 127) {
                len += 1;
            } else {
                len += 2;
            }
        }

        // 3. 返回长度
        return len;
    }

5. url编码解码
       encode编码、decode解码

var str = "http://www.itmoma.com?name=yann";
    var str1 ="http://localhost:63342/%E4%B8%8A%E8%AF%BE%E4%BB%A3%E7%A0%81/05-JS%E7%89%B9%E6%95%88-%E4%B8%8B/05-uri%E7%BC%96%E7%A0%81%E5%92%8C%E8%A7%A3%E7%A0%81.html?_ijt=h8d2tjqjlprces058v6s86p9ji";

    // 1. 编码
    var encodestr = encodeURIComponent(str);
    console.log(encodestr); // http%3A%2F%2Fwww.itmoma.com%3Fname%3Dyann

    // 2. 解码
    var decodeStr = decodeURIComponent(str1);
    console.log(decodeStr);


    console.log(decodeURIComponent("https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=%E5%93%88%E5%93%88%E5%93%88&rsv_pq=bcd9c87700072f06&rsv_t=dc09UzZ2JpOa7o%2FDZ969ycvMaFxlARDd1LWKS%2FNnWeCCtroOis%2BJrD3%2B3qk&rqlang=cn&rsv_enter=0&rsv_sug3=5&rsv_sug1=4&rsv_sug7=100&inputT=3148&rsv_sug4=3473"));


    var PI = 3.1436592653;
    console.log(PI.toFixed(3));
    // 保留两位小数    后面小数会四舍五入

    最后一个表单格式验证，对上述内容进行实战，通过验证上传文件是否为图片格式抛出对应相应

<body>
    <label>上传图片的格式验证:</label>
    <input type="file" id="file">
<script>
    /*
      jpg png gif
    */
    window.onload = function () {
       // 1. 获取标签
        var file = document.getElementById('file');
       // 2. 监听作用域的变化
        file.onchange = function () {
            // 2.1 获取上传图片的路径
            var path = this.value;
            // console.log(path);

            // 2.2 截取
            var suffix = path.substr(path.lastIndexOf('.'));
            // console.log(suffix);

            // 2.3 统一转成小写
            var lower_suffix = suffix.toLowerCase();
            // console.log(lower_suffix);

            // 2.4 判断
            if(lower_suffix === '.jpg' || lower_suffix === '.png' || lower_suffix === '.jpeg' || lower_suffix === '.gif'){
                alert('上传图片正确');
            }else {
                alert('上传图片不正确');
            }
        }
    }
</script>
</body>

参考：
网易云js课程