JavaScript 数组方法

更新日期: 2019-04-07阅读: 2.2k标签: 数组

数组方法

1、Array.join([param]) 方法:将数组中所有的元素都转换为字符串并连接起来,通过字符 param 连接,默认使用逗号,返回最后生成的字符串

2、Array.reverse() 方法:将数组中的元素颠倒顺序(在原数组中重新排列它们),返回逆序数组

3、Array.sort([function]) 方法:将数组中的元素按字母表顺序排序并返回排序后的数组,可选参数 function 是一个比较函数,它定义了排序的规则

4、Array.concat([params]) 方法:创建并返回一个新数组,它的元素包含原数组的元素和 params,若 params 里有一个是数组,则会连接数组的元素,但它不会递归扁平化数组的数组,即如果 params 有一个是多维数组,它连接的是多维数组里子数组,而不是子数组的元素

5、Array.slice([beg], [end]) 方法:返回指定数组的一个片段或子数组,范围是 [beg, end),不会改变原数组,若参数有负数,则表示相对数组末尾的偏移量

6、Array.splice([index], [size], [params]) 方法:在数组中插入或删除元素的通用方法,返回删除的子数组,index 指定插入或删除位置,size 指定删除个数,params指定插入的元素,会改变数组,若 params 里有数组,则插入数组(注意和 concat 的区别)

7、Array.push(params) 方法:在数组尾部添加一个或多个元素,返回数组新长度

8、Array.pop() 方法:删除数组最后一个元素,并返回删除元素的值

9、Array.unshift(params) 方法:在头部添加一个或多个元素(后面的元素会移动到更高索引位置来获得足够的空间),并返回数组新的长度,它插入 params 的方法是一次性全部插入,即插入元素顺序和它们在列表里的顺序是一样的

10、Array.shift() 方法:删除头部第一个元素,并返回其值,然后自动移动数组的元素以填补头部空缺

11、toString() 和 toLocaleString() 将数组中每个元素转化为字符串并连接起来,toString() 采用逗号分隔,而 toLocaleString() 则使用本地化分隔符连接这些字符串,输出不包括方括号或其他任何形式的包裹数组值得分隔符

let arr = [1, 2, 3, 4, 5];

let str = arr.join(" ");
console.log(str);   // 输出 "1 2 3 4 5"

arr.reverse();
console.log(arr);   // 输出 [5, 4, 3, 2, 1]

arr.sort(function (a, b) {
    return a-b; // 采用升序排序,若为 b-a 则为降序,排序规则通过该函数设置
});
console.log(arr);   // 输出 [1, 2, 3, 4, 5]

let arr_t = arr.concat([6, 7, [8, 9], 10]); // 没有递归扁平化数组
console.log(arr_t); // 输出 [1, 2, 3, 4, 5, 6, 7, [8, 9], 10]

arr_t = arr.slice(0, 3);    // [0, 3) 子数组
console.log(arr_t); // 输出 [1, 2, 3]

arr_t.splice(0, 0, 4, 5);   // 在下标为 0 处删除 0 个元素,并插入元素 4 和 5
console.log(arr_t); // 输出 [4, 5, 1, 2, 3]

let len = arr.push(6, 7);   //在尾部插入元素 6 和 7,返回新长度
console.log("arr: ",arr, "\tlen: ", len);
arr.pop();  arr.pop();  // 把新插入得 2 个元素都 pop 掉,每次只能 pop 一个
console.log(arr);

len = arr.unshift(-1, 0);   // 在头部一次性插入 2 个元素,注意所插入元素的顺序
console.log("arr: ",arr, "\tlen: ", len);
arr.shift();  arr.shift();  // 把新插入得 2 个元素都 shift 掉,每次只能 shift 一个
console.log(arr);

str = arr.toString();
console.log(str);
str = arr.toLocaleString();
console.log(str);


ES5 中的数组方法:

ES5 定义了 9 个新的数组方法来遍历、映射、过滤、检测、简化和搜索数组,大多数方法的第一个参数接收一个函数,并对每个元素(或一些元素)调用一次该函数,对不存在的元素不调用传递该函数(稀疏数组)。一般情况下,该函数 function(val, index, arr) 第一个参数为数组元素,第二个为下标,第三个为数组本身。调用的函数被看作方法的第二个参数(可选)的方法。ES5 中数组的方法都不会改变原数组!

1、forEach() 方法:从头至尾遍历数组,为每个元素调用指定的函数,且无法在所有元素都传递给调用函数之前终止遍历。除非在 try 块里,并抛出一个异常才能终止

let mul = 1, arr = [1, 2 ,3, 4, 5];
arr.forEach(function (value) {
    mul *= value;   // mul = 1*2*3*4*5
});
/*arr.forEach(function (value, index, array) {
    mul *= array[index];
}); 与上面的等价*/
console.log(mul);

2、map() 方法:将调用数组的每个元素都传递给指定函数,并返回一个新数组,它包含该函数的返回值(注意和 forEach 的区别)。若调用的数组是稀疏数组,则返回的也是稀疏数组

let arr = [1, 2, 3, 4, 5];

let arr_t = arr.map(function (value) {
    return value * 2;    //把 arr 里的元素都 *2
}); // map() 具有返回值

console.log(arr_t);    //返回 [2, 4, 6, 8, 10]

3、filter() 方法:返回满足一定条件的调用数组的一个子集,传递的函数是用来逻辑判断的(返回 true 或 false)。同时,该方法会跳过稀疏数组中缺少的元素,即返回的数组总是稠密

let arr = [1, 2, 3, 4, 5];

let arr_t = arr.filter(function (value) {
    return value % 2 == 1;  // 筛选奇数
});

console.log(arr_t);    // 输出[1, 3, 5]

4、every() 和 some() 方法:对调用数组的每个元素进行判定,返回 true 或 false,every 表示所有元素都满足条件,而 some 表示有元素满足条件。它们会尽早终止遍历,而不是访问每一个数组元素!

let arr = [3, 2, 1];

let pow = arr.reduce(function (accumulator, value) {
    return Math.pow(accumulator, value);    // accumulator^value,初始值为 3
});
console.log(pow);   // 输出 3^2^1

let sum = arr.reduceRight(function (init, value) {
    return init + value;
}, 0);    // 初始值为 0
console.log(sum);   // 输出 1+2+3,注意顺序let arr = [1, 2, 3, 4, 5];

let flag = arr.every(function (value) {
    return value > 1;
});
console.log("Every num > 1: ", flag);    // 返回 false

flag = arr.some(function (value) {
    return value > 4;
});
console.log("Some num > 4: ", flag);    // 返回 true

5、reduce(function, [initVal]) 和 reduceRight(function, [initVal]) 方法:使用指定函数将数组元素进行组合,生成单个值,第一个参数是执行简化操作的函数,而第二个是初始值,若未指定,则以第一个第一个元素(reduce)或最后一个(reduceRight)作为初始值。它使用的函数与 forEach() 不同,数组元素、索引及本身作为第 2~4 个参数传递给函数,第一个参数为到目前为止简化操作积累的结果(起初为初始值,接下来每次操作后的结果都会存储在第一个参数里)。reduce() 处理数组从低到高,而 reduceRight() 处理数组从高到低

let arr = [3, 2, 1];

let pow = arr.reduce(function (accumulator, value) {
    return Math.pow(accumulator, value);    // accumulator^value,初始值为 3
});
console.log(pow);   // 输出 3^2^1

let sum = arr.reduceRight(function (init, value) {
    return init + value;
}, 0);    // 初始值为 0
console.log(sum);   // 输出 1+2+3,注意顺序

6、indexOf(val, [index]) 和 lastIndexOf(val, [index]) 方法:搜索整个数组中和 val 恒等的元素,返回第一个相匹配的元素的索引,如果没找到则返回 -1,index 指定搜索开始的下标。它不接受一个函数作为参数!!indexOf() 从低往高搜索,而 lastIndexOf() 从高往低。若 index 为负数,则它代表相对数组末尾的偏移量。

let arr = [1, 2, 3, 3, 2, 1];

let res = arr.indexOf(3, 2);    // 从下标为 2 开始搜索与 3 恒等的数,并返回下标
console.log(res);   //输出 2

res = arr.lastIndexOf(3);
console.log(res);   // 输出3



链接: https://www.fly63.com/article/detial/2737

探索JavaScript数组奥秘

avaScript数组同后端语言一样,具有它自己的数据结构,归根结底,这种数据结构,本质就是一种集合。在后端语言中(如java,.net等),数组是这样定义的:数组是用来存储相同数据类型的集合

js使用数组+循环+条件实现数字转换为汉字的简单方法。

单个数字转汉字的解决方法:利用数组存储0-9的汉字、 ary.length和str.length不用多说,这是指ary数组和str字符串的长度。这里我们需要注意的是str.charAt(j)和ary[i],分别指在str这个字符串中索引为j的元素,在ary中索引为i的元素。

[译]async-await 数组循环的几个坑

在 Javascript 循环中使用 async/ await 循环遍历数组似乎很简单,但是在将两者结合使用时需要注意一些非直观的行为。让我们看看三个不同的例子,看看你应该注意什么,以及哪个循环最适合特定用例。

数组、字符串去重

今天说的数组和字符串去重呢,主要用到es6新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值,所以活用Set来进行数组和字符串的去重。

如何删除JavaScript 数组中的虚值

falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值.JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为布尔值,比如:在条件语句或者循环语句中。

JavaScript中十种一步拷贝数组的方法

JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下。扩展运算符(浅拷贝)自从ES6出现以来,这已经成为最流行的方法。

JS数组的几个经典api

本文主要来讲数组api的一些操作,如简单实现扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。扁平化嵌套数组/展平和阵列孔——flat()

关于Vue不能监听(watch)数组变化

vue无法监听数组变化的情况,但是数组在下面两种情况下无法监听:利用索引直接设置数组项时,例如arr[indexofitem]=newValue;修改数组的长度时,例如arr.length=newLength

JS计算两个数组的交集、差集、并集、补集(多种实现方式)

使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本,使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本。也不用引入其他第三方库。

JavaScript常用数组操作方法,包含ES6方法

concat() 方法用于连接两个或多个数组。join() 方法用于把数组中的所有元素放入一个字符串。push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!