JavaScript个人学习笔记总结 - 函数

最新推荐文章于 2024-07-26 20:46:33 发布

改变世界的李

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量639

点赞数 7

分类专栏： JavaScript 文章标签： js javascript java 后端

本文链接：https://blog.csdn.net/weixin_50594210/article/details/115113081

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述

内容	网址
JavaScript个人学习笔记总结 - 快速入门	https://blog.csdn.net/weixin_50594210/article/details/115112096
JavaScript个人学习笔记总结 - 函数	https://blog.csdn.net/weixin_50594210/article/details/115113081
JavaScript个人学习笔记总结 - 标准对象	https://blog.csdn.net/weixin_50594210/article/details/115112683
JavaScript个人学习笔记总结 - 面向对象编程	https://blog.csdn.net/weixin_50594210/article/details/115113024
JavaScript个人学习笔记总结 - 浏览器	https://blog.csdn.net/weixin_50594210/article/details/115113131
JavaScript个人学习笔记总结 - jQuery	https://blog.csdn.net/weixin_50594210/article/details/115113299
JavaScript个人学习笔记总结 - 错误处理	https://blog.csdn.net/weixin_50594210/article/details/115113442
JavaScript个人学习笔记总结 - underscore	https://blog.csdn.net/weixin_50594210/article/details/115113498

文章目录

函数

函数

函数类似于 java 中的方法，可以将一些代码进行抽取，达到复用的效果

1、函数定义和调用

定义格式

<script>
  function 方法名(参数列表) { 
  		方法体; 
  		return 返回值;
  	 }
</script>

可变参数

<script>
	function 方法名(…参数名) {
 			方法体; 
			 return 返回值; 
 		}
</script>

匿名函数

<script>
	function(参数列表) { 
			方法体; 
		}
</script>

例如：

<script>
    //无参数无返回值
    function f1(){
        document.write("无参数无返回值" + "<br/>");
    }
    f1();
    document.write("==========="+"<br/>");
    //有参数有返回值
    function f2(a1,a2){
        return a1+a2;
    }
    let b = f2(1,2);
    document.write(b+"<br/>");
    document.write("==========="+"<br/>");
    //可变参数
    function f3(...a3){
        let sum = 0;
        for(let i = 0; i<a3.length;i++){
            sum+=a3[i];
        }
        return sum;
    }
    document.write(f3(1,2,3)+"<br/>");
    document.write(f3(1,2,3,4)+"<br/>");
    document.write("==========="+"<br/>");
    //匿名函数
    let a4 = function (){
        document.write("匿名函数");
    }
    document.write(typeof(a4)+"<br/>");
    a4();
</script>

调用函数

调用函数时，按顺序传入参数即可：

<script>
	方法名(参数列表)
</script>

传入的参数比定义的少也没有问题，返回NaN。

JavaScript还有一个免费赠送的关键字arguments，它只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array：

<script>
	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);
</script>

利用arguments，你可以获得调用者传入的所有参数。也就是说，即使函数不定义任何参数，还是可以拿到参数的值：

<script>
	function abs() {
    if (arguments.length === 0) {
        return 0;
    }
    var x = arguments[0];
    return x >= 0 ? x : -x;
}

abs(); // 0
abs(10); // 10
abs(-9); // 9
</script>

实际上arguments最常用于判断传入参数的个数。你可能会看到这样的写法：

<script>
	// foo(a[, b], c)
	// 接收2~3个参数，b是可选参数，如果只传2个参数，b默认为null：
	function foo(a, b, c) {
    	if (arguments.length === 2) {
	        // 实际拿到的参数是a和b，c为undefined
        	c = b; // 把b赋给c
        	b = null; // b变为默认值
    	}
    	// ...
	}
</script>

要把中间的参数b变为“可选”参数，就只能通过arguments判断，然后重新调整参数并赋值。

rest参数

<script>
	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 []
</script>

rest参数只能写在最后，前面用…标识，从运行结果可知，传入的参数先绑定a、b，多余的参数以数组形式交给变量rest，所以，不再需要arguments我们就获取了全部参数。

跳出return坑

如果把return语句拆成两行：

<script>
	function foo() {
    	return
        	{ name: 'foo' };
	}
	foo(); // undefined
</script>

要小心了，由于JavaScript引擎在行末自动添加分号的机制，上面的代码实际上变成了：

<script>
	function foo() {
    	return; // 自动添加了分号，相当于return undefined;
        	{ name: 'foo' }; // 这行语句已经没法执行到了
	}
</script>

所以正确的多行写法是：

<script>
	function foo() {
    	return { // 这里不会自动加分号，因为{表示语句尚未结束
        	name: 'foo'
    	};
	}
</script>

2、变量作用域与解构赋值

在JavaScript中，用var申明的变量实际上是有作用域的。

如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量：

<script>
	'use strict';

	function foo() {
    	var x = 1;
    	x = x + 1;
	}

	x = x + 2; // ReferenceError! 无法在函数体外引用变量x
</script>

如果两个不同的函数各自申明了同一个变量，那么该变量只在各自的函数体内起作用。换句话说，不同函数内部的同名变量互相独立，互不影响：

<script>
	'use strict';

	function foo() {
    	var x = 1;
    	x = x + 1;
	}

	function bar() {
    	var x = 'A';
    	x = x + 'B';
	}
</script>

由于JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行：

<script>
	'use strict';

	function foo() {
    	var x = 1;
    	function bar() {
        	var y = x + 1; // bar可以访问foo的变量x!
    	}
    	var z = y + 1; // ReferenceError! foo不可以访问bar的变量y!
	}
</script>

变量提升

JavaScript的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部：

<script>
	'use strict';

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

	foo();
</script>

虽然是strict模式，但语句var x = 'Hello, ' + y;并不报错，原因是变量y在稍后申明了。但是console.log显示Hello, undefined，说明变量y的值为undefined。这正是因为JavaScript引擎自动提升了变量y的声明，但不会提升变量y的赋值。

对于上述foo()函数，JavaScript引擎看到的代码相当于：

<script>
	function foo() {
    	var y; // 提升变量y的申明，此时y为undefined
    	var x = 'Hello, ' + y;
    	console.log(x);
    	y = 'Bob';
	}
</script>

由于JavaScript的这一怪异的“特性”，我们在函数内部定义变量时，请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量：

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

全局作用域

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

<script>
	'use strict';

	var course = 'Learn JavaScript';
	alert(course); // 'Learn JavaScript'
	alert(window.course); // 'Learn JavaScript'
</script>

因此，直接访问全局变量course和访问window.course是完全一样的。

你可能猜到了，由于函数定义有两种方式，以变量方式var foo = function () {}定义的函数实际上也是一个全局变量，因此，顶层函数的定义也被视为一个全局变量，并绑定到window对象：

<script>
	'use strict';

	function foo() {
   	 	alert('foo');
	}

	foo(); // 直接调用foo()
	window.foo(); // 通过window.foo()调用
</script>

名字空间

全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。

减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如：

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

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

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

把自己的代码全部放入唯一的名字空间MYAPP中，会大大减少全局变量冲突的可能。

许多著名的JavaScript库都是这么干的：jQuery，YUI，underscore等等。

局部作用域

由于JavaScript的变量作用域实际上是函数内部，我们在for循环等语句块中是无法定义具有局部作用域的变量的：

<script>
	'use strict';

	function foo() {
    	for (var i=0; i<100; i++) {
        	//
    	}
    	i += 100; // 仍然可以引用变量i
	}
</script>

为了解决块级作用域，ES6引入了新的关键字let，用let替代var可以申明一个块级作用域的变量：

<script>
	'use strict';

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

常量

由于var和let申明的是变量，如果要申明一个常量，在ES6之前是不行的，我们通常用全部大写的变量来表示“这是一个常量，不要修改它的值”：

<script>
	var PI = 3.14;
</script>

ES6标准引入了新的关键字const来定义常量，const与let都具有块级作用域：

<script>
	'use strict';

	const PI = 3.14;
	PI = 3; // 某些浏览器不报错，但是无效果！
	PI; // 3.14
</script>

解构赋值

从ES6开始，JavaScript引入了解构赋值，可以同时对一组变量进行赋值。

什么是解构赋值？我们先看看传统的做法，如何把一个数组的元素分别赋值给几个变量：

<script>
	var array = ['hello', 'JavaScript', 'ES6'];
	var x = array[0];
	var y = array[1];
	var z = array[2];
</script>

注意，对数组元素进行解构赋值时，多个变量要用[...]括起来。

如果数组本身还有嵌套，也可以通过下面的形式进行解构赋值，注意嵌套层次和位置要保持一致：

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

解构赋值还可以忽略某些元素：

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

如果需要从一个对象中取出若干属性，也可以使用解构赋值，便于快速获取对象的指定属性：

<script>
	'use strict';

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

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

<script>
	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
</script>

使用解构赋值对对象属性进行赋值时，如果对应的属性不存在，变量将被赋值为undefined，这和引用一个不存在的属性获得undefined是一致的。如果要使用的变量名和属性名不一致，可以用下面的语法获取：

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

	// 把passport属性赋值给变量id:
	let {name, passport:id} = person;
	name; // '小明'
	id; // 'G-12345678'
	// 注意: passport不是变量，而是为了让变量id获得passport属性:
	passport; // Uncaught ReferenceError: passport is not defined
</script>

解构赋值还可以使用默认值，这样就避免了不存在的属性返回undefined的问题：

<script>
	var person = {
   		name: '小明',
    	age: 20,
    	gender: 'male',
    	passport: 'G-12345678'
	};

	// 如果person对象没有single属性，默认赋值为true:
	var {name, single=true} = person;
	name; // '小明'
	single; // true
</script>

有些时候，如果变量已经被声明了，再次赋值的时候，正确的写法也会报语法错误：

<script>
	// 声明变量:
	var x, y;
	// 解构赋值:
	{x, y} = { name: '小明', x: 100, y: 200};
	// 语法错误: Uncaught SyntaxError: Unexpected token =
</script>

这是因为JavaScript引擎把{开头的语句当作了块处理，于是=不再合法。解决方法是用小括号括起来：

<script>
	({x, y} = { name: '小明', x: 100, y: 200});
</script>

使用场景

解构赋值在很多时候可以大大简化代码。例如，交换两个变量x和y的值，可以这么写，不再需要临时变量：

<script>
	var x=1, y=2;
	[x, y] = [y, x]
</script>

快速获取当前页面的域名和路径：

<script>
	var {hostname:domain, pathname:path} = location;
</script>

如果一个函数接收一个对象作为参数，那么，可以使用解构直接把对象的属性绑定到变量中。例如，下面的函数可以快速创建一个Date对象：

<script>
	function buildDate({year, month, day, hour=0, minute=0, second=0}) {
    	return new Date(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second);
	}
</script>

它的方便之处在于传入的对象只需要year、month和day这三个属性：

<script>
	buildDate({ year: 2017, month: 1, day: 1 });
	// Sun Jan 01 2017 00:00:00 GMT+0800 (CST)
</script>

也可以传入hour、minute和second属性：

<script>
	buildDate({ year: 2017, month: 1, day: 1, hour: 20, minute: 15 });
	// Sun Jan 01 2017 20:15:00 GMT+0800 (CST)
</script>

使用解构赋值可以减少代码量，但是，需要在支持ES6解构赋值特性的现代浏览器中才能正常运行。目前支持解构赋值的浏览器包括Chrome，Firefox，Edge等。

3、方法

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

在JavaScript中，对象的定义是这样的：

<script>
	var xiaoming = {
    	name: '小明',
    	birth: 1990
	};
</script>

但是，如果我们给xiaoming绑定一个函数，就可以做更多的事情。比如，写个age()方法，返回xiaoming的年龄：

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

	xiaoming.age; // function xiaoming.age()
	xiaoming.age(); // 今年调用是25,明年调用就变成26了
</script>

绑定到对象上的函数称为方法，和普通函数也没啥区别，但是它在内部使用了一个this关键字，这个东东是什么？

在一个方法内部，this是一个特殊变量，它始终指向当前对象，也就是xiaoming这个变量。所以，this.birth可以拿到xiaoming的birth属性。

拆开看看：

<script>
	function getAge() {
    	var y = new Date().getFullYear();
    	return y - this.birth;
	}

	var xiaoming = {
    	name: '小明',
    	birth: 1990,
    	age: getAge
	};

	xiaoming.age(); // 25, 正常结果
	getAge(); // NaN
</script>

单独调用函数getAge()怎么返回了NaN？请注意，我们已经进入到了JavaScript的一个大坑里。

JavaScript的函数内部如果调用了this，那么这个this到底指向谁？

答案是，视情况而定！

如果以对象的方法形式调用，比如xiaoming.age()，该函数的this指向被调用的对象，也就是xiaoming，这是符合我们预期的。

如果单独调用函数，比如getAge()，此时，该函数的this指向全局对象，也就是window。

如果这么写：

<script>
	var fn = xiaoming.age; // 先拿到xiaoming的age函数
	fn(); // NaN
</script>

也是不行的！要保证this指向正确，必须用obj.xxx()的形式调用！

由于这是一个巨大的设计错误，要想纠正可没那么简单。ECMA决定，在strict模式下让函数的this指向undefined，因此，在strict模式下，你会得到一个错误：

<script>
	'use strict';

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

	var fn = xiaoming.age;
	fn(); // Uncaught TypeError: Cannot read property 'birth' of undefined
</script>

这个决定只是让错误及时暴露出来，并没有解决this应该指向的正确位置。

有些时候，喜欢重构的你把方法重构了一下：

<script>
	'use strict';

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

	xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined
</script>

结果又报错了！原因是this指针只在age方法的函数内指向xiaoming，在函数内部定义的函数，this又指向undefined了！（在非strict模式下，它重新指向全局对象window！）

修复的办法也不是没有，我们用一个that变量首先捕获this：

<script>
	'use strict';

	var xiaoming = {
    	name: '小明',
    	birth: 1990,
    	age: function () {
        	var that = this; // 在方法内部一开始就捕获this
        	function getAgeFromBirth() {
            	var y = new Date().getFullYear();
            	return y - that.birth; // 用that而不是this
        	}
        	return getAgeFromBirth();
    	}
	};

	xiaoming.age(); // 25
	</script>

用var that = this;，你就可以放心地在方法内部定义其他函数，而不是把所有语句都堆到一个方法中。

apply

虽然在一个独立的函数调用中，根据是否是strict模式，this指向undefined或window，不过，我们还是可以控制this的指向的！

要指定函数的this指向哪个对象，可以用函数本身的apply方法，它接收两个参数，第一个参数就是需要绑定的this变量，第二个参数是Array，表示函数本身的参数。

用apply修复getAge()调用：

<script>
	function getAge() {
    	var y = new Date().getFullYear();
    	return y - this.birth;
	}

	var xiaoming = {
    	name: '小明',
    	birth: 1990,
    	age: getAge
	};

	xiaoming.age(); // 25
	getAge.apply(xiaoming, []); // 25, this指向xiaoming, 参数为空
</script>

另一个与apply()类似的方法是call()，唯一区别是：

apply()把参数打包成Array再传入；

call()把参数按顺序传入。

比如调用Math.max(3, 5, 4)，分别用apply()和call()实现如下：

<script>
	Math.max.apply(null, [3, 5, 4]); // 5
	Math.max.call(null, 3, 5, 4); // 5
</script>

对普通函数调用，我们通常把this绑定为null。

装饰器

利用apply()，我们还可以动态改变函数的行为。

JavaScript的所有对象都是动态的，即使内置的函数，我们也可以重新指向新的函数。

现在假定我们想统计一下代码一共调用了多少次parseInt()，可以把所有的调用都找出来，然后手动加上count += 1，不过这样做太傻了。最佳方案是用我们自己的函数替换掉默认的parseInt()：

<script>
	'use strict';

	var count = 0;
	var oldParseInt = parseInt; // 保存原函数

	window.parseInt = function () {
    	count += 1;
    	return oldParseInt.apply(null, arguments); // 调用原函数
	};
</script>

4、高阶函数

高阶函数英文叫Higher-order function。那么什么是高阶函数？

JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。

一个最简单的高阶函数：

<script>
	function add(x, y, f) {
    	return f(x) + f(y);
	}
</script>

当我们调用add(-5, 6, Math.abs)时，参数x，y和f分别接收-5，6和函数Math.abs，根据函数定义，我们可以推导计算过程为：

<script>
	x = -5;
	y = 6;
	f = Math.abs;
	f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11;
	return 11;
</script>

4.1 map/reduce

举例说明，比如我们有一个函数f(x)=x2，要把这个函数作用在一个数组[1, 2, 3, 4, 5, 6, 7, 8, 9]上。
由于map()方法定义在JavaScript的Array中，我们调用Array的map()方法，传入我们自己的函数，就得到了一个新的Array作为结果：

<script>
	'use strict';

	function pow(x) {
    	return x * x;
	}


	var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
	var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]
	console.log(results); //1,4,9,16,25,36,49,64,81
</script>

注意：map()传入的参数是pow，即函数对象本身。

你可能会想，不需要map()，写一个循环，也可以计算出结果：

<script>
	var f = function (x) {
    	return x * x;
	};

	var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
	var result = [];
	for (var i=0; i<arr.length; i++) {
    	result.push(f(arr[i]));
	}
</script>

的确可以，但是，从上面的循环代码，我们无法一眼看明白“把f(x)作用在Array的每一个元素并把结果生成一个新的Array”。

所以，map()作为高阶函数，事实上它把运算规则抽象了，因此，我们不但可以计算简单的f(x)=x2，还可以计算任意复杂的函数，比如，把Array的所有数字转为字符串：

<script>
	var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
	arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']
</script>

reduce

再看reduce的用法。Array的reduce()把一个函数作用在这个Array的[x1, x2, x3…]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

比方说对一个Array求和，就可以用reduce实现：

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

要把[1, 3, 5, 7, 9]变换成整数13579，reduce()也能派上用场：

<script>
	var arr = [1, 3, 5, 7, 9];
	arr.reduce(function (x, y) {
    	return x * 10 + y;
	}); // 13579
</script>

如果我们继续改进这个例子，想办法把一个字符串13579先变成Array——[1, 3, 5, 7, 9]，再利用reduce()就可以写出一个把字符串转换为Number的函数。

4.2 filter

filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。

<script>
	//例如，在一个Array中，删掉偶数，只保留奇数，可以这么写：
	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]

	//把一个Array中的空字符串删掉，可以这么写：
	var arr = ['A', '', 'B', null, undefined, 'C', '  '];
	var r = arr.filter(function (s) {
    	return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
	});
	arr; // ['A', 'B', 'C']
</script>

可见用filter()这个高阶函数，关键在于正确实现一个“筛选”函数。

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

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

	//利用filter，可以巧妙地去除Array的重复元素：

	'use strict';
	var r,
    	arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
	r = arr.filter(function (element, index, self) {
    	return self.indexOf(element) === index;
	});
	alert(r.toString());
	//去除重复元素依靠的是indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。
</script>

4.3 sort排序算法

因为Array的sort()方法默认把所有元素先转换为String再排序，结果’10’排在了’2’的前面，因为字符’1’比字符’2’的ASCII码小。如果不知道sort()方法的默认排序规则，直接对数字排序，绝对栽进坑里！

幸运的是，sort()方法也是一个高阶函数，它还可以接收一个比较函数来实现自定义的排序。

<script>
	//要按数字大小排序，我们可以这么写：
	var arr = [10, 20, 1, 2];
	arr.sort(function (x, y) {
    	if (x < y) {
        	return -1;
    	}
    	if (x > y) {
        	return 1;
    	}
    	return 0;
	}); // [1, 2, 10, 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]

	//默认情况下，对字符串排序，是按照ASCII的大小比较的，现在，排序应该忽略大小写，按照字母序排序。
	//要实现这个算法，不必对现有代码大加改动，只要我们能定义出忽略大小写的比较算法就可以：

	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']

	//忽略大小写来比较两个字符串，实际上就是先把字符串都变成大写（或者都变成小写），再比较。

	//sort()方法会直接对Array进行修改，它返回的结果仍是当前Array：
	var a1 = ['B', 'A', 'C'];
	var a2 = a1.sort();
	a1; // ['A', 'B', 'C']
	a2; // ['A', 'B', 'C']
	a1 === a2; // true, a1和a2是同一对象 
</script>

4.4 Array

对于数组，除了map()、reduce、filter()、sort()这些方法可以传入一个函数外，Array对象还提供了很多非常实用的高阶函数。

every

very()方法可以判断数组的所有元素是否满足测试条件。

例如，给定一个包含若干字符串的数组，判断所有字符串是否满足指定的测试条件：

<script>
	'use strict';

	var arr = ['Apple', 'pear', 'orange'];
	console.log(arr.every(function (s) {
    	return s.length > 0;
	})); // true, 因为每个元素都满足s.length>0

	console.log(arr.every(function (s) {
    	return s.toLowerCase() === s;
	})); // false, 因为不是每个元素都全部是小写
</script>

find

find()方法用于查找符合条件的第一个元素，如果找到了，返回这个元素，否则，返回undefined：

<script>
	'use strict';

	var arr = ['Apple', 'pear', 'orange'];
	console.log(arr.find(function (s) {
    	return s.toLowerCase() === s;
	})); // 'pear', 因为pear全部是小写

	console.log(arr.find(function (s) {
    	return s.toUpperCase() === s;
	})); // undefined, 因为没有全部是大写的元素
</script>

findIndex

findIndex()和find()类似，也是查找符合条件的第一个元素，不同之处在于findIndex()会返回这个元素的索引，如果没有找到，返回-1：

<script>
	'use strict';
	
	var arr = ['Apple', 'pear', 'orange'];
	console.log(arr.findIndex(function (s) {
    	return s.toLowerCase() === s;
	})); // 1, 因为'pear'的索引是1

	console.log(arr.findIndex(function (s) {
    	return s.toUpperCase() === s;
	})); // -1
</script>

forEach

forEach()和map()类似，它也把每个元素依次作用于传入的函数，但不会返回新的数组。forEach()常用于遍历数组，因此，传入的函数不需要返回值：

<script>
	'use strict';
	
	var arr = ['Apple', 'pear', 'orange'];
	arr.forEach(console.log); // 依次打印每个元素
</script>

5、闭包

函数作为返回值

高阶函数除了可以接受函数作为参数外，还可以把函数作为结果值返回。

我们来实现一个对Array的求和。通常情况下，求和的函数是这样定义的：

<script>
	function sum(arr) {
    	return arr.reduce(function (x, y) {
        	return x + y;
    	});
	}

	sum([1, 2, 3, 4, 5]); // 15
</script>

但是，如果不需要立刻求和，而是在后面的代码中，根据需要再计算怎么办？可以不返回求和的结果，而是返回求和的函数！

<script>
	function lazy_sum(arr) {
    	var sum = function () {
        	return arr.reduce(function (x, y) {
            	return x + y;
        	});
    	}
    	return sum;
	}
</script>

当我们调用lazy_sum()时，返回的并不是求和结果，而是求和函数：

var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()

调用函数f时，才真正计算求和的结果：

f(); // 15

在这个例子中，我们在函数lazy_sum中又定义了函数sum，并且，内部函数sum可以引用外部函数lazy_sum的参数和局部变量，当lazy_sum返回函数sum时，相关参数和变量都保存在返回的函数中，这种称为“闭包（Closure）”的程序结构拥有极大的威力。

请再注意一点，当我们调用lazy_sum()时，每次调用都会返回一个新的函数，即使传入相同的参数：

<script>
	var f1 = lazy_sum([1, 2, 3, 4, 5]);
	var f2 = lazy_sum([1, 2, 3, 4, 5]);
	f1 === f2; // false
</script>

f1()和f2()的调用结果互不影响。

闭包

注意到返回的函数在其定义内部引用了局部变量arr，所以，当一个函数返回了一个函数后，其内部的局部变量还被新函数引用，所以，闭包用起来简单，实现起来可不容易。

另一个需要注意的问题是，返回的函数并没有立刻执行，而是直到调用了f()才执行。我们来看一个例子：

<script>
	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];
</script>

在上面的例子中，每次循环，都创建了一个新的函数，然后，把创建的3个函数都添加到一个Array中返回了。

你可能认为调用f1()，f2()和f3()结果应该是1，4，9，但实际结果是：

<script>
	f1(); // 16
	f2(); // 16
	f3(); // 16
</script>

全部都是16！原因就在于返回的函数引用了变量i，但它并非立刻执行。等到3个函数都返回时，它们所引用的变量i已经变成了4，因此最终结果为16。

返回闭包时牢记的一点就是：返回函数不要引用任何循环变量，或者后续会发生变化的变量。

如果一定要引用循环变量怎么办？方法是再创建一个函数，用该函数的参数绑定循环变量当前的值，无论该循环变量后续如何更改，已绑定到函数参数的值不变：

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

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

	f1(); // 1
	f2(); // 4
	f3(); // 9
</script>

注意这里用了一个“创建一个匿名函数并立刻执行”的语法：

<script>
	(function (x) {
    	return x * x;
	})(3); // 9
</script>

理论上讲，创建一个匿名函数并立刻执行可以这么写：

function (x) { return x * x } (3);

但是由于JavaScript语法解析的问题，会报SyntaxError错误，因此需要用括号把整个函数定义括起来：

(function (x) { return x * x }) (3);

通常，一个立即执行的匿名函数可以把函数体拆开，一般这么写：

<script>
	(function (x) {
    	return x * x;
	})(3);
</script>

说了这么多，难道闭包就是为了返回一个函数然后延迟执行吗？

当然不是！闭包有非常强大的功能。举个栗子：

在面向对象的程序设计语言里，比如Java和C++，要在对象内部封装一个私有变量，可以用private修饰一个成员变量。

在没有class机制，只有函数的语言里，借助闭包，同样可以封装一个私有变量。我们用JavaScript创建一个计数器：

<script>

	'use strict';

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

它用起来像这样：

<script>
	var c1 = create_counter();
	c1.inc(); // 1
	c1.inc(); // 2
	c1.inc(); // 3

	var c2 = create_counter(10);
	c2.inc(); // 11
	c2.inc(); // 12
	c2.inc(); // 13
</script>

在返回的对象中，实现了一个闭包，该闭包携带了局部变量x，并且，从外部代码根本无法访问到变量x。换句话说，闭包就是携带状态的函数，并且它的状态可以完全对外隐藏起来。

闭包还可以把多参数的函数变成单参数的函数。例如，要计算xy可以用Math.pow(x, y)函数，不过考虑到经常计算x2或x3，我们可以利用闭包创建新的函数pow2和pow3：

<script>
	'use strict';

	function make_pow(n) {
    	return function (x) {
        	return Math.pow(x, n);
    	}
	}


	// 创建两个新函数:
	var pow2 = make_pow(2);
	var pow3 = make_pow(3);

	console.log(pow2(5)); // 25
	console.log(pow3(7)); // 343
</script>

脑洞大开

很久很久以前，有个叫阿隆佐·邱奇的帅哥，发现只需要用函数，就可以用计算机实现运算，而不需要0、1、2、3这些数字和+、-、*、/这些符号。

JavaScript支持函数，所以可以用JavaScript用函数来写这些计算。来试试：

<script>
	'use strict';

	// 定义数字0:
	var zero = function (f) {
    	return function (x) {
        	return x;
    	}
	};

	// 定义数字1:
	var one = function (f) {
    	return function (x) {
        	return f(x);
    	}
	};

	// 定义加法:
	function add(n, m) {
    	return function (f) {
        	return function (x) {
            	return m(f)(n(f)(x));
        	}
    	}
	}

	// 计算数字2 = 1 + 1:
	var two = add(one, one);

	// 计算数字3 = 1 + 2:
	var three = add(one, two);

	// 计算数字5 = 2 + 3:
	var five = add(two, three);

	// 你说它是3就是3，你说它是5就是5，你怎么证明？

	// 呵呵，看这里:

	// 给3传一个函数,会打印3次:
	(three(function () {
    	console.log('print 3 times');
	}))();

	// 给5传一个函数,会打印5次:
	(five(function () {
    	console.log('print 5 times');
	}))();

	// 继续接着玩一会...
</script>

6、箭头函数

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

为什么叫Arrow Function？因为它的定义用的就是一个箭头：

x => x * x

上面的箭头函数相当于：

<script>
	function (x) {
    	return x * x;
	}
</script>

箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ … }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ … }和return：

<script>
	x => {
    	if (x > 0) {
        	return x * x;
    	}
    	else {
        	return - x * x;
    	}
	}
</script>

如果参数不是一个，就需要用括号()括起来：

<script>
	// 两个参数:
	(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;
	}
</script>

如果要返回一个对象，就要注意，如果是单表达式，这么写的话会报错：

// SyntaxError:
x => { foo: x }

因为和函数体的{ … }有语法冲突，所以要改为：

// ok:
x => ({ foo: x })

this

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。

回顾前面的例子，由于JavaScript函数对this绑定的错误处理，下面的例子无法得到预期结果：

<script>
	var obj = {
    	birth: 1990,
    	getAge: function () {
        	var b = this.birth; // 1990
        	var fn = function () {
            	return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        	return fn();
    	}
	};
</script>

现在，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj：

<script>
	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
</script>

如果使用箭头函数，以前的那种hack写法：

var that = this;

就不再需要了。

由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略：

<script>
	var obj = {
    	birth: 1990,
    	getAge: function (year) {
        	var b = this.birth; // 1990
        	var fn = (y) => y - this.birth; // this.birth仍是1990
        	return fn.call({birth:2000}, year);
    	}
	};
	obj.getAge(2015); // 25

</script>

7、generator

有两个特征：

一是，function关键字与函数名之间有一个星号；
二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。

generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。

我们先复习函数的概念。一个函数是一段完整的代码，调用一个函数就是传入参数，然后返回结果：

<script>
	function foo(x) {
    	return x + x;
	}

	var r = foo(1); // 调用foo函数
</script>

函数在执行过程中，如果没有遇到return语句（函数末尾如果没有return，就是隐含的return undefined;），控制权无法交回被调用的代码。

generator跟函数很像，定义如下：

<script>
	function* foo(x) {
    	yield x + 1;
    	yield x + 2;
    	return x + 3;
	}
</script>

generator和函数不同的是，generator由function定义（注意多出的号），并且，除了return语句，还可以用yield返回多次。

以一个著名的斐波那契数列为例，它由0，1开头：

0 1 1 2 3 5 8 13 21 34 ...

要编写一个产生斐波那契数列的函数，可以这么写：

<script>
	function fib(max) {
    	var
        	t,
        	a = 0,
        	b = 1,
        	arr = [0, 1];
    	while (arr.length < max) {
        	[a, b] = [b, a + b];
        	arr.push(b);
    	}
    	return arr;
	}

	// 测试:

	fib(5); // [0, 1, 1, 2, 3]
	fib(10); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
</script>

函数只能返回一次，所以必须返回一个Array。但是，如果换成generator，就可以一次返回一个数，不断返回多次。用generator改写如下：

<script>
	function* fib(max) {
    	var
        	t,
        	a = 0,
        	b = 1,
        	n = 0;
    	while (n < max) {
        	yield a;
        	[a, b] = [b, a + b];
        	n ++;
    	}
    	return;
	}
</script>

直接调用试试：

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: false}
f.next(); // {value: undefined, done: true}

next()方法会执行generator的代码，然后，每次遇到yield x;就返回一个对象{value: x, done: true/false}，然后“暂停”。返回的value就是yield的返回值，done表示这个generator是否已经执行结束了。如果done为true，则value就是return的返回值。

当执行到done为true时，这个generator对象就已经全部执行完毕，不要再继续调用next()了。

第二个方法是直接用for ... of循环迭代generator对象，这种方式不需要我们自己判断done：

<script>
	'use strict'

	function* fib(max) {
    	var
        	t,
        	a = 0,
        	b = 1,
        	n = 0;
    	while (n < max) {
        	yield a;
        	[a, b] = [b, a + b];
        	n ++;
    	}
    	return;
	}

	for (var x of fib(10)) {
    	console.log(x); // 依次输出0, 1, 1, 2, 3, ...
	}
</script>

generator和普通函数相比，有什么用？

因为generator可以在执行过程中多次返回，所以它看上去就像一个可以记住执行状态的函数，利用这一点，写一个generator就可以实现需要用面向对象才能实现的功能。例如，用一个对象来保存状态，得这么写：

<script>
	var fib = {
    	a: 0,
    	b: 1,
    	n: 0,
    	max: 5,
    	next: function () {
        	var
            	r = this.a,
            	t = this.a + this.b;
        	this.a = this.b;
        	this.b = t;
        	if (this.n < this.max) {
            	this.n ++;
            	return r;
        	} else {
            	return undefined;
        	}
    	}
	};
</script>

用对象的属性来保存状态，相当繁琐。

generator还有另一个巨大的好处，就是把异步回调代码变成“同步”代码。这个好处要等到后面学了AJAX以后才能体会到。

没有generator之前的黑暗时代，用AJAX时需要这么写代码：

<script>
	ajax('http://url-1', data1, function (err, result) {
    	if (err) {
        	return handle(err);
    	}
    	ajax('http://url-2', data2, function (err, result) {
        	if (err) {
            	return handle(err);
        	}
        	ajax('http://url-3', data3, function (err, result) {
            	if (err) {
                	return handle(err);
            	}
            	return success(result);
        	});
    	});
	});
</script>

回调越多，代码越难看。

有了generator的美好时代，用AJAX时可以这么写：

<script>
	try {
    	r1 = yield ajax('http://url-1', data1);
    	r2 = yield ajax('http://url-2', data2);
    	r3 = yield ajax('http://url-3', data3);
    	success(r3);
	}
	catch (err) {
    	handle(err);
	}
</script>

看上去是同步的代码，实际执行是异步的。

内容	网址
JavaScript个人学习笔记总结 - 快速入门	https://blog.csdn.net/weixin_50594210/article/details/115112096
JavaScript个人学习笔记总结 - 函数	https://blog.csdn.net/weixin_50594210/article/details/115113081
JavaScript个人学习笔记总结 - 标准对象	https://blog.csdn.net/weixin_50594210/article/details/115112683
JavaScript个人学习笔记总结 - 面向对象编程	https://blog.csdn.net/weixin_50594210/article/details/115113024
JavaScript个人学习笔记总结 - 浏览器	https://blog.csdn.net/weixin_50594210/article/details/115113131
JavaScript个人学习笔记总结 - jQuery	https://blog.csdn.net/weixin_50594210/article/details/115113299
JavaScript个人学习笔记总结 - 错误处理	https://blog.csdn.net/weixin_50594210/article/details/115113442
JavaScript个人学习笔记总结 - underscore	https://blog.csdn.net/weixin_50594210/article/details/115113498

在这里插入图片描述

改变世界的李

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
3
评论
JavaScript个人学习笔记总结 - 函数

文章目录函数1、函数定义和调用2、变量作用域与解构赋值3、方法4、高阶函数4.1 map/reduce4.2 filter4.3 sort4.4 Array5、闭包6、箭头函数7、generator函数1、函数定义和调用2、变量作用域与解构赋值3、方法4、高阶函数4.1 map/reduce4.2 filter4.3 sort4.4 Array5、闭包6、箭头函数7、generator...
复制链接

扫一扫