欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于ES6的常用方法总结

程序员文章站 2022-03-27 09:45:39
...

  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

  a[i]=function(){

  console.log(i);

  };

  }

  a6; //10

  var b=[];

  for(let i=0; i

  a[i]=function(){

  console.log(i);

  }

  }

  a[6](); //6

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

  2.ES6字符串的扩展

  1.字符的Unicode的表示法

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

  现在超出用{}表示,比如console.log("?b9}")

  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()

  ES2021 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。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模式”,用来正确处理大于?的Unicode字符。也就是说,会正确处理四个字节的UTF-16编码。

  2.y

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

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