函数是什么
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
函数的定义方法
- 函数声明
function functionName(parameters) {
执行的代码
}
- 函数表达式
- 命名函数表达式
var test=function abc (){ console.log("Hello!") }- 匿名函数表达式
var test=function (){ console.log("Hello!") }
一般使用匿名函数表达式
函数的参数
- 形参
function sum(a,b){
//var a=
//var b=
return a+b;
}
函数的形参指的是函数的形式参数，它实际上相当于在函数内部定义变量a、b，只不过a、b的值等于函数被调用时候传过来的实际参数的值。
- 实参
sum(12,15)
这里调用函数sum时传入的两个参数成为实参。在sum函数被调用后，a、b的值分别等于12、15。
同样我们可以获得函数的实参列表，在函数中通过输出sum.length可以获取实参长度。
- 形参和实参的一些方法
- 函数有一个内置属性arguments，arguments表现上是一个数组，只具有length这么一个数组属性，里面存放的是传入的实参。可以通过输出arguments来获取传入的形参。
function sum(a) { for(var i=0;i<arguments.length;i++){ console.log(arguments[i]) } } sum(11,21,3) //11,21,3 - 函数也可以获取到自己的形参列表
function sum(a,b,c,d,e,f) { console.log(sum.length) } sum(1,2,3) //6 - JavaScript函数参数是不定个数和类型的，也就是你可以定义5个形参而调用时传入10个实参，也可以定义10个形参而在调用时传入5个实参。我们可以通过arguments和sum.length来比较实参形参长度，也可以基于此实现一种类型于EXCEL求和函数的功能。即将传入的实参全部累加。
function sum() { var result=0; for(var i=0;i<arguments.length;i++){ result+=arguments[i] } console.log(result) } sum(1,2,3,4,5,6,7,8,9) //45
- 函数有一个内置属性arguments，arguments表现上是一个数组，只具有length这么一个数组属性，里面存放的是传入的实参。可以通过输出arguments来获取传入的形参。
函数的返回值
在使用 return 语句时，函数会停止执行，并返回指定的值。
function myFunction(){
var x=5;
return x;
}
整个 JavaScript 并不会停止执行，仅仅是函数。JavaScript 将继续执行代码，从调用函数的地方。
JavaScript预编译
JavaScript是解释型语言，即在执行时解释一行执行一行。但是在解释之前，会先扫描一遍，检查有无语法错误等，然后进行预编译，即在执行之前要经过两步。
正是因为预编译的存在，所以函数具有函数声明整体提升的特性，你可以先执行函数再定义函数，同样变量可以声明提升，即变量的声明可以提升到最高，但赋值可以不可以提升。
总结起来就是：
函数声明定义的函数整体提升，函数表达式定义的函数定义提升，赋值不提升；
变量声明提升，赋值不提升，
我们可以通过一个实际例子说明函数的预编译的过程
function fn(a) {
console.log(a); //ƒ a(){} 第1个
var a=123;
console.log(a); //123 第2个
function a(){}
console.log(a); //123 第3个
var b=function(){}
console.log(b) //ƒ (){} 第4个
function d(){}
console.log(d) //ƒ d(){} 第5个
}
fn(1)
函数预编译的过程是：
预编译(函数执行前)※
1. 创建AO对象（Active Object）（执行期上下文）
2. 查找函数形参及函数内变量声明，形参名及变量名作为AO对象的属性，值为undefined
3. 实参形参相统一，实参值赋给形参
4. 查找函数声明，函数名作为AO对象的属性，值为函数引用
在上面的例子中我们可以这样分析：
1、创建AO对象
AO={
}
2、查找函数形参及函数内变量声明，形参名及变量名作为AO对象的属性，值为undefined
只找形参和变量声明，不找函数声明
AO={
a:undefined,
b:undefined
}
3、实参形参相统一，实参值赋给形参
AO={
a:1,
b:undefined
}
4、查找函数声明，函数名作为AO对象的属性，值为函数引用
AO={
a:function a (){},
b:undefined,
d:function d (){},
}
此时AO对象创建完毕，接下来执行函数，要注意函数是按照语句顺序依次往下执行的：
1、第一个console.log(a)，他所输出的a应该去AO对象中去寻找，为：function a (){},
2、第二个console.log(a)，由于在预编译是a已经被变量声明提升，所以上一句var a=123其实是一个对a进行赋值的过程，即此时AO对象中的a由function a (){}被赋值为123，输出结果为：123
3、第三个console.log(a)，第二个和第三个console.log(a)中间的function a(){}由于在预编译的时候已经被整体提升上去，所以不用考虑，AO对象中的a值不变，所以输出：123
4、第四个console.log(b)，他的上一句var b=function(){}中的var b在预编译的过程中声明已经被提升上去，这句的意思是对AO对象中的b进行赋值，此时AO对象中的b由undefined变为function b(){}，所以这句输出结果为：function b(){}
5、第五个console.log(d) 忽略已经在预编译过程中整体提升的d，即输出AO对象中的d，值为：function d(){}
高阶函数
- map
将一个函数作用在Array的每一个元素上
//把Array的所有数字转为字符串：
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']
console.log(arr);
//Array的所有数字的二次方
var arr=[1,2,3,4,5,6,7,8,9]
var result=arr.map(function (x) {
return x*x;
})
console.log(result); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
- reduce
Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算
//对一个函数求和
var arr=[1,2,3,4,5,6,7,8,9]
var result=arr.reduce(function(x,y){
return x+y
});
console.log(result); //45
//要把[1, 3, 5, 7, 9]变换成整数13579
var arr=[1,3,5,7,9];
var result=arr.reduce(function(x,y){
return x*10+y;
})
console.log(result); //13579
- filter
filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。
和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素
filter()接收的回调函数，可以有多个参数。通常我们仅使用第一个参数element，表示Array的某个元素。
回调函数还可以接收另外两个参数，表示元素的位置和数组本身：element, index, self
//把一个Array中的空字符串删掉
var arr = ['A', ' b ', '1','B', null, undefined, 'C', ' '];
var result = arr.filter(function (s) {
return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
});
console.log(result); // ['A', 'B', 'C']
//利用filter，可以巧妙地去除Array的重复元素：
var r1,arr1 = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
var r2,arr2=[1,2,3,4,5,6,7,8,1,2,3,4,5,6]
r1 = arr1.filter(function (element, index, self) {
return self.indexOf(element) === index; //indexOf()返回某个元素在数组中第一次出现的位置
});
r2 = arr2.filter(function (element, index, self) {
return self.indexOf(element) === index;
});
console.log(r1); // ["apple", "strawberry", "banana", "pear", "orange"]
console.log(r2); // [1, 2, 3, 4, 5, 6, 7, 8]
使用ES6的集合转换方法去重
集合这个数据结构最大的特点就是:集合内部的元素都是唯一的， ES6标准给我们提供了Set集合，利用这个新的数据结构我们可以很容易的实现数组去重var arr=['apple', 'strawberry',null,undefined, 'banana', 'pear', 'apple', 'orange',null,undefined, 'orange', 'strawberry']; function unique(arr){ return Array.from(new Set(arr)); } console.log(unique(arr)) //["apple", "strawberry", null, undefined, "banana", "pear", "orange"]
