js笔记 -待续类和对象面向对象写js案例 reduce的使用及使用场景 map 的使用及使用场景遍历对象的各个属性

类和对象

面向对象解决思路：
	将公共的属性和方法抽取出来，写入类中，根据类，实例化对象，创建各种各样的对象。

面向对象写js案例

案例 tab栏的切换
抽象对象：Tab对象
1.该对象具有切换功能
2.该对象具有添加功能
3.该对象具有别除功能
4.该对象具有修改功能

reduce的使用及使用场景

map 的使用及使用场景

//将数组转为字符串型，数值型 map(Number)，map(String),map( str =>parseInt(str) )
let arr=['3','5','7']
arr=arr.map(Number)
console.log(arr);

遍历对象的各个属性

let obj = {
  a: 3,
  b: 3,
};

for (let asdf in obj) {
  console.log(asdf);//a b
}

判断是否是数组

Array.isArray(obj)//是打印出来则为true,不是就是false

直到满足条件才进行,

function checkVoucherInfo(params) {
  console.log("函数");
  if (params.a == 3) {
    return 0;
  } else if (params.a == 2) {
    return 0;
  } else {
    return 1;
  }
}
if (checkVoucherInfo({ a: 1, b: 1, c: 0 })) {
  console.log(1234);
}
//返回 函数 1234

回调函数

// 为了确保先执行 funA 再执行 funB
// 我们在 funA 加上 callback 参数
var funA = function (callback) {
  setTimeout(function () {
    console.log("1234,function A");
    // 如果 callback 是个函数就调用它
    if (typeof callback === "function") {
      console.log(callback());;
    }
  }, 1000);
};

var funB = function () {
  return "b"
};

// 将 funB 作为参数带入 funA()
funA(funB);
//打印1234,function A 
//打印b

对象的简写形式

let a=1
let obj={a:a}//等价与
//let obj={a}
console.log(obj);

// 获取选中节点及父级的label
    getBreadcrumbArray(list, id) {
      let temp = [];
      let forFn = function(arr, id) {
        for (let i = 0; i < arr.length; i++) {
          let item = arr[i];
          if (item.id === id) {
            forFn(list, item.pid);
            temp.push(item.label);
            break;
          } else if (item.children) {
            forFn(item.children, id);
          }
        }
      };
      forFn(list, id);
      return temp;
    },

没有该变量会报错，

let a={}
console.log(a.b);//不报错 undefined
console.log(b);//报错 b is not defined

async

// async返回的是Promise对象？
async function testAsync() {
    return 'hello';
//上篇文章Promise对象的返回值如果不是Promise，会通过Promise.resolve()转化为Promise，再进行处理
}
const result = testAsync()
console.log(result);//Promise { 'hello' }  说明async返回的是Promise对象

call 通过 call()，您能够使用属于另一个对象的方法。

//没有参数的时候
let getSum = {
  a: 1,
  b: 2,
  fun: function () {
    return this.a + this.b;
  },
};
console.log(getSum.fun());//3
let obj1 = {
  a: 11,
  b: 11,
};
let obj2 = {
  a: 22,
  b: 22,
};
console.log(getSum.fun.call(obj1));//22
console.log(getSum.fun.call(obj2));//44

//有参数情况
//call() 方法分别接受参数。
//apply() 方法接受数组形式的参数。
let getSum = {
  fun: function (a, b) {
    return a + b;
  },
};
let obj1 = {};
let obj2 = {};
console.log(getSum.fun.apply(obj1, [1, 1]));
console.log(getSum.fun.call(obj2, 2, 2));

synyc await ???

请求返回的promise对象，一般用.then(()=>{}).catch(()=>{})获取数据

也可以用

 async categoryList() {
    let res = await reqgetCategoryList();// reqgetCategoryList()是发请求
    console.log(res);/
  },
//export const reqgetCategoryList = () =>requests.get(`/product/getBaseCategoryList`);

event.target

goSearch(event){
      let node=event.target
      console.log(node.dataset);  
    }
//node 输出的是节点   <a data-v-18b3c0cc="" data-categoryname="家用电器">家用电器</a>
//node.dataset  输出的是对象
{
    "v-18b3c0cc": "",
    "categoryname": "家用电器"
}

try{}catch{}的用法

function _getStorage(key) {
  let data = sessionStorage.getItem(key)
  let result = ''
  try {
      result = JSON.parse(data)
  } catch (e) {
      result = data
  }
  return result
}
JSON.parse(null);
// null

JSON.parse("");
// VM6600:1 Uncaught SyntaxError: Unexpected end of JSON input

JSON.parse(undefined);
// VM6635:1 Uncaught SyntaxError: Unexpected token u in JSON at position 0

Object.keys(obj)

判断是否是空对象 Object.keys(obj).length

let obj={a:2,b:3}
console.log(Object.keys(obj));			//[ 'a', 'b' ]
console.log(Object.keys(obj).length);//2

sessionStorage和JSON.parse

当使用sessionStorage.getItem获取数据时，得到的是 JSON 字符串 ,需要用JSON.parse进行解析，不然获取不到对应的值。

let userInfo = sessionStorage.getItem("userInfo")
userInfo.name  //undefine
JSON.parse(userInfo.name)

Object.assign

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
1.属性被后续参数中具有相同属性的其他对象覆盖。
2.目标对象的属性与源对象的属性相同，源的会覆盖目标的属性

检查数组是否包含一个基本类型的值

Arrya.includes() 方法检查数组是否包含一个基本类型的值

let animals = ["?", "?", "?", "?"]

animals.includes("?") // true
animals.includes("?") // false

Arrya.indexOf() 方法查找的元素的确切位置

let grades = ["B", "D", "C", "A"]

grades.indexOf("A") // 3
grades.indexOf("F") // -1 找不到返回-1

检查对象数组是否包含对象

let animals = [{name: "dog"}, {name: "snake"}, {name: "monkey"}, {name: "donkey"}]
let element = {name: "monkey"}

animals.some(animal => animal.name === element.name)

引用类型

let map = new Map();
let arr = [];
let obj = { name: "1111" };
arr.push(obj);
map.set(1, obj);
console.log(arr[0] == map.get(1));
obj.age = 18; //map和arr的值会同时变化
let obj2 = { eee: 333 };
//  map.set(1, obj2);  
//  只有map的值变化，此时key:1对应的obj2的地址
console.log(map);
console.log(arr);

删除对象的某个属性 delete

let dog = {
  name:'wangwang',
  age:"33"
};
console.log(dog);
//{name: "wangwang", age: "33"}
//删除当前dog对象中的age属性
delete dog.age;

console.log(dog);
//{name: "33"}

js笔记 -待续