这里我从一下几大点来说一说ES6,有什么问题可以指出哈~
一、原型链
在原型链中,实例对象的原型对象也有原型对象并指向的是Object。
为了共享方法 因为ES6之前没有类的继承,所以只能通过原型对象来共享方法
不能直接把父类的原型对象赋给子类,这样会导致两个原型对象指向相同,而是应该要创建父类的对象实例再赋给子类的原型对象,这样通过原型链才能正确的继承父类的方法而不相互影响。
二、this的指向问题
- 普通函数中 this指向window
- 对象方法中 this指向调用的对象
- 构造函数中 this指向实例对象 原型对象里面的this指向实例对象
- 定时器函数中 this指向window
- 立即执行函数中 this指向window
三、修改this指向的三个函数
- call函数可以修改函数运行的this指向 在没有继承之前可以使用子类调用call来使用父类的构造函数。例如:Father.call(this, uname , age , sex );
- filter返回的是数组
- bind是不调用函数但是改变this指向
btn.addEventListener('click',function(){
this.disabled=true;
setTimeout(function(){
this.disabled=false;
}.bind(btn),3000)
})
//bind的使用小栗子
some和forEach的区别 在查找单个特定元素例如id的话推荐使用forEach,因为forEach会在找到元素的时候停止遍历,提高运行速度。 在判断条件中加入 return true;
四、Object-defineProperty
vue2.js里面的重要技术
- writable 是否可以修改
- configurable 是否允许被删除或再次修改这个属性
- enumerable 是否允许遍历
- value就是只有就修改没有就直接添加
五、修改this指向的三种方法
- call 调用函数和改变函数内的this指向,可以实现继承
- apply 传入的参数必须是数组 可以借助于数学内置对象最大值之类的
- bind方法不会调用函数 返回是一个修改过this指向的函数
六、严格模式
是IE10 ES5以后才有的 相当于对代码进行一些约束 例如要先声明变量才能赋值
- 严格模式下全局作用域中函数的this指向的是undefined
- 严格模式下不允许在非函数的代码块内声明函数
- 严格模式下定时器的this指向window
语法 "strict use"
七、闭包
就是指一个函数的作用域可以访问另一个函数的作用域、 还延伸了函数局部变量的作用域
立即执行函数称为小闭包 因为立即执行函数里面可以使用传入的变量
八、深拷贝浅拷贝
九、浅拷贝
for(var k in obj){
//k是属性名 obj[k]是属性值
o[k]=obj[k];
}
或直接用封装好的函数 assign Object.assign(o,obj); 但是浅拷贝在复杂数据类型只会把地址拷贝
十、深拷贝
新开辟一份空间来存储数据 手写代码
function deepcopy(newobj,oldobj){
for(var k in oldobj){
var item=oldobj[k];
if(item instanceof Array){
newobj[k]=[];
deepcopy(newobj[k],item);
}
else if(item instanceof Object){
newobj[k]={};
deepcopy(newobj[k],item);
}
else{
newobj[k]=item;
}
}
}
//数组也是对象所以要先判断是不是数组
十一、正则表达式 (Regular Expression)
匹配 替换 提取
十二、检测文本是否符合正则表达式规范 re.test();
- 边界符 ^ $
- 量词符 * + ? {a,b}
/[abc]/ //只要包含其中一个就true
/^[abc]$/ //只要有一个就是true
/^[a-z]$/ //a到z任意一个字母都可以
/^[a-zA-Z]$/ //$字母大写和小写都可以
/^a*$/ //a出现0次或者更多次
/^a+$/ //a出现1次以上
/^a?$/ //a出现1||0次
/^a{3}$/ //a出现3次
/^a{3,6}$/ //a出现3次以上小于等于6
/^(abc){3}$/ //abc出现3次
十三、let和const的使用
- let声明的变量具有块级作用域
- let声明的变量不存在变量提升
- let声明的变量存在暂时性死区
- const声明的常量具有块级作用域
- const声明的常量必须赋值
十四、数组、对象解构
let ary[a,b,c]=[1,2,3]; //数组解构 a=1,b=2,c=3
let person ={name:'zhangsan',age:20}; let {name:myname,age:myage}=person; //对象解构
十五、箭头函数
const fn=()=>{} //语法
箭头函数不绑定this关键字,箭头函数中this指向函数定义位置的上下文this
剩余参数
const sum=(...args)=>{
let total=0;
args.forEach(item => total += item);
return total;
}; // 累计计算参数(数字型)(将不定数量的参数表示成一个数组)
// 这里没有限制字符串,若传字符串,则sum(str,...) 则强转为字符串类型
扩展运算符
let ary=[1,2,3];
console.log(...ary);//拆分成1,2,3
let ary1=[4,5,6];
let ary2=[...ary,...ary1]; //数组合并
ary1.push(...ary);
//伪数组变成真正数组
var divs=document.queryseletorAll('div');
var ary=[...divs];
十六、Array的拓展方法
array=Array.from(arrylike,item=>item*2);//from方法形成数组
item=ary.find(item=>item.id==2);//find方法查找元素
index=ary.findIndex(item=>{item>15})//findIndex方法查找序号
flag=ary.includes(2); //includes查看是否包含元素