参考教程: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:')
})()
对比结果: