JS学习笔记91-97（面试题，数组API，字符串操作）

91课：面试题。

---

1.局部变量和全局变量

    f2();
    console.log(cc); // 9
    console.log(bb); // 9
    console.log(aa); //错误
    function f2(){
        var aa = bb = cc = 9;
        console.log(aa); // 9
        console.log(bb); // 9
        console.log(cc); // 9
    };

2.作用域提升

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

3.运算符和运算符的优先级别

一元操作符：++,--,+,-
逻辑操作符：！, &&, ||
基本运算符：+,-,,/,%
关系操作符：>,<,>=,<=,===,==,!==,!=
条件运算符：a? b : c;
赋值运算符：+=,-+,=,/=,%=
逗号运算符：,

优先级
第一位：	()
第二位：	|,-,+,++,--.(这里的-+是一元运算符)
第三位：	*,/,%
第四位：	+,-
第五位：	<,<=,>,>=
第六位：	==,!=,===,!==
第七位：	&&
第八位：	||
第九位：	a? b : c;
第十位：	=,+=,-=,*=,/=,%=

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

    var a = 1 && 3 && 5;
    alert(a); // 5
    var b = 0 && 2 && 4;
    alert(b); // 0
    var c = 5 && 0  && 7;
    alert(c); // 0

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

    var a = 5 && 0 || 1; // 1
    var b = 4 || 0 &&  8; // 4
    var c= 0 || 8 && 9;  // 9
    alert(a),alert(b),alert(c);

    var a = 4 + 8 && 3; // 3
    var b = 0 && 7 + 1; // 0
    var c = 4 || 3 && 8-1; // 4
    alert(a),alert(b),alert(c);

92课：数组常用API补充

---

一.Array的内置方法

1.Instanceof

是一个关键字，判断A是否是B类型。
布尔类型值 = A Instanceof B
运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。
和typeOf比较（typeof作用：用于判断一个一个表达式，（对象或者原始值），返回一个字符串。返回的可能的值）

• typeof判断所有变量的类型，返回值有number，boolean，string，function，object，undefined。
• typeof对于丰富的对象实例，只能返回"Object"字符串。
• instanceof用来判断对象，代码形式为obj1 instanceof obj2（obj1是否是obj2的实例），obj2必须为对象，否则会报错！其返回值为布尔值。
• instanceof可以对不同的对象实例进行判断，判断方法是根据对象的原型链依次向下查询，如果obj2的原型属性存在obj1的原型链上，（obj1 instanceof obj2）值为true。

2.Array.isArray()

H5新增，判断是不是数组。
布尔类型值 = Array.isArray(变量)；
调用者：Array 参数：变量（被检测值） 返回值：布尔类型

3.toString()

把数组转化成字符串，每一项用 , 分割。
字符串 = 数组.toString()；

4.valueOf()

返回数组对象本身。数组本身 = 数组.valueOf()

5.join()

用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
字符串 = 数组.join(分隔符)；
分隔符可以有也可以没有，不写默认用逗号分割，无缝连接用空字符串。

//1. Instanceof
    var arr = [1, 2, "哈哈哈"]; // Array
    console.log(typeof arr); // object
    console.log(arr instanceof Array);
//2. Array.isArray()
    var arr1 = [1, 2, "哈哈哈"];
    var arr2 = new Array();
    var name = "jack";
    console.log(Array.isArray(arr1));
    console.log(Array.isArray(arr2));
    console.log(Array.isArray(name));
//3. toString()
     var arr = [1, 2, "哈哈哈", 212121, 323232];
    console.log(arr.toString());
    console.log(typeof arr.toString()); // string
//4.valueOf()
     console.log(arr.valueOf());
//5. indexOf()、lastIndexOf()
    var arr = [1, 2, 33, 2, 1];
    console.log(arr.indexOf(2));
    console.log(arr.indexOf(12));
    console.log(arr.lastIndexOf(2));
    console.log(arr.lastIndexOf(22));

二.数组增删和换位置（原数组将被修改）

微信图片_20181224003128.png

indexOf

从前向后索引字符串位置（参数：索引字符串）
从前面寻找第一个符合元素的位置，找不到则返回-1。

lastIndexOf

从后向前索引字符串位置（参数：索引字符串）
从后面寻找第一个符合元素的位置，找不到则返回-1；

map()

方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果

reduce()

reduce的用法。Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
###### `=>`是[es6语法](https://github.com/lukehoban/es6features)中的`arrow function`
举例：
(x) => x + 6;
相当于
function(x){
    return x + 6;
}

item定义和用法

item() 方法节点列表中位于指定索引的节点。

以下两条语法产生相同的结果：
document.body.childNodes.item(0);
document.body.childNodes[0];

sort()

为sort()中传入排序规则函数可实现自定义排序
排序函数规则：

传两个形参
当返回值为正数时，交换传入两形参在数组中位置

排序的内置算法：
JS中sort实现算法居然是O(n^2)的冒泡排序，所以有时候有必要自己实现那些算法

93-96课：JS特效-字符串操作补充

---

1.转换成字符串（三种方法）

//+  toString()   String()
    var str = '张三';
    var age = 18;
    console.log(typeof str); // string
    console.log(typeof (age + ''));
    console.log(typeof age.toString());
    console.log(typeof String(age));

2.根据位置返回字符串

charAt

获取相应位置字符（参数：字符位置）。
字符串中第一个字符的下标是0，如果参数index不再0与string.length之间，将返回一个空字符串。
获取相应位置的字符（参数：索引值）。

charCodeAt

获取相应位置字符编码。
两个方法都用于选取字符串中某一位置上的单个字符。
区别：charCodeAt()方法返回字符在Unicode字符集中的编码值。

    var str = "a,Hello World";
    var str1 = "你好,中国!";
    console.log(str.charAt(1));
    console.log(str.charAt(7));
    console.log(str1.charAt(4));

    console.log(str.charCodeAt(0));
    console.log(str1.charCodeAt(0));

Unicode

（统一码、万国码、单一码）是计算机科学领域里的一项业界标准，包括字符集、编码方案等。Unicode 是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。1990年开始研发，1994年正式公布。

• 能够使计算机实现跨语言、跨平台的文本转换及处理。

ASCII

ASCII 是用来表示英文字符的一种编码规范。每个ASCII字符占用1 个字节，因此，ASCII 编码可以表示的最大字符数是255（00H—FFH）。这对于英文而言，是没有问题的，一般只什么用到前128个(00H--7FH,最高位为0)。而最高位为1 的另128 个字符（80H—FFH）被称为“扩展ASCII”，一般用来存放英文的制表符、部分音标字符等等的一些其它符号。

1. ASCII：8bits的英文编码，实际使用低7位，127个字符。32（0x20）为空格，之前是控制字符，之后是有效字符。

2. Unicode：使用两字节对全球字符进行统一编码，有65536个编码，UCS-2为两字节版本(2^16 =65536)。

   
   微信图片_20181224194543.png

// 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;
    }

3.根据字符返回位置。

indexOf

从前向后索引字符串位置（参数：索引字符串）
从前面寻找第一个符合元素的位置，找不到则返回-1。

lastIndexOf

从后向前索引字符串位置（参数：索引字符串）
从后面寻找第一个符合元素的位置，找不到则返回-1；

• 索引值 = 数组.indexOf()/lastIndexOf()（数组中的元素）；

4.uri编码和解码

• encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
• decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

    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"));

5.截取字符串（重点）

concat()

连接字符串。连接两个或更多的数组，并返回结果。

slice()

从某个已有的数组返回选定的元素。arrayObject.slice(start,end)

substr()

可在字符串中抽取从 start 下标开始的指定数目的字符。stringObject.substr(start,length)

substring()

提取字符串中介于两个指定下标之间的字符。stringObject.substring(start,stop)

6.小数位数 toFixed()。把 Number 四舍五入为指定小数位数的数字。

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

7.转换大小写

toUpperCase，转换为大写（参数：无）
toLowerCase，转换为小写（参数：无）

    var str = "hello world!";
    var str1 = "HELLO WORLD!";
    console.log(str.toUpperCase());//HELLO WORLD!
    console.log(str1.toLowerCase());//hello world!

• • 作业

• 1.将一个字符串数组输出为|分割的形式，比如“刘备|张飞|关羽”，使用两种方式实现

    var arr = ['刘备','张飞','关羽'];
    /*arr.splice(1,0,'|');
    arr.splice(3,0,'|');
    console.log(arr);
    console.log(arr.toString());*/
    var str = arr.toString();
    console.log(str.replace(/,/g, '|'));
    console.log(arr.join('|'));

• 2.找到数组中每个字母出现的次数['c','a','z','a','a']

    //const countOccurences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);//箭头函数
    function countOccurences(arr,value) {
        return arr.reduce(
            function (a,v) {
                return v === value ? a + 1 : a + 0;
            },0)
    }
    console.log('[1,3,4,6,1,3,5,6,3,1]中 1 出现的次数是：'+countOccurences([1,3,4,6,1,3,5,6,3,1],1));

• 3.工资的数组[1500,1200,2000,2100,1800],把工资超过2000的删除。

    var arr1 = [1500,1200,2000,2100,1800,500,2500];
    for(var i = 0;i < arr1.length;i++){
        if(arr1[i] > 2000){arr1.splice(i,1);}
    }
    console.log(arr1);

97.JS特效-上传图片格式验证

---

• onchange 事件会在域的内容改变时发生。

    <label>上传图片的格式验证:</label>
    <input type="file" id="file">
-------------------------------------------------------------------------
    /*
      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('上传图片不正确');
            }
        }
    }