function Person(name) {
this.name = name
}
Person.prototype.sayName = function () {
console.log(this.name)
}
const kobe = new Person('科比')
kobe.sayName() // 科比
而有了ES6的class可以这么做
class Person {
constructor(name) {
// 构造器
this.name = name
}
sayName() {
console.log(this.name)
}
}
const kobe = new Person('科比')
kobe.sayName() // 科比
值得一提的是,class本质也是function,class是function的语法糖
class Person {}
console.log(typeof Person) // function
除了以上,还需要知道class的以下知识点
静态属性和静态方法,使用static定义的属性和方法只能class自己用,实例用不了
class Person {
constructor(name) {
this.name = name
}
static age = 22
static fn() {
console.log('哈哈')
}
}
console.log(Person.age) // 22
Person.fn() // 哈哈
const sunshine_lin = new Person('林三心')
console.log(sunshine_lin.age) // undefined
sunshine_lin.fn() // fn is not a function
extend继承
class Animal {
constructor(name, age) {
this.name = name
this.age = age
}
}
class Cat extends Animal {
say() {
console.log(this.name, this.age)
}
}
const cat = new Cat('ketty', 5) // 继承了Animal的构造器
cat.say() // ketty 5
const list = null
// do something
if (list && list.length) {
// do something
}
// 使用可选链
const list = null
// do something
if (list?.length) {
// do something
}
mp.weixin.qq.com林三心不学挖掘机 前端之神
前言
大家好,首先表明一下,标题没有恶意哈哈。请原谅本菜鸡。都是为了帮助大家,大家可以把自己认识几个,得了多少分,发在留言里,一个一分,总分38分。
大家好,我是林三心,这段时间很多兄弟姐妹都来问我问题,我也看过很多他们的代码。给我的感觉就是,代码的使用还停留在了ES5的那个阶段,很多用新语法就能轻松实现的,却都不怎么了解,所以我就打算写一篇文章,总结一下在我工作中用过的非常实用的
ES6,ES7,ES8,ES9,ES10,ES11,ES12
语法。首先说明一下:我这里只是举了最基础的例子,但是项目中要怎么去灵活运用,这个就要各位同学自己去摸索了。
ES6
1、let 和 const
这两个的出现,总感觉是为了开发的代码规范而出现的。我们要逐渐放弃var,在项目中多用let和const
与var的区别:
var有变量提升,有初始化提升,值可变 let有变量提升,没有初始化提升,值可变 * const有变量提升,没有初始化提升,值不可变,但如果是定义对象,则属性可变
暂时性死区
问题说明:其实let和const
是有变量提升的,但是没有初始化提升:块级作用域解决问题:
2、默认参数
开发中你曾遇到过这样的问题,如果参数不传进来,你就设置默认参数
但是这么写确实不优雅,可以使用ES6的默认参数
3、扩展运算符
曾经的我,想要拼接多个数组,我只能这么做
现在的我,可以更优雅地进行拼接
4、剩余参数
大家可能遇到过这种问题,一个函数,传入参数的个数是不确定的,这就可以用ES6的剩余参数
5、模板字符串
以前的我,拼接字符串只能这么做
现在我可以这么做,会更优雅
6、Object.keys
可以用来获取对象的key的集合,进而可以获得对应key的value
7、箭头函数
以前我们使用普通函数
ES6新加了
箭头函数
普通函数和箭头函数的区别:
1、箭头函数不可作为构造函数,不能使用new 2、箭头函数没有自己的this 3、箭头函数没有arguments对象 4、箭头函数没有原型对象
8、Array.prototype.forEach
ES6新加的数组遍历方法
9、Array.prototype.map
常用于返回一个处理过后的新数组
10、Array.prototype.filter
顾名思义,用来过滤的方法
11、Array.prototype.some
some,意思就是只要有一个是真,那就返回真
12、Array.prototype.every
every跟some是相反的,some是只要有一个就行,every是要所有为真才返回真
13、Array.prototype.reduce
第一个参数callback函数:pre为上次return的值,next为数组的本次遍历的项 第二个参数为初始值,也是第一个pre
举两个例子:
14、对象属性同名简写
以前同名属性需要这么写
ES6新增语法,只需这么写
15、Promise
Promise
,中文名为承诺
,承诺在哪呢?承诺在,一旦他的状态改变,就不会再改。这里就介绍基本使用,如果想要深入理解如何使用,请看我的另一篇文章看了就会,手写Promise原理,最通俗易懂的版本!!!看看基本使用
* 成功状态
* 失败状态
all
方法 接收一个Promise数组,数组中如有非Promise项,则此项当做成功 如果所有Promise都成功,则返回成功结果数组 如果有一个Promise失败,则返回这个失败结果race
方法16、class
以前咱们使用构造函数生成对象,这么做
而有了ES6的
class
可以这么做值得一提的是,
class
本质也是function
,class
是function
的语法糖
除了以上,还需要知道class的以下知识点
静态属性和静态方法,使用
static
定义的属性和方法只能class自己用,实例用不了extend
继承17、解构赋值
以前想提取对象里的属性需要这么做
ES6新增了解构赋值的语法
也可以进行数组的解构
18、find 和 findIndex
find:找到返回被找元素,找不到返回undefined findIndex:找到返回被找元素索引,找不到返回-1
19、for of 和 for in
for in :遍历方法,可遍历对象和数组 for of :遍历方法,只能遍历数组,不能遍历非iterable对象 先看for in:
再看 for of:
20、Set 和 Map
* Set 先说说
Set
的基本用法再说说
Set
的不重复性Set
的不重复性中,要注意引用数据类型和NaN
利用Set的不重复性,可以实现数组去重
* Map
Map
对比object
最大的好处就是,key不受类型限制
ES7
21、includes
传入元素,如果数组中能找到此元素,则返回true,否则返回false
跟indexOf很像,但还是有区别的
22、求幂运算符
以前求幂,我们需要这么写
ES7提供了求幂运算符:
**
ES8
23、Object.values
可以用来获取对象的value的集合
24、Object.entries
可以用来获取对象的键值对集合
25、async/await
这个是很常用的语法了,我的理解就是:以同步方式执行异步操作
我们平时可能会遇到这种场景,接口一,请求到数据一,而数据一被当做请求二的参数去请求数据二,我们会用Promise这么做
这样的嵌套是不美观的,如果有很多个接口,那就会嵌套很多层,此时我们可以使用async/await来以同步方式执行异步,注意以下几点:
await只能在async函数里使用 await后面最好接Promise,如果后面接的是普通函数则会直接执行 * async函数返回的是一个Promise
ES9
26、for await of
我们来看以下场景哈
但是我想要这个结果
第一时间我们肯定想到的是
async/await
但是上面代码也是有缺点的,如果有几十个,那不是得写几十个await,有没有一种方法可以通过循环来输出呢?
27、Promise.finally
新增的Promise方法,无论失败或者成功状态,都会执行这个函数
ES10
28、Array.flat
有一个二维数组,我想让他变成一维数组:
还可以传参数,参数为降维的次数
如果传的是一个无限大的数字,那么就实现了多维数组(无论几维)降为一维数组
29、Array.flatMap
现在给你一个需求
将上面数组转为
第一时间想到
map + flat
flatMap
就是flat + map
,一个方法顶两个30、BigInt
BigInt
是ES10新加的一种JavaScript数据类型,用来表示表示大于2^53- 1
的整数,2^53- 1
是ES10之前,JavaScript所能表示最大的数字哦对了,既然是JavaScript新的数据类型,那他的
typeof
是啥?所以以后面试官问你JavaScript有多少种数据类型,别傻傻答6种了,要答8种,把ES6的
Symbol
和ES10的BigInt
也加上去31、Object.fromEntries
前面ES8的
Object.entries
是把对象转成键值对数组
,而Object.fromEntries
则相反,是把键值对数组转为对象
他还有一个用处,就是把
Map转为对象
32、String.trimStart \&\& String.trimEnd
咱们都知道JavaScript有个trim方法,可以清除字符串首尾的空格
trimStart和trimEnd用来单独去除字符串的首和尾的空格
ES11
33、Promise.allSettled
ES11新增的Promise的方法
34、?. 和 ??
?.
,中文名为可选链
比如我们需要一个变量,是数组且有长度,才做某些操作
比如有一个对象,我要取一个可能不存在的值,甚至我们都不确定obj是否存在
比如有一个数组,我不确定它存不存在,存在的话就取索引为1的值
比如有一个函数,我们不确定它存不存在,存在的话就执行它
??
,中文名为空位合并运算符
请看以下代码,咱们使用||
运算符,只要左边是假值
,就会返回右边的数据而
??
和||
最大的区别是,在??
这,只有undefined和null
才算假值ES12
35、Promise.any
E12新增的Promise的方法
接收一个Promise数组,数组中如有非Promise项,则此项当做成功 如果有一个Promise成功,则返回这个成功结果 * 如果所有Promise都失败,则报错
36、数字分隔符
数字分隔符可以让你在定义长数字时,更加地一目了然
37、||= 和 \&\&=
不知道是ES几
38、对象计算属性
我们经常碰到这样的问题,无论是在微信小程序还是React中,我们需要根据某个条件去修改某个数据
我也不知道这个新特性叫啥,我就自己取名叫
属性动态属性
哈哈哈补充
39、Symbol
应用场景1:使用Symbol来作为对象属性名
平常我们对象的属性都是字符串
其实也可以用Symbol来当做属性名
但是Symbol作为属性的属性不会被枚举出来,这也是
JSON.stringfy(obj)
时,Symbol属性会被排除在外的原因其实想获取Symbol属性也不是没办法。
应用场景2:使用Symbol来替代常量
有以下场景
如果变量少的话还好,但是变量多的时候,赋值命名很烦,可以利用Symbol的唯一性
应用场景3:使用Symbol定义类的私有属性
以下例子,PASSWORD属性无法在实例里获取到