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

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}

时间： 2024-08-03 19:24:34

JavaScript 基础(七) 箭头函数 generator Date JSON的相关文章

用JavaScript里的箭头函数实现函数式编程

转帖: http://jimliu.net/2015/10/21/real-functional-programming-in-javascript-1/ 箭头函数 其他语言里面一般叫做lambda表达式,其实我个人当然是喜欢这个名字,但是因为ES6的语言规范里就把它管叫箭头函数,自然文中还是会尽量这么说. 箭头函数的基本定义方式是: 123 (参数列表) => { 函数体} 当只有一个参数的时候,可以省略括号,写成 123 参数名 => { 函数体 } 当函数体是一个表达式(而不是段落)的时

JavaScript基础篇(四)— — 函数

一.函数基础 ??1.返回值:如果某个函数没有显式的return返回值,默认它的返回值为undefined ??2.参数:内建变量arguments,能返回函数所接收的所有参数 ???? ??3.预定义(内建)函数 -- isNaN: ????a.检测parseInt / parseFloat调用是否成功. ???? ????b.NaN不存在等值的概念, 也就是说表达式NaN === NaN 返回的是false 二.函数的变量作用域 ??1.变量提升:函数域优先于全局域,所有局部a会覆盖掉所有与

JavaScript基础之全局函数与分支结构

1. ***函数: ***声明提前:在程序正式执行前,提前预读var声明的变量和function声明的函数,集中到**当前作用域**的顶部创建,并且赋值留在原地. 2.全局函数:ES标准中规定的,浏览器厂商已经实现的函数 不需要使用任何对象,就可直接调用 decodeURI() 解码某个编码的 URI. decodeURIComponent() 解码一个编码的 URI 组件. encodeURI() 把字符串编码为 URI. encodeURIComponent() 把字符串编码为 URI 组件

JavaScript基础之定义函数

javascript 字符串 字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法 常见功能: obj.length                           长度   obj.trim()                           移除空白 obj.trimLeft() obj.trimRight) obj.charAt(n)                       

JavaScript基础：定义函数时用var和不用var的区别

首先看两种函数声明: var square1 = function (x){ return x*x; } function square2(x){ return x*x; } 两者看似不同,在大多数使用的时候也并无太大区别,但是第一种使用时有时会报错,如: var r1=square1(x); var r2=square2(x); var square1 = function (x){ return x*x; } function square2(x){ return x*x; } javasc

JavaScript基础学习(六)&mdash;函数

一.函数的定义 1.function语句形式 //1.function语句式 function test1(){ alert("I am test1"); } test1(); 2.函数直接量形式 //2.函数直接量形式 var test2 = function(){ alert("I am test2"); } test2(); 3.通过Function构造函数形式 Function构造函数可以接收任意数量的参数,但最后一个参数始终都被看成函数体.我们不推荐使用,

JavaScript基础——高阶函数（map and reduce）

1 //高阶函数:一个函数可以接受另一个函数作为参数,这种函数称之为高阶函数. 2 /*1*/ 3 function f(x,y,f){ 4 return f(x)+f(y); 5 } 6 var sumAbs=f(-6,4,Math.abs); 7 console.log(sumAbs);//10 8 9 10 11 //map和reduce 12 /*map*/ 13 /*2*/ 14 function pow(x){ 15 return x*x; 16 } 17 var arr=[1,2,

Python基础七（函数）

函数概述 函数:组织好的.可重复使用的.杉树能提高应用的模块性和代码的重复利用性.Python提供了很多的内置函数,比如len()等等,可以自行定义函数. 函数的定义 def 函数名(参数列表):   #函数定义 函数体 函数名() #函数执行 def namePrint(): #函数定义,这是无参数函数 print("我的名字是:发发") name() #执行函数 def func2(a): #定义了一个有形参的函数 print(a) func2("123") #

javascript基础修炼（8）——指向FP世界的箭头函数

一. 箭头函数 箭头函数是ES6语法中加入的新特性,而它也是许多开发者对ES6仅有的了解,每当面试里被问到关于"ES6里添加了哪些新特性?"这种问题的时候,几乎总是会拿箭头函数来应付.箭头函数,=>,没有自己的this , arguments , super , new.target ,"书写简便,没有this"在很长一段时间内涵盖了大多数开发者对于箭头函数的全部认知(当然也包括我自己),如果只是为了简化书写,把=>按照function关键字来解析就好了