js中的数组，Map，Set，String的基本使用
一、Map
初始化
const m1 = new Map([['a', 111], ['b', 222]])
console.log(m1) // {"a" => 111, "b" => 222}
m1.get('a') // 111
const m2 = new Map([['c', 3]])
const m3 = new Map(m2)
m3.get('c') // 3
m3.has('c') // true
m3.set('d', 555)
m3.get('d') // 555
Map对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。构造函数Map可以接受一个数组作为参数。
Map对象的属性：
- size：返回Map对象中所包含的键值对个数
Map对象的方法：
- set(key, val): 向Map中添加新元素
- get(key): 通过键值查找特定的数值并返回
- has(key): 判断Map对象中是否有Key所对应的值，有返回true,否则返回false
- delete(key): 通过键值从Map中移除对应的数据
- clear(): 将这个Map中的所有元素删除
遍历方法：
- keys()：返回键名的遍历器
- values()：返回键值的遍历器
- entries()：返回键值对的遍历器
- forEach()：使用回调函数遍历每个成员
map与其他数据结构的互相转换
const obj = {}
const map = new Map(['a', 111], ['b', 222])
for(let [key,value] of map) {
obj[key] = value
}
console.log(obj) // {a:111, b: 222}
二、Set
Set对象允许你存储任何类型的值，无论是原始值或者是对象引用。它类似于数组，但是成员的值都是唯一的，没有重复的值。
初始化
Set类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构展。Set 构造函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。
Set集合比较特殊，内部只需要存储一个值，set集合的key和value一样。
let set = new Set();
console.log(set);
// 打印出： Set []
// 使用set可以用来给数组去重
let arr = [...new Set([1,2,4,4])];
console.log(arr);
// 打印出 Array(3) [ 1, 2, 4 ]Set实例对象的属性:
- size：返回Set实例的成员总数。
Set实例对象的方法:
- add(value)：添加某个值，返回 Set 结构本身(可以链式调用)。
- delete(value)：删除某个值，删除成功返回true，否则返回false。
- has(value)：返回一个布尔值，表示该值是否为Set的成员。
- clear()：清除所有成员，没有返回值。
遍历方法:
- keys()：返回键名的遍历器。
- values()：返回键值的遍历器。
- entries()：返回键值对的遍历器。
- forEach()：使用回调函数遍历每个成员。
由于Set结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。
三 数组
let arr= [];
const arr = new Array(5);
//二维数组
1.new Array(n).fill(new Array(n).fill(0))
注意，这种通过fill直接填充的是括号内对象的引用，所以当改变一维数组中某个数组时其他也会变化
2.new Array(n).fill().map(() => new Array(n).fill(0))
//length
arr.length
//push
//返回值是arr数组长度，改变原数组
arr.push(1); [1]
arr.push({a:1}) [{a:1}]
//shift 删除并返回队首值
arr.shift()
//includes 判断数组中是否存在某个值，同时该方法也可检测字符串
arr.includes();
//forEach 遍历数组中的元素，其中currentValue必填，表示当前元素，index表示索引，arr表示该数组对象
arr.forEach((currentValue, index, arr) => {})
//map 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
arr.map((currentValue,index,arr) => {
return currentValue*=2; //将原数组中的值乘以2
})
arr.map(Math.sqrt) //将原数组中的值开平方
arr.indexOf() // 返回某个指定的字符串值在字符串中首次出现的位置。
//filter 按条件过滤并返回新数组
arr.filter((value) => {
return value >=1
})
//splice是一个非常强大的方法，index表示数组自index开始，length表示删除的长度，newItem表示新添加的元素，可以是多个元素，用，分隔。
//splice返回的是删除的值，会改变原数组
arr.splice(index,length,newItem)
arr.splice(2,0,item1,item);
//slice() 方法选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括。会返回一个新的数组。
//当参数为一个负值时，即返回数组最后的n个数
arr.slice(1,3)
const arr = [1,2,3,4]
arr.slice(1) //2,3,4
/*reduce
arr 表示原数组；
prev 表示上一次调用回调时的返回值，或者初始值 init;
cur 表示当前正在处理的数组元素；
index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；
init 表示初始值。
*/
arr.reduce((pre,currentValue,index,arr)=>{
return pre+currentValue;
},0) 返回数组之和
//数组扁平化
function flag(arr) {
return arr.reduce((pre,val)=> {
return pre.concat(Array.isArray(val)?flag(val):val);
},[])
}
arr.join("") //将数组中的值拼接成一个字符串
四 String 对象
字符串api中最常用的api有两个：
- str.split(’ ')用于将字符串变为数组，注意它的参数必须为空的字符串才可以将它们变成一个个的
- str.slice(startindex, endindex)slice方法是数组与字符串都有的一个方法，用于选取指定的部分，有头无尾！！！
属性 描述
charAt() 返回在指定位置的字符
indexOf() 返回某个指定的字符串值在字符串中首次出现的位置
includes() 查找字符串中是否包含指定的子字符串
split() 把字符串分割为字符串数组
trim() 去除字符串两边的空白
toString() 返回一个字符串
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分
replace() 在字符串中查找匹配的子串，并替换与正则表达式匹配的子串
五 遍历方法
js数组遍历和对象遍历_二旬的博客-CSDN博客_js遍历数组对象
// 1、普通for循环、
var arr = [1, 2, 3, 4];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]); //1,2,3,4
}
// 2、forEach，数组自带的循环(es5)
//缺陷：不能使用break语句中断循环，也不能使用return语句返回到外层函数
var arr = [1, 2, 3, 4];
arr.forEach(function (value, i) {
console.log("forEach遍历:" + i + "--" + value);
});
// VM405:2 forEach遍历:0--1
// VM405:2 forEach遍历:1--2
// VM405:2 forEach遍历:2--3
// VM405:2 forEach遍历:3--4
let abc = arr.forEach(function (value, i) {
return value * value;
});
console.log(abc); //undefined
// 3、map遍历,用法与 forEach 相似(es5)
//map即是 “映射”的意思
let abc = arr.forEach(function (value, i) {
console.log("forEach遍历:" + i + "--" + value);
return value * value;
});
console.log(abc);
// VM133:2 forEach遍历:0--1
// VM133:2 forEach遍历:1--2
// VM133:2 forEach遍历:2--3
// VM133:2 forEach遍历:3--4
VM133: 5(4)[(1, 4, 9, 16)];
//4、for-of 、for-in（es6）
// 4.1 for-of和for-in的区别
// 遍历可迭代的对象（包括Array, Map, Set, arguments等），它主要用来获取对象的属性值，而for…in主要获取对象的属性名。
// 1、for … in 迭代对象的属性键。而 for … of 迭代对象的属性的值
//for-of
var arr1 = [1, 2, 3];
for (let i of arr1) {
console.log(i); //1,2,3
}
//for-in
//1、遍历数组时，为数组的下标
var arr1 = [1, 2, 3];
for (let i in arr1) {
console.log(i); //0,1,2
}
//2、遍历对象时，为对象的属性值
var obj1 = { a: "1", b: "2", c: "3" };
for (let i in obj1) {
console.log(i); //a,b,c
}
// 2、for … of 不像 for … in，它不支持迭代普通对象
const person = {
firstName: "zhang",
lastName: "san",
age: 42,
};
for (let k of person) {
console.log(k);
}
// VM247:1 Uncaught TypeError: person is not iterable
// iterable,“可迭代的”
// 原因：普通对象不可迭代
// 解决方法：使用 Object.keys() 方法来迭代对象属性
const person = {
firstName: "zhang",
lastName: "san",
age: 42,
};
for (let k of Object.keys(person)) {
console.log(k, ":", person[k]);
}
// VM259:2 firstName : zhang
// VM259:2 lastName : san
// VM259:2 age : 42
// 3、for…of 可以与 break / continue / return 配合使用
let arr1 = [1, 2, 3, 11];
for (var n of arr1) {
if (n > 10) {
break;
}
console.log(n); //1,2,3
}
// 4、遍历数组
// 1、for-in
var arr = [1, 2, 3];
for (var i in arr) {
console.log(i, arr[i]);
}
// VM95:3 0 1
// VM95:3 1 2
// VM95:3 2 3
// 2、for-of
var arr = [1, 2, 3];
for (var value of arr) {
console.log(value); //1,2,3
}
// 3、some()
//some(item,index,array)
//some(元素的值，元素的索引，被遍历的数组)
var arr = [1, 2, 3, 11, 12, 13];
arr.some(function (item, index, array) {
console.log(item, index, array);
return item > 10; //是否有大于10的数，返回值为true或false
});
// VM357:3 1 0 (6) [1, 2, 3, 11, 12, 13]
// VM357:3 2 1 (6) [1, 2, 3, 11, 12, 13]
// VM357:3 3 2 (6) [1, 2, 3, 11, 12, 13]
// VM357:3 11 3 (6) [1, 2, 3, 11, 12, 13]
// true
// 特点：
// 1、some被调用不会改变数组
// 2、some一直在找符合条件的值，一旦找到，则不会继续迭代下去。（一个为true,则返回true）
// 6、every()
var arr = [1, 2, 3, 11, 12, 13];
arr.every(function (item, index, array) {
console.log(item, index, array);
return item > 10; //是否有大于10的数，返回值为true或false
});
// 1 0 (6) [1, 2, 3, 11, 12, 13]
// false
// 特点
// 1、every被调用不会改变数组
// 2、every一直在找不符合条件的值，一旦找到，则不会继续迭代下去。（一个不为true,则返回false）
// 7、filter()
var arr = [1, 2, 3];
arr.filter((item) => {
// item为数组当前的元素
return item > 1; // [2, 3]
});
1;
2;
3;
4;
//filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
// 原文链接：https://blog.csdn.net/weixin_44572568/article/details/122829301
原文链接：https://blog.csdn.net/weixin_44572568/article/details/122829301
JS数组遍历：
1，普通for循环，经常用的数组遍历
var arr = [1,2,0,3,9];
for ( var i = 0; i <arr.length; i++){
console.log(arr[i]);
}
2，优化版for循环:
使用变量，将长度缓存起来，避免重复获取长度，数组很大时优化效果明显
for(var j = 0,len = arr.length; j < len; j++){
console.log(arr[j]);
}
3，forEach，数组自带的循环，主要功能是遍历数组
arr.forEach(function(value,i){
console.log('forEach遍历:'+i+'--'+value);
})
forEach这种方法也有一个小缺陷：你不能使用break语句中断循环，也不能使用return语句返回到外层函数。
4,map遍历，map即是 “映射”的意思 用法与 forEach 相似
arr.map(function(value,index){
console.log('map遍历:'+index+'--'+value);
});
map遍历支持使用return语句，支持return返回值
var temp=arr.map(function(val,index){
console.log(val);
return val*val
})
console.log(temp);
forEach、map都是ECMA5新增数组的方法，所以ie9以下的浏览器还不支持
5，for-of遍历
for..of为ES6新增的方法，主要来遍历可迭代的对象（包括Array, Map, Set, arguments等），它主要用来获取对象的属性值，而for..in主要获取对象的属性名。
var arr1 = [1, 2, 3]
for (let i of arr1){
console.log(i)
}
// 遍历普通对象报错
var obj2 = {fname:1, name2:22}
for(let val of obj2){
console.log(val)
}
- for-of这个方法避开了for-in循环的所有缺陷
- 它可以正确响应break、continue和return语句
for-of循环支持数组，还支持类对象(例如DOM NodeList对象)，字符串，map对象，set对象
for -of遍历数组，遍历的结果是数组的值
for-of不适合遍历普通对象，但可以通过Array.from()方法转换为类数组或可迭代对象
JS对象遍历：
1，Object.keys()遍历对象
1.1，在实际开发中，我们有时需要知道对象的所有属性,Object.keys()，传入对象，返回属性名并放在数组里
var obj = {'a':'123','b':'345'}
console.log(Object.keys(obj))
// ["a", "b"]
1.2，Object.keys().forEach() 遍历对象，把对象的属性名转成数组，可与数组遍历结合使用
var person = {
name: 'hhh',
age:'20',
sex:'男',
home:'china'
}
var keys = Object.keys(person).forEach((e) =>{
console.log('person', e, ':', person[e])
})
// Object.keys 遍历对象，把对象的属性名转成数组，可与数组遍历结合使用
var keys2 = Object.keys(person)
console.log(keys2)
// ["name", "age", "sex", "home"]
2，for-in遍历对象
for...in遍历对象，它遍历的是属性名
会遍历实例的属性，还会遍历整个原型链，这可能不是你所期望的结果，然后从性能角度上看Object.keys会更优。
var obj = {'a':'123','b':'345'}
for (let key in obj){
console.log(key ,obj[key])
}
// a 123
// b 345
for-in是为遍历对象而设计的，不适用于遍历数组。
遍历数组的缺点：for-in遍历的index值"0","1","2"等是字符串
for (var index in arr){
console.log(arr[index]);
console.log(index);
}
for-in遍历，会把属性名排序
let obj2 = {b:2, a:'11', 1:'ok'}
for (let key in obj2) {
console.log(key)
}
// 1
// b
// a
for...in总结：
1、for in遍历对象时，会遍历实例的属性+还遍历原型中可枚举的属性
2、for in不适合遍历数组，遍历数组遍历的是下标，下标类型是 字符串
3，for in遍历会以任意顺序遍历对象的属性名
六 js循环的几种方式
1.普通的for
var arr = [1, 2, 3]
for(var i = 0; i < arr.length; i++) { // 这里的i是代表数组的下标
console.log(i); // 0, 1, 2
};
最简单的一种，正常用的话也不会出现什么问题，想中断也可以中断，性能上也还可以
2.改良的普通for
var arr = [1, 2, 3]
for(var i = 0, len = arr.length; i < len; i++) { // 这里的i是代表数组的下标
console.log(i); // 0, 1, 2
};
使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。这种方法基本上是所有循环遍历方法中性能最高的一种
3.for...of...遍历(这种遍历支持ES6)
var arr = [1, 2, 3]
for(var item of arr) { // item代表数组里面的元素
console.log(item); // 1, 2, 3
};
与forEach()不同的是，它可以正确响应break、continue和return语句
性能要好于forin，但仍然比不上普通for循环
这个方法避开了for-in循环的所有缺陷
4. forEach()
var arr = [1, 2, 3];
arr.forEach((item, index, arr) => { // item为arr的元素，index为下标，arr原数组
console.log(item); // 1, 2, 3
console.log(index); // 0, 1, 2
console.log(arr); // [1, 2, 3]
});
常用的return false是可以终止代码继续往下执行的，但是在forEach遍历中，并没有终止循环，所以在用forEach的时候，要考虑使用场景了。
5.some()
var arr = [1, 2, 3];
arr.some((item, index, arr) => { // item为数组中的元素，index为下标，arr为目标数组
console.log(item); // 1, 2, 3
console.log(index); // 0, 1, 2
console.log(arr); // [1, 2, 3]
})
some作为一个用来检测数组是否满足一些条件的函数存在，同样是可以用作遍历的函数签名同forEach，有区别的是当任一callback返回值匹配为true则会直接返回true，如果所有的callback匹配均为false，则返回false。
some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
6.every()
var arr = [1, 2, 3];
arr.every((item, index, arr) => { // item为数组中的元素，index为下标，arr为目标数组
return item > 0; // true
return index == 0; // false
})
every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every() 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
7.for...in...遍历.
var arr = [1, 2, 3]
for(var item in arr) { // item遍历数组时为数组的下标，遍历对象时为对象的key值
console.log(item); // 0, 1, 2
};
for...in更多是用来遍历对象，很少用来遍历数组， 不过 item 对应与数组的 key值，建议不要用该方法来遍历数组，因为它的效率是最低的。
8. filter()
var arr = [1, 2, 3];
arr.filter(item => { // item为数组当前的元素
return item > 1; // [2, 3]
})
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
9.map()
var arr = [1, 2, 3];
arr.map(item => { // item为数组的元素
console.log(item); // 1, 2, 3
return item * 2; // 返回一个处理过的新数组[2, 4, 6]
})
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
这种方式也是用的比较广泛的，虽然用起来比较优雅，但实际效率还比不上foreach
作者：在下高姓
链接：https://www.jianshu.com/p/d3fd25aed6c9
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
