浅析JavaScript 箭头函数 generator Date JSON

  • 2022-07-21 18:49:20

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}

以上这篇浅析javascript 箭头函数 generator date json就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

猜你喜欢