ES6新特性
跟着这个视频学的
this
this指向什么取决于函数的调用方式
1.对象中的方法->this==对象
2.将函数作为独立对象、在对象外部调用(不是对象的一部分) ->this==window，undefined（启用严格模式）
函数里的回调函数，严格模式，this==window
为了避免不知道this指向哪个，所以才会经常在开头就that = this；使得this指向这个对象（突然悟了）。
bind
想要让2中的函数的this指向对象，就用bind，绑定到那个对象上。
.bind(obj)
箭头函数 arrow
我爱箭头函数!
()=>{}
const square = number => number * number
如果用箭头函数，那么对象方法里的回调函数的this不会重置，指向对象，属于继承上下文的this。
数组扩展 map filter reduce
map() 替换数组内的内容
items = color.map((color)=>`this is ${
color}`)
渲染列表很有用
filter() 过滤
items = numbers.filter(num=>num>2)
可以连接方法
items = numbers
.filter(num=>num>2)
.map(num=>({
number:num}))
reduce 累加器
arr.reduce((prev,cur,index,arr)=>{
},init)
arr: 表示将要原数组
prev:表示上一次调用回调时的返回值，或者初始值init
cur:表示当前正在处理的数组元素
index:表示正在处理的数组元素的索引，若提供init值，则索引为0，否则索引为1
init: 表示初始值
number.reduce((prev,cur)=>prev+cur)
接受很多数组是 …arrays ，去重并拼到一起返回一个数组。
export default function union(...arrays) {
return [...new Set(arrays.reduce((pre,cur)=>[...pre,...cur]))];
}
模板字符串 ``
反隐符号在波浪线的那个按键
·color is ${color}·
解构赋值
将对象属性的数值存储于常量
const address = {
street:'',
country:''
}
const {
street , country} = address;
也可以只
const {
street} = address;
也可以使用别名
const {
street:st} = address;
使用扩展运算符… 数组扩展
合并数组
const first = [1,2,3];
const second = [4,5,6];
const combined = [...first,'and',...second];
合并对象
const first = {
name:"Herr"}
const second = {
age:7}
const combined = {
...first,...second,location:"park road 112"}
巧妙运用
clone对象
const sameObject = {
...object}
class
class Person{
constructor(name){
this.name = name;
}
}
const person = new Person('wk');
如果继承了父类，可以用super()调用父类的构造函数。
类可以不写在一个文件里，可以将每个类导出来，一个类一个文件。
在代码里的class前面加上export即可
export class Person{
constructor(name){
this.name = name;
}
}
如果引用了别的文件的类，就在最上面写一行import… 其中Person是类名，./ 因为person是自定义的一个文件在项目中
例子：import { Person } from ‘./person’;
如果在class前加了default ，默认这个类就是从这个文件export的类
export default class Person{
constructor(name){
this.name = name;
}
}
那么引用的时候就不用加花括号了
import Person from ‘./person’;