JS学习阶段性总结-1

各种函数的声明

/**
 *	函数的声明
 */
// 声明一个方法，任意调用
function aaa(args){...}		

// 声明一个函数并以变量的形式展示出去，因此无法再声明前调用
var fn = function (args){...};

// 声明一个箭头函数，一般作为回调函数，没有函数名无法调用
(args)=>{...};

ES6中 => 箭头函数

写法：

function fn(callback){
    console.log(callback(22));		// 输出23
}

// 作为普通匿名函数，x可以是 ()、(arg_1,arg_2)、arg
fn( x => {/* 函数体 */} );

// 当只有返回值或表示式时，可以省略大括号
fn(bb => bb+1);	// 输入bb，输出 bb+1

优点：

在一般情况下，this指向window或最内部作用域，此时需要用var that = this等方法实现this转换。而箭头函数内部的this是词法作用域，由上下文确定。

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 这里的this指向obj

        return function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
    },
    getAge_2: function(){
        return () => new Date().getFullYear() - this.birth;
    }
};

console.log(obj.getAge(),obj.getAge_2());	// NaN 30

Promise函数实现异步

js语言的运行环境是单线程的同步的，但有时也存在异步操作，如setTimeout和setInterval，还有其他时候。此时就需要用到异步技术了，因此ES6中引入Promise函数，并基于此我们能快速实现异步调用。

链式调用new Promise().then()：

// 先构造一个promise对象，构造方法接收两个方法参数，此时可以由用户判断
new Promise((resolve,reject)=>{
	var a = 1;
    a ? resolve() : reject();
}).then(
    // 这个是resolve函数
    function (resovle1,reject) {
        console.log("第一个resolve");

        var aaa = null;
        if(0){
            aaa = 100;
        }
        // 如果在此函数内报错或抛出错误，将会执行下一个reject函数
        error = new Error("发生错误");
        throw aaa || error; 	// 抛出的数据，在下一个reject函数中能被捕获
    },

    // 这个是reject函数
    function () {
        console.log("第一个reject");
    }
).then(
    function () {
        console.log("第二个resolve");
    },
    function (e) {
        console.log(e);		// 输出上一个函数捕获到的数据
        console.log("第二个rejcet");
    }
);

异常捕获 new Promise().catch()：

效果和写在then的第二个参数里面一样。

总的来说，两者都能捕获异常并使程序继续执行，而不会报错卡死。

new Promise((resolve,reject)=>{
	var a = 1;
    a ? resolve() : reject();
}).catch(function(reason,data){
    /**  */
})

异步执行Promise.all()：

在这里用到js引用（包括对象的赋值）来观察异步，不幸的是，可能是方法太少无法观察到异步。

此外，只有all()内部函数全部执行成功，才会进入.then()中的resolve函数，

异步执行Promise.race()：

all是等所有的异步操作都执行完了再执行then方法，那么race方法就是相反的，谁先执行完成就先执行回调。无论是正确回调还是错误回调，其他函数都不会进入.then()方法。

function promiseClick1(time) {
    let p = new Promise(function (resolve, reject) {
        setTimeout(function () {
            var num = Math.ceil(Math.random() * 20); //生成1-10的随机数
            console.log(time / 1000 + 's随机数生成的值：', num)
            if (num <= 10) {
                resolve(num);
            }
            else {
                reject(time / 1000 + 's数字太于10了即将执行失败回调');
            }
        }, time);
    });
    return p;
}

Promise.all([setName(), setName(), setName()]
).then(function (results) {	// 全部成功才执行此函数
    console.log(results);
}, function (results) {	// 只有一个函数会进入此步
    console.log(results);
});

Promise.race([promiseClick1(3000), promiseClick1(2000), promiseClick1(1000)]
).then(function (results) {		// 最好执行完毕的函数进入此，其他跳过
    console.log('成功', results);
}, function (reason) {
    console.log('失败', reason);
});

写在注释里的注解

1. 跟在注释后面的内容都会在鼠标滑过方法名时呈现
2. 写在{}的内容会跟在参数后显示，当无法识别时会显示any。可加`` 高亮显示，如{``string``}
3. 写在注释尾部的内容（用空格隔开），会跟在详细参数说明后，此内容同样满足markdown语法，如高亮或加粗

/**
 * @description		这是描述
 * @param CN{string[]} CheckNull
 * @returns {Boolean}  true:`通过校验`  false:`未通过`
 */
(property) checkAll: (CN: string[]) => boolean
@description
@param CN — CheckNull
@returns — true:通过校验 false:未通过
function AA(CN, CC, CT,CP){
    return aa;
}

jquery.prop()实现元素属性替换

一般来说，$(xx).attr(key, val)可以实现属性的替换，但在有些时候会失效。这时一般要用$(xx).prop(key, val)。

$(xx).attr(key);			// 本意为获取元素某属性的值
$(xx).attr(key, val);		// 一般也能够实现元素属性的替换

$(xx).prop(key, val);		// 正规的元素属性替换

• 发起ajax时，数据应该以JSON.stringify(json_obj)形式进行绑定

ES7中的JS注解开发

时间：2020/08/19 13:53

坐标：广东省深圳市