zoukankan      html  css  js  c++  java
  • [js高手之路] es6系列教程

    第一:字面量对象的方法,支持缩写形式

    1         //es6之前,这么写
    2         var User = {
    3             name : 'ghostwu',
    4             showName : function(){
    5                 return this.name;
    6             }
    7         };
    8         console.log( User.showName() );
    1         //有了es6之后,这么写
    2         let User = {
    3             name : 'ghostwu',
    4             showName (){
    5                 return this.name;
    6             }
    7         };
    8         console.log( User.showName() );

    方法缩写规则: 在原来的基础上去掉 冒号 和 function关键字

    第二:对象中的属性与变量名或者参数 同名的时候, 可以省略赋值的操作

    1         //参数与属性同名
    2         let User = function( name, age ){
    3             return {
    4                 name : name,
    5                 age : age
    6             }
    7         };
    8         let oUser = User( 'ghostwu', 22 );
    9         console.log( oUser.name, oUser.age );

    上面例子中的写法,可以简写为:

    1         let User = function( name, age ){
    2             return {
    3                 name, //省略name的赋值, 会在作用域中查找同名的name变量或者参数
    4                 age //省略age的赋值,会在作用域中查找同名的age变量或者参数
    5             }
    6         };
    7         let oUser = User( 'ghostwu', 22 );
    8         console.log( oUser.name, oUser.age );
    1         let User = function(){
    2             let name = 'ghostwu', age = 26;
    3             return {
    4                 name, //查找到同名变量name,赋值给name属性
    5                 age   //查找到同名变量age,赋值给age属性
    6             }
    7         };
    8         let oUser = User();
    9         console.log( oUser.name, oUser.age );
    1         let User = function(){
    2             let name = 'ghostwu', age2 = 26;
    3             return {
    4                 name,
    5                 age //当没有同名变量或者参数时,省略写法会报错 
    6             }
    7         };
    8         let oUser = User();
    9         console.log( oUser.name, oUser.age );
    1             let User = function( name, age ){//形参相当于var name, var age
    2             let name = 'ghostwu', age = 26;//let不能重定义, 报错
    3             return {
    4                 name,
    5                 age
    6             }
    7         };
    8         let oUser = User( 'zhangsan', 20 );
    9         console.log( oUser.name, oUser.age );

    如果同时出现同名参数和let定义的同名变量时候,会报语法错误,如果不知道为什么,请看下我之前写的博客文章: 

    [js高手之路] es6系列教程 - var, let, const详解

    第三:可计算属性名, 即: 属性名支持表达式参与运算

    1          let User = {};
    2         let lastName = "last Name";
    3 
    4         User['first Name'] = 'ghost';
    5         User[lastName] = 'wu'; //lastName被解释为last name, 从而等价于User['last Name'] = 'wu'
    6         console.log( User['first Name'] , User['last Name'] );
    1         let User = {
    2             "full Name" : "ghostwu",
    3             //  first Name : "ghostwu" //属性名包含空格或者特殊符号要用引号或者转义处理,否则报错
    4         };
    5         console.log( User['full Name'] );
     1         let firstName = 'first name';
     2         let lastName = 'last name';
     3         //属性名如果用中括号括起来,属性名就被解释成了变量
     4         let User = {
     5             [firstName] : 'ghost', 
     6             [lastName] : 'wu',
     7         };
     8 
     9         console.log( User['firstName']); //undefined
    10         console.log( User['lastName']); //undefined
    11         console.log( User['first name']); //ghost
    12         console.log( User['last name']); //wu

    用中括号把属性括起来,属性就变成了变量,变量就可以用操作符组合成表达式,参与运算,所以叫计算表达式

    1         let suffix = ' Name';
    2         let User = {
    3             ['first' + suffix] : 'ghost',
    4             ['last' + suffix] : 'wu',
    5         };
    6         console.log( User['first Name'], User['last Name']);
  • 相关阅读:
    运算符优先级
    Tips—查询某结构体
    在线词典--(一、流程分析)
    数据库—SQLite3
    回调函数(转载)
    UNIX域套接字
    进程间通信小结
    HDU_oj_2027 统计元音
    HDU_oj_2026 首字母变大写
    HDU_oj_2025 查找最大字母
  • 原文地址:https://www.cnblogs.com/ghostwu/p/7294048.html
Copyright © 2011-2022 走看看