JavaScript 基础(六) 数组方法 闭包
在一个对象中绑定函数,称为这个对象的方法。
在JavaScript 中,对象的定义是这样的;
var guagua = {
name:'瓜瓜',
birth:1990
};
但是,如果我们给瓜瓜绑定一个函数,就可以做更多的事情。
var guagua = {
name:'瓜瓜',
birth:1990,
age:function(){
var y = new Date().getFullYear();
return y - this.birth;
}
}
guagua.age; // function guagua.age()
xguagua.age(); // 今年调用是25,明年调用就变成26了
apply
虽然在一个独立的函数调用中,根据是否是strict模式,this 指向undefined 或window,不过我们还可以控制this 的指向。
要指定函数的this 指向哪个个对象,可以用函数的本身的apply 方法,他接收两个参数,第一个就是需要绑定的this 变量,
第二个参数是Array,表示函数本身的参数。
用apply 修复getAge() 调用:
function getAge(){
var y = new Date().getFullYear();
return y - this.birth;
}
var guagua = {
name:'小明',
birth:1990,
age:getAge
};
guagua.age(); // 25
getAge.apply(xiaoming,[]); // 25, this 指向xiaoming 参数为空。
另一个与apply()类似的方法是call(),唯一区别是:
apply()把参数打包成Array再传入;
call()把参数按顺序传入。
比如调用Math.max(3, 5, 4),分别用apply()和call()实现如下
Math.max.apply(null,[3,5,4]); // 5
Math.max.call(null,3,5,4); // 5
对普通函数调用,我们通常把this绑定为null。
map
由于map() fangf dingyi zai JavaScript 的Array 中,我们调用Array 的map() 方法,传入自己的函数,就得到了一个新的Array
function pow(x){
return x * x;
}
var arr = [1,2,3,4,5,6,7,8,9];
arr.map(pow); // [1,4,9,16,25,36,49,64,81]
map() 传入的参数是pow,即函数对象本身。
reduce
在看reduce 的应付,Array 的reduce() 把一个函数作为在这个Array 的[x1,x2,x3....]上,这个函数必须接收两个参数,
redyce()把结果继续和序列下个元素做积累计算,其效果就是。
[x1,x2,x3,x4].reduce(f) = f(f(f(x1,x2),x3),x4)
比方说对一个Array求和,就可以用reduce实现:
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x + y;
}); // 25
要把[1, 3, 5, 7, 9]变换成整数13579,reduce()也能派上用场:
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
return x * 10 + y;
}); // 13579
filter
filter 也是一个常用的操作,它用于吧Array的某些元素过滤掉,然后返回剩下的元素。
和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,
然后根据返回值是true还是false决定保留还是丢弃该元素。
在一个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.flter(function(s){
return s && s.trim(); // 注意: IE9以下的版本没有trim()方法
})
r: // ['A','B','C']
可见用filter()这个高阶函数,关键在于正确实现一个“筛选”函数。
sort
JavaScript的Array的sort()方法就是用于排序的,但是排序结果可能让你大吃一惊:
// 看上去正常 的结果
['Google','Apple','Microsoft'].sort(); // ['Apple','Google','Microsoft'];
// apple 排在了最后
[10,20,1,2].sort(); //[1,10,2,20]
第二个排序把apple排在了最后,是因为字符串根据ASCII码进行排序,而小写字母a的ASCII码在大写字母之后。
要按数字大小排序,我们可以这么写:
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]
我们提出排序应该忽略大小写,按照字母序排序
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是同一对象
闭包函数作为返回值
高阶段函数除了可以接受函数作为参数外,还可以把函数作为结果值返回。
function sum(arr){
return arr.reduce(function(x,y){
return x + y;
});
}
sum([1,2,3,4,5]); //15
但是,如果不需要立刻求和,而是在后面的代码中,根据需要再计算怎么办?可以不返回求和的结果,而是返回求和的函数!
function lazy_sum(arr){
var sum = function (){
return arr.reduce(function(x,y){
return x + y;
})
}
return sum;
当我们调用lazy_sum()时,返回的并不是求和结果,而是求和函数:
var f = lazy_sum([1,2,3,4,5]); // function sum();
调用函数f 时,才真正计算求和的结果。
f(); // 15
当我们调用lazy_sum()时,每次调用都会返回一个新的函数,即使传入相同的参数:
var f1 = lazy_sum([1,2,3,4,5]);
var f2 = lazy_sum([1,2,3,4,5])
f1 === f2; //false
闭包
返回的函数在其定义内部引用了局部变量arr,所有,说以一个函数返回了一个函数,其内部的局部变量还被新幻术引用,所以闭包用起来简单。
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(),f2()和f3()结果应该是1,4,9,但实际结果是:
f1(); // 16
f2(); //16
f3(); //16
返回闭包时牢记的一点就是:返回函数不要引用任何循环变量,或者后续会发生变化的变量。
function count(){
var arr = [];
for(var i=1; i <=3; i++){
arr.push((function (n){
return function(){
return n * n;
}
})(i));
}
注意这里用来一个创建一个匿名函数并立刻执行的语法:
(function(x){
return x * x;
})(3); //9
return arr;
}
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); //1
f2(); //4
f3();//9
在没有class机制,只有函数的语言里,借助闭包,同样可以封装一个私有变量。我们用JavaScript创建一个计数器:
function create_counter(initial){
var x = inintial || 0;
return {
inc : function(){
x +=1;
return x;
}
}
}
它用起来像这样:
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
闭包还可以把多参数的函数变成单参数的函数。
function make_pow(n){
return function(x){
return Math.pow(x,n);
}
}
// 创建两个新函数。
var pow2 = make_pow(2);
var pow3 = make_pow(3);
pow2(5); // 25
pow3(7); //343
JavaScript 基础(六) 数组方法 闭包的更多相关文章
- JavaScript 基础回顾——数组
JavaScript是无类型语言,数组元素可以具有任意的数据类型,同一个数组的不同元素可以具有不同类型.数组的元素设置可以包含其他数组,便于模拟创建多维数组. 1.创建数组 在JavaScript中, ...
- javascript基础之数组对象
一.定义数组的方法: 定义了一个空数组: var myArray =new Array(); 指定有n个空元素的数组: var myArray=new Array(n); 定义数组并赋值: var m ...
- JavaScript基础04——数组的创建及方法
数组的概念及定义 数组的概念: 一组数据,数据的组和 哪些数据的组和,只要是数据(所有数据),就可以放在数组中 数组的意义: 可以同时操作多个数据 数组 ...
- 前端之JavaScript基础及使用方法
JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...
- 【javascript基础】8、闭包
前言 函数和作用域啥的我们前面已经了解了,现在就要学习闭包了,这是一个挺晦涩的知识点,初学者可能会感觉不好理解,但是高手都不不以为然了,高手就给我提点意见吧,我和新手一起来学习什么是闭包. 例子 先不 ...
- javascript基础知识-数组
1.javascript创建数组时无需声明数组大小或者在数组大小变化时重新分配 2.javascript数组是无类型的 3.数组元素不一定要连续 4.针对稀疏数组,length比所有元素的索引都要大 ...
- JavaScript基础——使用数组
Array对象提供存储和处理一组其他对象的一种手段.数组可以存储数值.字符串或其他JavaScript对象.创建JavaScript数组有几种不同的方法.例如,下面的语句穿件同样的驻足的3个相同的版本 ...
- Javascript中遍历数组方法的性能对比
Javascript中常见的遍历数组的方法 1.for循环 for(var i = 0; i < arr.length; i++) { // do something. } 2.for循环的改进 ...
- JavaScript 基础(二)数组
字符串, JavaScript 字符串就是用'' 和""括起来的字符表示. 字符字面量, \n 换行, \t 制表, \b 退格, \r 回车, \f 进纸, \\ 斜杠,\' 单 ...
随机推荐
- c#学习基础(2)存储、值类型和引用类型、变量
程序运行时,它的数据必须存储在内存中,数据项需要多大的内存.存储在什么地方以及如何存储都依赖该数据项的类型 运行中的程序使用两个区域来存储数据:栈和堆 栈是一个内存数组,是一个LIFO(last in ...
- jQuery二——属性操作、文档操作、位置属性
一.jquery的属性操作 jquery对象有它自己的属性和方法. 其中jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作. 1.html属性操作 是对htm ...
- html和css命名-望文生义
HTML+CSS命名规则 在一个内容较多的HTML页面中,需要设计许多不同的框架,再为这些不同的框架及内容进行分类,给予相应的名称,从而使得网页结构更加清晰,也为工作提供了方便.许多新手朋友在设计一个 ...
- css 条纹背景
先介绍文章用到的二个知识点 background-size 属性 语法 background-size: length|percentage|cover|contain; css线性渐变 linear ...
- 嵌入式开发 MCU
From: http://www.infoq.com/cn/articles/intelligent-embedded-os-Internet-of-things-and-robots 嵌入式开发是一 ...
- maven学习(三)maven仓库
官网图片: maven仓库: 仓库通常配置在settings.xml文件中,此处注意settings.xml的优先级:用户 > 全局,广义上maven的仓库一共包含两种: 1.本地仓库,默认在& ...
- 使用auto_ptr需要注意的事项
注:C++11 已不推荐使用,应使用scoped_ptr/shared_ptr. 部分原因就是如下的注意事项. 转自:http://patmusing.blog.163.com/blog/static ...
- 安装adobe,路径My Pictures或卷无效。请重新输入。
问题:安装adobe reader时,路径My Pictures或卷无效.请重新输入.我的光驱是D盘.因为是在虚拟机下安装的xp系统. 解决办法: GHOST WINXP2 My Pictures一般 ...
- 将CSV文件中的数据导入到SQL Server 数据库中
导入数据时,需要注意 CSV 文件中的数据是否包含逗号以及双引号,存在时,导入会失败 选择数据库 -> 右键 -> 任务 -> 导入数据 ,然后根据弹出的导入导出向导(如下图)中的提 ...
- oracle_union_operator
SQL: UNION Operator This SQL tutorial explains how to use the SQL UNION operator with syntax and exa ...