ES6新特性
September 18, 2021
4434
一、类(class)
面向对象编程,TS语法中大量运用到了class类,单例模式也可以理解为class类的实例化,全局有且只有一个实例
二、模块化(Module))
导出:export 导出时使用{}
默认导出: export default 导出时不使用{}
导入: import
三、函数优化
函数默认值:直接给参数写上默认值,没传就会自动使用默认值
1
2
3
4function add(a, b = 1) {
return a + b;
}
console.log(add(10)) //11不定参数:不定参数用了表示不确定的参数个数,形如…变量名,由…加上要给具名参数标识符组成。具名参数只能放在参数列表的最后,并且有且只有一个不定参数
1
2
3
4
5function fun(...params) {
console.log(params.length)
}
fun(1, 2) // 2
fun(1, 2, 3, 4) //4箭头函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18// 箭头函数的例子
()=>1
v=>v+1
(a,b)=>a+b
()=>{
alert("foo");
}
e=>{
if (e == 0){
return 0;
}
return 1000/e;
}
1.如果只有一个参数,()可以省略。
2.如果只有一个return,{}可以省略箭头函数结合解构表达式
1
2
3
4
5
6
7
8
9
10
11//以前
function hello(person) {
console.log("hello" + person.name)
}
hello(person); //helloqiyue
//箭头函数
let hello2 = params => console.log("hello" + person.name)
hello2(person) //helloqiyue
//箭头函数加解构表达式
var hello3 = ({ name }) => console.log("hello" + name)
hello3(person) //helloqiyue1
2
3
4
5
6
7
8
9
10
11
12
13// 箭头函数的例子
()=>1
v=>v+1
(a,b)=>a+b
()=>{
alert("foo");
}
e=>{
if (e == 0){
return 0;
}
return 1000/e;
}
四、let跟const
let: 声明变量
(1)、var声明的变量往往会越域;let声明的变量有严格局部作用域
(2)、var 可以声明多次;let只能声明一次
(3)、var会变量提升;let不存在变量提升
const: 相当于声明了一个常量
(1)、声明之后不允许改变
(2)、一旦声明必须初始化,否则会报错
五、解构表达式
数组解构
1
2
3let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c) //1,2,3对象解构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15const person = {
name: "qiyue",
age: 23,
language: ['java', 'js', 'css']
}
const { name, age, language } = person
console.log(name, age, language) //qiyue 23 (3) ["java", "js", "css"]
const person = {
name: "qiyue",
age: 23,
language: ['java', 'js', 'css']
}
//从person里解析出name的值在赋值给abc
const { name:abc, age, language } = person
console.log(abc, age, language) //qiyue 23 (3) ["java", "js", "css"]
六、字符串扩展
1 |
|
七、模板字符串
1 |
|
八、对象优化
声明对象简写
1
2
3
4
5
6
7
8
9
10//以前
const name = 'sanyue'
const age = 21
//将属性值name,age分别赋给person1对象的name,age,后面是属性值
const person1 = { name: name, age: age }
console.log(person1) //{name: "sanyue", age: 21}
//es6:属性名和属性值变量名一样,可以省略
const person2 = {name,age}
console.log(person2) //{name: "sanyue", age: 21}对象的函数属性简写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15let person3 = {
name: "qiyue",
//以前
eat: function (food) {
console.log(this.name + "在吃" + food);
},
//箭头函数中this不能使用,用对象.属性
eat2: food => console.log(person3.name + "在吃" + food),
eat3(food) {
console.log(this.name + "在吃" + food)
}
}
person3.eat("苹果") //qiyue在吃苹果
person3.eat2("香蕉") // qiyue在吃香蕉
person3.eat3("西瓜") //qiyue在吃西瓜对象的扩展运算符
扩展运算符(…)用于取出参数对象所有可遍历属性然后拷贝到当前对象
1
2
3
4
5
6
7
8
9
10
11
12//拷贝对象(深拷贝)
let p1 = { name: "qiyue", age: 23 }
let obj = { ...p1 }
console.log(obj)//{name: "qiyue", age: 23}
//合并对象
let age1 = { age: 24 }
let name1 = { name: "qiyue" }
let p2 = {}
p2 = { ...age1, ...name1 }
console.log(p2) //{age: 24, name: "qiyue"}
//如果p2中原本有name,age属性会被覆盖
九、map和reduce方法
1、map():接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回
1 |
|
2、reduce():为数组中的每一个元素依次执行回调函数,不包括数组中被删除或未被赋值的元素
语法:arr.reduce(callbace,[initialValue])
callback(执行数组中每个值的函数,包含四个参数)
previousValue(上一次调用回调返回的值,或者是提供的初始值(initialValue))
currentValue(数组中当前被处理的元素)、
index(当前元素在数组中的索引)
array(调用reduce的数组)
initialValue(作为第一次调用callback的第一个参数)
1
2
3
4
5let arr1 = [2, 40, -10, 6]
let result = arr1.reduce((a, b) => {
return a + b
}, 10)
console.log(result)//48
- 本文作者:wowangmouren
- 本文链接:https://wangwewntao.top/2021/09/18/wmr_09/index.html
- 版权声明:本博客所有文章均采用 BY-NC-SA 许可协议,转载请注明出处!