ES6部分新增

简单介绍一点es6的新增内容。

ES6

新增变量和声明方式:

  • let
  • const
  • class 类
  • import 引入模块
  • export 暴露接口

let:

不存在变量提升
不允许重复声明
let具有块级作用域:花括号就是作用域
暂时性死区

const:

const保存的固定的内容不是值,而是地址
const的变量,不允许地址被修改

对字符串的新增

str.codePointAt();
String.fromCodePoint(20013);
//字符的拼接:    
console.log(`今天天气"${a+"哈哈哈"}"`);

//重复功能    重复字符串;
 'x'.repeat(3)  //xxx;
 
 //判断字符串中是否存在某个字符串
   var s = 'Hello world!';
   s.startsWith('Hello')   // true       以参数开头
   s.endsWith('!')         // true       以参数结尾
   s.includes('o')         // true       包括参数;
   
for-of 遍历值

对正则的新增

ES6对正则表达式添加了u修饰符,含义为“Unicode模式”,用来正确处理大于\uFFFF的Unicode字符。也就是说,会正确处理四个字节的UTF-16编码。
ES6添加了y修饰符和g类似,不过y 修饰符在下次匹配的时候需要紧跟上次匹配成功之后的结果匹配,而g则是全局匹配;
exec() 方法在匹配全局对象的时候, 多次匹配会在上一次结束的地方继续匹配;
    var str = "123hfgh789hgf";
            // ↑
    var reg = /\d+/g;
    console.log(reg.exec(str));
    reg.lastIndex = 0;
    console.log(reg.exec(str));
    reg.lastIndex = 0;
    console.log(reg.exec(str));
    console.log(reg.exec(str));
    console.log(reg.exec(str));

箭头函数 ()=>{}

类似于无名函数

  • 不允许直接存在,值存在
  • 值存在,赋值式
  • 实参,回调函数
  • 事件处理函数
  • 匿名函数的函数体
    所有函数都可以被new执行,但是,除了箭头函数
    箭头函数没有自己的执行上下文
    需要使用上层函数的执行上下文
    箭头函数会自动绑定外层this
var fn = a=>({a:10,b:20});

  function fn(){
        setTimeout(()=>{
            console.log(this)
        }, 1000);
    }
    var obj = {
        a:10,
        fn:fn
    }
    obj.fn()

缺点:
第一: 箭头函数是不能new的,它的设计初衷就跟构造函数不太一样
第二: 箭头函数如果要返回一个JSON对象,必须用小括号包起来 var test = ()=>({id:3, val=20})
第三: 对代码的可读性伤害太大
总结:
在回调函数的时候,偶尔用用箭头函数,还是不错的 [2,3,9,14,8,29,93,30].sort( (a,b) => a-b );

新增赋值方式 – 解构赋值

数组的解构:按照顺序一一对应,没有对应,为undefined

 var arr = ["hello",3.1415,true];
    var [c,b,a,d,e,f] = arr;
    console.log(a)
    console.log(b)
    console.log(c)
    console.log(d)
    console.log(e)
    console.log(f)

字符的解构:按照顺序一一对应,没有对应,为undefined

   var str = "hi";
    var [a,b,c,d] = str;
    console.log(a)
    console.log(b)
    console.log(c)
    console.log(d)

对象的解构:按照键值一一对应,没有对应,为undefined

    var obj = {
        name:"admin",
        age:18,
        sex:1
    }
    var {sex,age,name,like} = obj;
    console.log(name)
    console.log(age)
    console.log(sex)
    console.log(like)

参数的解构:

      function fn({name,age}){
        // name
        // age
    }
    fn({name:"admin",age:19})
    
function fn(){
	return ["hello","world"]
 }
    var [a,b] = fn();

    var a = 10;
    var b = 20;
    var [b,a] = [a,b];
    console.log(a,b)

新增数据类型 --symbol

标志、标记、标识、记号
做一个状态记号
类似于字符,但是不是字符
拥有字符的特点:具体的值,值类型
自身稳定,不会于任何其他值混淆
语义化
字典量

var s1 = Symbol("a");
console.log(s1);
console.log(typeof s1);

var s1 = Symbol("a");
var s2 = Symbol("a");
 console.log(s1 == s2) //false
console.log(s1 == s1) //true

新增的数据结构–set和map

set:数组和对象的映射或抽象
特点:没有重复值
set集合没有提供下标方式的访问,因此只能使用for-of来遍历。

  var s = new Set(["hello",7,"world",7,"world",7,"world"]);
    console.log(s);
    console.log(typeof s);
    console.log(s[0])
    console.log(s[1])
    console.log(s[2])
    console.log(s.length)
    for(var i of s){
        console.log(i)
    }
    var s = new Set();
    s.add(3)
    s.add(4)
    s.add(5)
    s.add("3")
    console.log(s)
    for(var i of s.keys()){
        console.log(i)
    }
    for(var i of s.values()){
        console.log(i)
    }
    for(var i of s.entries()){
        console.log(i)
    }

map

   var m = new Map();
    m.set("name","admin")
    m.set("age",18)
    console.log(m);//Map(2) {"name" => "admin", "age" => 18}
    console.log(typeof m);//object

    console.log(m.get("name"))//admin
    console.log(m.get("age"))//18

    console.log(m.name)//undefined
    console.log(m.age)//undefined
    
  for(var i of m){
        console.log(i)
    }
    for(var i of m.keys()){
        console.log(i)
    }
    for(var i of m.values()){
        console.log(i)
    }
    for(var i of m.entries()){
        console.log(i)
    }

你可能感兴趣的:(js,es6,javascript,es6)