您现在的位置:首页 >> 前端 >> 内容

关于ES6的常用方法总结

时间:2018/2/1 14:22:23 点击:

  核心提示:1.新增的变量命名1.不存在变量提升2.暂时性死区var a = 40;if(true){a = 30;let a = 10;console.log(a)}3.不允许重复声明,同一作用域内只能声明一次...

1.新增的变量命名 

1.不存在变量提升 

2.暂时性死区 

var a = 40; 

if(true){ 

a = 30; 

let a = 10; 

console.log(a) 

3.不允许重复声明,同一作用域内只能声明一次 

4.新增的块级作用域 

for(作用域A){作用域B} 循环的应用; 

var a = []; 

for(var i= 0;i<10;i++){ 

a[i] = function(){ 

console.log(i); 

}; 

a6; //10

   var b = [];

   for(let i = 0; i<10;i++){

       a[i] = function(){

           console.log(i);

       }

   }

   a[6]();  //6

const关键字用来声明常量,其使用规则除了声明之后不能修改之外,其他特性和let一样

2.ES6字符串的扩展

1.字符的Unicode的表示法

      以前是\u + 四位十六进制,超出范围双字节表示,即两组16进制比如console.log("\uoo61")

      现在超出用{}表示,比如console.log("\u{20bb9}")

                              codePointAt() 解码   字变十六字符

                              String.fromCodePoint()编码   十六进制变字

2.新增字符串的遍历器接口

      for....of  遍历

          var arr = ["a","b","v","r"];

          for(var i of arr){

          console.log(i);   

       }

     for(var i in arr){

          console.log(i);

       }

    3.repeat()重复功能

           'x'.repeat(3)  //xxx;

            重复字符串;

    4.   indexOf()补充includes() startsWith() endsWith() 判断字符串中是否存在某个字符串:

        var s = 'Hello world!';

            s.startsWith('Hello')   // true       以参数开头

            s.endsWith('!')         // true       以参数结尾

            s.includes('o')         // true       包括参数;

    5.字符串模版扩展:  ` `  ${name}

    6.padStart(),padEnd()

              ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。

3.解构赋值 

let [a, b, c] = [1, 2, 3]; 

//等同于 

let a = 1; 

let b = 2; 

let c = 3;

对象的解构赋值:获取对象的多个属性并且使用一条语句将它们赋给多个变量。 

var { 

StyleSheet, 

Text, 

View 

} = React; 

等同于

var StyleSheet = React.StyleSheet 

4.箭头函数: 箭头函数还修复了this的指向,使其永远指向词法作用域 

当函数后面直接传参运算时可以不要{}花括号,当有return时就要加花括号 

var num = (a)=>a+10; 

console.log(num(10));

   ()=>{

       return

   }

var sum = (num1, num2) => { return num1 + num2; } 

//等同于 

var sum = function(num1, num2) { 

return num1 + num2; 

}; 

document.onclick = function(){ 

var that = this; 

setTimeout(function(){ 

console.log(that); 

},1000) 

document.onclick = function(){ 

setTimeout(function(){ 

console.log(this); 

}.bind(document),1000) 

document.onclick = function(){ 

setTimeout(function(){ 

console.log(this); 

}.bind(this),1000) 

document.onclick = function(){ 

setTimeout(()=>{ 

console.log(this); 

},1000) 

}

5.Symbol 字典量 

var a = Symbol(); 

ES5 的对象属性名都是字符串,这容易造成属性名的冲突。 

比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。

6. 

/* set (去重)和 map(后端交互) :数组和对象的映射又不是数组和对象,set本质上属于map 

* 长的跟数组一样却不能用操作数组的额方式操作它 

*/ 

1.两种赋值方式 

var myset = new Set([1,2,3,4,5,”a”,”b”]); 

console.log(myset); 

/myset.add方法赋值,必须要new 出来操作/ 

2.利用add()方法赋值 

var myset = new Set(); 

myset.add(1); 

myset.add(2); 

myset.add(3); 

console.log(myset); 

//怎么取值了

    for(let a of myset){

       console.log(a);

    }

    /*一个神奇的特性 不允许自己的数据重复 但是看数据类型 不相同要求全等于*/

      /*我们用神奇的特性来数组去重*/

数组去重封装:

function arrHeavy(arr){

      var newArr = [];

 for(let a of arr){

      newArr.push(a);

   }

      return(newArr);

arrHeavy(arr);

set: 

/火狐单箭头 ,谷歌等于加大于号 所对应的是后台语言里面的数组/ 

/用来跟后头语言做通信/ 

赋值1.运用set()方法 

var mymap = new Map(); 

mymap.set(“name”,”admin”); //{“” => “admin”} 不加引号为空 

mymap.set(“name”,”admin2”); 

mymap.set(“age”,30); 

/**/ 

for(let a of mymap){ 

console.log(a) //得到一个数组a[0] 所有的key a[1]所有有的evalue 

/遍历所有的key/ 

for(var a of myset.keys()){ 

console.log(a) 

/所有的value/ 

for(var a of myset.values()){ 

console.log(a) 

/遍历自身 entries/ 

for(var a of myset.entries()){ 

console.log(a) 

/map所有的遍历方法,set都能用,set中所有的值既是key又是value set用entries遍历的结果和map一样 数组键值都一样/

7.了解class的写法和继承

了解:正则的扩展 

1.u 

ES6对正则表达式添加了u修饰符,含义为“Unicode模式”,用来正确处理大于\uFFFF的Unicode字符。也就是说,会正确处理四个字节的UTF-16编码。 

2.y 

ES6添加了y修饰符和g类似,不过y 修饰符在下次匹配的时候需要紧跟上次匹配成功之后的结果匹配,而g则是全局匹配; 

exec() 方法在匹配全局对象的时候, 多次匹配会在上一次结束的地方继续匹配;

Tags:关于 于E ES S6 
作者:网络 来源:蔣金澤