定义
// 第一种方式
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用法一样