JavaScript 数组& map&object

参考：https://blog.csdn.net/Dark_programmer/article/details/104703072

一、数组的方法

数组在js中经常用于保存数据，是操作频率非常高的数据类型，js也提供了很多方法来对数组进行操作。下面介绍常用的方法。

join()、push()、pop()、shift() 、 unshift()、sort()、reverse()、concat()、slice()、splice()、indexOf()、 lastIndexOf()、forEach() 、map() 、filter() 、every() 、some()

下面详细介绍一下各个方法的基本功能：

1、join() 将数组的元素组起一个字符串

原数组不会发生改变

join(separator): 将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。

var arr = [1,2,3];
console.log(arr.join()); // 1,2,3
console.log(arr.join("-")); // 1-2-3
console.log(arr); // [1, 2, 3]（原数组不变）

通过join()方法可以实现重复字符串，只需传入字符串以及重复的次数，就能返回重复后的字符串，函数如下：

function repeatString(str, n) {
return new Array(n + 1).join(str);
}
console.log(repeatString(“abc”, 3)); // abcabcabc
console.log(repeatString(“Hi”, 5)); // HiHiHiHiHi

2、push()和pop() 原数组会发生改变

push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。 pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。（取数组最后一位，原数组长度减少，并返回取除的项）

var arr = ["Lily","lucy","Tom"];
var count = arr.push("Jack","Sean");
console.log(count);       // 5
console.log(arr);         // ["Lily", "lucy", "Tom", "Jack", "Sean"]
var item = arr.pop();
console.log(item);       // Sean
console.log(arr);        // ["Lily", "lucy", "Tom", "Jack"]

3、shift() 和 unshift() 原数组会发生改变

shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。（对比 pop() 删除最后一项） unshift:将参数添加到原数组开头，并返回数组的长度 。（对比push() 添加末尾）

这组方法和上面的push()和pop()方法正好对应，一个是操作数组的开头，一个是操作数组的结尾。

var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count); 　　　　　　　　// 5
console.log(arr); 　　　　　　　　　//["Jack", "Sean", "Lily", "lucy", "Tom"]
var item = arr.shift();
console.log(item); 　　　　　　　　// Jack
console.log(arr); 　　　　　　　　 // ["Sean", "Lily", "lucy", "Tom"]

4、sort() 原数组会发生改变

sort()：对数组内的数据进行排序(默认为升序)，并且返回排过序的新数组。 注意：

4.1：这里的排序是针对字符的排序，先使用数组的toString()方法转为字符串，再逐位比较，3是大于12的，因为首位3>1，不要与Number型的数据排序混淆

4.2：str2数组中增加了三个字符，可以看到，比较的时候，zoom是最大的，因为首位的英文字母通过ASCII码可以转为相应的数值，再根据数值比较

var str1 = [12,2,43,5,2,5];
var str2 = [92,2,43,"hello",5,2,5];
console.log(str1.sort());　　　　　　　　//[12, 2, 2, 43, 5, 5]
console.log(str1);　　　　　　　　　　　　//[12, 2, 2, 43, 5, 5]
console.log(str2.sort());　　　　　　　　//[2, 2, 43, 5, 5, 92, "abc", "hello", "zoom"]
console.log(str2);　　　　　　　　　　　　//[2, 2, 43, 5, 5, 92, "abc", "hello", "zoom"]

4.3：排序问题

参数：sort(callback) 如果需要按照数值排序，需要传参。sort(callback)，callback为回调函数，该函数应该具有两个参数，比较这两个参数，然后返回一个用于说明这两个值的相对顺序的数字（a-b）。其返回值如下：

• 若 a 小于 b，返回一个小于 0 的值。
• 若 a 等于 b，则返回 0。
• 若 a 大于 b，则返回一个大于 0 的值。

var str3 = [92,2,43,5,2,5];     
console.log(str3.sort(fn));　　　　　 　　//[2, 2, 5, 5, 43, 92]
console.log(str3);　　　　　　　　　　　　 //[2, 2, 5, 5, 43, 92]
function fn (a,b){
　　　　return a-b;
 }

5、reverse() 原数组会发生改变

reverse()将：数组的数据进行反转，并且返回反转后的数组

var str1 = [12,2,"hello"];
console.log(str1.reverse());　　　　　　//["hello", 2, 12]
console.log(str1);　　　　　　　　　　　　//["hello", 2, 12]

6、concat() 合并数组

原数组不会发生改变

concat()：合并数组，可以合并一个或多个数组，会返回合并数组之后的数据（返回一个新数组）

var str1 = [12,2,"hello"];
var str2 = ["world"];
console.log(str1.concat(str2));　　　　　　　　//[12, 2, "hello", "world"]
console.log(str1);　　　　　　　　　　　　　　　　//[12,2,"hello"];

数组合并的几种方法：https://blog.csdn.net/dengsu9193/article/details/102365755

• concat

• for循环

for(var i in b){
  a.push(b[i]);
}

• apply

a.push.apply(a,b);

// 案例
a.push.apply(a,[4,5,6]);
//然后上面的操作就等同于：
a.push(4,5,6);

7、slice() 截取指定位置的数组

原数组不会发生改变（倾向于从从数组中取数，不改变原数组）

音标：[slaɪs]

slice()：截取指定位置的数组，并且返回截取的数组，不会改变原数组（返回一个新数组）

• 参数：slice(startIndex, endIndex)

该方法有两个参数start和 end。start为必选，表示从哪里开始；end为可选，表示截取到第几位, (含头不含尾),不写则表示到最后。

start和end都可以为负数，负数时表示从最后一位开始算起，如-1表示最后一位。

var arr = ["T1","J1","L1","L2","M1"];
    console.log(arr.slice(1,3));        //["J1","L1"]
    console.log(arr.slice(1));          //["J1","L1","L2","M1"] // 截取第一位，并且重新返回一个新数组，原数组不变
    console.log(arr.slice(-4,-1));      //["J1","L1","L2"]
    console.log(arr.slice(-2));         //["Lily","M1"]
    console.log(arr.slice(1,-2));       //["J1","L1"]
    console.log(arr);                   //["T1","J1","L1","L2","M1"]

8、splice() 删除\添加\替换

数组下标是从0开始，start 对应的是 当前位置之前

原数组会发生改变

splice()：向数组中添加，或从数组删除，或替换数组中的元素，然后返回被删除/替换的元素。

参数：splice(start,num,data1,data2,…); 所有参数全部可选。

• start代表开始的位置，在下标为 start 的地方进行操作；（注意下标是从0开始的）
• num为0代表着要在此处插入数据； 非0代表着替换相应长度的数据
• data1，data2 ...代表着要插入的数据，或要替换成的数据

// 插入数据
var arr = ["Tom","Jack","Lucy","Lily","May"];    
console.log(arr.splice(2,0,"a","b"));  //[]   // 数组下标是从0开始的，2表示，表示插入在第三位之前
console.log(arr);    //["Tom", "Jack", "a", "b", "Lucy", "Lily", "May"]---原数组改变
// 替换数据
var arr = ["Tom","Jack","Lucy","Lily","May"]; 
arr.splice(2,1,'push')
console.log(arr)  //["Tom", "Jack", "push", "Lily", "May"]
// 删除数据
var arr = ["Tom","Jack","Lucy","Lily","May"]; 
arr.splice(2,2)
console.log(arr)    //["Tom", "Jack", "May"]

具体使用

场景：父选框操作 （angularjs 复选框）

<label  ng-repeat="lineType in workLineTypeList">
	      	 	<input type="checkbox"    ng-model="lineType.checked"      ng-click="so($event,'{{lineType.type}}',lineType)"  />
				<span  >{{lineType.name}}</span>
			</label>
<script>
//识别项目 复选框 自定义事件
	$scope.selecteds=[];
	$scope.so=function($event,id,o){
		var checkbox = $event.target;
		var action = (checkbox.checked?'add':'remove');
		$scope.updateSelected(action,id,checkbox.name);
	}
	$scope.updateSelected = function(action,id,name){
		if(action == 'add' && $scope.selecteds.indexOf(id) == -1){
			$scope.selecteds.push(id); 
		}
		//========================暂时不能用=========================
//		else{
//		     // 删除时进行返回元素和指定元素不相等的元素
//			$scope.selecteds=$scope.selecteds.filter(function(ele){
//				return ele != id;
//			})
//		}
		if(action == 'remove' && $scope.selecteds.indexOf(id)!=-1){ 
			var index = $scope.selecteds.indexOf(id);// 获取当前字符传对应的数组的序号
			$scope.selecteds.splice(index,1);// 删除指定数组指定位置的数值（原数组变化）
		}
	}
    $scope.selecteds.join(",");// 通过 join将数组屏接成字符传，针对数组无法传递到后端的情况
</script>

9、indexOf() 查询 数值在数组中的位置

原数组不会发生改变

indexOf()：根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，返回-1，找到了指定的数据返回该数据的索引

参数：indexOf(value, start); value为要查询的数据； start为可选，表示开始查询的位置，当start为负数时，从数组的尾部向前数；如果查询不到value的存在，则方法返回-1

注意：如果找到该数据，立即返回该数据的索引，不再往后继续查找

 var str = ["h","e","l","l","o"];
 console.log(str.indexOf("l"));        //2
 console.log(str.indexOf("l",3));      //3
 console.log(str.indexOf("l",4));      //-1
 console.log(str.indexOf("l",-1));     //-1
 console.log(str.indexOf("l",-3));     //2

10、 lastIndexOf() 原数组不会发生改变

lastIndexOf()：根据指定的数据，从右至左，查询在数组中出现的位置，如果不存在指定的数据，返回-1，找到了指定的数据返回该数据的索引

参数：indexOf(value, start); value为要查询的数据； start为可选，表示开始查询的位置，当start为负数时，从数组的尾部向前数；如果查询不到value的存在，则方法返回-1

var str = ["h","e","l","l","o"];
console.log(str.lastIndexOf("l"));        //2
console.log(str.lastIndexOf("l",3));      //3
console.log(str.lastIndexOf("l",4));      //-1
console.log(str.lastIndexOf("l",-1));     //-1
console.log(str.lastIndexOf("l",-3));     //2

11、forEach()原数组不会发生改变

forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。

return true 也不会终止循环

参数都是function类型，默认有传参 参数分别为：遍历的数组内容 ( 元素的每一项 item )；item 对应的数组索引;数组本身。

var arr = ["h","e","l","l","o"];
arr.forEach(function(item,index,arr){
    console.log('item:'+item,'index:'+index,'arr:'+arr)
})
//	item:h index:0 arr:h,e,l,l,o
//	item:e index:1 arr:h,e,l,l,o
//	item:l index:2 arr:h,e,l,l,o
//	item:l index:3 arr:h,e,l,l,o
//	item:o index:4 arr:h,e,l,l,o

12、map()原数组不会发生改变

map()：功能同 forEach()一样。

参数：map(callback); callback默认有三个参数，分别为value，index，self。跟上面的forEach()的参数一样

const filePaths = data.map(item => item.FILE_PATH);  // 从对象数组中提取 FILE_PATH 重新组装成一个数组

var arr = ["h","e","l","l","o"];
arr.map(function(item,index,arr){
    console.log('item:'+item,'index:'+index,'arr:'+arr)
})
//	item:h index:0 arr:h,e,l,l,o
//	item:e index:1 arr:h,e,l,l,o
//	item:l index:2 arr:h,e,l,l,o
//	item:l index:3 arr:h,e,l,l,o
//	item:o index:4 arr:h,e,l,l,o

13、filter()原数组不会发生改变

return true 也不会终止循环

不改变原数组，返回新数组（筛选出满足条件的数据，重新构造成一个新数组）

音标 [ˈfɪltər]

filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

参数：filter(callback);callback默认有三个参数，分别为value，index，self。

var arr = [1,2,3,4,5,6,7,8,9]
arr.filter((value,index,self)=>{
  return  value%3!=0
})

//	[1, 2, 4, 5, 7, 8]
var arr = ['ab','ac','ad','ae','abc','abd','abe']
arr.filter((value,index,self)=>{
  return value.indexOf('e')!=-1
})
//["ae", "abe"]

14、every()原数组不会发生改变

音标 [ˈevri]

every()：判断数组中每一项是否都满足条件，只有所有项都满足条件，才会返回true,否则返回false。

参数：every(callback);callback默认有三个参数，分别为value，index，self。

var arr = [1,2,3,4,5,6,7,8,9]
let bool=arr.every((value,index,self)=>{
  return value<10 
})
console.log(bool)  //true 

var arr = [1,2,3,4,5,6,7,8,9]
let bool=arr.every((value,index,self)=>{
  return value>5
})
console.log(bool)  //false 

15、some()原数组不会发生改变

some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。 （对比every，some 只需满足一项 ）

如果查询数组中的唯一的元素，使用some效率更高，只要找到元素就会停止循环

return true 会终止循环

参数：some(callback);callback默认有三个参数，分别为value，index，self。

返回值是 true/false

var arr = [1,2,3,4,5,6,7,8,9]
let bool=arr.some((value,index,self)=>{
  return value>5
})
console.log(bool)  //true	

var arr = [
    { id: 1, name: '测试001' },
    { id: 2, name: '测试002' },
    { id: 3, name: '测试003' },
    { id: 4, name: '测试004' },
    { id: 5, name: '测试005' },
]

function search(searchInput) {
    var res = ''
    arr.some((item) => {
        if (item.id == searchInput) {
            res = item;
            return true;/// return true 终止循环
        }
    })
    return res
}
console.log(search(3));

16、reduce()原数组不会发生改变

reduce()：从数组的第一项开始，逐个遍历到最后，迭代数组的所有项，然后构建一个最终返回的值。

reduce(callback,initial);接收一个或两个参数：

第一个是回调函数，表示在数组的每一项上调用的函数；

• callback默认有四个参数，分别为prev，now，index，self

第二个参数（可选的）作为归并的初始值，被回调函数第一次执行时的第一个参数接收。

var arr = [10,20,30,40,50];
    arr.reduce(function(prev,now,index,self){
        console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
return prev+now
    }, 2019)

//	2019--10--0--true
//	2029--20--1--true
//	2049--30--2--true
//	2079--40--3--true
//	2119--50--4--true
//	2169
123456789101112

17、reduceRight()原数组不会发生改变

reduceRight()：（与reduce类似）从数组的最后一项开始，向前逐个遍历到第一位，迭代数组的所有项，然后构建一个最终返回的值。

var arr = [10,20,30,40,50];
    arr.reduceRight(function(prev,now,index,self){
        console.log(prev + "--" + now + "--" + index + "--" + (arr == self))
return prev+now
    }, 2019)

//	2019--50--4--true
//	2069--40--3--true
//	2109--30--2--true
//	2139--20--1--true
//	2159--10--0--true
//	2169

18. ES6 中的(18条消息) ES6数组方法find()、findIndex()

find()

类似于 some 满足条件后 终止循环

该方法主要应用于查找第一个符合条件的数组元素，如果没查找到返回 undefined

注： 对 返回的对象进行修改，原数组也会变更

const myArr=[1,2,3,4,5,6,7,8,9];
var v=myArr.find(value=>value>5);
console.log(v);// 6

findIndex()

符合条件的元素的索引位置 ,如果没有符合条件的元素返回 -1（注：find()返回的是undefined）

二、会改变原数组的方法

• unshift(); //从头部添加
• shift(); //从头部删除
• push()； //从尾部添加
• pop(); //从尾部删除
• sort(); //数组排序
• reverse(); //数组倒叙
• splice(); //从数组中添加、删除、替换数据

三、js数组 应用

从数组中取指定位置的 数据

var item=arr[index];
// 对象取数据也是这样 取数据
var obj={
	'a':'aaaa',
	'b':'bbbb',
	'c':'ccccc'
};
console.log(obj['a']);//aaaa

js前端分组 & js分页

let arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]
let newListArr = []
for(let i = 0;i<arr.length;i+=5){
	newListArr.push(arr.slice(i,i+5));// 每隔五个 取出 重新组装成一个新数组
}
console.log(newListArr)
//返回一个2维数组 [[1,2,3,4,5],[6,7,8,9,10],[11,12,13,14,15],[16,17,18,19]]

GT模糊匹配

/**
             * GT模糊匹配
             * @param value 2个类型，
             *  线路/GT号
             *  线路 GT号
             */
            fuzzyTowerList (value) {
                if (!this.towerAllList || this.towerAllList.length == 0) {// 没有查询到GT，所以无需 再循环
                    return
                }
                if (!value) {
                    this.towerList = JSON.parse(JSON.stringify(this.towerAllList))
                    return
                }
                value = value.trim()// 剔除左右空格
                let resArr = value.split(' ')
                let list = this.towerAllList.filter(item => {
                    if (resArr && resArr.length == 1) {// 说明搜索GT号，或者 线路名称
                        return item.lineName.indexOf(value) >= 0 || item.towerNo.indexOf(value) >= 0
                    } else {
                        // 输入的是 线路 + GT号
                        return item.lineName.indexOf(resArr[0]) >= 0 && item.towerNo.indexOf(resArr[1]) >= 0
                    }
                })
                this.towerList = list

            },

判读数组是否包含

要判断一个数组是否包含某个特定项，你可以使用 JavaScript 的 includes() 方法或者使用数组的 indexOf() 方法。

方法一：使用 includes() 方法

javascript复制代码const arr = [1, 2, 3, 4, 5];
const targetItem = 3;

if (arr.includes(targetItem)) {
  console.log('数组中存在指定项');
} else {
  console.log('数组中不存在指定项');
}

在上述示例中，我们使用 includes() 方法检查数组 arr 是否包含特定项 targetItem（这里是数字 3）。如果数组中包含该项，则会打印出 '数组中存在指定项'；否则，会打印出 '数组中不存在指定项'。

方法二：使用 indexOf() 方法

javascript复制代码const arr = [1, 2, 3, 4, 5];
const targetItem = 3;

if (arr.indexOf(targetItem) !== -1) {
  console.log('数组中存在指定项');
} else {
  console.log('数组中不存在指定项');
}

在上述示例中，我们使用 indexOf() 方法检查数组 arr 中是否存在特定项 targetItem（这里是数字 3）。如果数组中存在该项，则 indexOf() 方法会返回该项在数组中的索引值（大于等于 0）；如果不存在，则返回 -1。因此，我们可以通过判断返回值是否不等于 -1 来判断数组中是否存在该项。

四、map

new Map()

Map 是一个带键的数据项的集合，就像一个 Object 一样。 但是它们最大的差别是 Map 允许任何类型的键（key）。

它的方法和属性如下：

• new Map() —— 创建 map。
• map.set(key, value) —— 根据键存储值。
• map.get(key) —— 根据键来返回值，如果 map 中不存在对应的 key，则返回 undefined。
• map.has(key) —— 如果 key 存在则返回 true，否则返回 false。
• map.delete(key) —— 删除指定键的值。
• map.clear() —— 清空 map。
• map.size —— 返回当前元素个数。
• forEach 遍历

let map = new Map();

map.set('1', 'str1');   // 字符串键
map.set(1, 'num1');     // 数字键
map.set(true, 'bool1'); // 布尔值键

// 还记得普通的 Object 吗? 它会将键转化为字符串
// Map 则会保留键的类型，所以下面这两个结果不同：
alert( map.get(1)   ); // 'num1'
alert( map.get('1') ); // 'str1'

alert( map.size ); // 3
// 遍历
myMap.forEach(function(value, key) {
  console.log(key + " = " + value);
})

五、objects

{} 大括号，定义一个对象,大部分情况下要有成对的属性和值，或是函数

Object.keys(objs) 返回 由属性值构成的新数组

{}的使用

var typeMuenEnum={
            "tqqk":"天气情况",
            "gttz":"GT台账",
            "xltz":"线路台账",
            "sjtz":"设计图纸",
            "yhqx":"隐患/缺陷",//隐患/缺陷   有 tab 所以 不要加标题
            "jksk":"交跨/三跨",
            "rgxs":"人工巡视",// 人工巡视
            "wrjxs":"无人机巡视",//无人机巡视
            "wpxs":"微拍图片"
        }
// 方式一
for (var key in typeMuenEnum) {
       console.log(typeMuenEnum[key]);
}



//  Object.keys(objs)
console.log(Object.keys(typeMuenEnum));// 
[ "tqqk","gttz","xltz","sjtz", "yhqx","jksk","rgxs","wrjxs", "wpxs"]

支持多种格式

var obj = { 
	"Name":"GD", 
	"MyWife":[ "LuLu","26" ], 
	"MySon":[{"Name":"Son1"},{"Name":"Son2"},{"Name":"Son3"}],
    fn:{KK:function(a,b){ 
		return a+b; 
	}}
} 
alert(obj.Name); 
alert(obj.MyWife[0]); 
alert(obj.MySon[1].Name);
alert(obj.fn.KK("A","B"));

el从对象中获取数据

{"a":{"a1":1,"a2":3537},"b":{"b1":1,"b2":3537}}
//前端el 解析: 获取a1对应的value ${data["a"]["a1"]}

reduce 方法

reduce() 方法是 JavaScript 数组的常用方法之一，它可以将数组中的元素通过累加器函数（也叫 reducer）一个一个地累加到一个单独的值中，最终返回该值。以下是 reduce() 方法的语法：

arr.reduce(callback[, initialValue])

其中，callback 是一个回调函数，可以接收四个参数：

• accumulator （累加器）：累加器累计回调函数的返回值。
• currentValue （当前值）：正在处理的当前元素。
• currentIndex （当前索引）：正在处理的当前元素在数组中的索引。
• array （数组）：调用 reduce() 方法的原始数组。

initialValue 参数是可选的，用于指定初始值。如果没有提供初始值，则使用数组中的第一个元素作为初始值，并从数组的第二个元素开始执行回调函数。

以下是示例代码：

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

// 使用 reduce() 方法求和
const sum = arr.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 输出 15

在此示例中，我们使用 reduce() 方法将数组 [1, 2, 3, 4, 5] 中的所有元素相加，并将结果存储在变量 sum 中。回调函数使用两个参数：accumulator 和 currentValue，分别对应上次计算的结果和当前正在处理的元素。在每次迭代中，回调函数将 accumulator 和 currentValue 相加，并返回结果作为下次迭代的 accumulator。

除了求和，还可以使用 reduce() 方法完成其他任务，例如：查找最大值、计算平均值、拼接字符串等。

const menuData = [
	{
		name: "风格",
		child: ["Q版", "3D卡通", ]
	},
	{
		name:"光线",
		child:["轮廓光","体积光","霓虹灯"]
	}
];


const newArray = menuData.reduce((acc, cur) => acc.concat(cur.child), []);

对象的遍历

1. for...in 循环：这是最常用的一种方式，可以遍历对象的所有可枚举属性。语法如下：

   for (let key in obj) {
     // key 表示对象的属性名，obj[key] 表示属性的值
     console.log(key, obj[key]);
   }
   

2. Object.keys()：这个方法返回一个由对象的可枚举属性组成的数组，可以使用 forEach() 或 map() 等方法进行遍历。语法如下：

   Object.keys(obj).forEach(function(key) {
     console.log(key, obj[key]);
   });
   

3. Object.values()：这个方法返回一个由对象的可枚举属性值组成的数组，可以使用 forEach() 或 map() 等方法进行遍历。语法如下：

   Object.values(obj).forEach(function(value) {
     console.log(value);
   });
   

4. Object.entries()：这个方法返回一个由对象的可枚举属性键值对组成的数组，可以使用 forEach() 或 map() 等方法进行遍历。语法如下：

   Object.entries(obj).forEach(function([key, value]) {
     console.log(key, value);
   });
   

5. 变量map获取key

   const regionMap = {}
   function getRegionCodes() {
   	 return Object.keys(regionMap).map(key => key);
   }
   

需要注意的是，以上方法遍历对象时只会遍历该对象的自身属性，不会遍历其原型链上的属性。如果需要遍历对象的所有属性，包括继承自其原型链的属性，可以使用 for...in 循环或 Object.getOwnPropertyNames() 方法。

flatMap 使用

flatMap() 方法用于将一个数组（或类数组对象）中的每个元素通过指定的函数进行处理，并将处理后的结果拼接成一个新数组返回。

flatMap() 方法与 map() 方法类似，不同的是，它会自动将返回的结果数组展开一层，即扁平化处理，最终返回一个一维数组。

flatMap() 方法的语法如下：

Codearray.flatMap(callback(currentValue[, index[, array]])[, thisArg])

其中，callback 函数接收三个参数：

• currentValue：当前正在处理的数组元素。
• index：当前正在处理的数组元素的索引值。
• array：被处理的源数组。

flatMap() 方法返回一个新数组，该数组由原数组经过指定函数处理后得到的结果数组拼接而成。如果指定的函数返回的是一个空数组，则该空数组会被省略，不会出现在最终结果数组中。

下面是一个使用 flatMap() 方法的示例：

const arr = [1, 2, 3];

const result = arr.flatMap((item) => [item * 2, item * 3]);

console.log(result); // [2, 3, 4, 6, 6, 9]

在上面的示例中，我们定义了一个数组 arr，然后使用 flatMap() 方法将其中的每个元素乘以 2 和 3，得到一个新的数组 result。最终输出结果为 [2, 3, 4, 6, 6, 9]。可以看到，由于指定函数返回的是一个数组，所以最终结果数组中会出现该数组的元素。

flat的使用

flat： 方法将二维数组 this.tableData 展平为一维数组。

find： 方法会遍历展平后的数组，返回第一个满足条件的元素，如果没有找到满足条件的元素，则返回 undefined。

let result = this.tableData.flat().find(inner_item => inner_item.id == this.currentStageId);

Object.values

Object.values(innerItem) 会返回一个数组，包含 innerItem 对象中所有属性的值。这是 ES2017 (ES8) 引入的一个方法，用于获取对象的所有值。返回对象属性值，并且以数组的方式返回

const innerItem = {
  field1: [1, 2, 3],
  field2: [],
  field3: "some value"
};

const values = Object.values(innerItem); 
// 结果: [[1, 2, 3], [], "some value"]

Object.assign 对象合并

 // 省市区(后端参数)
  const [provinceCode, cityCode, countyCode] = ['安徽','合肥','蜀山']
  // 合并数据
  Object.assign(item, { provinceCode, cityCode, countyCode })

使用： { } 和[ ] 一起使用

var jdxForTowerMap= {};
jQuery.each(jdxJsonArr,function(index,item){
     if(jdxForTowerMap[item.towerId] == undefined){
         jdxForTowerMap[item.towerId] = [];
     }
     jdxForTowerMap[item.towerId].push(item);
});
//遍历
for(var index in jdxForTowerMap){
	var jdxItem=jdxForTowerMap[index];
}

转载：Objects 和 maps 的比较

Objects 和 Maps 类似的是，它们都允许你按键存取一个值、删除键、检测一个键是否绑定了值。因此（并且也没有其他内建的替代方式了）过去我们一直都把对象当成 Maps 使用。不过 Maps 和 Objects 有一些重要的区别，在下列情况里使用 Map 会是更好的选择：

	Map	Object
意外的键	Map 默认情况不包含任何键。只包含显式插入的键。	一个 Object 有一个原型, 原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。注意: 虽然 ES5 开始可以用 Object.create(null) 来创建一个没有原型的对象，但是这种用法不太常见。
键的类型	一个 Map的键可以是任意值，包括函数、对象或任意基本类型。	一个Object 的键必须是一个 String 或是Symbol。
键的顺序	Map 中的 key 是有序的。因此，当迭代的时候，一个 Map 对象以插入的顺序返回键值。	一个 Object 的键是无序的注意：自ECMAScript 2015规范以来，对象确实保留了字符串和Symbol键的创建顺序； 因此，在只有字符串键的对象上进行迭代将按插入顺序产生键。
Size	Map 的键值对个数可以轻易地通过size 属性获取	Object 的键值对个数只能手动计算
迭代	Map 是 iterable 的，所以可以直接被迭代。	迭代一个Object需要以某种方式获取它的键然后才能迭代。
性能	在频繁增删键值对的场景下表现更好。	在频繁添加和删除键值对的场景下未作出优化。

js 对数组分组

通过 Array.prototype.reduce() 进行分组

const groupedData = data.reduce((result, item) => {
  if (!result[item.weekNum]) { // 针对数据会多次的情况
    result[item.weekNum] = [];
  }
  result[item.weekNum].push(item);
  return result;
}, {});

// 针对每组只会一个的情况
const groupedData = data.reduce((result, item) => {
  result[item.weekNum] = item;
  return result;
}, {});

console.log(groupedData);

const groups = {}
arr.forEach(item=>{
    const key = item.xx; 
    if (!groups[key]) {
        groups[key] = []
    }
    groups[key].push(item);
})

// 组装的的map 格式
ItemGroupBy (arr, key) {
    let newArr = []
    let groups = {}
    arr.forEach(item => {
        if (!(item[key] in groups)) {
            groups[item[key]] = { title: item[key], list: [] }
            newArr.push(groups[item[key]])
        }
        groups[item[key]].list.push(item)
    })
    return newArr
},
    // 组装的是对象
    handleGroup (arr) {
        let obj = {}
        let groups = []
        arr.forEach(item => {
            if (!obj[item.title]) { //根据id分组
                groups.push({
                    groupName: item.title,
                    title: item.title,
                    type: item.type,
                    list: [item]
                })
                obj[item.title] = item
            } else {
                groups.find(v => {//选择符合条件的第一个元素
                    if (v.groupName === item.title) {
                        v.list.push(item)
                    }
                })

            }
        })
        return groups
    },

map分组

  /** @type Map<int, Set<string>> */
  const enumToStringsMap = new Map();
  function addEnumsFromAPI(api) {
    for (const key in api) {
      const value = api[key];
      if (typeof value === 'number') {
        if (!enumToStringsMap.has(value)) {
          enumToStringsMap.set(value, new Set());
        }
        enumToStringsMap.get(value).add(key);
      }
    }
  }

案例使用

1. Array.from fill

生成一个长度为length的数组，并且每项 添加值为 1

const maxData = Array.from({ length: length }).fill(1)

2. 对数组循环，并且处理每项数值重新返回新数组

案例： 目前有个 风速的数组单位是 km/h ，现在想将数组转为 每项单位 m/s 的数值，并且保留2为小数

let arr_kmh = [60, 80, 100, 120];  // 假设原始速度数组为 km/h

// 使用 Array.from 方法将 km/h 转换为 m/h，并保留两位小数
let arr_ms = Array.from(arr_kmh, speed => (speed * 1000 / 3600).toFixed(2));

// 将 m/s 转换为 m/h，并保留两位小数
let arr_mh = arr_ms.map(speed => (speed * 3600).toFixed(2));

console.log(arr_mh);  // 输出结果为 ['16.67', '21.33', '26.67', '32.00']

// 创建一个包含 10 个元素的数组，每个元素是 {id: x} 对象，其中 x 从 1 到 10
const arr = Array.from({ length: 10 }, (v, i) => ({ id: i + 1 }));

// 拿到字典 组装新数组
const options = arr.map(({ dictValue, dictLabel }) => ({ id: dictValue, text: dictLabel })); // 我们在箭头函数中使用括号将对象字面量 { id: dictValue, text: dictLabel } 包裹起来，确保正确返回一个对象

根据长度length 循环构造一个新数组

const arr = Array.from(Array(length).keys(), (i) => {
                    return {
                        duration: undefined,
                        times: i+1,
                        samplingType: samplingType
                    }
                });

3. 循环从数组中取数

const arr = ['a', 'b','c'];
const length = arr.length;
for (let i = 0; i < 10; i++) {
  const index = i % length;
  console.log(arr[index]); // 循环输出 a, b, c....
}

4. 循环

popularPages (state) {
    const pageList = Object.entries(state.pageCountMap) // 将对象转换为键值对数组
    const arr = pageList.filter(([path,  count]) => path !== '/') // 过滤掉首页和 name 为空的项
                        .sort((a, b) => a.count - b.count) // 按照点击次数排序
                        .slice(0, 20) // 只取前十个
    
    const menuArr = arr.map(([_, item]) => item)
    				 .filter(({name}) => !!name);
    return menuArr;
}

data.map(item => item.name)

flatMap 的使用，讲数据拉平

const arr = [
  { towers: [1, 2, 3] },
  { towers: [4, 5] },
  { towers: [6, 7, 8, 9] }
];

const result = arr.flatMap(item => item.towers);
console.log([...result]); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

//
const arr = [
  { towers: [{ towerId: 1 }, { towerId: 2 }, { towerId: 3 }] },
  { towers: [{ towerId: 4 }, { towerId: 5 }] },
  { towers: [{ towerId: 6 }, { towerId: 7 }, { towerId: 8 }, { towerId: 9 }] }
];

const result = arr.flatMap(item => item.towers.map(tower => tower.towerId));
console.log([...result]); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

数组转对象

可以使用 Array.prototype.reduce() 方法将数组转换为对象

const arr = [
  { dictValue: "1", dictLabel: "苹果" },
  { dictValue: "2", dictLabel: "橘子" },
  { dictValue: "3", dictLabel: "香蕉" },
];

const map = arr.reduce((acc, cur) => {
  acc[cur.dictValue] = cur.dictLabel;
  return acc;
}, {});

console.log(map); // 输出：{ '1': '苹果', '2': '橘子', '3': '香蕉' }

将地图数据转为Map对象

var geoCoordMap = {
    '合肥': [117.29, 32.0581],
    '六安': [116.3123, 31.8329],
    '滁州': [118.1909, 32.536]
}

const coordMap = geoJson.features.reduce((acc, { properties }) => {
    const key = properties.name;
    const value = properties.cp;
    acc[key] = value;
    return acc;
}, {});

取出数组满足条件的元素，并且取某个值重新组装成一个数组

// 过滤checked属性为true的元素，然后使用 map 方法映射出所需的 id 属性值
const newArray = originalArray
  .filter(item => item.checked === true)
  .map(item => item.id);

// 将满足条件的 id 属性值添加到 Set 对象中，然后将 Set 对象转换为数组
const newArray = Array.from(new Set(originalArray
  .filter(item => item.checked === true)
  .map(item => item.id))
);

循环并且过滤，更改属性值

this.list.forEach(item => item.warnFlag !== 1 && (item.checked = true));

数组分组，并且累加值

image-20230825095548677

// 源数据，目前只罗列了
const data = [
  {
    "areaName": "合肥市",
    "deptName": "线圈组",
    "jyxyScore": 118.92,// 经营效益指标
    "glxlScore": 24.73,  // 管理效率指标
    "fzzlScore": 78.35, // 发展质量指标
  },
  {
    "areaName": "六安市",
    "deptName": "开关组",
    "jyxyScore": 0,
    "glxlScore": 105,
    "fzzlScore": 9.75,
  },
  {
    "areaName": "池州市",
    "deptName": "线材组",
    "jyxyScore": 0,
    "glxlScore": 15,
  }
];

// 返回的是对象
const mergedData = data.reduce((result, obj) => {
  const { deptName, jyxyScore, glxlScore, fzzlScore } = obj;

  // 检查是否已存在该 deptName 的对象
  const existingObj = result.find(item => item.deptName === deptName);

  if (existingObj) {
    // 累加 jyxyScore、glxlScore、fzzlScore 到已存在的对象中
    existingObj.jyxyScore += jyxyScore || 0;
    existingObj.glxlScore += glxlScore || 0;
    existingObj.fzzlScore += fzzlScore || 0;
  } else {
    // 创建新的对象并添加到结果数组中
    result.push(Object.assign({}, obj));
  }

  return result;
}, []);

// 返回的是 数组
const mergedData2 = Object.values(data.reduce((result, obj) => {
  const { deptName, jyxyScore, glxlScore, fzzlScore } = obj;

  if (!result[deptName]) {
    result[deptName] = {
      deptName,
      jyxyScore: 0,
      glxlScore: 0,
      fzzlScore: 0
    };
  }

  result[deptName].jyxyScore += jyxyScore || 0;
  result[deptName].glxlScore += glxlScore || 0;
  result[deptName].fzzlScore += fzzlScore || 0;

  return result;
}, {}));
console.log(mergedData);

flatMap 使用

从数组中讲其子项提取出来重新组装成一个数组

[
    {
        "id": 1,
        "name":'层级1',
        "children": [
            {
                "level": 1,
                "id": 83,
				"name":'层级1-1',
            }
        ],
        
    }
]

const newArr = arr.flatMap(item => item.children) || [];

终止循环

try {
    this.form.emgSiteRoleRecList.forEach((item, index) => {
        if (!item.userId || !item.userName || !item.userPhone) {
            this.msgError('紧急联系人信息未填写，请检查后再提交！');
            throw new Error('Validation failed'); // 抛出异常来终止循环
        }
    });
} catch (error) {
    // 可以在这里处理错误，例如记录日志或者进行其他操作
    console.error(error.message);
    return; // 从当前函数返回，不再执行后续代码
}