夯实 JS 基础（慢慢更新）

2022-08-08 21:30:51

夯实 JS 基础

函数相关

预编译/作用域/闭包

原型/原型链/继承

数组/对象的操作方法

DOM对象相关

oninput的使用

	//一个能监测元素是否处在输入状态的属性	
	<input type="text" oninput="function">//不仅仅是只能使用在有输入的HTML元素上
	object.oninput=function(myScript)//在js中也是能对对象使用的（能用在哪些对象上待测试）

能对数组进行操作的函数方法

concat: ? concat()
constructor: ? Array()
copyWithin: ? copyWithin()
entries: ? entries()
every: ? every()
fill: ? fill()

filter: ? filter()

2020.9.2

最近有使用，使用它对数组对象的内容进行了过滤

	let arrObj=[
	{id:‘第一个‘,number:1},
	{id:‘第二个‘,number:2},
	{id:‘第三个‘,number:3}
	]
	arrObj.filter(item=>{
	return item.number>2
	})
	/*这里用一个判断条件，满足则返回该item,
	fliter是对数组中的每一个元素做一次判断,
	并且最后的返回值是过滤后的arrObj数组*/
	console.log(arrObj)//结果：[{id:‘第三个‘,number:3}]

find: ? find()
findIndex: ? findIndex()
flat: ? flat()
flatMap: ? flatMap()
flatten: ? flatten(/* depthArg = 1 */)
forEach: ? forEach()
includes: ? includes()
indexOf: ? indexOf()
join: ? join()
keys: ? keys()
lastIndexOf: ? lastIndexOf()

length: 0

2020.9.2

/*let arr = new Array()
let arr = new Array(4)
let arr = new Array(‘a‘,‘b‘,‘c‘)
let arr = []
let arr = [4]*/
let arr = [‘a‘,‘b‘,‘c‘]
console.log(arr.length)//结果3
arr.length=6
console.log(arr.length)//结果6

map: ? map()

2020.9.11

超详细的Map说明
JS 数据结构-Map:映射创建Map 常用Map方法<<=(点击跳转原博客)

Map

　　JavaScript 中的对象（Object），本质上是键值对的集合，但是只能用字符串来做键名。这给它的使用带来了很大的限制。

　　为了解决这个问题，ES6 提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

　　也就是说，Object 结构提供了“字符串 - 值”的对应，Map 结构提供了“值 - 值”的对应，是一种更完善的 JSON 数据结构的实现。

　　如果你需要更“宽松”的“键值对”数据结构，Map 比 Object 更合适。

　　特性：键值对=>任意类型=>更好的处理有映射需求的问题。

创建 Map

　　Map 本身是一个构造函数，在使用构造函数时，通过传入参数进行数据初始化。
```
let m = new Map();
```
　　Map 函数也可以接受一个数组（或类似数组的对象）作为参数，用来进行初始化。但是跟 Set 不同的是，Map 中该数组中的成员是一对对表示键值对的数组。
```
let m = new Map([["name", "zhangsan"], ["age", 20]]);
```
Map的属性

　　常用的属性就一个：size 　　返回 Map 实例的成员总数。

　　
```
let m = new Map([["name", "zhangsan"], ["age", 20]]);
console.log( m.size );//2
```
Map的方法

　　Map 实例的方法分为了两大类：操作用法（用于数据操作）和遍历方法（用于遍历数据）。

操作方法:

set(key, value)　　添加或修改数据。设置 key 所对应的键值，并返回 Map 结构本身

get(key)　　　　　获取数据。读取 key 对应的键值，如果找不到 key，返回 undefined

has(key)　　　　　查看是否存在某个数据，返回一个布尔值。

delete(key)　　　　删除数据。删除成功返回 true

clear()　　　　　　清除所有数据，没有返回值
```
let map = new Map([["name", "zhangsan"], ["age", 20]]);
// 设置 name 的值为 lisa
map.set("name", "lisa");
console.log( map ); // Map(2) {"name" => "lisa", "age" => 20}
// 获取 name 对应的值
let getMap = map.get("name");
console.log( getMap ); // lisa
// 查看是否存在 age
let hasMap = map.has("age");
console.log( hasMap ); // true
// 删除 age 键值对
let delMap = map.delete("age");
console.log( delMap ); // true
// 清空所有数据
map.clear();
console.log(map); // Map(0) {}
```
　　

遍历方法：

　　　　　　Map 提供了三个遍历器生成函数和一个遍历方法:

　　　　　　keys()　　　　返回一个键名的遍历器

　　　　　　values()　　　返回一个键值的遍历器

　　　　　　entries()　　　返回一个键值对的遍历器

　　　　　　forEach()　　使用回调函数遍历每个成员
```
let num = new Map([["one", 1], ["two", 2], ["three", 3]]);
for(let key of num.keys()){
console.log(key);
}
// one
// two
// three
for(let value of num.values()){
console.log(value);
}
// 1
// 2
// 3
for(let item of num.entries()){
  console.log(item[0], item[1]);
}
// one 1
// two 2
// three 3
// 将上面代码通过解构优化
for(let [key, value] of num.entries()){
  console.log(key, value);
}
// one 1
// two 2
// three 3
num.forEach((value, key) => {
 console.log(value, key)
})
// 1 one
// 2 two
// 3 three
```
与其他数据结构互换

Map 转为数组

　　Map 转为数组最方便的方法，就是使用扩展运算符 ... 。

　　　　
```
let myMap = new Map();
myMap
.set(true, "真")
.set(false, "假");//因为每次会返回新Map，可以连着写
console.log(myMap); // {true => "真", false => "假"}
let newMap = [...myMap];
console.log(newMap); // [[true, "真"], [false, "假"]]
```
数组转为 Map

　　将数组传入 Map 构造函数中，就可以转为 Map。
```
let arr = [[true, "真"], [false, "假"]];
let map = new Map(arr);
console.log(map); // {true => "真", false => "假"}
```
Map 转为对象

　　如果 Map 所有的键都是字符串，它就可以转为对象。
```
function strMapToObj(strMap){
  let obj = {};
  for(let [k, v] of strMap){
      obj[k] = v;
  }
  return obj;
}
let myMap = new Map().set("green","绿").set("red","红");
console.log(myMap); // {"green" => "绿", "red" => "红"}
console.log( strMapToObj(myMap) ); // { green: "绿", red: "红" }         
```
对象转为 Map
```
function objToStrMap(obj){
  let strMap = new Map();
  for(let item in obj){
     strMap.set( item, obj[item] )
  }
  return strMap;
}
let obj = { name: "zhangsan", age: 20 };
console.log( objToStrMap(obj) );
// {"name" => "zhangsan", "age" => 20}    
```
pop: ? pop()
push: ? push()
reduce: ? reduce()
reduceRight: ? reduceRight()
reverse: ? reverse()
shift: ? shift()
slice: ? slice()
some: ? some()
sort: ? sort()
splice: ? splice()
toLocaleString: ? toLocaleString()
toString: ? toString()
unshift: ? unshift()
values: ? values()
Symbol(Symbol.iterator): ? values()

ES 6 的新特性

ES 6 面向对象

ES 6 异步编程

夯实 JS 基础（慢慢更新）

码农公寓

夯实 JS 基础

函数相关

预编译/作用域/闭包

原型/原型链/继承

数组/对象的操作方法

DOM对象相关

oninput的使用

能对数组进行操作的函数方法

concat: ? concat()

constructor: ? Array()

copyWithin: ? copyWithin()

entries: ? entries()

every: ? every()

fill: ? fill()

filter: ? filter()

2020.9.2

find: ? find()

findIndex: ? findIndex()

flat: ? flat()

flatMap: ? flatMap()

flatten: ? flatten(/* depthArg = 1 */)

forEach: ? forEach()

includes: ? includes()

indexOf: ? indexOf()

join: ? join()

keys: ? keys()

lastIndexOf: ? lastIndexOf()

length: 0

2020.9.2

map: ? map()

2020.9.11

Map

创建 Map

Map的属性

Map的方法

操作方法:

遍历方法：

与其他数据结构互换

Map 转为数组

数组转为 Map

Map 转为对象

对象转为 Map

pop: ? pop()

push: ? push()

reduce: ? reduce()

reduceRight: ? reduceRight()

reverse: ? reverse()

shift: ? shift()

slice: ? slice()

some: ? some()

sort: ? sort()

splice: ? splice()

toLocaleString: ? toLocaleString()

toString: ? toString()

unshift: ? unshift()

values: ? values()

Symbol(Symbol.iterator): ? values()

ES 6 的新特性

ES 6 面向对象

ES 6 异步编程

相关文章

flatten: ? flatten(/ depthArg = 1 /)