zoukankan      html  css  js  c++  java
  • ES6简介

    function fn(){
    return 100;
    }
    let name='sui';
    let age=19;
    let sui={
    name,
    age,
    ["pro"+fn()]:"sdfe",
    play(){
    console.log("我会打大鱼")
    }

     };
        console.log(sui.name)
        sui.play();
        console.log(sui["pro100"])
    

    对象字面量的输出方式以及定义好处

    1.对象字面量的输出方式有两种:传统的‘。’,以及数组方式,只不过用数组方式输出时,方括号里面要用引号括起来,如
    
    var box = {
       name:’abc’;
       age:28
    };
    alert(box[‘name’]);
    给对象定义方法,
    
    A:如果用传统定义对象的方式,就需要先定义方法,然后再把这个方法名赋值给对象的一个属性,如果要调用这个方法不加括号,就是返回方法代码;如果要调用这个方法该对象属性后面加上括号,就得到方法的返回值
    
    function objrun(){
           return ‘123’;
    }
    var box = new Object();
    box.name=’abc’;
    box.age = 28;
    box.run = objrun;
    alert(box.run());              //结果为123
    // alert(box.run);              //结果为function objrun(){
                                                                   return ‘123’;
        }
    //如果box.run = objrun();
    //alert(box.run);              //结果为123,如果带上圆括号,就报错啦
    B:用字面量定义,只需要直接在对象的这个属性上,写function就行,这个function上面没有函数名,他是个匿名函数,那怎么调用这个方法呢,用对象的这个属性名,要调用方法,同上就行
    
    如:
    
    var box = {
       name:’abc’,
       age:28,
       run:function(){
                  return ‘123’;
    }
    }
    alert(box.run());
    

    2.对象字面量的定义方式,可以轻松搞定函数大量参数需要一一对应输出的情况。他的对策就是给函数传入一个对象,而这个对象是用字面量的方式定义的,属性和值对应的方式可以一目了然他们的关系,因为函数只是一段代码,必须调用才能执行

    如:
    
    function AA(obj){
          alert(obj.name);
           alert(obj.age);
    }
    var obj = {
          name: 'abc',
          age: 28
    }
    AA(obj);
    

    2.对象字面量的demo

    /**
     * @author zhanghua
     */
    var literal = {
        add: function(){
            alert("add");
        },
        del: function(){
            alert("delete");
        },
        update: function(){
            alert("update");
        },
        name: "zhangsan",
        callLiteral: function(){
            // 对于当前字面量对象的调用,要加this关键字
            this.add();
    }
    };
    

    2.“箭头”(=>)定义函数。

    let name='hello';
        ()=>{
            console.log('name');
        };
    
        (name)=>{
            console.log(name);
        } ;
    
        let d= name=>{
            console.log(name);
        };
    
        (name,age)=>{
            console.log(name,age);
    
        };
    
        let c=(a,b)=>a+b;
    
        (a,b)=>{
            console.log(a+b);
        }
           console.log(c(1,2));
    
           
     ar f = v => v;
    上面的箭头函数等同于:
    
    var f = function(v) {
      return v;
    };
    

    如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。


    由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。

    箭头函数可以与变量解构结合使用。
    dom2
      function foo() {
      fom( => {
        console.log('args:', fom);
      }, 100);
    }
    
    foo(2, 4, 6, 8)
    // args: [2, 4, 6, 8]
    上面代码中,箭头函数内部的变量fom,函数foo的arfom变量;
    

    参数默认值

       function sayHello(name){
        //传统的指定默认参数的方式
        var name=name||'dude';
        console.log('Hello '+name);
    }
    //运用ES6的默认参数
    function sayHello2(name='dude'){
        console.log(`Hello ${name}`);
    }
    sayHello();//输出:Hello dude
    sayHello('Wayou');//输出:Hello Wayou
    sayHello2();//输出:Hello dude
    sayHello2('Wayou');//输出:Hello Wayou
    

    不定参数

    //将所有参数相加的函数
    function add(...x){
        return x.reduce((m,n)=>m+n);
    }
    //传递任意个数的参数
    console.log(add(1,2,3));//输出:6
    console.log(add(1,2,3,4,5));//输出:15
    

    拓展参数

    var people=['Wayou','John','Sherlock'];
    //sayHello函数本来接收三个单独的参数人妖,人二和人三
    function sayHello(people1,people2,people3){
        console.log(`Hello ${people1},${people2},${people3}`);
    }
    

    //但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数
    sayHello(...people);//输出:Hello Wayou,John,Sherlock


    //而在以前,如果需要传递数组当参数,我们需要使用函数的apply方法
    sayHello.apply(null,people);//输出:Hello Wayou,John,Sherlock


    Symbol


    let a=1;
    let b=1;
    console.log(a==b); //结果:true
    
    let x=Symbol('this is x');
    
    console.log(typeof x);   //结果:symbol
    let y=Symbol('y');
    console.log(x==y);   //结果: false
    
    
    //这里 Synbol 前面不能使用 new 操作符。
    
    //防止对象的属性被篡改
    
    
    
     let sz={name:'曹伟',age:19,[Symbol('xh')]:'007'};
            sz['name']='caowei123';
        sz[Symbol('xh')]='009';
    
    console.log(sz);   //结果:Objectage: 19name: "caowei123"Symbol(xh): "007"Symbol(xh): "009"__proto__: Object
    
    console.log(sz.name);              //结果:caowei123
    

    关于数据类型可以参阅javascript引用类型和基本类型详解一章节,

    let sVal = Symbol();
    console.log(typeof sVal)
    

    上面的代码的输出值是'symbol';

    使用Symbol()函数可以创建一个symbol类型值。

    前面不能使用new,否则会报错;因为Symbol是一种值类型数据,这也是很好理解的.Symbol()用作Symbol值的描述,也可以理解为键(key),代码实例如下:

    let s1 = Symbol('20');
    let s2 = Symbol("2015");
    

    通过键就可以比较方便的区分两个Symbol值。
    键相同的两个Symbol值并不相同:

    let s1 = Symbol("男");
    let s2 = Symbol("汉");
    console.log(s1 == s2);
    

    上面两个Symbol值是不相等的。
    Symbol值不能够被隐式转换为字符串类型,代码实例如下:

    let s = Symbol("未婚");
    //报错
    `antzone ${sym}`
    //报错
    "antzone" + sym
    

    介绍了一小部分敬亲期待下一部

  • 相关阅读:
    Phone-reset
    解决ie8下h5元素兼容性的问题
    PC css_reset
    centos7 nginx@1.16.1
    centos 7
    IE兼容css3的圆角和阴影和渐变
    前端开发安全编码规范
    防抖和节流封装模块
    vue的简单实现
    vue中$forceUpdate的使用
  • 原文地址:https://www.cnblogs.com/GJcaowei/p/7190416.html
Copyright © 2011-2022 走看看