优秀的编程知识分享平台

网站首页 > 技术文章 正文

ES6学习笔记(es6基础教程)

nanyue 2024-07-20 23:49:42 技术文章 10 ℃

这里我从一下几大点来说一说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查看是否包含元素

Tags:

最近发表
标签列表