初学ES6记录

初学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次

初学ES6记录

菜鸟教程 在线测试正则表达式和通用正则表达式

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;
};  // 剩余参数（将不定数量的参数表示成一个数组）

扩展运算符

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查看是否包含元素