es6

时间:2020-04-13 11:50:43   收藏:0   阅读:80

es6是ECMAScript的第六次修订,于2015年完成,也叫ES2015。

特点:语法上更加简洁,提高开发效率。

一、箭头函数

(当要求动态上下文的时候就不能够用箭头函数)

特点:

1、箭头函数中,this的指向是定义时所在的作用域对象,而非运行时;

2、不能够用作构造函数,即不能使用new命令;

2、不能够用arguments对象;

3、不能使用yield命令;

附:超时调用的代码都是在全局作用域中执行的,即setTimeOut中的this指向window,但是使用箭头函数可以改变this的指向.

 

二、var 、let 、const区别

var 有变量提升、没有块级作用域

let和const没有变量提升,一定要先声明再使用,有块级作用域,

let定义变量;const定义常量;

const定义后,不能修改其指向的目标,若是对象、数组,可以修改里面的属性值。我们可以在引用第三方库的时,把需要声明的变量,用const来声明,这样可以避免未来不小心重命名而导致出现bug .

const xxx = require(‘xxxxx‘); 

 

var oLi=document.querySelectorAll(‘li‘)
var arr=[];
for(var i=0;i<oLi.length;i++){
    oLi[i].onClick(function(index){
        console.log(index) //打印出来的是3 
    });
}
,
//var定义的i为全局变量,每循环一次,新值都会覆盖旧值
//let 定义的i为局部变量,没循环一次,都为i创建新的绑定代码

//闭包


function show(i){
    return function(){
        console.log(i) //0、1、2
    }
}

var arr=[];
for(var i=0;i<3;i++){
   oLi[i].onClick(show(index));
}


//立即执行函数
for(var i=0;i<3;i++){
    (oLi[i].onClick(function(index){
         console.log(index)
    }))(i);
}
//0/1/2 //立即执行函数给每个 li 创造一个独立作用域

三、Set数据结构 、Map

Set是一个构造函数,类似数组,里面的值是唯一的;Set没有length属性值,遍历只能用for of

//数组去重:
let set=new Set([1,2,3,3]);
console.log([...set]) //[1,2,3]
console.log(Array.from(set)) //[1,2,3]
类数组转换为数组:
Array.prototype.slice.call(likeArray)//利用slice的返回新数组以及call改变this指向而形成一个新数组

类数组:(类似于一个数组的对象):是一个对象,里面有数组的值以及相应的属性(length).

类数组是指在写法上跟数组一样,比如argumens,函数的第一个参数是argument[0],写法上跟数组一样,但是不是数组,他的原型是Object。

常见的类数组有:

1、函数的参数 arguments,

2、DOM 对象列表(比如通过 document.querySelectorAll 得到的列表)

3、 jQuery 对象 (比如 $(“div”)).

Map与对象:

1、对象的key只能是字符串,Map的key可以是任意数据类型;

2、Map有自己的操作方法:

set是数据重组,map是数据存储

 

default默认值、rest

//不传参数的情况下,type为‘cat‘
function animal(type = ‘cat‘){
    console.log(type)
}
animal()

rest参数(形式为“…变量名”),用于获取函数的多余参数

//es5
function fn(){
    for(var i = 0; i<arguments.length ; i++){
        console.log(arguments[i]);
    }
}
fn(1,2,3);//1,2,3

//es6
function newFn(...args){
    args.filter((obj)=>{console.log(obj)})
}
newFn(1,2,3);//1 2 3

四、模板字符串

用反引号来拼接

`hello ${name}`

 

五、class、extend、super

Class是定义类的方法,es5用构造函数定义类,es6用class,让对象原型的写法更清晰、更面向对象编程的语法、更通俗易懂。

原文:https://www.cnblogs.com/annie211/p/12690346.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!