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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。