学习JavaScript（二）

函数

函数定义与调用

函数定义使用 function 关键字，后跟函数名字，形参列表（参数间用逗号分隔），函数体用花括号括起来，返回用 return 。

调用函数时使用函数名，然后传入参数即可。传递的参数比需要的参数多时，后面的参数会被忽略；少的时候，没有传入值的参数会被视为 undefined 。

我们还可以定义匿名函数，如果定义时将匿名函数传给一个变量，那这个变量就成为了函数名。

arguments

在函数体内部，可以使用 arguments 获取传入的所有参数，也就是说，即使函数不定义任何参数，还是可以拿到参数的值。这个对象可以使用类似 Array 的方式来操作，例如：

function foo(x) {
    console.log('x = ' + x); // 10
    for (var i=0; i<arguments.length; i++) {
        console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30
    }
}

rest 参数

ES6引入了 rest 参数，来接受我们参数列表中定义的其他参数，rest参数只能写在最后，前面用 ... 标识例如：

function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

变量作用域与解构赋值

在函数体内用 var 生命的变量只能在函数体内使用；由于JavaScript的函数可以嵌套，此时， 内部函数可以访问外部函数定义的变量 ，反过来则不行；如果内部函数定义了与外部函数重名的变量，则 内部函数的变量将“屏蔽”外部函数的变量 。

JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把 所有声明的变量“提升”到函数顶部 。因此我们的变量声明不论在前面还是在后面，都会自动提升到函数最前面。

不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象window，全局作用域的变量实际上被绑定到window的一个属性。

名字空间

不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如：

// 唯一的全局变量MYAPP:
var MYAPP = {};

// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其他函数:
MYAPP.foo = function () {
    return 'foo';
};

局部作用域与 let

我们在 for 等循环里使用 var 定义的变量到了循环体以外还是可以被使用的，为了解决作用域问题，ES6 引入了 let ，例如：

function foo() {
    var sum = 0;
    for (let i=0; i<100; i++) {
        sum += i;
    }
    // SyntaxError:
    i += 1;
}

常量

在ES6之前，没有定义常量的关键字，我们只有用全部大写的变量名来认为规定这是一个常量。ES6 引入了 const 关键字来定义常量。例如：

var PI = 3.14    // 老方法
const PI = 3.14  // ES6 新方法

解构赋值

从ES6开始，JavaScript引入了解构赋值，可以同时对一组变量进行赋值，即对数组进行解构，把其中的元素赋值给多个变量，例如：

let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];
x; // 'hello'
y; // 'JavaScript'
z; // 'ES6'

let [, , z] = ['hello', 'JavaScript', 'ES6']; // 忽略前两个元素，只对z赋值第三个元素
z; // 'ES6'

我们还可以对一个对象进行解构赋值，同样可以直接对嵌套的对象属性进行赋值，只要保证对应的层次是一致的，例如：

'use strict';

var person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678',
    school: 'No.4 middle school'
};
var {name, age, passport} = person;

我们还可以对取出来的对象进行重命名，例如：

var a = {domain: "www.fcouperin.com", corporation: "F.Couperin"}
var {domain:host, corporation:company} = a

方法

在一个对象中绑定函数，称为这个对象的方法。例如：

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};
xiaoming.age()

JavaScript 的大坑是调用的时候都需要通过 this ，但 this 的指向经常是不明确的，这时候，我们最好使用 apply 或者 call ，这两个函数接受的第一个参数都是要绑定的 this 变量，不同的是 apply 的第二个参数是一个数组，表示要传入的参数，而 call 则是把参数逐个传入，例如：

function getFullName(title='', nachname='') {
    return title + nachname + this.vorname
}

var xiaoming = {
    vorname: '小明',
    birth: 1990,
    fullname: getFullName
};

getFullName.apply(xiaoming, ['Mr.', '王'])
getFullName.call(xiaoming, 'Mr.', '王')       // Mr.王小明

把函数作为参数传入

JavaScript 支持把函数作为参数传入其他函数，例如：

'use strict';

function add(x, y, f) {
    return f(x) + f(y);
}
var x = add(-5, 6, Math.abs);   // 11

Map 和 Reduce

map 和 reduce 函数都接收函数作为其参数，然后将这个函数作用到一个数组的元素中，其中 map 是把函数应用到逐个元素中去，例如：

function f(x) {
    return x*x;
}
[1, 2, 3, 4].map(f)   // [1, 4, 9, 16]

reduce 则需要传入一个两个参数的函数，它会从数据中取出头两个元素，执行该函数，再将结果与第三个元素继续执行该函数，如此类推，例如：

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25

filter 与回调函数

filter 接收一个返回布尔值的函数，对数组的每个元素执行该函数，返回 true 的保留，否则丢弃。结果会形成一个新的数组，例如：

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
    return x % 2 !== 0;
});
r; // [1, 5, 9, 15]

filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身，例如：

var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
    console.log(element); // 依次打印'A', 'B', 'C'
    console.log(index); // 依次打印0, 1, 2
    console.log(self); // self就是变量arr
    return true;
});

sort 函数

JavaScript 默认的 sort 函数是把数据转为字符串类型进行排序，它可以接受一个排序函数，该函数有两个参数，如果第一个参数应该比第二个排在前面，则返回-1；排在后面则返回1；相等则返回0。例如：

var arr = ['Google', 'apple', 'Microsoft'];
arr.sort(function (s1, s2) {
    x1 = s1.toUpperCase();
    x2 = s2.toUpperCase();
    if (x1 < x2) {
        return -1;
    }
    if (x1 > x2) {
        return 1;
    }
    return 0;
});     // ['apple', 'Google', 'Microsoft']

其他一些数据的函数

数组还可以使用 every、find、findIndex、forEach 等函数，接收不同的函数来进行处理。

闭包

JavaScript 的可以嵌套定义，返回函数的时候，相关参数和变量都放在函数中，这称为闭包(Closure)。例如：

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1();    // 16
f2();    // 16
f3();    // 16

在闭包中，变量和参数的值得以了保存，这里引用了变量 i ，但它并非立刻执行。等到3个函数都返回时，它们所引用的变量 i 已经变成了4，因此最终结果全部为16！

请牢记！ 返回函数不要引用任何循环变量，或者后续会发生变化的变量。

我们还可以借助闭包来封装一个私有变量，例如：

'use strict';

function create_counter(initial) {
    var x = initial || 0;
    return {
        inc: function () {
            x += 1;
            return x;
        }
    }
}

var c1 = create_counter();
c1.inc(); // 1
c1.inc(); // 2

这样的话外部程序无法访问到变量 x 。

箭头函数

ES6 引入了箭头函数来方便的定义匿名函数，如果只有一行代码，甚至可以省略 {...} 和 return，例如：

var fn = x => x * x;

如果参数不止一个，就需要用括号括起来。

(x, y) => x * x + y * y

(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

箭头函数修正了 this 的作用域问题，已经正确处理为了词法作用域，例如：

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

generator 生成器

generator（生成器）是ES6标准引入的新的数据类型，类似 Python 的生成器。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,362评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,330评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,247评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,560评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,580评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,569评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,929评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,587评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,840评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,366评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,945评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2赞 342