Hi Array!~~~ 你所经常遇见的 TA!

Chalk

关注

发布于: 2021 年 04 月 01 日

JS 数组操作指南

什么是数组？var a = [1,2,3]; var b = [4,5,6]; 这就是数组,使用中括号包括，里面的每一项都是数组对象

一：Array 对象属性

length: 数组的长度（从 1 开始计算）
prototype: 原形,可以给数组添加属性和方法

二：基础-->Array 数组方法

1.concat()

不改变原数组连接两个或多个数组,

var a = [1,2,3];var b = [4,5,6];console.log(a.concat(b))// [1,2,3,4,5,6]

复制代码

2. join()

不改变原数组把数组转换为字符串

var a = [1,2,3];var b = [4,5,6];// 默认以逗号分隔var c = a.join()// 以空格分隔,用引号包裹空格var d = a.join(' ')// 以引号加逗号分隔var f = a.join("','")// 如果想要每一个字符串都被引号包括，需要在最外层另加引号var e = "'" + f + "'"console.log(c) // {1,2,3}console.log(d) // {1 2 3}console.log(f) // {1','2','3}console.log(e) // {'1','2','3'}

复制代码

3.pop()

改变原数组删除并返回数组的最后一个元素

var a = [1,2,3];var b = [4,5,6];var c = a.pop();// 原数组发生了改变console.log(a); // [1,2]// 返回的是被删除的元素console.log(c); // 3

复制代码

4.push()

改变原数组向数组末尾添加一个或多个元素并返回新的数组长度

var a = [1,2,3];var b = [4,5,6];var c = a.push(4);var d = b.push(7,8);// 原数组发生了改变console.log(a); // [1, 2, 3, 4]console.log(b); // [4, 5, 6, 7, 8]// 返回的是数组长度console.log(c); // 4console.log(d); // 5

复制代码

5.reverse()

改变原数组颠倒数组中元素的顺序

var a = [1,2,3];var b = [4,5,6];var c = a.reverse();console.log(a); // [3, 2, 1]console.log(c); // [3, 2, 1]

复制代码

6.shift()

改变原数组把数组的第一个元素从其中删除并返回被删除的元素

var a = [1,2,3];var b = [4,5,6];var c = a.shift();var d = b.shift();console.log(a); // [2,3]console.log(b); // [5,6]console.log(c); // [1]console.log(d); // [4]

复制代码

7.unshift()

改变原数组把数组的第一个元素从其中删除并返回数组长度

// shift()是删除，unshift()是添加var a = [1,2,3];var b = [4,5,6];var c = a.unshift(2);var d = b.unshift(7);console.log(a); // [2,1,2,3]console.log(b); // [7,4,5,6]console.log(c); // [4]console.log(d); // [5]

复制代码

8.sort()

改变原数组对数组的元素进行排序

var a = [2,1,3];var b = [5, 10, 40];var c = a.sort();var d = b.sort();// 对数字进行排序使用比较函数var f = b.sort((a, b) => a - b);console.log(a); // [1,2,3]console.log(b); // [10, 40, 5]console.log(c); // [1, 2, 3]// 注意：默认是按字符编码排序console.log(d); // [10, 40, 5]console.log(f); // [5, 10, 40]

复制代码

9.slice()

不改变原数组从已有的数组中返回选定的元素 slice(start, end)开始选定的位置，默认从 0 开始，不包括 end
应用：可以实现简单的浅拷贝
扩展:深拷贝：JSON.parse(JSON.stringify(array))

var a = [1,2,3];var b = [4,5,6,7,8,9];// var c = a.slice(1,2); // 从第二个位置开始选定元素var d = b.slice(2,4); // 从第三个位置开始删除三个元素console.log(a); // [1,2,3]console.log(b); // [4,5,6,7,8,9]// 返回的是选定后的的元素数组console.log(c); // [2]console.log(d); // [6,7]

复制代码

10.splice()

改变原数组向数组中添加/删除元素并返回被删除的元素数组
splice(idnex,howmany,item1, .....,itemX)index:数组元素的位置（下标），默认从 0 开始 howmany:要删除的数量，不填则删除后面的所有元素 itemX:要添加的元素

var a = [1,2,3];var b = [4,5,6,7,8,9];// var c = a.splice(1,1); // 从第二个位置开始删除一个元素var d = b.splice(2,3); // 从第三个位置开始删除三个元素// 从第二个位置开始删除一个元素，并添加两个元素var f = a.splice(1,1,'chalk', 'chalk');console.log(a); // [1, 3]console.log(b); // [4, 5, 9]console.log(f); // [1, "chalk", "chlak", 3]// 返回的是被删除的元素数组console.log(c); // [2]console.log(d); // [6, 7, 8]console.log(f); // [2]

复制代码

11.toString()

不改变原数组将数组转换为字符串，并返回结果

var a = [1,2,3];var b = [4,5,6,7,8,9];var c = a.toString();var d = b.toString();// 原数组不变console.log(a); // [1, 2, 3]console.log(b); // [4,5,6,7,8,9]// 数组转换为字符串形式，以逗号分隔console.log(c); // 1，2，3console.log(d); // 4,5,6,7,8,9

复制代码

三：进阶-->数组操作

1.Array.isArray()

判断是否是数组, 返回布尔值

var a = 1;var b = [4, 5, 6, 9];console.log(Array.isArray(a)) // falseconsole.log(Array.isArray(b)) // true

复制代码

2.Array.of()

将参数转换为数组 #与直接在外层加一个 [ ]是一样的

var a = 3;var b = {name: 'chalk', age: '99'}var c = Array.of(a);var d = Array.of(b);console.log(c) // [3]// 数组中存在一个对象console.log(d) // [{name: "chalk", age: "99"}]console.log([b]) // [{name: "chalk", age: "99"}]

复制代码

3.Array.from()

将数组对象转化为数组所谓数组对象即：与数组形式类同的对象，有长度值: length

与 new Set() 配合使用实现数组的去重

var a = {0: 'chalk', 1: '99', length: 2};console.log(a) //["chalk", "99"]

复制代码

4.new Set()

对象方法，配合操作数组,<u>返回数组对象</u>

add: 添加值，返回对象本身
clear: 删除所有值
delete: 删除某个值，返回布尔值
forEach: 遍历
has: 判断是否存在，返回布尔值

var a = [1,2,3];var b = [4,5,3];var c = [1,2,3,3,1,4];
// 合并(并集)var d = new Set([...a, ...b]); // {1, 2, 3, 4, 5}
// has是new Set()的私有方法，所以需要将数组new Set()转化
// 相同值(交集)var aa = new Set(a);var bb = new Set(b);// 过滤aa,返回在bb中存在的值var f = new Set([...aa].filter(x => bb.has(x))); // {3}
// 不同值(差集)var aa = new Set(a);var bb = new Set(b);// 过滤aa,返回在bb中不存在的值var g = new Set([...aa].filter(x => !bb.has(x))); // {1,2}
// 配合Array.from()给数组去重var array = Array.from(new Set(c));console.log(array); // [1, 2, 3, 4]

复制代码

四：数组循环

介绍

for()
for in
for of
forEach()
map()
find()
filter()
reduce()
some()
every()
flat()

判断是否存在指定数据

indexOf(data) 不存在则返回 -1
includes(data) 返回 Boolean

1) 使用篇

0. 将要使用的数据

// 公共数组,下面的所有使用的数组都在这里// 普通数组，字符串var arr = ['1','2','3','4','5','6']
// 数字数字，数字var arrNum = [1, 2, 3, 4, 5, 6]
// 对象数组，对象var arrObj = [    {name: '李一', age: '18', sex: '女'},    {name: '不二', age: '22', sex: '男'},    {name: '张三', age: '18', sex: '男'},    {name: '李四', age: '22', sex: '男'},    {name: '王五', age: '15', sex: '女'},    {name: '赵六', age: '28', sex: '男'}]// 对象var form = {    name: '张三',    age: '18',    sex: '男'}

复制代码

1. for 循环

// 将循环的长度(length)缓存，有利于性能// 循环判断并插入到一个数组var testarr = []for(i = 0,length = arr.length; i < length; i++) {  if(arr[i]>4) {        testarr.push(arr[i])    }}// console.log(testarr)  ['5','6']
// 循环判断并跳出循环  使用return将直接跳出循环for (i = 0, length = arr.length; i < length; i++) {  if (arr[i] > 4) {    return arr[i]  }}// 5

复制代码

2. for in 循环

// 使用for in循环这里的i值就是遍历对象的键值(索引)var testarr = []var obj = {}
for(let i in arr) {  obj[i] = arr[i]}console.log(obj)// {0: "1", 1: "2", 2: "3", 3: "4", 4: "5", 5: "6"}
// 也可以遍历对象 你可以用来操作form数据for(let i in arr) {  testarr.push(i)  obj[i] = '处理过的值' + from[i]}console.log(testarr) // ["name", "age", "value"]console.log(obj)// {name: "处理过的值张三", age: "处理过的值18", sex: "处理过的值男"}

复制代码

3. for of 循环

ES6 引入的新的语法，用法与 for in 类同，但是不能遍历对象

不同点:

for of 遍历的是数组的值
for in 遍历的是数组的索引(对象的键值)

// 使用for of循环遍历时这里的i值是数组的值var testarr = []
for(let i in arr) {  testarr.push(i)}console.log(testarr) // ["0", "1", "2", "3", "4", "5"]

复制代码

4. forEach()

不改变原数组，没有返回值，无法中断跳出循环
使用 return 就是 continue，跳过当前代码执行下一个循环，不会中断跳出循环
接受三个参数: 遍历的当前项，当前索引，原始数组
使用中一般不会去加第三项原始数组，前两项就够了

// 接受三个参数:遍历的当前项，当前索引，原始数组var testarr = []arrObj.forEach((item,index,array) => {  testarr.push(item.name)})console.log(testarr)// ["李一", "不二", "张三", "李四", "王五", "赵六"]

复制代码

5. map()

不改变原数组
遍历数组，进行操作，返回操作后的值

// 你甚至可以在map循环里面套forEach()循环const result = arr.map((item,index,array) => {   return item * 2})console.log(result) // [2, 4, 6, 8, 10, 12]

复制代码

6. find()

不改变原数组，返回符合条件的当前项
接受参数与 forEach 相同: item,index,array

// 一般用来查找一个数组中是否有一项存在符合的条件，如果存在则返回该项const result = arrObj.find(item => item.name === '李一')console.log(result) // {name: "李一", age: "18", sex: "女"}

复制代码

7. filter()

不改变原数组，返回过滤后的数组
接受参数与 forEach 相同: item,index,array

// 过滤数组，如果存在则返回过滤后的数组const result = arrObj.filter(item => item.name === '李一')const result2 = arrObj.filter(item => item.sex === '男')
console.log(result)// [{name: "李一", age: "18", sex: "女"}]console.log(result2)/* [    { "name": "不二", "age": "22", "sex": "男" },    { "name": "张三",  "age": "18", "sex": "男" },    { "name": "李四", "age": "22", "sex": "男" },    { "name": "赵六", "age": "28", "sex": "男" }] */

复制代码

8. reduce()

不改变原数组，
默认使用: array.reduce((prev, cur, index, array) => { return prev+ }, init)
接收参数：prev(上一次的返回值), cur(当前值), index(索引), array(元数组), init(初始值)

// 注意这里的数组,数组中的值为字符串var arr = ['1', '2', '3', '4', '5', '6']const result = arr.reduce((prev, cur) => { return prev + cur }, '9')console.log(result) // '9123456'
// var arrNum = [1, 2, 3, 4, 5, 6]// 设置 init初始值为字符串时，则会进行字符串拼接const result2 = arrNum.reduce((prev, cur) => { return prev + cur }, '9')console.log(result2) // '9123456'
// 当初始值也是数字时，会进行累加const result3 = arrNum.reduce((prev, cur) => { return prev + cur }, 9)console.log(result3) // 30
// 当然，你也可以在累加过程中进行一些逻辑判断const result4 = arrNum.reduce((prev, cur) => {     if(true) { ... } else { ... }}, 9)
// 当然，你也可以结合其它方法进行筛选，以下示例仅供参考(根据form值筛选数据)const result5 = arrObj.filter((data) => {    return Object.keys(form).reduce((flag, item) => {      if (!flag) {        return false      } else {        return form[item].trim()          ? String(data[item]).indexOf(form[item]) !== -1          : true      }    }, true)})console.log(result5)// [{name: "张三", age: "18", sex: "男"}]

复制代码

9. some()

遍历数组是否存在满足条件的元素
接受参数: item,index,array

// 如果有一项满足条件，则返回trueconst result = arrNum.some((item,index,array) => {  return item > 3})console.log(result) // true

复制代码

10. every()

遍历数组是否全部满足条件
接受参数: item,index,array

// 如果全部满足条件，则返回true，否则返回falseconst result = arrNum.every((item,index,array) => {  return item > 3})console.log(result) // false

复制代码

11. flat()

遍历展开数组
接受参数: depth, 默认为 1，即只展开一层，使用 Infinity 展开所有层

// 简单使用var arrNum2 = [1, 2,[2,3,4,[4,5]], 3, 4, 5, 6]var result = arrNum2.flat()console.log(result) // [1, 2, 2, 3, 4, [4,5], 3, 4, 5, 6]
var result2 = arrNum2.flat(Infinity)console.log(result2) // [1, 2, 2, 3, 4, 4, 5, 3, 4, 5, 6]
// 结合其它方法一起使用，实现数组去重并排序var result3 = Array.from(new Set(arrNum.flat(Infinity)))var result4 = result2.sort((a,b)=> a-b)console.log(result4) // [1, 2, 3, 4, 5, 6]

复制代码

发布于: 2021 年 04 月 01 日阅读数: 40

原文链接:【http://xie.infoq.cn/article/550e0a5cca428017a879daab0】。文章转载请联系作者。

Chalk

关注

万码皆同源！ 2021.03.28 加入

我有一杯酒，浑浊的佳酿，含工作，含繁琐，含生活!

发布

暂无评论

创作场景

Hi Array!~~~ 你所经常遇见的 TA!

JS 数组操作指南

一：Array 对象属性

二：基础-->Array 数组方法

1.concat()

2. join()

3.pop()

4.push()

5.reverse()

6.shift()

7.unshift()

8.sort()

9.slice()

10.splice()

11.toString()

三：进阶-->数组操作

1.Array.isArray()

2.Array.of()

3.Array.from()

4.new Set()

四：数组循环

介绍

判断是否存在指定数据

1) 使用篇

0. 将要使用的数据

1. for 循环

2. for in 循环

3. for of 循环

4. forEach()

5. map()

6. find()

7. filter()

8. reduce()

9. some()

10. every()

11. flat()

Chalk

评论