JavaScript array常用方法代码实例详解


Posted in Javascript onSeptember 02, 2020

1.map/reduce

map()

map()是array的一个方法

作用: 对array中每一个元素调用自定义函数

'use strict';
function pow(x){
return x*x;
}
var arr=[1,2,3,4,5]
var newarray=arr.map(pow)

map的回调函数有三个参数:

callback(currentValue, index, array)通常只要第一个参数

PS: map()传入的参数是pow,即函数对象本身

通常map调用的自定义方法只包含一个参数

reduce()

reduce()也是array的一个方法

作用: 从数组的前两个元素开始,作为函数参数,传入函数得到结果,

结果再和下一个数组元素再一次调用函数,直到数组尽头

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
PS: 通常reduce()调用的自定义方法只包含两个个参数

2.filter(筛选)

作用:把Array的某些元素过滤掉,然后返回剩下的元素.

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

//去掉空字符串

var arr = ['A', '', 'B', null, undefined, 'C', ' '];
var r = arr.filter(function (s) {
  return s && s.trim(); // 注意:IE9以下的版本没有trim()方法
});
r; // ['A', 'B', 'C']

回调函数

通常我们仅使用第一个参数,表示Array的某个元素。回调函数还可以接收另外两个参数,表示元素的位置和数组本身:

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 get_primes(arr){
if(elem===1){
return false;
}
for(var i=2;i<=elem/2;i++){
if(elem%i==0)
{
return false;
}
}
return true;
});
return x;
}

PS: 关键在于正确实现一个“筛选”函数

3.sort(排序)

默认排序会把所有元素转成String在排序,根据一个元素的ASCII值进行排序(非递减)(TimSort算法)

两两比较,当回调函数返回值大于0时,交换元素值

自定义数字排序

'use strict' 
var arr=[10,20,1,2];
arr.sort(function(x,y){
	if (x < y) {
    return -1;
  }
  if (x > y) {
    return 1;
  }
  return 0;
});
console.log(arr); // [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]

4.其他的Array方法

every()和some()

作用: 可以判断数组的所有元素是否满足测试条件(通过函数提供)

every()是全部满足的时候返回true,一个不满足返回false,并终止检测

some()是全部不满足的时候返回false,有一个满足就返回true

find()

作用: 查找第一个符合条件的元素

查找符合条件的第一个元素,如果找到了就返回这个元素,否则,返回undefined

findindex()

作用: 查找第一个符合条件的元素的索引

查找符合条件的第一个元素,找到这个元素就返回他的索引,如果没有找到就返回-1

forEach()

作用: 常用于遍历数组

(和map类似)把数组每个元素依次传入函数,但不会返回新的数组.

函数作为返回值
函数里再定义一个函数,返回值为里面定义的函数

调用函数作为返回值的函数式,每次调用都会返回一个新的函数,即使传入相同参数

function lazy_sum(arr) {
  var sum = function () {
    return arr.reduce(function (x, y) {
      return x + y;
    });
  }
  return sum;
}
//此时返回的是求和函数
var f = lazy_sum([1, 2, 3, 4, 5]); // function sum()
f(); // 15 此时调用,才进行计算

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

闭包(懵逼了)(吐彩虹)

有权访问另一个函数作用域内变量的函数都是闭包。

函数里面的函数会随着外部定义函数而改变

PS: 因为返回值就是一个函数,调用的时候要加小括号

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

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

箭头函数(=>)(强哒)
(参数...)=>{函数体}等价于function(参数...){函数体}

当返回的是一个对象时函数体大括号外边加小括号

x=>({foo:x})

this

箭头函数内部的this是词法作用域,由上下文确定

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

箭头函数完全修复了this指向,this总是指向词法作用域,也就是外层调用 obj

generator(生成器)

ES6引入借鉴Python同名函数

写法和函数类似,只是在function后加*,通过yield多次返回值,也可通过return返回值

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

function* (x){
yield x
}
function* fib(max) {
  var
    t,
    a = 0,
    b = 1,
    n = 0;
  while (n < max) {
    yield a;
    [a, b] = [b, a + b];
    n ++;
  }
  return;
}
fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}

直接调用一个generator和调用函数不一样,fib(5)仅仅是创建了一个generator对象,还没有去执行它。

调用generator对象有两个方法,

一是不断地调用generator对象的next()方法:next()方法会执行generator的代码,然后,每次遇到yield x;就返回一个对象{value: x, done: true/false},然后“暂停”。返回的value就是yield的返回值,done表示这个generator是否已经执行结束了。如果done为true,则value就是return的返回值。当执行到done为true时,这个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}

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

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript数组的使用
Mar 28 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
在vue中使用image-webpack-loader实例
Nov 12 Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 #Javascript
详解JavaScript 事件流
Sep 02 #Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 #Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 #jQuery
JavaScript交换变量常用4种方法解析
Sep 02 #Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 #Javascript
Jquery $.map使用方法实例详解
Sep 01 #jQuery
You might like
浅析is_writable的php实现
2013/06/18 PHP
php汉字转拼音的示例
2014/02/27 PHP
微信网页授权(OAuth2.0) PHP 源码简单实现
2016/08/29 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
浅析Python函数式编程
2018/10/06 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
Python中的__init__作用是什么
2020/06/09 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
Jar包的作用是什么
2014/03/30 面试题
平面设计专业大学生职业规划书
2014/03/12 职场文书
追悼会主持词
2014/03/20 职场文书
购房意向书
2014/04/01 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
教师文明餐桌光盘行动倡议书
2015/04/28 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫