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

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

posted @ 2017-07-16 14:05  前端兵哥哥  阅读(300)  评论(0编辑  收藏  举报