函数

定义

// 第一种方式
funcation funA(x, y){return (x + y);}

// 第二种方式
var funB = funcation (x, y){return (x + y);};

若没有 return 默认返回 undefined 

调用

// js函数允许传入任意个参数。执行时只会调用它需要的参数
funA(2, 8, 8);

arguments

js函数内部有一个默认的关键字 arguments,它指向当前函数调用者传入所有的参数。arguments类似于Arrary,却不是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
    }
}
foo(10, 20, 30);

rest 参数

为了更加方便管理传入多余的参数, ES6 引用了 rest数组来接收多余的参数,没有多余的参数,rest.length为 0

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 ]

变量提升

函数在调用时会先扫描函数体内部所定义的所有变量,把所有变量提升到函数体的最前列。只提升变量的申明,不提升变量的赋值。

'use strict';

function foo() {
    var x = 'Hello, ' + y;
    console.log(x);
    var y = 'Bob';
}

foo(); // Hello, undefined

由于js的变量提升特性,我们在定义局部变量时,在函数体内首先把变量全部定义好,稍后在赋值。

function foo() {
    var
        x = 1, // x初始化为1
        y = x + 1, // y初始化为2
        z, i; // z和i为undefined
    // 其他语句:
    for (i=0; i<100; i++) {
        ...
    }
}

变量作用域

  • js中只有一个全局作用域,不在任何函数内申明的变量都在全局作用域中。

  • 第二种函数的定义方式,就是申明一个全局的变量,指向一个函数。

  • 全局作用域中默认有一个 window 对象。全局作用域中的所有变量都自动绑定到 window 中。可通过 window.name 来获取全局变量。alert()就是 window 的一个变量。

  • 任何变量若在当前函数作用域中没有找到,就会向上级作用域寻找,一直到全局作用域都没找到,就会报错ReferenceError

  • 由于不同的JS文件共用一个全局作用域,很容易造成命名冲突。解决方案是:定义一个唯一的全局变量,把自己写的每一变量或者函数都绑定到这个全局变量上:

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

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

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

很多著名的JS库都是这么干的,jQuery,YUI,underscore等等。

解构赋值

ES6 中可以同时对一组变量赋值

从数组中解构赋值
var [x, y, z] = ['hello', 'JavaScript', 'ES6'];

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

从对象中解构赋值

var person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678',
    school: 'No.4 middle school',
    address: {
        city: 'Beijing',
        street: 'No.1 Road',
        zipcode: '100001'
    }
};
var {name, address: {city, zip}} = person;

name; // '小明'
city; // 'Beijing'
zip; // undefined, 因为属性名是zipcode而不是zip

// 注意: address不是变量,而是为了让city和zip获得嵌套的address对象的属性:
address; // Uncaught ReferenceError: address is not defined

解构赋值时,也可以给个缺省值。
解构赋值,大大简化了代码,减少了代码量。

高阶函数

map() 、filter()、 reduce() 、sort()是Array的函数。将Array的元素作为参数带入传入的函数中。

map(funcName) / reduce(funcName)

// map() 将Arr中每一个元素分别代入函数String中,将每个结果组成数组返回。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']
// reduce() 将Arr中前两个元素代入函数中,将每个结果和下一个元素再次代入计算,直到每个元素都被计算后,返回最后结果。

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

sort()

默认把所有类型转成字符类型再按ASCII码排序。下面是大坑

// 看上去正常的结果:
['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft'];

// apple排在了最后:
['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple']

// 无法理解的结果:
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]

自定义排序

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return 1; // 调换顺序
    }
    if (x > y) {
        return -1; // 不调换顺序
    }
    return 0; // 相等
}); // [20, 10, 2, 1]

filter()

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;
});

闭包

返回值为函数的的函数。

箭头函数

function (x) {
    return x * x;
}

相当于x => x * x

generator(生成器)

同Python中的generator用法一样

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容