JS总结使用方法
1.Number
2.String
使用模板字符串
let a = 'this is a'
let b = 10
console.log(`${a} , b is ${b}`)
// => this is a,b is 10
3.Array
拷贝数组使用扩展运算符
let items = [1, 2, 3, 4, 5]
let copyItems = [...items]
使用Array.from将类似数组的对象转为数组
const foo = document.querySelectorAll('.foo')
const nodes = Array.from(foo)
数组排序使用sort函数
let Arr = [10, 9, 15, 6, 7, 1, 0]
Arr.sort((a, b) => a - b)
// => [0, 1, 6, 7, 9, 10, 15]
Arr.sort()
// => [0, 1, 10, 15, 6, 7, 9]
let ArrString = ['a', 'B', 'c', 'A', 'e', 'C', 'G', 'f', 'b']
ArrString.sort()
// => ["A", "B", "C", "G", "a", "b", "c", "e", "f"]
4.Object
class的使用
//定义类
// class Point {}
// let Point = class {}
// let p1 = new class {
// constructor(name){
// this.name = name
// }
//}('张三')
// p1.name // => "张三"
let Point = class Me {
constructor(x, y) {
this.x = x
this.y = y
Me.prototype.test()
// return Object.create(null)
// constructor方法默认返回实例对象（即this）
// 完全可以指定返回另外一个对象。
//point instanceof Point // => false
}
toString() {
return '(' + this.x + ', ' + this.y + ')'
}
static classMethod() {
return 'this only in Point'
}
}
Object.assign(Point.prototype, {
test() { console.log('test extend') }
})
// toString方法是Point类内部定义的方法，它是不可枚举的。
Object.keys(Point.prototype)
// => []
Object.getOwnPropertyNames(Point.prototype)
// => ["constructor","toString"]
let point = new Point(1, 2)
let p1 = new Point(2, 3)
let p2 = new Point(3, 2)
Point.classMethod()
// => "this only in Point"
point.classMethod()
// => TypeError: foo.classMethod is not a function
p1.__proto__ === p2.__proto__ // true
point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true
// 可以使用 Object.getPrototypeOf 方法来获取实例对象的原型，然后再来为原型添加方法/属性
Object.getPrototypeOf(point) // { constructor, toString, test }
class的继承
class Point {
constructor(x, y) {
this.x = x
this.y = y
}
toString() {
return '(' + this.x + ', ' + this.y + ')'
}
}
// super关键字，它在这里表示父类的构造函数，用来新建父类的this对象
// 子类必须在constructor方法中调用super方法，否则新建实例时会报错。
// 这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。
// 如果不调用super方法，子类就得不到this对象。
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y) // 调用父类的constructor(x, y)
this.color = color
}
toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}
5.Function
使用解构赋值为函数设置默认值
function test({id = null, name = 'name', text}, ...values) {
console.log(id, name, text, values)
// => 5 "name" undefined [1, 2, 3, 4, 5]
return { id, name, text, values }
}
var obj = {
id: 5
}
let {id, name, text = 'text', values} = test(obj, 1, 2, 3, 4, 5)
console.log(id, name, text, values)
// => 5 "name" "text" [1, 2, 3, 4, 5]
6.Async
Promise与async函数
var action1 = (value) => {
console.log('2.进入含有promise的函数')
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('3.promise返回结果')
resolve('success')
},2000)
})
}
var asyncFunction = async (value) => {
console.log(`1.进入async函数，传入参数${value}`)
var c = await action1(value)
console.log(`4.结束async函数，promise返回结果为${c}`)
return '5.async返回了Promise对象'
}
asyncFunction(1).then(res => console.log(res))
// => 1.进入async函数，传入参数1
// => 2.进入含有promise的函数
// => 3.promise返回结果
// => 4.结束async函数，promise返回结果为success
// => 5.async返回了Promise对象
