TypeScript学习笔记之三——JavaScript相关函数介绍与实例（为原理性介绍，较少实例）

本文深入探讨JavaScript中常用函数如toUpperCase、toLowerCase、slice、push等的功能与应用，涵盖数组、对象、Map、Set、函数、正则表达式及Promise、async/await等关键概念。同时，提供实例演示如何利用这些技术实现日期转换、素数筛选、文件读取等实用功能。

参考教程：https://www.liaoxuefeng.com/wiki/1022910821149312（廖雪峰老师）

我是在此教学基础上加上自己的理解，对相关部分函数按自己理解的方式来记录，所以这篇其实算转载。廖雪峰老师的教程很不错，相关知识都介绍的很详细。以下为个人认为调用较多的函数：

字符串String中toUpperCase()把一个字符串全部变为大写；toLowerCase()相反。
数组中Array 的slice()是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array；push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉；splice()方法用于修改数组Array内容，包括指定位置删除若干并添加元素。join()把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串。
对象中hasOwnProperty()用于判断一个属性是否是对象自身而不是继承。parseFloat(prompt(‘ 请输入相关参数 ’));用于输入。通过for ... in循环，它可以把一个对象的所有属性依次循环出来，并可以用if判断hasOwnProperty()来实现过滤掉对象继承的属性。
Map，类似哈希，用于将键与值对应的表，通过set添加，get获取，delete删除。

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);

m.get('Michael'); // 95

其中Set，只储存键，不存储值，因而无重复的键。通过add(key)方法添加，delete(key)删除

扩展：iterable类型forEach方法，其对象.forEach（函数（参1，参2，参3））；参1对应element: 指向当前元素的值；参2对应index: 指向当前索引；参3对应array: 指向Array对象本身，并循环输出最终结果。（其中参数需要啥填啥，位置很重要）
函数：arguments[]获得调用者传入的所有参数，用于判断传入参数的个数；优化：rest写在最后，前面用...标识，剩下参数均以数组形式交给变量rest。
解构赋值：使用解构直接把对象的属性绑定到变量中：

function buildDate({year, month, day, hour=0, minute=0, second=0}) {

    return new Date(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second);

}

This与apply、call：this使用前需要指定对象：apply()把参数打包成Array再传入；call()把参数按顺序传入。apply()还可以动态改变函数的行为：通过 return 原函数.apply(null, arguments);
Map与reduce：map()通过调用对象.map(函数) 即可转换；reduce()把结果继续和序列的下一个元素做累积计算，通过调用对象.reduce（函数（参1，参2）{}）；

实例1.利用map和reduce操作实现string2int()函数，完成将字符串转成数字的函数：

return

 s.split("").map(x=>+x).reduce((x,y)=>x*10 + y);

利用filter，可以巧妙地去除Array的重复元素：Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。

//fun函数用于将重复的元素除去

function fun(element,index,self){

    return self.indexOf(element) == index;

}

var result = arr.filter(fun);

console.log(result.toString());

实例2.将数组中素数输出：原数组arr[……]；

// 将数组重复元素进行删除，并最终留下不重复元素

var number = arr.filter(function (x,y,z){

return z.indexOf(x) == y;

});

// 不重复数组确定其中素数并输出：

function get_primes(number){

return arr.filter(function(x) {

if (x < 2) { return false; }

for (let i = 2; i < x / 2 + 1; i++) {

if (x % i === 0) { return false; }

}

return true;

});

}

console.log(get_primes(arr).toString())

排序：通常规定，对于两个元素x和y，如果认为x < y，则返回-1，如果认为x == y，则返回0，如果认为x > y，则返回1。在Array的sort()方法即为排序，其结果会修改原数组。
遍历数组：forEach()：把每个元素依次作用于传入的函数，但不会返回新的数组

实例：基于Date相关函数实现html界面任意日期输出对应星期输出

//ts文件，用于代码编写
function WeekDay(){
    var year = prompt("请输入年份","如1990");
    var month = prompt("请输入月份","如1");
    var day = prompt("请输入天数","如1");
//调用parseInt（string）函数将字符串转为number，调用Date数据进行时间输入
    var test = new Date(parseInt(year),parseInt(month),parseInt(day));
    var str = "";
    switch (test.getDay()){
        case 1 : str ="星期一";break;
        case 2 : str ="星期二";break;
        case 3 : str ="星期三";break;
        case 4 : str ="星期四";break;
        case 5 : str ="星期五";break;
        case 6 : str ="星期六";break;
        case 7 : str ="星期天";break;
    }
//最后将结果通过html输出
    document.getElementById("fun").innerHTML = str;
}

在终端tsc -w下将ts文件编译成js文件后，将对应路径确定后，编写html文件：

<html>
    <!--下面将html页面编码为utf-8-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <body>
        <!--新建按钮，对应事件点击，调用js内函数，并声明id-->
        <button onclick="WeekDay()">开始</button>
        <p id ="fun"></p>
        <!--将js文件下路径导入，于此处修改js文件路径即可-->
    <script src = "../dist/JsStudy/0706.js" >  
    </script>
</body>
</html>

至此，于浏览器打开html文件并输入相关时间完成星期的转换。

正则表达式：\d匹配一个数字，\w匹配一个字母或数字，\s匹配一个空格，.可以匹配任意字符，*表示任意个字符（包括0个），用+表示至少一个字符，用?表示0个或1个字符，用{n}表示n个字符，用{n,m}表示n-m个字符，用'\'转义'-'特殊字符，^表示行的开头$表示行的结束，具体表示：正则表达：/+相关表达式+/，并用test()方法测试给定的字符串是否符合条件。

实例：正则表达式验证Email邮箱地址：

/^[0-9a-zA-Z\.]+\@[0-9a-zA-Z]+\.[a-zA-Z]+$/;

throw和catch的使用：先声明一个function();并在此函数中返回一个Promise()函数，其中正确参数resolve，错误参数reject；再调用此函数时，通过.then()来进行操作。

Promise()一般是用来解决回调函数，并支持async的相互转换。

实例代码：简单逻辑测试与注释如下：

function pro(){
return new Promise((resolve,reject) =>{
if(true) resolve(1)
else reject("错误")
})

}
//此处的then应该算是异步操作
var s = pro();
pro().then((d:any)=>{
console.log(d);//这里输出的是resolve设置的1
return d+5;
}).then((d:any)=>{
console.log(d);//这里将经第一次then返回的d进行输出：6
return d+3;
}).then((d:any)=>{
console.log(d);//这里输出第二次返回的d：9
return d+2;
}).then((d:any)=>{
console.log(d); 
throw new Error('Error');
/**注意输出的顺序，throw之后的是直接调到catch中
* 这里先throw一个错误再console会导致上面的return不会输出
* 先console.log(d)再throw则会将上面return的d+2输出:11
* 也就是说，throw和catch是适用于异步，而对同步不太适用
*/
}).catch((e:any)=>{
console.log(e)
//如果去掉e，则这个throw没啥用
})

引入async和await概念：较Promise效率更高，使用更方便：

实例代码：简单逻辑测试与注释如下：

Promise声明：

import * as fs from 'fs';
//Promise声明
function pro(){
    return new Promise((resolve,reject) =>{
        if(true) resolve(1)
        else reject("错误")
    })
}

//通过Promise进行文件读取
function readFile(){
    return new Promise((s,j)=>{
        fs.readFile('./data/test.csv',(err,data)=>{
            if(err){j(err);return;}//读取错误
            s(data);//正确返回数据
        })
    })
}

引入延时函数对比时间：

function time(t:number){//延时函数
    return new Promise((s)=>{
        setTimeout(s,t)
    })
}

async声明：

//async声明
async function aspromise(){
    return await pro();
}
aspromise().then((d)=>{
    console.log(d);//这里输出d对应的resolve返回值：1
})

async的调用：

(async()=>{//只能有一个async
    /**
     * 好处在于，将读取文件readFile()的回调函数可以通过async()进行异步操作
     * 多个文件读取只需要多次调用 d = await readFile(); 即可
     */
    //读取文件内容
    let d = await readFile();
    console.log(d.toString());
    //顺序执行，延时
    console.time('time:');
    await time(1000);
    await time(1000);
    await time(1000);
    await time(1000);
    console.timeEnd('time:')
    //异步操作，并行执行 延时
    console.time('await:');
    await Promise.all([//所有延时并行操作
         time(1000),
         time(1000),
         time(1000),
         time(1000),
    ])
    console.timeEnd('await:')
})()

对比结果：