zoukankan      html  css  js  c++  java
  • ES6常用语法

    CMAScript2015(ES6)是Javascript最标准的语法式样,是在2015年6月由Ecma国籍组织公布的最新版本,
    现在已经被多个领域和浏览器所广泛采纳和使用

    let和const命令

    1. es6用let命令所在的代码块内有效
    //ES5
    if (true) {
        var i = 1;
    }
    i // 1
    
    //ES6
    if (true) {
        let i = 1;
    }
    i // 变量i未找到
    
    1. const声明一个只读的常量。一旦声明,常量的值就不能改变。
    const data = 10;
    console.log(data);
    //data = 100; //执行错误
    
    const list = [10,20,30];
    console.log(list);
    
    list[0] = 100;
    console.log(list);
    
    //list = [1,2,3]; //错误
    

    变量的解构赋值

     //数组赋值
    let [a, b, c] = [10, 20, 30];
    console.log(a, b, c); //10 20 30
    
    let [x, y, ...other] = [1,2,3,4,5];
    console.log(x, y, other); //1 2 [ 3, 4, 5 ]
    
    //对象赋值
    let {name, age} = { name: 'Koma', age: 20 };
    console.log(name, age);
    
    //字符串的解构赋值
    const [a, b, c, d, e] = 'hello';
    a // "h"
    b // "e"
    c // "l"
    d // "l"
    e // "o"
    
    //函数赋值
    function func1() {
        return [10, 20];
    }
    let [num1, num2] = func1();
    console.log(num1, num2);//10 20
    
    //函数参数名指定
    function func2({x=1, y=2}){
        return x+y;
    }
    console.log(func2({}));           //3
    console.log(func2({x:10}));       //12
    console.log(func2({y:10}));       //11
    console.log(func2({x:10, y:20})); //30
    
    //遍历Map结构
    var map = new Map();
    map.set('first', 'hello');
    map.set('second', 'world');
    
    for (let [key, value] of map) {
      console.log(key + " is " + value);
    }
    
    // first is hello
    // second is world
    

    箭头函数(Arrow Function)

    let list = [10, 20, 30];
    //ES5
    let newlist = list.map(function(value, index){
        return value * value;
    });
    console.log(newlist);//[100, 400, 900]
    
    //ES6
    newlist = list.map((value, index) => {
        return value * value;
    });
    console.log(newlist);//[100, 400, 900]
    
    newlist = list.map(value => {
        return value * value;
    });
    console.log(newlist);//[100, 400, 900]
    

    进制转换

    • 0b:二进制
    • 0o:八进制
    • 0x:十六进制
    console.log(0b11 === 3); //true
    console.log(0o10 === 8); //true
    console.log(0x10 === 16);//true
    
    let num = 10;
    console.log(num.toString(8)); //8进制转换
    console.log(num.toString(2)); //2进制转换
    console.log(num.toString(16));//16进制转换
    console.log(num.toString(5)); //5进制?嘿嘿
    

    嵌入字符串

    • 字符串嵌入方式
    • 字符串模版定义
    let name = "Koma"
    let mystr1 = "你好,${name}!"
    let mystr2 = `你好,${name}!再见。`
    
    console.log(mystr1);
    //你好,${name}!
    console.log(mystr2);
    //你好,Koma!再见。 
    
    function tagged(formats, ...args){
        console.log(formats)
        console.log(args)
    }
    
    tagged`你好,${name}!再见。`
    

    ES6增加了Symbol新的原始类型

    (数据类型除了string,number,boolean,undefined,null,object,第七种为symbol)

    let str1 = String("HeloWorld");
    let str2 = String("HeloWorld");
    console.log(str1 == str2);  //结果:true
    console.log(str1 === str2); //结果:true
    
    let s1 = Symbol("mySymbol");
    let s2 = Symbol("mySymbol");
    console.log(typeof s1);     //结果:symbol
    console.log(s1.toString()); //结果:Symbol(mySymbol)
    console.log(s1 == s2);      //结果:false
    console.log(s1 === s2);     //结果:false
    
    1. 作为常量
    2. 作为属性
    3. 半隐藏属性
    
    作为常量
    const Java = Symbol();
    const Ruby = Symbol();
    const Perl = Symbol();
    const Php  = Symbol();
    const VB   = Symbol();
    
    var lang = Php;
    
    if (lang === Java) {
        console.log('Java的未来在哪里?');
    }
    if (lang === Ruby) {
        console.log('再学个Ruby on Rails吧。');
    }
    //无输出
    
    作为属性
    let s1 = Symbol("mySymbol");
    let s2 = Symbol("mySymbol");
    
    var obj = {};
    obj[s1] = "helo";
    obj[s2] = "world";
    
    console.log(obj);//{Symbol(mySymbol): "helo", Symbol(mySymbol): "world"}
    console.log(obj[s1]);//helo
    console.log(obj[s2]);//world
    
    半隐藏属性
    const MYKEY = Symbol();
    class User {
        constructor(key,name,age){
            this[MYKEY] = key;
            this.name = name;
            this.age = age;
        }
        checkKEY(key){
            return this[MYKEY] === key;
        }
    }
    
    let user = new User(123, 'Curry', 29);
    console.log(user.name, user.age, user[MYKEY]);
    console.log(user.checkKEY(123));   //true
    console.log(user.checkKEY(456));   //false
    console.log(Object.keys(user));    //[ 'name', 'age' ]
    console.log(JSON.stringify(user)); //{"name":"Curry","age":29}
    

    基本对象定义

    let title = "ES6从入门到学会";
    let price = 25;
    let publish = "小马出版社";
    
    let book = {
        title, price, publish,
        toString(){
            console.log(`<<${this.title}>> is ${price}元。`);
        }
    };
    book['lang'] = "简体中文";
    
    console.log(book);//{title: "ES6从入门到学会", price: 25, publish: "小马出版社", toString: ƒ, lang: "简体中文"}
    book.toString();//<<ES6从入门到学会>> is 25元。
    

    类定义class

    class Player {
        constructor(name, sex) {
            this.name = name;
            this.sex = sex;
        }
        show(){
            console.log(`${this.name}的性别是${this.sex}。`);
        }
        static info(){
            console.log("这是一个球员类,您可以使用它建立自己的球员。");
        }
    }
    
    let player = new Player("库里", "男");
    console.log(player.name, player.sex);//库里 男
    player.show();//库里的性别是男。
    
    Player.info();//这是一个球员类,您可以使用它建立自己的球员。
    

    setter/getter的定义

    class Player {
        constructor(name, sex) {
            this.name = name;
            this.sex = sex;
        }
    
        get age(){
            return this._age;
        }
        set age(val){
            this._age = val;
        }
    }
    
    let player = new Player("库里", "男");
    player.age = 28;
    console.log(player);//Player {name: "库里", sex: "男", _age: 28}
    console.log(player.age);//28
    

    循环我的对象

    let list  = [10, 20, 30];
    let mystr = '你好啊';
    let mymap = new Map();
    mymap.set('JS', 'Javascript');
    mymap.set('PL', 'Perl');
    mymap.set('PY', 'Python');
    
    for(let val of list){
    	console.log(val);
    }
    
    for(let val of mystr){
    	console.log(val);
    }
    
    for(let [key,value] of mymap){
    	console.log(key, value);
    }
    
    let it = mymap.values();
    let tmp;
    while(tmp = it.next()){
    	if (tmp.done) break;
    	console.log(tmp.value, tmp.done);
    }
    --------------------------------
    let map0 = new Map()
      .set(1, 'a')
      .set(2, 'b')
      .set(3, 'c');
     //ES5
      map.forEach(function(value, key, map) {
      console.log("Key: %s, Value: %s", key, value);
    });
    
     //ES6
     map0.forEach((value, key, map)=> {
      console.log("Key: %s, Value: %s", key, value);
    });
    
  • 相关阅读:
    spring data jpa @index无法创建索引
    vue form绑定数据后只能显示不能编辑
    vue dialog每次打开会展示上一次数据(转载)
    vue-i18n突然所有的都解析不出来了
    sass计算高度
    动态指定日志路径(logback)
    Springboot配置文件内容加密
    java环境变量修改后不生效
    SOAP和REST
    Git配置别名
  • 原文地址:https://www.cnblogs.com/joe-tang/p/12205613.html
Copyright © 2011-2022 走看看