前端——JS基础

定义变量：let / var

字符串

字符串拼接：+

字符串和数字拼：'您....' + 25 ; 这个25会转成字符串再拼接

字符串和数组拼：'10以内的质数有：' + [2,3,5,7]  => 10以内的质数有：2,3,5,7

字符串长度：length

str.length / '刘总你好'.length

函数

定义函数关键字：function

console.log(); //打印到界面上

指定缺省值：

function func (p1,p2 = '白月黑羽'){console.log('第1参是' + p1)console.log('第2参是' + p2)
}func(1)

变量的有效范围：

{} 代码块

const、let ：只在代码块里有效

var：有效范围是代码块所在的区域

function run(){/*ccc整个函数内部有效*/{var ccc = 'hhhh'}console.log(ccc)
}
run()

/*函数外定义，全局有效*/
{var ccc = 'hhhh'}function run(){console.log(ccc)
}
run()

 

判断语句

对象

数组

字符串、数字对象

循环

类和继承

类的定义和实例化

// 定义类
class Car {    type = '汽车' //知道的属性hasTire = trueconstructor(price, owner) {//构造函数；不知道的属性，需要参数传进来this.price = pricethis.owner = owner}showInfo(){//类的方法；类里面定义的函数（包括constructor)可以叫类的方法，都不需要function关键字声明console.log(`车型 ：${this.type} -  车主 ： ${this.owner} - 售价 ： ${this.price} `)}
}   // 创建实例对象
var myCar1 = new Car(300000, '白月黑羽')
var myCar2 = new Car(350000, '白月黑羽')console.log(myCar1.type, myCar1.hasTire,myCar1.price,myCar1.owner)
console.log(myCar2.type, myCar2.hasTire,myCar2.price,myCar2.owner)myCar1.showInfo()
myCar2.showInfo()

instanceof关键字

用于判断前面的对象是否为后面对象的一个具体实例

extend关键字

类的继承，🔺js中子类会自动拥有父类的一切属性和方法

super关键字 

当子类的 初始化代码 有一部分和父类相同，这时就可以用super（注意是初始化代码）直接调用父类的constructor代码

class Car {    type = '汽车'hasTire = trueconstructor(price, owner) {this.price = pricethis.owner = owner}showInfo(){console.log(`车型 ：${this.type} -  车主 ： ${this.owner} - 售价 ： ${this.price} `)}
}class ElectricCar extends Car {static type = '电动车'static hasBattery = truestatic hasEngine  = falseconstructor(price, owner, batteryCap) {// 调用父类的构造函数super(price, owner)this.batteryCap = batteryCap}}

当然super不仅可以调用父类的构造函数方法，也可以调用父类的其他方法

class Car {    type = '汽车'hasTire = trueconstructor(price, owner) {this.price = pricethis.owner = owner}showInfo(){console.log(`车型 ：${this.type} -  车主 ： ${this.owner} - 售价 ： ${this.price} `)}
}class ElectricCar extends Car {type = '电动车'hasBattery = truehasEngine  = falseconstructor(price, owner, batteryCap) {// 调用父类的构造函数super(price, owner)this.batteryCap = batteryCap}showInfo(){super.showInfo()console.log(`电池容量 ：${this.batteryCap}`)}}var myCar1 = new ElectricCar(300000, '白月黑羽', 200)
myCar1.showInfo()

错误捕获

抛出错误 —— 关键字throw

关键字throw后需要跟一个错误对象

var miles,fmiles,km
miles = prompt('请输入英里数：')
fmiles = parseFloat(miles)
if(isNaN(fmiles))//这里是直接使用Error构造函数创建了一个新对象；Error构造函数的参数会作为error对象的message属性，用来描述此处具体的错误信息，比如原因。执行完throw抛出异常的代码后，后续的代码不会再执行throw new Error('输入的必须是数字')
km = fmiles * 1.6
console.log(`${miles} 英里等于 ${km}公里`)

throw 抛出的不一定非得是Error类型的对象，也可以是TypeError,Error类型的子对象 ，也可以是自定义的对象

if (isNaN(fmiles))throw {code : 401,info : '输入的必须是数字'}

捕获错误 —— try ... catch ...

在编码时，预料到了某些代码在运行时可能会出现某些错误，如果这些错误不至于必须结束程序，就可以使用try ... catch ...

正常情况下：

var stockTable = {sh : {华远地产 : '600743',中天科技 : '600522',},sz : {深南股份 : '002417',中兴通讯 : '000063',},
}
while(true){ let input = prompt('请输入股市代码-股票进行查询:')let [stock, corp] = input.split('-')let code = stockTable[stock][corp]console.log(`${stock} ${corp} 股票代码是 ${code}`)
}

捕获错误：

while (true){ let input = prompt('请输入股市代码-股票进行查询:')try{if(input==='exit') breaklet [stock, corp] = input.split('-')let code = stockTable[stock][corp]console.log(`${stock} ${corp} 股票代码是 ${code}`)} catch (e){//一旦try里的代码执行错误，就会捕获这个错误，并执行catch里的代码；catch引导的代码段就是对错误 的一种处理；这里的e是错误对象console.log(e.name,e.message)   console.error('请输入有效的股市代码')   }
}

Case1.当预估某个代码段中可能出现好几种类型的错误，可以使用 instanceof 判定错误类型，并进行相应的处理。

myCar1 instanceof Car

=> true

判断前面对象是否为后面对象的一个具体实例 

while (true){ let input = prompt('请输入股市代码-股票进行查询:')try{if(input==='exit') breaklet [stock, corp] = input.split('-')let code = stockTable[stock][corp]console.log(`${stock} ${corp} 股票代码是 ${code}`)} catch (e){if (e instanceof TypeError) {console.error('请输入有效的股市代码')} else if (e instanceof RangeError) {console.error(e)}// 未知类型错误，继续抛出else {console.log('未知类型错误')throw e //在catch代码块中，如果发现当前代码没法处理这个异常，可以使用throw继续往上抛出}}
}

Case2.嵌套捕获

当内层代码抛出异常，优先会被内层的catch 捕获， 不会执行到外层的 catch 代码块中；当内层catch代码发现不适合处理，又 throw 抛出， 才会被外层的 catch 捕获进行处理。

try{var inNum = 401try {if (inNum === 401)throw {code : 401,info : '输入的是401！'}else throw {code : 500,info : '输入的是其它！'}} catch (e) {if (e.code === 401) console.log('401 错误处理')else {console.log('未知类型错误')throw e}}
}
catch (e) {console.log('处理内层代码不适合处理的错误')
}

Case3.在函数调用里面产生错误

优先使用当前函数里面捕获处理错误的 try catch ；如果没有捕获到（比如没有 try catch），就会把错误对象抛到 调用该函数的外层代码 处， 查看是否有相应的 try catch 

function throwError(inNum) {if (inNum === 401)throw {code : 401,info : '输入的是401！'}else throw {code : 500,info : '输入的是其它！'}
}try {//这行代码是被try catch保护处理的，异常会被捕获，所以函数里面抛出的异常，在函数外面的catch被捕获处理了throwError(401); // 500
} 
catch (e) {if (e.code === 401) {console.log('401 错误处理')} else {console.log('未知类型错误')throw e}
}
console.log('后续代码执行')

捕获错误 —— try ... catch ... finally

不管try里面有无错误抛出，都要执行finally代码块里的代码

特别是在没有catch的时候有用：

try {throw {code : 401,info : '输入的必须是数字'}
} 
finally {console.log('不管有无错误，都要做的处理')
}
console.log('后续代码')

3个点操作符

剩余参数：前有3个点的参数，称之为剩余参数

场景：实现一个printAge，它的参数是一些学生的姓名；这个函数需要打印这些输入的学生的年龄

常规做法：定义一个数组

var studentInfo = {'张飞' :  18,'赵云' :  17,'许褚' :  16,'典韦' :  18,'关羽' :  19,
}function  printAge(students){for (let student of students) {console.log(`学生：${student} , 年龄 ${studentInfo[student]}`);}
}printAge(['张飞', '典韦', '关羽'])
printAge(['赵云'])

使用可变参数：

var studentInfo = {'张飞' :  18,'赵云' :  17,'许褚' :  16,'典韦' :  18,'关羽' :  19,
}function  printAge(...students){for (let student of students) {console.log(`学生：${student} , 年龄 ${studentInfo[student]}`);}
}printAge('张飞', '典韦', '关羽')//执行函数时,js解释器创建一个数组赋值给这个students,里面存放了 '张飞', '典韦', '关羽' 三个字符串对象作为元素
printAge('赵云')

var studentInfo = {'张飞' :  18,'赵云' :  17,'许褚' :  16,'典韦' :  18,'关羽' :  19,
}function  printAge(...students){console.log(students)for (let student of students) {console.log(`学生：${student} , 年龄 ${studentInfo[student]}`);}
}printAge('张飞', '典韦', '关羽')

运行结果

[ '张飞', '典韦', '关羽' ]
学生：张飞 , 年龄 18
学生：典韦 , 年龄 18
学生：关羽 , 年龄 19

注意：剩余参数往往不单独出现在函数参数中，通常和其他参数一起出现

var studentInfo = {'张飞' :  18,'赵云' :  17,'许褚' :  16,'典韦' :  18,'关羽' :  19,
}function  printAge(prefix, ...students){console.log(students)for (let student of students) {console.log(`${prefix} 学生：${student} , 年龄 ${studentInfo[student]}`);}
}printAge('-->', '张飞', '典韦', '关羽')//prefix固定参数，优先匹配，剩下的都是剩余参数的
printAge('==>', '张飞', '典韦', '关羽')

应用：

调用函数时

var onebatch = ['张飞', '典韦', '关羽']
printAge(...onebatch)//等价于printAge (onebatch[0], onebatch[1], onebatch[2])

构建新数组时

var batch1 = ['张飞', '典韦', '关羽']
var batch2 = [...batch1, '赵云', '马超']
console.log(batch2)

构建新对象

var studentInfo1 = {'张飞' :  18,'赵云' :  17,'许褚' :  16,'典韦' :  18,'关羽' :  19,
}var studentInfo2 = {...studentInfo1,'黄忠' :  78,'张辽' :  39,
}

注意一点：

1.在使用多次数据展开时，就比如在实现多个Object 的合并时，其中重复的数据会被后面的Object里面的值替换

var studentInfoAll = {...studentInfo1,...studentInfo2
}

 2.赋值1：studentInfoAll_clone1 只是对象的新变量名， 和 studentInfo 对应的是同一个数据对象；赋值2：studentInfoAll_clone2 对应的则是一个新的对象，里面是studentInfo里面的内容。

var studentInfo = {'黄忠' :  78,'张辽' :  39
}// 赋值1
var studentInfoAll_clone1 = studentInfo// 赋值2
var studentInfoAll_clone2 = { ...studentInfo}

回调函数

同步&异步

同步：一起走，等完成后再继续

import time
print('这里是等待2s前的代码')
time.sleep(2)//等待2s；一直在这儿等着
print('这里是等待2s后的代码')

异步：不搁这儿等着，继续往后执行，到2s后立即执行 taskAfter2Second

function taskAfter2Second(){console.log("这里是等待2s的后续代码");
}
setTimeout( taskAfter2Second , //要执行要回调函数的函数名2000 //2000毫秒，2s
)console.log("这里是等待2s的后续代码");

何为回调函数

先定义，等事情完成，回头再调用

回调函数中的this指代问题

首先前面说过：通过哪个对象调用了这个函数，函数里的this对应的就是这个对象

情景1：这里的this对应的就是car1

class Car {    constructor(price, owner) {this.price = pricethis.owner = owner}showInfo(){console.log(`车辆信息如下：`)console.log(`车主 ： ${this.owner} - 售价 ： ${this.price} `)}}car1 = new Car(230000,'白月黑羽')
car1.showInfo()

情景2：这里的this对应的就是obj1

这里相当于给car1.showInfo又起了个anotherShowInfo

class Car {    constructor(price, owner) {this.price = pricethis.owner = owner}showInfo(){console.log(`车辆信息如下：`)console.log(`车主 ： ${this.owner} - 售价 ： ${this.price} `)}}car1 = new Car(230000,'白月黑羽')let obj1 = {price: '3333',owner: '张三',anotherShowInfo : car1.showInfo
}obj1.anotherShowInfo()

情景3：这里的this对应的就是obj2；但输出的是undefinded,undefinded，因为obj2没有price、owner这俩属性

class Car {    constructor(price, owner) {this.price = pricethis.owner = owner}showInfo(){console.log(`车辆信息如下：`)console.log(`车主 ： ${this.owner} - 售价 ： ${this.price} `)}}car1 = new Car(230000,'白月黑羽')let obj2 = {anotherShowInfo : car1.showInfo
}obj2.anotherShowInfo()

🔺情景4：这里的this对应的就是window；输出undefinded,undefinded

setTimeout这个函数是由js引擎实现的，由于它内部的回调函数function，调用时没有xxx.这样的前缀，js中调用函数没有前缀就等于是通过全局对象window调用。

而window没有price、owner这两个属性，所以都是undefinded。

class Car {    constructor(price, owner) {//构造函数this.price = pricethis.owner = owner}showInfo_Delay1Sec(){//this.owner 要是在这里this对应的就是car1//1s后通过回调函数打印this.owner和this.pricesetTimeout(function(){//console.log(this === window)console.log(`车辆信息如下：`)console.log(`车主 ： ${this.owner} - 售价 ： ${this.price} `)},1000)}}car1 = new Car(230000,'白月黑羽')car1.showInfo_Delay1Sec()

如何解决回调函数中this对应的window而不是car1这样的问题呢

法一：设一个中间变量，保存this到其他变量比如self中

class Car {    constructor(price, owner) {//构造函数this.price = pricethis.owner = owner}showInfo_Delay1Sec(){let self = thissetTimeout(function(){console.log(`车辆信息如下：`)console.log(`车主 ： ${self.owner} - 售价 ： ${self.price} `)},1000)}}car1 = new Car(230000,'白月黑羽')
car1.showInfo_Delay1Sec()

法二：使用箭头函数

箭头函数中的this具有特殊性：即它对应的是 包含该箭头函数的函数 的执行环境

简单来说就是看 ：=> 这个箭头函数出现在哪个函数定义里面

注意这里不是setTimeout，而是showInfo_Delay1Sec；它只是作为setTimeout这个函数的参数。

this关键字在方法中，那它对应的就是那个方法所属的对象

class Car {    constructor(price, owner) {//构造函数this.price = pricethis.owner = owner}showInfo_Delay1Sec(){setTimeout(()=>{console.log(`车辆信息如下：`)console.log(`车主 ： ${this.owner} - 售价 ： ${this.price} `)},1000)}}car1 = new Car(230000,'白月黑羽')
car1.showInfo_Delay1Sec()

 若箭头函数没有包含函数，那么里面的this对应的就是全局对象，在浏览器中就是window

var price = 1000
var owner = '白月黑羽'setTimeout(()=>{ console.log(`车主 ： ${this.owner} - 售价 ： ${this.price} `)},1000
)

匿名函数

由于前面taskAfter2Second只被用1次，起名较为麻烦，所以引入匿名函数

上面代码可改为：

setTimeout( //直接定义函数，不用起名function(){console.log("这里是等待2s的后续代码");}2000 //2000毫秒，2s
)console.log("这里是等待2s的后续代码");

let add100 = function(a) { return a+100 ;}

箭头函数

eg. (a) => {return a+100 ;}

相当于把function换成了=>

注意两点：1.当箭头函数只有一个参数时，（）也可省       a => {return a+100 ;}

                  2.当箭头函数体内只有一行代码且返回一个值时， {}、return均可省   a => a+100

通过结合前面的匿名函数和箭头函数对下面的代码进行简化

const array1 = [1,4,9,16];
function square(x) {return x**2}
const map1 = array1.map(square);
console.log(map1);

const array1 = [1,4,9,16];
console.log(array1.map(x => x**2));

本文参考自：Javascript 简介 - 白月黑羽 (byhy.net)