首页 >> js开发 >> js代码JavaScript array常用方法代码实例详解
js代码JavaScript array常用方法代码实例详解
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
1.map/reduce
1.map/reducemap()
map()是array的一个方法作用: 对array中每一个元素调用自定义函数
'use strict';
function pow(x){
return x*x;
}
var arr=[1,2,3,4,5]
var newarray=arr.map(pow)
'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(筛选)
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']
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;
});
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;
}
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(排序)
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]
'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]
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方法
4.其他的Array方法every()和some()
作用: 可以判断数组的所有元素是否满足测试条件(通过函数提供)every()是全部满足的时候返回true,一个不满足返回false,并终止检测some()是全部不满足的时候返回false,有一个满足就返回truefind()
作用: 查找第一个符合条件的元素查找符合条件的第一个元素,如果找到了就返回这个元素,否则,返回undefinedfindindex()
作用: 查找第一个符合条件的元素的索引查找符合条件的第一个元素,找到这个元素就返回他的索引,如果没有找到就返回-1forEach()
作用: 常用于遍历数组(和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 此时调用,才进行计算
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
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总是指向词法作用域,也就是外层调用 objgenerator(生成器)
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}
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}
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, ...
}
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);
}
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);
}看上去是同步的代码，实际执行是异步的。以上就是本文的全部内容，希望对大家的学习有所帮助。
1.map/reducemap()
map()是array的一个方法作用: 对array中每一个元素调用自定义函数
'use strict';
function pow(x){
return x*x;
}
var arr=[1,2,3,4,5]
var newarray=arr.map(pow)
'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(筛选)
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']
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;
});
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;
}
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(排序)
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]
'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]
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方法
4.其他的Array方法every()和some()
作用: 可以判断数组的所有元素是否满足测试条件(通过函数提供)every()是全部满足的时候返回true,一个不满足返回false,并终止检测some()是全部不满足的时候返回false,有一个满足就返回truefind()
作用: 查找第一个符合条件的元素查找符合条件的第一个元素,如果找到了就返回这个元素,否则,返回undefinedfindindex()
作用: 查找第一个符合条件的元素的索引查找符合条件的第一个元素,找到这个元素就返回他的索引,如果没有找到就返回-1forEach()
作用: 常用于遍历数组(和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 此时调用,才进行计算
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
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总是指向词法作用域,也就是外层调用 objgenerator(生成器)
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}
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}
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, ...
}
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);
}
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);
}看上去是同步的代码，实际执行是异步的。以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章:
- js详解nginx配置vue h5 history去除#号js大全
- js解决Element中el-date-picker组件不回填的情况js大全
- JavaScriptnuxt.js添加环境变量,区分项目打包环境操作
- JavaScriptNuxt.js nuxt-link与router-link的区别说明
- jsVue路由权限控制解析js大全
- js详解Vue中的watch和computedjs大全
- js你不知道的SpringBoot与Vue部署解决方案js大全
- jsvue 避免变量赋值后双向绑定的操作js大全
- js解决vue 使用axios.all()方法发起多个请求控制台报错的问题js大全
- jsaxios解决高并发的方法:axios.all()与axios.spread()的操作js大全
刚刚发布热门点击发布时间
- [02/23]chrome 浏览器插件外包:定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]专业电脑浏览器插件外包服务，助力企业数字化转型！
- [02/23]解放双手，效率翻倍！Chrome插件前端自动化外包服务，助您轻松实现业务流程自动化！
- [02/23]定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]Chrome插件外包：为你的浏览器赋能，开启无限可能
- [09/06]node js 调用kimi 接口批量生成网页
- [07/21]Node.js数据采集外包服务-数据采集专家-用Node.js释放数据的力量
- [07/21]专业前端开发-从PSD到响应式网页的无缝转换
- [07/18]专业Chrome插件开发- 为您的业务插上翅膀
- [07/18]智能数据抓取 -浏览器插件接口抓取服务外包
- [07/17]vue3 setup 监听url变化
- [07/17]git 回滚到指定 commit
- [07/15]浏览器插件使用场景:浏览器插件在数据抓取方面的使用场景非常广泛
- [07/15]Chrome 浏览器插件的使用场景
- [07/15]Chrome 浏览器插件开发的特点
