js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...
1、给对象添加属性:使用 object.prop 或object['prop'] 给对象添加属性
let obj={};obj.name="zhangsan";obj["age"]=23;obj["class"]="语文";console.log(obj); //输出:{name: "zhangsan", age: 23, class: "语文"}
2、删除对象属性:使用 delete 删除对象属性
let obj={name:"xiaohua",age:22};
delete obj.name;
delete obj["age"];
console.log(obj); //输出:{}
注意::在循环中删除对象属性时候会报错!!!待补充
3、对象合并:使用jquery的 $.extend(obj01,obj02)合并多个对象
let obj01={'a':1,'b':2};
let obj02={'c':3,'d':4,'e':5};
$.extend(obj01,obj02);
console.log(obj01); //输出:{a: 1, b: 2, c: 3, d: 4, e: 5} ,被合并到第一个参数obj01对象中
console.log(obj02); //输出:{c: 3, d: 4, e: 5} ,未改变obj02let obj03=$.extend({},obj01,obj02); //不会改变obj1,obj2
console.log(obj03); //输出:{a: 1, b: 2, c: 3, d: 4, e: 5}
4、对象合并:使用 Object.assign(o1,o2) 方法
let o1={a:'a',b:'b'};
let o2={c:'c',d:'d'};
let o3=Object.assign(o1,o2);
console.log(o3); //输出:{a: "a", b: "b", c: "c", d: "d"}
console.log(o1); //输出:{a: "a", b: "b", c: "c", d: "d"} ,合并后第一个对象也会改变
console.log(o2); //输出:{c: "c", d: "d"},合并后未改变
5、遍历对象键、属性值:使用 for(变量 in 对象) 的形式遍历对象属性名
let obj001={name:'tom',age:26};
for(let key in obj001){console.log(key+":"+obj001[key]); //输出:name:tom和age:26 ,key就是属性名(键)
}
console.log(Object.keys(obj001)); //Object.keys(o1)方法数组形式返回o1对象的所有属性名(键)
//Object.keys(obj001)方法获取的是对象实例属性组成的数组,不包括原型方法和属性!!!!
注意:for...in...遍历的是数组或对象的索引值index,而for...of...遍历的是数组的元素值;
6、遍历数组:使用 for(变量 in 数组) 的形式遍历数组
let arr01=[12,22,32,42];
let arr02=new Array(12,22,32,42); //使用Array构造函数创建数组
let arr03=new Array(5); //创建一个包含5项的数组
for(let index in arr01){ //index是数组下标,for..in..遍历所有索引项console.log(index+":"+arr01[index]); //输出:0:12 1:22 2:32 3:42
}
注意:for...in...更适合遍历对象,for...of...更适合遍历数组值
for in 遍历数组会存在一些问题,如下:
Array.prototype.method=function(){ //原型方法console.log(this.length);
}
var myArray=[1,2,4,5,6,7]
myArray.name="数组"
for (var index in myArray) {console.log(myArray[index]);
}
//使用for in会遍历数组所有的可枚举属性,包括原型。例如上栗的原型方法method和name属性
//问题二:遍历顺序有可能不是按照实际数组的内部顺序
for in 遍历对象时候可以通过hasOwnPropery方法可以判断某属性是否是该对象的实例属性,如下:
for (var key in myObject) {if(myObject.hasOwnProperty(key)){console.log(key);}
}
或者ES5的Object.keys(myObject)获取对象的实例属性组成的数组,不包括原型方法和属性。
Object.prototype.method=function(){console.log(this);
}
var myObject={a:1,b:2,c:3
}
Object.keys(myObject).forEach(function(key,index){<br> console.log(key,myObject[key])<br>})
6、遍历数组:使用 for(元素 of 数组) 的形式遍历数组
let arr01=[12,22,32,42];
for(let ele of arr01){ //for遍历所有的ele元素项console.log(ele); //输出:12 22 32 42
}
7、forEach遍历数组:使用 forEach(元素 of 数组) 的形式遍历数组,使用如下:
//forEach(fn)方法将对数组中的每一个元素执行一次该fn匿名函数,其中ele是当前元素,index是当前元素的索引值,arr是原数组;
//匿名函数中的this指向window;
//forEach()方法无返回,是undefined;let arr01=['hello','world'];
arr01.forEach(function(ele,index,arr){ console.log(index); console.log(ele);console.log(this); console.log(arr);//arr[1]="tom"; //可以通过索引对数组元素值进行修改}); //两次分别输出:0 hello window ['hello','world','tom']; 1 world window ['hello','world','tom'];
console.log(arr01); //输出:['hello','world','tom'],所以forEach()并不会改变原数组
8、 map遍历数组:使用 map(function(ele,index,arr){ return XXX;}) 的形式遍历数组,使用如下:
//arr.map()中的匿名函数中的参数ele、index、arr分别表示遍历数组时当前对象元素、当前索引值、原有数组;
//arr.map()会返回一个新的数组,但不改变原有数组;方法中的this指向window;
//arr.map() 和arr.forEach()方法都不会对空数组进行执行;
//map()方法浏览器支持:ie9+ Safari1.5+let oldArr=[1,2,3];
let newArr=oldArr.map(function(ele,index,arr){console.log("原有数组元素"+index+":"+ele+"/"+arr[index]);console.log(this);return ele*2;
});
console.log(newArr); //输出:[2, 4, 6]let arr1=[];
let newArr1=arr1.map(function(){return ele;
})
console.log("空数组使用map方法:"+newArr1); //输出为:空数组使用map方法:
注意:forEach() 和 map() 以及 filter() 方法只能遍历数组;
9、 filter遍历数组:使用 filter(fn) 方法过滤 数组中的每一项,返回满足条件的项组成新的数组
//filter()不改变原有数组,返回符合过滤条件的项并组成新的数组;方法中的this指向window;
let arr1=[1,2,3,4,5,6,7,8,9,10];
let newArr=arr1.filter(function(ele,index,arr){//console.log(this);return ele%3==0 &&ele>5;
});
console.log(arr1); //输出:[1,2,3,4,5,6,7,8,9,10]
console.log(newArr); //输出:[6,9]
10、js数组 push() 方法:使用 arr.push(ele) 方法在数组尾部添加一个或多个元素,并返回新的长度
let arr1=[1,2,3];
let b=arr1.push(55,66);
console.log(arr1); //输出:[1,2,3,55,66] 元素被添加到数组尾部
console.log(b); //输出:5 ,返回的是新的长度
11、js数组 pop() 方法:使用 arr.pop() 方法删除数组尾部元素,并返回被删除的元素
let arr1=[0,2,4,6];
let b=arr1.pop();
console.log(arr1); //输出:[0,2,4]
console.log(b); //输出:6
12、js数组 unshift() 方法:使用 arr.unshift() 方法在数组开头添加一个或多个元素,并返回新的长度
let arr1=[0,2,4,6];
let b=arr1.unshift(77,88);
console.log(arr1); //输出:[77,880,0,2,4,6]
console.log(b); //输出:6
13、js数组 shift() 方法:使用 arr.shift() 方法删除并返回数组的第一个元素
let arr1=[0,2,4,6];
let b=arr1.shift();
console.log(arr1); //输出:[2,4,6]
console.log(b); //输出:0
14、js数组 slice() 方法:使用 arr.slice(index1,index2) 方法获取数组开始下标到结束下标之间的元素组成一个新的数组
let arr1=[0,2,4,6,8];
let b=arr1.slice(2,4);
let c=arr1.slice(2);
console.log(arr1); //输出:[0,2,4,6,8]
console.log(b); //输出:[4,6] //包括起始下标对应的元素,不包括结束下标对应的元素
console.log(c); //输出:[4,6,8] //获取数组指定下表后的数据并返回新的结果数组
15、js数组 splice() 方法:使用 splice(start,deleteCount,val1,val2)方法从start位置开始删除deleteCount项,再插入值val1、val2 ,并返回删除的数组
let arr1=[66,22,33,4,55,11];
let b=arr1.splice(1,2,111,222); //所以这里删除了22和33,接着添加了111和2222
console.log(arr1); //输出:[66,111,222,4,55,11]
console.log(b); //输出:[22,33] //返回了删除的数组
16、js数组 concat()合并 方法:使用 arr.concat(arr1,arr2) 方法合并两个或更多的数组,并返回合并后的结果数组。
let arr1=[1,22,33,44,55];
let arr2=[100,200]
let d=arr1.concat(88,arr2);
console.log(d); //输出:[1,22,33,44,55,88,100,200]
console.log(arr1); //输出:[1,22,33,44,55] 不改变原来的数组
console.log(arr2); //输出:[100,200] 不改变原来的数组
17、js数组 join()合并 方法:使用 arr.join(separator) 方法将数组的所有项通过separator拼接成一个字符串
let arr1=['hello','every','body'];
let m=arr1.join('--');
console.log(m); //输出:hello--every--body
console.log(arr1); //原数组不变
18、js数组 sort()排序方法:使用 arr.sort() 方法会将数组的所有项toString()转型成字符串,所以sort方法比较的是字符串,所以会出现3>13的错误如下,所以这里使用函数作为参数来调用解决问题
let arr1=[1,22,13,52,3];
let m=arr1.sort();
console.log(m); //输出:[1, 13, 22, 3, 52],比较的是字符串大小let n=arr1.sort(function(a,b){return a-b;});
console.log(n); //升序输出:[1, 3, 13, 22, 52],所以这里使用函数作为参数来调用let arr2=[1,22,13,52,3];
let k=arr2.sort(function(a,b){return b-a;});
console.log(k); //降序输出:[52, 22, 13, 3, 1]
let arr1=["hello","world","tom"];
let m=arr1.sort();
console.log(m); //输出:["hello", "tom", "world"],可以字符串排序
console.log(arr1); //输出:["hello", "tom", "world"],原数组改变
19、js数组 reverse()反转方法:使用 arr.reverse() 方法反转数组所有元素项的顺序
let arr1=["hello","world","tom"];
let m=arr1.reverse();
console.log(m); //输出:["tom", "world", "hello"]
console.log(arr1); //输出:["tom", "world", "hello"], 原数组改变
20、js数组 indexOf() 搜索位置方法:使用 arr.indexOf() 方法返回数组中指定元素所在位置,从数组开头往结尾查找
let arr1=["hello","world","tom","world"];
let m=arr1.indexOf("world");
let n=arr1.indexOf("world",1); //第二个参数是可选参数,表示开始查找第一个参数的起点位置,返回从1的位置后第一次出现‘world’所在的位置
let k=arr1.lastIndexOf("hello",1); //从前往后查找,表示从数组的第二个元素开始查找‘hello’的位置
let j=arr1.lastIndexOf("Jane"); //没有找到将返回-1
console.log(m); //输出:1
console.log(n); //输出:1
console.log(k); //输出:0
console.log(j); //输出:-1
console.log(arr1); //输出:["hello","world","tom","world"],原数组没有改变
21、js数组 lastIndexOf() 搜索位置方法:使用 arr.lastIndexOf() 方法返回数组中指定元素最后出现的位置,也就是最后一个该元素的位置
let arr1=["hello","world","tom","world"];
let m=arr1.lastIndexOf("tom");
let n=arr1.lastIndexOf("world");
let k=arr1.lastIndexOf("Jane");
console.log(m); //输出:2
console.log(n); //输出:3
console.log(k); //输出:-1 ,没找到返回-1
console.log(arr1); //输出:["hello","world","tom","world"],原数组没有改变
22、js数组 every() 方法:使用 arr.every() 方法检测数组元素的每个元素是否都符合条件。所有元素都符合条件则返回true
let arr1=[1,3,5,6,8];
let m=arr1.every(function(ele){return ele<10;
});
console.log(m); //输出:true
console.log(arr1); //原数组没有改变
23、js数组 some() 方法:使用 arr.some() 方法检测数组元素中是否有任意元素符合指定条件。任意元素符合条件则返回true
let arr1=[1,3,25,6,8];
let m=arr1.some(function(ele){return ele>10;
});
console.log(m); //输出:true
console.log(arr1); //原数组没有改变
24、js检查对象是不是数组:使用 Array.isArray(arr1) 方法 。arr1 instanceof Array==true 和 arr1..constructor === Array来判定,在多个frame中来回穿梭时存在漏洞,因为每个iframe都有一套自己的执行环境,跨frame实例化的对象彼此是不共享原型链的
let arr01 = [2,4,6,8];
console.log(Array.isArray(arr01)); //输出:true ,该方法支持ie9+
//toString() 方法可把数组转换为字符串,并返回结果。元素之间用逗号连接//最佳写法如下:
let arr = [1,2,3,1];
let arr2 = [{ abac : 1, abc : 2 }];
function isArrayFn(value){if (typeof Array.isArray === "function") {return Array.isArray(value);}else{return Object.prototype.toString.call(value) === "[object Array]";}
}
alert(isArrayFn(arr));// true
alert(isArrayFn(arr2));// true
25、js数组 fill() 方法:使用 arr.fill() 方法是使用固定值来填充数组指定位置元素。类似于全体替换,浏览器ie12+支持
let arr1=['hello','every','body','Tom','Jane'];
arr1.fill('fun',1,3); //arry.fill(value,start,end)的三个参数分别表示填充的值、填充起始的位置、填充结束的位置
console.log(arr1); //输出:["hello", "fun", "fun", "Tom", "Jane"]
25、js数组 includes() 方法判断一个数组是否包含指定的元素;js数组 find(function(){}) 方法返回符合传入测试(函数)条件的数组元素中的第一个元素。但是浏览器支持都要求较高,这里不细说
js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...相关推荐
- JS判断对象是否为空的方法大全
JS判断对象是否为空的方法大全 1.将json对象转化为json字符串,再判断该字符串是否为"{}" var data = {}; var b = (JSON.stringify( ...
- 遍历对象属性_细说JS遍历对象属性的N种方法
本人详细介绍了JS遍历对象N种方法,欢迎关注收藏. 遍历对象属性有五种方法,下图为一个场景对比图. 可以注意到两点: 只有for ... in 才可以遍历原型链属性,且只能遍历可枚举属性. Objec ...
- js 数组去重的方法大全
1.使用双重for循环,再利用数组的splice方法去重(ES5常用) let arr = [1, 5, 6, 0, 7, 3, 0, 5, 9, 5]; function unique(arr) { ...
- js更改对象中属性名的方法
数据格式如下: let arr = [{"id": 275,"name": "测试公司","userList": [{& ...
- 24.1 传统集合的多步遍历代码、Stream流更优写法与stream、forEach、filter、count、limit、skip、concat方法、静态方法:tream.of()
目录 1 传统集合的多步遍历代码 2 Stream的更优写法 3 Stream流 3.1 Stream流:获取流 列:单列集合.双列集合.数组获取stream流 3.2 Stream流中的常用方法:f ...
- ES5(三)——数组新增函数every()、some()、map()、foreach()、filter()和reduce()汇总
文章目录 一.every() 二.some() 三.foreach() 四.map() 映射/对应 五.filter() 六.reduce汇总 一.every() 专门判断一个数组中是否所有元素都符合 ...
- js根据对象中属性删除数组中对象
list.forEach((value,index)=>{if(value.content==content){list.splice(index,1)} })
- js判断对象类型的两种方法
在js 中 , 有一种判断数据基本类型的方法 typeof , 只能判断5中基本类型:即 "number","string","undefined&q ...
- js删除对象空属性值的方法
1.删除对象空属性值 正常情况下,拿到的数据是{01:["鹿晗","关晓彤"]} 但当用户更改选项之后,我们可能拿到数据就是{01:[]},01的属性值是空的, ...
最新文章
- Thinkphp --- 去掉index.php
- oracle 游标中抛出异常的处理方式
- 南京邮电大学网络攻防训练平台(NCTF)-异性相吸-Writeup
- MATLAB实战系列(十二)-如何用人工鱼群算法解决带时间窗车辆路径(CVRP)问题(附MATLAB代码)
- 网络:http请求之几种常见技术
- python soup findall 第几个元素_python – 如何在BeautifulSoup中获取所有父标签的列表?...
- 11相机不流畅_小米11有望本月发布,小米10退位让贤,256GB版本跌至3799
- Linux软件 github,Linux下使用GitHub记
- mysql查看脚本错误位置_记一次mysql启动不了查找经历
- 为什么我们放弃了微服务?
- 排列组合计算问题中的卡塔兰数(Catalan Number)
- 六自由度机械手正逆运动学
- 中文和英语中主语、谓语、宾语、定语、状语、补语的定义
- amd一键超频怎么用_AMD Ryzen小白说明书——CPU超频篇
- 浏览器默认首页被360导航篡改解决办法
- 做一个共享浏览器,把seesion克隆到异地实出1号多开(情报通、微信、生意参谋、火币网、腾讯邮箱亲测有效)不是大牌浏览器不敢用!
- 最新ChatGPT商业运营版网站源码+支持AI绘画+支持用户会员套餐+邀请分佣功能+支持后台一键更新+网站后台管理+永久更新!
- 数据库与身份认证:数据库的基本概念
- 汉语编程能给我们带来什么?
- (一)ssh远程连接服务器GPU以及其他GPU使用途径——新手指南
热门文章
- linux php任务计划,linux系统怎么添加计划任务执行php文件
- k8s安装sqlite3_kubernetes环境部署单节点redis数据库的方法
- [转载] java虚拟机 jvm 出入java栈 栈空间内存分配
- ADBB的完整形式是什么?
- Java ObjectInputStream readUnsignedShort()方法(带示例)
- kotlin中既继承又实现_Kotlin程序| 解决继承中的主要冲突的示例
- android开发自动提示框,Android 多种简单的弹出框样式设置代码
- net发布的dll方法和类显示注释信息(字段说明信息)[图解]
- Python操作mySql数据库封装类
- c语言如何把void换成汉字,有没有大佬帮我把这个代码改成void函数形式的代码。拜托了!...