首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript 基础(七) 箭头函数 generator Date JSON

JavaScript 基础(七) 箭头函数 generator Date JSON

作者头像
用户1197315
发布2018-01-22 10:16:33
1.4K0
发布2018-01-22 10:16:33
举报
文章被收录于专栏:柠檬先生柠檬先生柠檬先生

ES6 标准新增了一种新的函数: Arrow Function(箭头函数)。     x => x *x     上面的箭头相当于:       function (x){           return x*x;       }

箭头函数相当于匿名函数,并且简化了函数定义。一种像上面的,只包含一个表达式,     连{ ... }和return都省略掉了。还有一种可以包含多条语句,这时候就不能省略{ ... }和return:

  		        x =>{ 
  			          if(x > 0){ 
  				            return x *  x;
  			          }else{ 
  				            return -x *x;
  			          }
  		        }

如果参数不是一个,就需要用括号()括起来:

  	    // 两个参数
  	      (x,y) => x*x + y *y
  	    // 无参数;
  	      () =>3.14
  	    // 可变参数
  	      (x,y,...rest) =>{ 
  		        var i, sum = x +y;
  		        for(i=0;i<rest.length;i++){ 
  			          sum += rest[i];
  		        }
  		      return sum;
  	    }

this 现在,箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj:

 	    var obj = { 
  		        birth:1990,
  		        getAge:function(){ 
  			        var b = this.birth; // 1990
  			        var fn = () => new Date().getFullYear() - this.birth; // this指向obj 对象。
  			        return fn();
  		        }
  	    }
  	    obj.getAge(); // 25

如果使用了箭头函数,以前的那种hack 写法;     var that = this;

就不再需要了。 由于this 在箭头函数中已经按照是否作用域绑定了,所以,用call() 或者apply() 调用箭头函数时,无法对this 进行 绑定,即传入的第一个参数被忽略。

 		    var obj = { 
  			        birth:1990,
  			        getAge:function(year){ 
  				          var b = this.burth; // 1990
  				          var fn = (y) =>y-this.birth; // this.birth 仍是1990
  				          return fn.call({birth:2000},year);
  			      }
  		    };
  		    obj.getAge(2015);  // 25

generator generator(生成器)是ES6标准引入的新型数据类型。一个generator看上去像一个函数,但可以返回多次。

  				    function* foo(x){ 
  					        yield x +1;
  					        yieldx + 2;
  					        return x +3;
  				    }

generator  和函数不同的是,generator由function* 定义(注意多出的*号),并且,除了return 语句,还可以用yield 返回多次。

函数只能返回一次,所以碧玺返回一个Array. 但是,如果换成generator,就可以一次返回一个数,不断返回多次。

	    function* fib(max){ 
		        var t,
			        a = 0,
			        b=1,
			        n=1;
		        while (n < max){ 
			          yield a;
				          t = a +b;
				          a = b;
				          b = t;
				          n++;
		        }
		        return a;	
	      }

直接调用试试:

	    fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}

直接调用一个generator和调用函数不一样,fib(5)仅仅是创建了一个generator对象,还没有去执行它。 调用generator对象有两个方法,一是不断地调用generator对象的next()方法:

	    var f = fib(5);
	    f.next(); // {value: 0, done: false}
	    f.next(); // {value: 1, done: false}
	    f.next(); // {value: 1, done: false}
	    f.next(); // {value: 2, done: false}
	    f.next(); // {value: 3, done: true}

Date 在JavaScript 中,Date 对象用来表示日期和时间的。 要获取系统当前时间,用:

	    var now = new Date();
	    now;  //// Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
	    now.getFullYear();  //2015,年份
	    now.getMonth(); // 5,月份,注意月份范围为0~11,5表示六月
	    now.getDate();// 24 ,表示24 号
	    now.getHours(); // 3,表示星期三
	    now.getMinutes(); // 19 ,24小时制
	    now.getSeconds(); // 22,秒
	    now.getMilliseconds(); //875 毫秒
	    now.getTime(); // 1435146562875, 以number形式表示的时间戳
    如果要创建一个执行日期和时间的Date对象,可以用:
	    var d = new Date(2015,5,19,20,15,30,123);
	    d;// Fri Jun 19 2015 20:15:30 GMT+0800 (CST)

JSON JSON是JavaScript Object Notation的缩写,它是一种数据交换格式。 在JSON中,一共就这么几种数据类型:     1,number: 和JavaScript的 number 完全一致;     2,boolean: 就是JavaScript的 true或 false;     3,String: 就是JavaScript的String ;     4,null: 就是JavaScript的null;     5,array: 就是JavaScript 的Array 表示方式——[];     6,object: 就是JavaScript 的{...} 表示方式。

SON还定死了字符集必须是UTF-8,表示多语言就没有问题了。为了统一解析,JSON的字符串规定必须用双引号"",Object的键也必须用双引号""。

序列化

		    var guagua = {
    			        name: '小明',
    			        age: 14,
    			        gender: true,
    			        height: 1.65,
    			        grade: null,
    			        'middle-school': '\"W3C\" Middle School',
    			        skills: ['JavaScript', 'Java', 'Python', 'Lisp']
		    };
    JSON.stringify(xiaoming); // '{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"

      middle-school":"\"W3C\" Middle School","skills":  ["JavaScript","Java","Python","Lisp"]}'     结果:

	      {
 		         "name": "小明",
  		        "age": 14,
  		        "gender": true,
  		        "height": 1.65,
  		        "grade": null,
  		        "middle-school": "\"W3C\" Middle School",
  		        "skills": [
    			          "JavaScript",
    			          "Java",
    			          "Python",
    			          "Lisp"
 		           ]
	      }

第二个参数用于控制如何筛选对象的键值,如果我们只想输出指定的属性,可以传入Array: JSON.stringify(xiaoming, ['name', 'skills'], ' ');     结果:

	        {
  		          "name": "guagua",
  		          "skills": [
  			                "JavaScript",
   			               "Java",
    			              "Python",
   			               "Lisp"
  		            ]
	          }

还可以传入一个函数,这样对象的每个键值对都会被函数先处理:

	    function convert(key, value) {
    		        if (typeof value === 'string') {
        			          return value.toUpperCase();
   		     }
  			        return value;
	    }
	    JSON.stringify(guagua, convert, '  ');

上面的代码把所有属性值都变成大写:

		    {
  		      "name": "guagua",
  		      "age": 14,
 		       "gender": true,
  		      "height": 1.65,
  		      "grade": null,
  		      "middle-school": "\"W3C\" MIDDLE SCHOOL",
 		       "skills": [
   			           "JAVASCRIPT",
    			          "JAVA",
    			          "PYTHON",
    			          "LISP"
  		        ]
	      }

如果我们还想要精确控制如何序列化小明,可以给xiaoming定义一个toJSON()的方法,直接返回JSON应该序列化的数据:

反序列化 拿到一个JSON格式的字符串,我们直接用JSON.parse() 把它变成一个JavaScript 对象:

	      JSON.parse('[1,2,3,true]'); //[1,2,3,true]
	      JSON.parse('{"name":"瓜瓜","age":14}'); // Object{name:'瓜瓜',age:14}
	      JSON.parse('true'); // true
	      JSON.parse('123.45'):// 123.45

JSON.parse()还可以接收一个函数,用来转换解析出的属性:

	    JSON.parse('{"name":"guagua","age":14}',function(key,value){ 
		      //把number * 2
		    if(key ==='name'){ 
			        return value + '同学'
		    }
		    return value;
	    }) ;  // Object{name: '瓜瓜同学',age: 14}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016-05-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档