1.展开语法

let a1=[1,2,3,'a','b','c'];
let b1=[...a1,'哈哈哈','真好'];
console.log("展开语法:"+b1);//展开语法:1,2,3,a,b,c,哈哈哈,真好

2.解构赋值

let [a2,b2]=['赋值给a2','赋值给b2'];
console.log(`数组解构：${a2}。${b2}`);//数组解构：赋值给a2。赋值给b2let {a22,b22}={'a22':'赋值给a22','b22':'赋值给b22'};
console.log(`对象解构：${a22}。${b22}`);//对象解构：赋值给a22。赋值给b22

3.剩余解构

let [a3,...b3]=['赋值给a3','b3的','还是b3的','还是b3的'];
console.log(`剩余解构：${a3}。${b3}`);//剩余解构：赋值给a3。b3的,还是b3的,还是b3的

4.增删改

//数组后面压入:push
let a4=[1,2,3];
a4.push('压入1','压入2');
console.log(`数组后面压入:${a4}`);//数组后面压入:1,2,3,压入1,压入2//数组后面弹出:pop
let a5=[1,2,3];
a5.pop()
console.log(`数组后面弹出:${a5}`);//数组后面弹出:1,2//数组前面压入:unshift
let a6=[1,2,3];
a6.unshift('压入1','压入2');
console.log(`数组前面压入:${a6}`);//数组前面压入:压入1,压入2,1,2,3//数组前面弹出:shift
let a7=[1,2,3];
a7.shift();
console.log(`数组前面弹出:${a7}`);//数组前面弹出:2,3//数组复制:slice
let a8=[1,2,3];
let b8=a8.slice();//全部复制
let c8=a8.slice(1,2);//左闭右开[1,2)，不传第二个参数时默认复制到最后
console.log(`数组复制a8:${a8}。b8:${b8}`);//数组复制a8:1,2,3。b8:1,2,3
console.log(`数组按需复制:${c8}`);//数组按需复制:2//数组按需增删改：splice(从哪开始删除，删除数量，添加)
let a9=[1,2,3,4,5];
a9.splice(1,2);//从下标为1开始，往后删除2个
console.log(`splice删除：${a9}`);//splice删除：1,4,5let a10=[1,2,3,4,5];
a10.splice(1,2,'好','靓仔','哈好好');//不管后面有多少个，都是要增进去的
console.log(`splice先删后增:${a10}`);//splice先删后增:1,好,靓仔,哈好好,4,5//清空数组
let a11=[1,2,3];
a11=[];//清空
console.log("清空："+a11);

5.合并拆分

//合并：通过什么合并
let a12=[1,'a','还好',2];
//合并后从一个object对象类型变成了一个string字符类型
console.log(`合并:${a12.join('')}`);//合并:1a还好2
console.log(`合并:${a12.join('-')}`);//合并:1-a-还好-2
//拆分：通过什么拆开
let a13="123,abc";
console.log(`拆分：${a13.split(',')}`);//拆分：123,abc,1ac,3cb
console.log(`拆分：${a13.split('c')}`);//拆分：123,ab,,1a,,3,b
//先拆再反转后合并
let a14="123abc";
console.log(`先拆再反转后合并:${a14.split('').reverse().join('-')}`);//先拆再反转后合并:c-b-a-3-2-1

6.查

let a15=[1,2,3,'a','b','c'];//返回元素的下标，查不到返回-1
//从前往后查：indexOf,查找元素出现的位置(就算元素重复，但我查到第一个之后就把它的下标返回，常用于过滤)
console.log("indexOf从前往后查:"+a15.indexOf(3));//indexOf从前往后查:2
console.log("indexOf从前往后查:"+a15.indexOf('b'));//indexOf从前往后查:4
console.log("indexOf从前往后查(第二个参数指定从哪里开始查):"+a15.indexOf('b',3));//indexOf从前往后查(第二个参数指定从哪里开始查):4
console.log("indexOf从前往后查(查不到):"+a15.indexOf(5));//indexOf从前往后查(查不到):-1
//从后往前查：lastIndexOf
console.log("lastIndexOf从后往前查:"+a15.lastIndexOf(3));//lastIndexOf从后往前查:2
console.log("lastIndexOf从后往前查:"+a15.lastIndexOf('b'));//lastIndexOf从后往前查:4
console.log("lastIndexOf从后往前查(第二个参数指定从哪里开始查):"+a15.lastIndexOf('b',3));//lastIndexOf从后往前查(第二个参数指定从哪里开始查):-1
console.log("lastIndexOf从后往前查(查不到):"+a15.lastIndexOf(5));//lastIndexOf从后往前查(查不到):-1//返回布尔值includes，不能查找引用类型比如：对象、数组
console.log("includes返回布尔值："+a15.includes('a'));//includes返回布尔值：true
const a16 = [{ name: "李四" }, { name: "张三" }, { name: "qq" }];
const includes = a16.includes({ name: "qq" });
console.log(includes);//false//返回具体值：find，可以方便的查找引用类型
/*
find()方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，
直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，
如果所有成员都不符合条件，则返回-1。
*/
const a17 = [{ name: "李四" }, { name: "张三" }, { name: "qq" }];
const b17=[1,2,5,6,-2,-3];
const find1 = a17.find(a17 => (a17.name == "张三"));//查找数组对象中名字为"张三"的对象
const find2 = b17.find(b17=> b17 < 0);//查找数组中小于0的第一个值
const find3 = b17.findIndex(b17=> b17 < 0);//查找数组中小于0的第一个值的下标
console.log(find1);//{name: '张三'}
console.log(find2);//-2
console.log(find3);//4

7.排序

let a18 = [1,4,3,6,8];
let lessons = [{ title: "媒体查询响应式布局", click: 78 },{ title: "FLEX 弹性盒模型", click: 12 },{ title: "MYSQL多表查询随意操作", click: 99 }];
console.log("默认从小到大："+a18.sort());//默认从小到大：1,3,4,6,8
//参数一与参数二比较，返回 正数:降序。负数：升序
console.log("正数降序："+a18.sort((a,b) => b-a ));//降序：8,6,4,3,1
console.log("负数升序："+a18.sort((a,b) => a-b ));//升序：1,3,4,6,8
console.log(lessons.sort((a,b) => a.click - b.click ));

8.遍历

let a19 = [{title: '媒体查询响应式布局',category: 'css'},{title: 'FLEX 弹性盒模型',category: 'css'},{title: 'MYSQL多表查询随意操作',category: 'mysql'}];//for循环
let b19=[];
for (let i = 0; i < a19.length; i++) {b19[i]=a19[i].title;//下标也对应起来，相当于浅拷贝了
}
console.log("for循环：");
console.log(b19);//['媒体查询响应式布局', 'FLEX 弹性盒模型', 'MYSQL多表查询随意操作']    //forEach:forEach使函数作用在每个数组元素上，但是没有返回值。
console.log("forEach：");
a19.forEach((item,index,array)=>{//(元素，下标,数组整体本身)console.log(item);/*{title: '媒体查询响应式布局', category: 'css'}{title: 'FLEX 弹性盒模型', category: 'css'}{title: 'MYSQL多表查询随意操作', category: 'mysql'}*/
})//for...in...
console.log("for...in...：");
for(const key in a19){//key为下标索引console.log(key+':'+a19[key].title);/*0:媒体查询响应式布局1:FLEX 弹性盒模型2:MYSQL多表查询随意操作*/
}//for...of...
console.log("for...of...:");
for(const item of a19){//item为元素值console.log(item);/*{title: '媒体查询响应式布局', category: 'css'}{title: 'FLEX 弹性盒模型', category: 'css'}{title: 'MYSQL多表查询随意操作', category: 'mysql'}*/
}

9.迭代

//迭代,通过遍历辅助迭代的执行//获取索引：keysconsole.log("迭代下标索引keys:");const a20 = ["a", "b", "c"];for (const key of a20.keys()) {console.log(key);//0 1 2}//获取值：valuesconsole.log("迭代值values:");for(const item of a20.values()){//其实用了for..of迭不迭代item都是值，values()就没有存在的必要了console.log(item);//a b c}//获取键和值：entriesconsole.log("迭代键值对entries:");for(const [k,v] of a20.entries()){console.log(k,v);/*0 'a'1 'b'2 'c'*/}

10.过滤

filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。 filter 不会改变原数组。

let a21=[1,5,2,5,2,8,12,16];
let b21=a21.filter(item=>item>10);//为true的就把它拿出来let c21=a21.filter((item, index, array)=>{/*indexOf用于查找元素出现的位置，为0 1 2 1 2 5 6 7index为元素下标，为0 1 2 3 4 5 6 7*/return array.indexOf(item) === index;//数组去重});console.log(b21);//[12, 16]console.log(c21);//[1, 5, 2, 8, 12, 16]

11.源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>/* 展开语法 */let a1=[1,2,3,'a','b','c'];let b1=[...a1,'哈哈哈','真好'];console.log("展开语法:"+b1);//展开语法:1,2,3,a,b,c,哈哈哈,真好/* 解构赋值 */let [a2,b2]=['赋值给a2','赋值给b2'];console.log(`数组解构：${a2}。${b2}`);//数组解构：赋值给a2。赋值给b2let {a22,b22}={'a22':'赋值给a22','b22':'赋值给b22'};console.log(`对象解构：${a22}。${b22}`);//对象解构：赋值给a22。赋值给b22/* 剩余解构 */let [a3,...b3]=['赋值给a3','b3的','还是b3的','还是b3的'];console.log(`剩余解构：${a3}。${b3}`);//剩余解构：赋值给a3。b3的,还是b3的,还是b3的/* 增删改查、排序、过滤、迭代 *///数组后面压入:pushlet a4=[1,2,3];a4.push('压入1','压入2');console.log(`数组后面压入:${a4}`);//数组后面压入:1,2,3,压入1,压入2//数组后面弹出:poplet a5=[1,2,3];a5.pop()console.log(`数组后面弹出:${a5}`);//数组后面弹出:1,2//数组前面压入:unshiftlet a6=[1,2,3];a6.unshift('压入1','压入2');console.log(`数组前面压入:${a6}`);//数组前面压入:压入1,压入2,1,2,3//数组前面弹出:shiftlet a7=[1,2,3];a7.shift();console.log(`数组前面弹出:${a7}`);//数组前面弹出:2,3//数组复制:slicelet a8=[1,2,3];let b8=a8.slice();//全部复制let c8=a8.slice(1,2);//左闭右开[1,2)，不传第二个参数时默认复制到最后console.log(`数组复制a8:${a8}。b8:${b8}`);//数组复制a8:1,2,3。b8:1,2,3console.log(`数组按需复制:${c8}`);//数组按需复制:2//数组按需增删改：splice(从哪开始删除，删除数量，添加)let a9=[1,2,3,4,5];a9.splice(1,2);//从下标为1开始，往后删除2个console.log(`splice删除：${a9}`);//splice删除：1,4,5let a10=[1,2,3,4,5];a10.splice(1,2,'好','靓仔','哈好好');//不管后面有多少个，都是要增进去的console.log(`splice先删后增:${a10}`);//splice先删后增:1,好,靓仔,哈好好,4,5//清空数组let a11=[1,2,3];a11=[];//清空console.log("清空："+a11);//合并拆分//合并：通过什么合并let a12=[1,'a','还好',2];//合并后从一个object对象类型变成了一个string字符类型console.log(`合并:${a12.join('')}`);//合并:1a还好2console.log(`合并:${a12.join('-')}`);//合并:1-a-还好-2//拆分：通过什么拆开let a13="123,abc";console.log(`拆分：${a13.split(',')}`);//拆分：123,abc,1ac,3cbconsole.log(`拆分：${a13.split('c')}`);//拆分：123,ab,,1a,,3,b//先拆再反转后合并let a14="123abc";console.log(`先拆再反转后合并:${a14.split('').reverse().join('-')}`);//先拆再反转后合并:c-b-a-3-2-1//查let a15=[1,2,3,'a','b','c'];//返回元素的下标，查不到返回-1 //从前往后查：indexOf,查找元素出现的位置(就算元素重复，但我查到第一个之后就把它的下标返回，常用于过滤)console.log("indexOf从前往后查:"+a15.indexOf(3));//indexOf从前往后查:2console.log("indexOf从前往后查:"+a15.indexOf('b'));//indexOf从前往后查:4console.log("indexOf从前往后查(第二个参数指定从哪里开始查):"+a15.indexOf('b',3));//indexOf从前往后查(第二个参数指定从哪里开始查):4console.log("indexOf从前往后查(查不到):"+a15.indexOf(5));//indexOf从前往后查(查不到):-1//从后往前查：lastIndexOfconsole.log("lastIndexOf从后往前查:"+a15.lastIndexOf(3));//lastIndexOf从后往前查:2console.log("lastIndexOf从后往前查:"+a15.lastIndexOf('b'));//lastIndexOf从后往前查:4console.log("lastIndexOf从后往前查(第二个参数指定从哪里开始查):"+a15.lastIndexOf('b',3));//lastIndexOf从后往前查(第二个参数指定从哪里开始查):-1console.log("lastIndexOf从后往前查(查不到):"+a15.lastIndexOf(5));//lastIndexOf从后往前查(查不到):-1//返回布尔值includes，不能查找引用类型比如：对象、数组console.log("includes返回布尔值："+a15.includes('a'));//includes返回布尔值：trueconst a16 = [{ name: "李四" }, { name: "张三" }, { name: "qq" }];const includes = a16.includes({ name: "qq" });console.log(includes);//false//返回具体值：find，可以方便的查找引用类型/*find()方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。*/const a17 = [{ name: "李四" }, { name: "张三" }, { name: "qq" }];const b17=[1,2,5,6,-2,-3];const find1 = a17.find(a17 => (a17.name == "张三"));//查找数组对象中名字为"张三"的对象const find2 = b17.find(b17=> b17 < 0);//查找数组中小于0的第一个值const find3 = b17.findIndex(b17=> b17 < 0);//查找数组中小于0的第一个值的下标console.log(find1);//{name: '张三'}console.log(find2);//-2console.log(find3);//4//排序sortlet a18 = [1,4,3,6,8];let lessons = [{ title: "媒体查询响应式布局", click: 78 },{ title: "FLEX 弹性盒模型", click: 12 },{ title: "MYSQL多表查询随意操作", click: 99 }];console.log("默认从小到大："+a18.sort());//默认从小到大：1,3,4,6,8//参数一与参数二比较，返回 正数:降序。负数：升序console.log("正数降序："+a18.sort((a,b) => b-a ));//降序：8,6,4,3,1console.log("负数升序："+a18.sort((a,b) => a-b ));//升序：1,3,4,6,8console.log(lessons.sort((a,b) => a.click - b.click ));//遍历let a19 = [{title: '媒体查询响应式布局',category: 'css'},{title: 'FLEX 弹性盒模型',category: 'css'},{title: 'MYSQL多表查询随意操作',category: 'mysql'}];//for循环let b19=[];for (let i = 0; i < a19.length; i++) {b19[i]=a19[i].title;//下标也对应起来，相当于浅拷贝了}console.log("for循环：");console.log(b19);//['媒体查询响应式布局', 'FLEX 弹性盒模型', 'MYSQL多表查询随意操作']    //forEach:forEach使函数作用在每个数组元素上，但是没有返回值。console.log("forEach：");a19.forEach((item,index,array)=>{//(元素，下标,数组整体本身)console.log(item);/*{title: '媒体查询响应式布局', category: 'css'}{title: 'FLEX 弹性盒模型', category: 'css'}{title: 'MYSQL多表查询随意操作', category: 'mysql'}*/})//for...in...console.log("for...in...：");for(const key in a19){//key为下标索引console.log(key+':'+a19[key].title);/*0:媒体查询响应式布局1:FLEX 弹性盒模型2:MYSQL多表查询随意操作*/}//for...of...console.log("for...of...:");for(const item of a19){//item为元素值console.log(item);/*{title: '媒体查询响应式布局', category: 'css'}{title: 'FLEX 弹性盒模型', category: 'css'}{title: 'MYSQL多表查询随意操作', category: 'mysql'}*/}//迭代,通过遍历辅助迭代的执行//获取索引：keysconsole.log("迭代下标索引keys:");const a20 = ["a", "b", "c"];for (const key of a20.keys()) {console.log(key);//0 1 2}//获取值：valuesconsole.log("迭代值values:");for(const item of a20.values()){//其实用了for..of迭不迭代item都是值，values()就没有存在的必要了console.log(item);//a b c}//获取键和值：entriesconsole.log("迭代键值对entries:");for(const [k,v] of a20.entries()){console.log(k,v);/*0 'a'1 'b'2 'c'*/}//过滤//filter/*filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。filter 不会改变原数组。*/console.log("过滤器：");let a21=[1,5,2,5,2,8,12,16];let b21=a21.filter(item=>item>10);//为true的就把它拿出来let c21=a21.filter((item, index, array)=>{/*indexOf用于查找元素出现的位置，为0 1 2 1 2 5 6 7index为元素下标，为0 1 2 3 4 5 6 7*/return array.indexOf(item) === index;//数组去重});console.log(b21);//[12, 16]console.log(c21);//[1, 5, 2, 8, 12, 16]</script>
</body>
</html>

参考资料：https://doc.houdunren.com/js/4%20%E6%95%B0%E7%BB%84%E7%B1%BB%E5%9E%8B.html

js中数组的增删改查遍历迭代过滤相关推荐

JS-9 JS常见内置类；包装类型；Number类方法与实例方法；Math方法；String类常见方法；数组方法(增删改查+遍历+排序)；时间Date 构造函数+获取信息+设置信息+获取Unix时间戳
目录 1_包装类型 2_Number类补充 3_Math对象 4_String类的补充 4.1_基本使用 4.2_修改字符串 4.3_查找.替换字符串开头与结尾 4.4_获取子字符串 4.5_其他方 ...
JavaScript中数组的增删改查以及应用方式
数组的增加方法 1.push()方法向数组中末尾添加一个元素,原数组改变 var arr=[1,2,3,4];var arr1=arr.push(6);console.log(arr);//打印出来是 ...
数组的增删改查原理（原生JS）
数组的增删改查(原生JS) var Arr = [1, 2, 3, 4, 5, 6]; 查 //查直接遍历数组,这里分别遍历一维数组和二位数组:// 一维数组for (var i = 0; i &l ...
java中的数组增删查改操作,java数组实现增删改查
java 实现动态数组,Java工具类Arrays中不得不知的常用方法,数组实现队列java,java数组实现增删改查 java 增删改查代码 import java.sql.Connection; ...
对表格实现修改查询html,【原生】js实现表格的增删改查
说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...
kotlin——数组（增删改查）、haspMap（增删改查过滤）、for中断continue
一.数组的增删改查 1.数组遍历(查) val array: Array<String> = Array(5) { (it * 10).toString() } // 下标for (ite ...
Js实现简易的增删改查
Js实现简易的增删改查用JavaScript实现简单增删改查工作,这个应该是多数Js初学者都比较棘手的一个问题在下面我给大家写了一个简单的案例,该案例中没有实现增加操作,大家可以自己探索一下 ht ...
Java中的sqlsession_java相关：MyBatis中SqlSession实现增删改查案例
java相关:MyBatis中SqlSession实现增删改查案例发布于 2020-6-13| 复制链接摘记: 前言开博客这是第一次写系列文章,从内心上讲是有点担心自己写不好,写不全,毕 ...
JavaScript 对象增删改查 + 遍历对象+内置函数 + 随机对象
red red 1.什么是对象? 对象是JavaScript 里的一种数据类型:可以理解为是一种无序的数据集合:用来描述某个事物,例如描述一个人信息 2.对象怎么声明? let 对象名 = {} 例如 ...

js中数组的增删改查遍历迭代过滤

js中数组的增删改查、排序、遍历、迭代、过滤