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 相关文章推荐
Android中的jQuery:AQuery简介
May 06 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
Vue 事件处理操作实例详解
Mar 05 Javascript
js实现图片推拉门效果代码实例
May 18 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 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
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
jquery.validate使用攻略 第三部
2010/07/01 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
如何通过python实现人脸识别验证
2020/01/17 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
.net开发工程师面试题
2014/02/25 面试题
放飞蜻蜓反思
2014/02/05 职场文书
cf战队收人广告词
2014/03/14 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
工作求职信
2014/07/04 职场文书
商铺租房协议书范本
2014/12/04 职场文书
财务个人年度总结范文
2015/02/26 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
React如何创建组件
2021/06/27 Javascript