首页 > 其他分享 >array、object、map、set常见方法

array、object、map、set常见方法

时间:2022-09-04 22:13:10浏览次数:79  
标签:map set console log Object object 数组 var arr1

引用数据类型有object , array ,function

一 、数组

一、创建数组

1、使用数组字面量方法

var arr1 = [];     // 创建一个数组
var arr2 = [20];   // 创建一个包含1项数据为20的数组
var arr3 = ['lily','lucy','Tom'];  // 创建一个包含3个字符串的数组
123

2、使用Array构造函数

无参构造

var arr1 = new Array();   // 创建一个空数组
1

带参构造

如果只传一个数值参数,则表示创建一个初始长度为指定数组的空数组

var arr2 = new Array(10);     // 创建一个包含10项的数组
1

如果传入一个非数值的参数或者参数大于1,则表示创建一个包含指定元素的数组

var arr3 = new Array('lily','lucy','Tom');     // 创建一个包含3个字符串的数组
1

3、Array.of方法创建数组(es6新增)
Array.of()方法会创建一个包含所有传入参数的数组,而不管参数的数量与类型

let arr1 = Array.of(1,2);
console.log(arr1.length);   // 2

let arr2 = Array.of(3);
console.log(arr2.length);   // 1
console.log(arr2[0]);   // 3
123456

4、Array.from方法创建数组(es6新增)
在js中将非数组对象转换为真正的数组是非常麻烦的。在es6中,将可迭代对象或者类数组对象作为第一个参数传入,Array.from()就能返回一个数组

function arga(...args){  // ...args剩余参数数组,由传递给函数的实际参数提供
     let arg = Array.from(args);
     console.log(arg);
}

arga(arr1,26,from);     // [arr1,26,from]
123456

二、数组方法

数组原型方法主要有以下这些:

  1. join():用指定的分隔符将数组每一项拼接为字符串
  2. push():向数组的末尾添加新元素
  3. pop():删除数组的最后一项
  4. unshift():向数组首位添加新元素
  5. shift():删除数组的第一项
  6. slice():按照条件查找出其中的部分元素
  7. splice():对数组进行增删改
  8. filter():过滤功能
  9. concat():用于连接两个或多个数组
  10. indexOf():检测当前值在数组中第一次出现的位置索引
  11. lastIndexOf():检测当前值在数组中最后一次出现的位置索引
  12. every():判断数组中每一项都是否满足条件
  13. some():判断数组中是否存在满足条件的项
  14. includes():判断一个数组是否包含一个指定的值
  15. sort():对数组的元素进行排序
  16. reverse():对数组进行倒序
  17. forEach():es5及以下循环遍历数组每一项
  18. map():es6循环遍历数组每一项
  19. find():返回匹配的项
  20. findIndex():返回匹配位置的索引
  21. reduce():从数组的第一项开始遍历到最后一项,返回一个最终的值
  22. reduceRight():从数组的最后一项开始遍历到第一项,返回一个最终的值
  23. toLocaleString()、toString():将数组转换为字符串
  24. entries()、keys()、values():遍历数组
  25. fill() 填充数组
  26. flat();flatMap(); 按照一个可指定的深度递归遍历数组
  27. 欢迎补充…

各个方法的基本功能详解

1、join()
join()方法用于把数组中的所有元素转换一个字符串,默认使用逗号作为分隔符

var arr1 = [1,2,3];
console.log(arr1.join());   // 1,2,3
console.log(arr.join('-'));   // 1-2-3
console.log(arr);   // [1,2,3](原数组不变)
1234

2、push()和pop()

push()方法从数组末尾向数组添加元素,可以添加一个或多个元素,并返回新的长度
pop()方法用于删除数组的最后一个元素并返回删除的元素

var arr1 = ['lily','lucy','Tom'];
var count = arr1.push('Jack','Sean');
console.log(count);   // 5
console.log(arr1);   // ['lily','lucy','Tom','Jack','Sean']

var item = arr1.pop();
console.log(item);   // Sean
console.log(arr1);   // ['lily','lucy','Tom','Jack']
12345678

3、unshift()和shift()

unshift()方法可向数组的开头添加一个或更多元素,并返回新的长度
shift()方法用于把数组的第一个元素从其中删除,并返回第一个元素的值

var arr1 = ['lily','lucy','Tom'];
var count = arr1.unshift('Jack','Sean');
console.log(count);   // 5
console.log(arr1);   // ['Jack','Sean','lily','lucy','Tom']

var item = arr1.shift();
console.log(item);   // Jack
console.log(arr1);   // [''Sean','lily','lucy','Tom']
12345678

4、sort()
用于对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序,默认排序顺序为按字母升序

var arr1 = ['a','d','c','b'];
console.log(arr1.sort());   // ['a','b','c','d']

function compare(value1,value2){
     if(value1 < value2){
          return -1;
     }else if(value1 > value2){
          return 1;
     }else{
          return 0;
     }
}

var arr2 = [13,24,51,3];
console.log(arr2.sort(compare));   // [3,13,24,51]

// 如果需要通过比较函数产生降序排序的结果,只要交后比较函数返回的值即可
1234567891011121314151617

5、reverse()
用于颠倒数组中元素的顺序,原数组改变

var arr1 = [13,24,51,3];
console.log(arr1.reverse());   // [3,51,24,13]
console.log(arr1);   // [3,51,24,13](原数组改变)
123

6、concat()
用于连接两个或多个数组,该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本

var arr1 = [1,3,5,7];
var arrCopy = arr1.concat(9,[11,13]);
console.log(arrCopy);   // [1,3,5,7,9,11,13]
console.log(arr1);   // [1,3,5,7](原数组未被修改)
1234

7、slice()
返回从原数组中指定开始下标到结束下标之间的项组成的新数组,可以接受一或两个参数,即要返回项的起始和结束位置(不包括结束位置的项)

 用法:array.slice(start,end)
 解释:该方法是对数组进行部分截取,并返回一个数组副本;参数start是截取的开始数组索引,end参数等于你要取的最后一个字符的位置值加上1(可选)
12
var arr1 = [1,3,5,7,9,11];
var arrCopy = arr1.slice(1);
var arrCopy2 = arr1.slice(1,4);
var arrCopy3 = arr1.slice(1,-2);   // 相当于arr1.slice(1,4);
var arrCopy4 = arr1.slice(-4,-1);   // 相当于arr1.slice(2,5);
console.log(arr1);   // [1,3,5,7,9,11](原数组没变)
console.log(arrCopy);   // [3,5,7,9,11]
console.log(arrCopy2);   // [3,5,7]
console.log(arrCopy3);   // [3,5,7]
console.log(arrCopy4);   // [5,7,9]

//如果不传入参数二,那么将从参数一的索引位置开始截取,一直到数组尾
var a=[1,2,3,4,5,6];
var b=a.slice(0,3);    //[1,2,3]
var c=a.slice(3);       //[4,5,6]
 
//如果两个参数中的任何一个是负数,array.length会和它们相加,试图让它们成为非负数,举例说明:
//当只传入一个参数,且是负数时,length会与参数相加,然后再截取
var a=[1,2,3,4,5,6];
var b=a.slice(-1);    //[6]
 
//当只传入一个参数,是负数时,并且参数的绝对值大于数组length时,会截取整个数组
var a=[1,2,3,4,5,6];
var b=a.slice(-6);    //[1,2,3,4,5,6]
var c=a.slice(-8);    //[1,2,3,4,5,6]
 
//当传入两个参数一正一负时,length也会先于负数相加后,再截取
var a=[1,2,3,4,5,6];
var b=a.slice(2,-3);    //[3]
 
//当传入一个参数,大于length时,将返回一个空数组
var a=[1,2,3,4,5,6];
var b=a.slice(6);  //[]
123456789101112131415161718192021222324252627282930313233

8、splice()
可以实现删除、插入和替换

用法:array.splice(start,deleteCount,item...)
解释:splice方法从array中移除一个或多个数组,并用新的item替换它们。参数start是从数组array中移除元素的开始位置。参数deleteCount是要移除的元素的个数。

如果有额外的参数,那么item会插入到被移除元素的位置上。它返回一个包含被移除元素的数组。
1234
//替换
var a=['a','b','c'];
var b=a.splice(1,1,'e','f');    //a=['a','e','f','c'],b=['b']

//删除
var arr1 = [1,3,5,7,9,11];
var arrRemoved = arr1.splice(0,2);
console.log(arr1);   // [5,7,9,11]
console.log(arrRemoved);   // [1,3]

// 添加元素
var arr1 = [22,3,31,12];
arr1.splice(1,0,12,35);
console.log(arr1);   // [22,12,35,3,31,12]
1234567891011121314

9、forEach()

forEach方法中的function回调有三个参数:
第一个参数是遍历的数组内容,
第二个参数是对应的数组索引,
第三个参数是数组本身
1234
var arr = [1,2,3,4];
var sum =0;
arr.forEach(function(value,index,array){

 array[index] == value; //结果为true

 sum+=value; 

 });

console.log(sum); //结果为 10
1234567891011

10、map()
返回一个新数组,会按照原始数组元素顺序依次处理元素

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

let newArray = array.map((item) => {
    return item * item;
})

console.log(newArray)  // [1, 4, 9, 16, 25]
1234567

11、every()
判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true

var arr1 = [1,2,3,4,5];
var arr2 = arr1.every.every(x => {
     return x < 10;
});
console.log(arr2);   // true

var arr3 = arr1.every(x => {
     return x < 3;
});
console.log(arr3);   // false
12345678910

12、some()
判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true

var arr1 = [1,2,3,4,5];
var arr2 = arr1.some(x => {
     return x < 3;
});
console.log(arr2);   // true

var arr3 = arr1.some(x => {
     return x < 1;
});
console.log(arr3);   // false
12345678910

13、includes()
es7新增,用来判断一个数组、字符串是否包含一个指定的值,使用===运算符来进行值比较,如果是返回true,否则false,参数有两个,第一个是(必填)需要查找的元素值,第二个是(可选)开始查找元素的位置

var arr1 = [22,3,31,12,58];
var includes = arr1.includes(31);
console.log(includes);   // true

var includes2 = arr1.includes(31,3);   // 从索引3开始查找31是否存在
console.log(includes2);   // false
123456

14、reduce()和reduceRight()
都会实现迭代数组的所有项(即累加器),然后构建一个最终返回的值

reduce()方法从数组的第一项开始,逐个遍历到最后

reduceRight()方法从数组的最后一项开始。向前遍历到第一项

4个参数:前一个值、当前值、项的索引和数组对象
12345
var arr1 = [1,2,3,4,5];
var sum = arr1.reduce((prev,cur,index,array) => {
     return prev + cur;
},10);   // 数组一开始加了一个初始值10,可以不设默认0
console.log(sum);   // 25
12345

15、toLocaleString()和toString()
都是将数组转换为字符串

var arr1 = [22,3,31,12];
let str = arr1.toLocaleString();
var str2 = arr1.toString();

console.log(str);   // 22,3,31,12
console.log(str2);   // 22,3,31,12
123456

16、find()和findIndex()

都接受两个参数:一个回调函数,一个可选值用于指定回调函数内部的this

该回调函数可接受3个参数:数组的某个元素、该元素对应的索引位置、数组本身,在回调函数第一次返回true时停止查找。

二者的区别是:find()方法返回匹配的值,而findIndex()方法返回匹配位置的索引

let arr = [1,2,3,4,5];
let num = arr.find(item => item > 1);
console.log(num) // 2

let arr = [1,2,3,4,5];
let num = arr.findIndex(item => item > 1);
console.log(num) // 1
1234567

17、entries()、keys()和values()

es6新增
entries()、keys()和values()--用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历

区别是keys()是对键名的遍历、values()是对键值的遍历、entries()是对键值对的遍历
1234
for(let index of [a,b].keys()){
     console.log(index);
}
// 0
// 1

for(let elem of [a,b].values()){
     console.log(elem);
}
// a
// b

for(let [index,elem] of [a,b].entries()){
     console.log(index,elem);
}
// 0 'a'
// 1 'b'
1234567891011121314151617

如果不使用for…of循环,可以手动调用遍历器对象的next方法,进行遍历

let arr1 = [a,b,c];
let entries = arrr1.entries();
console.log(entries.next().value);   // [0,a]
console.log(entries.next().value);   // [1,b]
console.log(entries.next().value);   // [2,c]
12345

18、indexOf()

	indexof方法可以在字符串和数组上使用。
	indexOf() 方法可返回某个指定的字符串值在字符串、数组中首次出现的位置。
12
    arr = ['mfg', '2017', '2016'];

    console.log(arr.indexOf('mfg')); // 0
    console.log(arr.indexOf('m')); // -1
    console.log(arr.indexOf('2017'));// 1
    console.log(arr.indexOf(2017)); // 

二、字符串

字符串其实就是数组的一种

JS中常用字符串方法

1、查找字符串中的字符串 indexOf() lastIndexOf()

  • indexOf() 方法返回字符串中指定文本首次出现的索引(位置);
  • lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引;
  • 如果未找到文本, indexOf() 和 lastIndexOf() 均返回 -1;两种方法都接受作为检索起始位置的第二个参数。

2、检索字符串中的字符串 search()

​ search() 方法搜索特定值的字符串,并返回匹配的位置;

indexOf()、search()这两种方法是不相等的。区别在于:

  • search() 方法无法设置第二个开始位置参数。
  • indexOf() 方法无法设置更强大的搜索值(正则表达式)。

3、提取部分字符串

有三种提取部分字符串的方法:

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

slice() 方法

  • slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
  • 该方法设置两个参数:起始索引(开始位置),终止索引(结束位置)。

substring() 方法

  • substring() 类似于 slice()。
  • 不同之处在于 substring() 无法接受负的索引。

substr() 方法

  • substr() 类似于 slice()。
  • 不同之处在于第二个参数规定被提取部分的长度

4、替换字符串内容 replace()

  • replace() 方法用另一个值替换在字符串中指定的值;
  • replace() 方法不会改变调用它的字符串。它返回的是新字符串;
  • 默认地,replace() 只替换首个匹配。默认地,replace() 对大小写敏感。

5、转换为大写和小写 toUpperCase() toLowerCase()

  • 通过 toUpperCase() 把字符串转换为大写;
  • 通过 toLowerCase() 把字符串转换为小写;

6、concat() 方法

  • concat() 连接两个或多个字符串:

7、String.trim()

  • trim() 方法删除字符串两端的空白符:

8、提取字符串字符

这是两个提取字符串字符的安全方法:

  • charAt(position)
  • charCodeAt(position)

charAt() 方法

  • charAt() 方法返回字符串中指定下标(位置)的字符串:

  • 
    
    var str = "HELLO WORLD";
    str.charAt(0);            // 返回 H
    

charCodeAt() 方法

  • charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码:

  • 
    
    var str = "HELLO WORLD";
    
    str.charCodeAt(0);         // 返回 72
    

三、对象

(1)创建指定的原型对象的对象
	var 对象=Object.create(指定对象,{配置对象});
		
		1、指定对象将会作为赋值对象的原型,即对象.__proto__=指定对象
		2、配置对象中的属性将会成为赋值对象的属性
		3、配置对象
			{
				属性名:{	会成为所创建对象的数据属性
					value:属性值
					configurable 只有该属性描述符的类型可以被改变并且该属性可以从对应对象中删除,默认false。
					writable:true/false 是否可修改,默认为false
					enumerable:true/fasle 是否可以能用 for in等循环枚举,默认为false						
				}
			}


(2)配置对象属性
	Object.defineProperties(指定对象,{属性名:{配置对象}})
	Object.defineProperty(指定对象,'属性名',{配置对象})
		
	    1、为指定对象定义扩展多个属性
	    2、get:function(){}   用来获取当前属性值的回调函数,即obj.属性名
	    	不能同时指定get和值或可写属性,设置后因为没有指定value,所以打印出来的对象上没有该属性,但能够访问到
	    	
	    3、set:function(外部修改变化的值){}  修改当前属性值触发的回调函数,即obj.属性名=xx;
	    	不能同时指定set和值或可写属性
	    4、this指向指定对象
	    5、配置对象中定义的属性只能通过get来获取,并且无法被修改

(3)对象本身的set、get方法,效果和(2)一样
 	var obj={
		xxx
		get 扩展属性名(){return xxx};
		set 扩展属性名(外部修改的值内容){xxx};
 	}
 	
(4)获取对象的原型类型
	Object.getPrototypeOf(对象)
	例:
		var a = {};
		Object.getPrototypeOf(a) === Object.prototype; // true
		
		var b = 123;
		Object.getPrototypeOf(b) === Number.prototype; // true
		
		var c = 'abc';
		Object.getPrototypeOf(c) === String.prototype; // true
		
		var d = false;
		Object.getPrototypeOf(d) === Boolean.prototype; // true
		
		var e = null;
		Object.getPrototypeOf(e); // TypeError: Cannot convert undefined or null to object
		
		var f = undefined;
		Object.getPrototypeOf(f); // TypeError: Cannot convert undefined or null to object
		
		var g = Symbol('g');
		Object.getPrototypeOf(g) === Symbol.prototype; // true
		
		Object.getPrototypeOf( Object ) === Function.prototype;        // true

		Object.getPrototypeOf( Object )是把Object这一构造函数看作对象,
		返回的当然是函数对象的原型,也就是 Function.prototype。
		
		正确的方法是,Object.prototype是构造出来的对象的原型。
		var obj = new Object();
		Object.prototype === Object.getPrototypeOf( obj );              // true
		
		Object.prototype === Object.getPrototypeOf( {} );               // true

(5)密封对象
	let obj=Object.seal(obj)
	
	密封一个对象会让这个对象:
		(1)变的不能添加新属性,但可以改变现有属性的值
		(2)一个数据属性不能被重新定义成为访问器属性,或者反之
			Object.defineProperty(obj, 'foo', {
			  get: function() { return 'g'; }
			}); // throws a TypeError
		
(6)冻结对象	
	let obj=Object.freeze(obj)
	
	在Object.seal基础上,不能改变现有属性的值

(7)获取对象上的属性(键名),不包括继承来的
	Object.getOwnPropertyNames(对象);	返回数组形式

(8)返回指定对象的原型
	const prototype1 = {};
	const object1 = Object.create(prototype1);
	console.log(Object.getPrototypeOf(object1) === prototype1); true
	
	var obj = new Object();

	Object.getPrototypeOf( Object );               // ƒ () { [native code] }
	Object.getPrototypeOf( Function );             // ƒ () { [native code] }
	
	Object.getPrototypeOf( Object ) === Function.prototype;        // true
	
	Object.getPrototypeOf( Object )是把Object这一构造函数看作对象,
	返回的当然是函数对象的原型,也就是 Function.prototype。
	
	正确的方法是,Object.prototype是构造出来的对象的原型。
	var obj = new Object();
	Object.prototype === Object.getPrototypeOf( obj );              // true
	
	Object.prototype === Object.getPrototypeOf( {} );               // true

(9)修改指定对象的原型
	Object.setPrototypeOf(对象,指向的原型)
	如果原型参数不是一个对象或者null(例如,数字,字符串,boolean,或者 undefined),则什么都不做,否则,该方法将obj的[[Prototype]]修改为新的值。
	
(10)获取指定对象上的键、值的集合
	Object.keys(对象);
	Object.values(对象);

(11)严格判断
	Object.is(m,n)	和===类似,不过有两点不同
	先说===:
		如果类型不同,就不相等
		如果两个都是数值,并且是同一个值,那么相等; 
		值得注意的是,如果两个值中至少一个是NaN,那么不相等(判断一个值是否是NaN,可以用isNaN()或Object.is()来判断)。
		如果两个都是字符串,每个位置的字符都一样,那么相等;否则不相等。
		如果两个值都是同样的Boolean值,那么相等。
		如果两个值都引用同一个对象或函数,那么相等,即两个对象的物理地址也必须保持一致;否则不相等。
		如果两个值都是null,或者都是undefined,那么相等。
		
   Object.is(),其行为与===基本一致,不过有两处不同:	
		+0不等于-0。
		NaN等于自身。

(12)Object.entries
	返回对象可枚举属性的键值对数组
	for (const [key, value] of Object.entries(object1)) {
	  console.log(`${key}: ${value}`);
	}

(13)Object.prototype.toString.call
	判断对象类型
	必须使用call:
		否则会因为Object内部调用,使得一直判断为[Object Object]
		const a =1;
		Object.prototype.toString(a)		[Object Object]
		Object.prototype.toString.call(a)   [Object Number]
		
	不能直接对象.toString():
		因为对于Array对象,重写了toString方法,使得不会返回类型
		const a=[1];
		Object.prototype.toString.call(a);	[Object Array]
		a.toString();	"1"

(14)检测对象是否可扩展
	即是否可以添加新的属性,以及 __proto__是否可以被修改
	
		var empty = {};
		Object.isExtensible(empty);  === true
		
	对象变成不可扩展
		Object.preventExtensions(empty);
		Object.isExtensible(empty); 	=== false
		
	密封对象是不可扩展的.
		var sealed = Object.seal({});
		Object.isExtensible(sealed); 	=== false
	
	冻结对象也是不可扩展.
		var frozen = Object.freeze({});
		Object.isExtensible(frozen); 	=== false

四、Set

简介:  ES6引入了两种新的数据结构:Set和Map。Set是一组值的集合,其中值不能重复;Map(也叫字典)是一组键值对的集合,其中键不能重复。Set和Map都由哈希表(Hash Table)实现,并可按添加时候的顺序枚举。

  Set类似于Array(数组),但需要通过SameValueZero算法保持值的唯一性。Object.is()依据的比较算法是SameValue,SameValueZero算法与之类似,唯一的区别就是在该算法中,+0和-0是相等的。

1)创建

  要使用Set,需要先将其实例化,如下代码所示,其中构造函数Set()能接收一个可选的参数:可迭代对象,例如字符串、数组等。

new Set();               //Set(0) {}
new Set("abc");                  //Set(3) {"a", "b", "c"}
new Set([+0, -0, NaN, NaN]);      //Set(2) {0, NaN}

2)写入

  通过add()方法可以在Set的末尾添加一个任意类型的值,并且由于方法的返回值是当前的Set,因此可以采用链式的写法。再利用size属性就可得到成员数量,从而获悉是否添加成功,如下所示。

var set = new Set();
set.add(1).add("a");        //Set(2) {1, "a"}
set.size;                //2

  有一点需要注意,虽然Set有写入方法,但并没有对应的读取方法。

3)移除

  总共有两个移除的方法,分别是delete()和clear()。delete()可指定移除的值,而clear()能清空集合,即移除所有成员。下面承接写入中的示例,分别调用这两个移除方法,并在其之后会根据has()方法判断是否移除成功。

set.delete(1);      //Set(1) {"a"}
set.has(1);         //false
set.has("a");        //true

set.clear();      //Set(0) {}
set.has(1);      //false
set.has("a");     //false

4)遍历

  Set与数组一样,也有三个ES6新增的迭代器方法:keys()、values()和entries(),功能也相同。但由于Set没有键,只有值,因此keys()和values()返回的结果是相同的,如下所示。

var digits = new Set();
digits.add(3).add(2).add(1);
[...digits.keys()];       //[3, 2, 1]
[...digits.values()];         //[3, 2, 1]
[...digits.entries()];        //[[3, 3], [2, 2], [1, 1]]

  除此之外,Set也有一个迭代方法:forEach(),参数也与数组的类似,第一个是回调函数,第二个是执行回调函数时使用的this对象。其中回调函数也包含3个参数,但参数含义略有不同,第一个和第二个都是当前成员的值,第三个是原始Set。从下面代码的注释中可知,Set的枚举顺序只与添加顺序有关,没有按照ES6所规定的枚举顺序(可参考第11篇)。

/*
  3 3 Set(3) {3, 2, 1}
  2 2 Set(3) {3, 2, 1}
  1 1 Set(3) {3, 2, 1} 
*/
digits.forEach(function(value1, value2, set) {
  console.log(value1, value2, set);
});

5)转换

  如果要将Set转换成数组,那么可以用Array.from()方法或扩展运算符实现,具体如下代码所示。注意,数组中的重复元素在传给Set后,就被过滤掉了。

var duplicate = new Set([1, 1, {}, undefined]);
Array.from(duplicate);            //[1, {}, undefined]
[...duplicate];                   //[1, {}, undefined]

简介:  Map类似于Object(对象),可用来存储键值对,但需要通过SameValueZero算法保持键的唯一性。与Set一样,在使用之前也得要实例化,如下代码所示,构造函数Map()中的参数也是一个可选的可迭代对象,但此对象得是键值对的集合或两列的二维数组。

五、Map

        Map类似于Object(对象),可用来存储键值对,但需要通过SameValueZero算法保持键的唯一性。与Set一样,在使用之前也得要实例化,如下代码所示,构造函数Map()中的参数也是一个可选的可迭代对象,但此对象得是键值对的集合或两列的二维数组。

    

实例方法

  • 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 —— 返回当前元素个数。

迭代方法

  • map.keys() —— 遍历并返回所有的键(returns an iterable for keys),
  • map.values() —— 遍历并返回所有的值(returns an iterable for values),
  • map.entries() —— 遍历并返回所有的实体(returns an iterable for entries)[key, value],for…of 在默认情况下使用的就是这个
  • map.forEach( (value, key, map) => {
    alert(${key}: ${value});
    });

创建Map

  • let map = new Map()
  • let map = new Map([
    [‘1’, ‘str1’],
    [1, ‘num1’],
    [true, ‘bool1’]
    ]);
  • Object.entities(obj):
let obj = {
  name: "John",
  age: 30
};
let map = new Map(Object.entries(obj));
12345
  • Object.fromEntries:从 Map 创建对象
let prices = Object.fromEntries([
  ['banana', 1],
  ['orange', 2],
  ['meat', 4]
]);

// 现在 prices = { banana: 1, orange: 2, meat: 4 }

alert(prices.orange); // 2
123456789

Map 和 Object

  1. Map 的key可以是任意类型,Object 的key是字符串,自动转换
  2. Map 有size等属性
  3. delete obj.id,使用for in 访问obj时候,还是会访问到id,值为undefined

标签:map,set,console,log,Object,object,数组,var,arr1
From: https://www.cnblogs.com/guibi/p/16656279.html

相关文章

  • maplectf复现
    maplebactf2022[honksay]进入题目可以看到我们可以传入一个url,然后goose会去访问我们上传的url,像这种能够上传url的题目,一般就三种类型xss,ssrf,csrf。这道题目给了源......
  • HashMap 的实现原理
    HashMap基于Hash算法实现的,我们通过put(key,value)存储,get(key)来获取。当传入key时,HashMap会根据key.hashCode()计算出hash值,根据hash值将value保存在bu......
  • map
    mp.count(x)判断x为下标的元素是不是在mp中,是就返回1,不是就返回0mp.erase(x)删除mp中x为下标的元素mp.size()返回mp中元素的个数mp.clear()清空mp......
  • HashMap 和 Hashtable 有什么区别?
    存储:HashMap运行key和value为null,而Hashtable不允许。线程安全:Hashtable是线程安全的,而HashMap是非线程安全的。推荐使用:在Hashtable的类注释可以看到,Hash......
  • mybatis之MetaObject
    MetaObject元数据对象,底层肯定是反射,通过反射来进行设置值。这个可以来操作对象中的属性,哪怕是组合方式,无论有多少层,这个都可以来进行操作。举例如下所示:publicclass......
  • Mybatis的ResultMap和ResultType的区别
    在使用mybatis进行数据库连接操作时对于SQL语句返回结果的处理通常有两种方式,一种就是resultType另一种就是resultMap,下面说下我对这两者的认识和理解resultType:当使用re......
  • 简单介绍 js array.map、array.forEach、Object.assign、Object.keys用法
     1、 Object.assign,合并成新的对象formData.data=Object.assign({},toRaw(props.rowData)); 2、Object.keys,循环对象的key属性 Object.keys(enumObj).forEa......
  • map排序及keyset顺序问题
    packagetest;importjava.util.HashMap;importjava.util.Hashtable;importjava.util.Iterator;importjava.util.LinkedHashMap;importjava.util.Map;import......
  • JAVA进阶--Collection集合之Set系列集合、可变参数、Collections工具类、Map集合体系
    第一节 Set系列集合1、Set系列   2、HashSet集合元素无序的底层原理:哈希表a、Set集合的底层原理是什么样的JDK8之前,哈希......
  • Source Map
    1.什么是SourceMapSourceMap就是一个信息文件,里面储存着位置信息。也就是说SourceMap文件中存储着压缩混淆后的代码,所对应的转换前的位置。有了它,出错的时候,除错......