JS高级笔记2

布尔类型校验

function whichBoolean() {
	testBool(undefined); // false
	testBool(null);      // false
	testBool("");        // false
}

function testBool(value) {
	if (! value) 	{
		console.log(value+" is false");
	}
}


console.log(typeof null ); // object
console.log(typeof 'xx');  // string
let str = new String('xx');
console.log(typeof  str);  // object
console.log(typeof 'x' === 'string'); // true

  由此可见undefined,null, ""都为false,也就是说我们可以直接通过布尔值来对数据类型进行校验

 

字符串既然不是对象,为何它会有属性呢？

// 只要引用了字符串的属性,JS就会将字符串通过new String(s) 的方式转换为对象，这个对象继承了字符串的方法
// 一旦引用结束,这个新创建的对象就会销毁

// 同样数值和布尔也有包装类型 Number()和Boolean()
// null 和 undefined 没有包装对象,访问他们的属性会报错

	let a = 1;
	let b = undefined;
	console.log(a.toString()); // 1
	console.log(b.toString()); // Uncaught TypeError: Cannot read property 'toString' of undefined

 == 会将包装与其原始值视为相等，而 === 则会视为不等

不可变的原始值

let longStr = "hello world";
console.log(longStr.toUpperCase()); // HELLO WORLD  【只不过返回一个新值罢了】
console.log(longStr);               // hello world 

// 不同于基本数据类型,对象的比较并不是单纯的值比较，即便是2个含有相同属性的对象亦或是2个空数组也是不等的
// 这也就是说我们要区分引用与具体的属性判定
// 这里涉及到数组拷贝,我们应该是对其属性进行复制

箭头函数

    /**
     * 箭头函数学习
     *
     * x => x*x  === function(x){
     *     retrun x*x;
     * }
     */
      let fn = x => x*x;
      let fun2 = function(y){
          return y*y;
      };

      console.log(fn(5));   // 25
      console.log(fun2(5)); // 25

沙箱 

    /**
     * 沙箱模式概念:
     * 与外界隔绝的一个环境 外界无法修改该环境内任何信息 沙箱内的东西与外界隔绝
     * 用于隔绝变量的
     * 
     *  == 匿名函数
     * 优势:
     * 沙箱模式使用的是IIFE(密集调用函数),不会在外界暴露任何的全局变量 也就不会造成全局变量的污染
     * 沙箱中的所有数据 都是和外界完全隔离的 外界无法对其进行修改
     * 
     * 原理:
     * 函数可以构建作用值域,上级作用域不能直接访问下级作用域中的数据
     */
    (function () {
        var sum = 0;
        console.log(sum+10);
    })();

apply函数 

修改函数的上下文,与call功能一样

fun.apply(对象[,argsArray]);

fun.call(对象,[arg1],[arg2]);

    function sayHello() {
        console.log(this.name);
    }
    
    let obj = {
        name: '我是zxl'
    };
    // 这个对象将代替Function类里this对象
    sayHello.apply(obj);

    // 我是zxl

    function sayHello(a,b) {
        console.log(this.name+" "+a*b+"个数");
    }

    let obj = {
        name: '我是zxl'
    };
    // 这个对象将代替Function类里this对象
    sayHello.apply(obj,[2,4]);
    sayHello.call(obj,2,4);

    // 我是zxl 8个数
    // 我是zxl 8个数


    // apply 和 call 方法第一个参数传入为null时，指代的是函数调用模式也就是this指向了window    
    let arr = [1,4,5,7,11];
    let number = Math.max.apply(null,arr);
    let number2 = Math.max.apply(window,arr);
    console.log(number);    // 11
    console.log(number2);   // 11

join函数

返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的

    let strArr = ["你好","世界","我的哥"];
    let resultStr = strArr.join('-');
    console.log(resultStr);
    // 你好-世界-我的哥


    function funJoin() {
        return Array.prototype.join.apply(arguments,['-']);
    }

    var str = funJoin(1,3,'join');
    console.log(str);
    // 1-3-join

    let origin = [1,2,3];
    let arr_one = [];
    let arr_two = [];
    for (let i=0;i<origin.length;i++){
        arr_one.push(origin[i]);
    }
    arr_two.push.apply(arr_two,origin);
    console.log('arr_one = '+arr_one);
    console.log('arr_two = '+arr_two);
    // arr_one = 1,2,3
    // arr_two = 1,2,3

立即执行函数

通过定义一个匿名函数，创建了一个新的函数作用域，相当于创建了一个“私有”的命名空间，该命名空间的变量和方法，不会破坏污染全局的命名空间。此时若是想访问全局对象，将全局对象以参数形式传进去即可。

    let immed = (function () {
        console.log("立即执行函数");
    })();
    // 立即执行函数  

    // 立即执行函数 封装
    let funXX = (
        function (x,y) {
            return {
                showAge:function () {
                    return "年龄 = "+x;
                },
                showSex:function () {
                    return "性别 = "+y
                }
            }
        }
    )(10,'男');
    console.log(funXX.showAge()); //年龄 = 10
    console.log(funXX.showSex()); //性别 = 男

其中window即是全局对象。作用域隔离非常重要，是一个JS框架必须支持的功能，jQuery被应用在成千上万的JavaScript程序中，必须确保jQuery创建的变量不能和导入他的程序所使用的变量发生冲突

对象展开运算符 

    let arr = [1,2,3];
    console.log(...arr);
    // 1 2 3

    //使用对象展开运算符将此对象混入到外部对象中
    let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
    console.log(z);
    //{a: 3, b: 4}

Vue中的细节

以下2个方法是等价的。

        methods:{
            handleClickNext(){
                alert('你是谁啊');
            },

            handleNext:function () {
                alert('你是谁');
            }
        }

mapState以及...对象展开运算符的使用 

    /**
     * res 返回的是一个对象 和 mapState一致
     *
     * ... 对象展开运算符号
     *
     * {
     *
     *     x:function(){
     *
     *     },
     *
     *     y:function(){
     *
     *     }
     * }    
     *     展开成 x:function(){
     *
     *     } , y:function(){
     *
     *     }
     * 
     */

mapState完全解析

https://www.cnblogs.com/xufeimei/p/10132291.html 

map函数的使用 

/**
 * map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
 * Object.keys(obj).map()
 */
function methodZ() {
    let arrs = [1,3,5];
    let map = arrs.map(key => ({ key, val: key }));
    console.log(map);

    /**
     * key代表的是当前值
     * array.map(function(currentValue,index,arr), thisValue)
     */
    let map1 = arrs.map(function (key) {
        return {
            // 键值一致 可以省略一个
            key:key,
            val: key
        }
    });
    console.log(map1);
    /*
    0: {key: 1, val: 1}
    1: {key: 3, val: 3}
    2: {key: 5, val: 5}
    */

    let map5 = {
        name:'zxl',
        age:18
    };
    let map2 = Object.keys(map5).map(key => ({ key, val: map5[key] }));
    console.log(map2);
    /*   
    0: {key: "name", val: "zxl"}
    1: {key: "age", val: 18}
    */
}