夯实 JS 基础(慢慢更新)

夯实 JS 基础

函数相关

预编译/作用域/闭包

原型/原型链/继承

数组/对象的操作方法

DOM对象相关

oninput的使用

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

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

  1. concat: ƒ concat()

  2. constructor: ƒ Array()

  3. copyWithin: ƒ copyWithin()

  4. entries: ƒ entries()

  5. every: ƒ every()

  6. fill: ƒ fill()

  7. 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}]
    
  8. find: ƒ find()

  9. findIndex: ƒ findIndex()

  10. flat: ƒ flat()

  11. flatMap: ƒ flatMap()

  12. flatten: ƒ flatten(/* depthArg = 1 */)

  13. forEach: ƒ forEach()

  14. includes: ƒ includes()

  15. indexOf: ƒ indexOf()

  16. join: ƒ join()

  17. keys: ƒ keys()

  18. lastIndexOf: ƒ lastIndexOf()

  19. 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
    
  20. 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}    
    
  21. pop: ƒ pop()

  22. push: ƒ push()

  23. reduce: ƒ reduce()

  24. reduceRight: ƒ reduceRight()

  25. reverse: ƒ reverse()

  26. shift: ƒ shift()

  27. slice: ƒ slice()

  28. some: ƒ some()

  29. sort: ƒ sort()

  30. splice: ƒ splice()

  31. toLocaleString: ƒ toLocaleString()

  32. toString: ƒ toString()

  33. unshift: ƒ unshift()

  34. values: ƒ values()

  35. Symbol(Symbol.iterator): ƒ values()

ES 6 的新特性

ES 6 面向对象

ES 6 异步编程

posted @ 2020-09-11 13:48  五猫  阅读(210)  评论(0编辑  收藏  举报

载入天数...载入时分秒...