JavaScript 知识总结(一)

1.基本类型

  • Number(数值类型)
  • Null(Null类型)
  • Boolean(布尔)
  • Undefined(未定义)
  • String(字符串类型)
  • Symbol(Symbol类型)
    注:Symbol是ES6引入了一种新的原始数据类型,表示独一无二的值。
  • Biglnt 表示任意大的整数

2.引用类型

  • Object(对象)
  • Array(数组)
  • Function(函数)
  • Date类型,正则等

3.splice、split、slice、substring

  • splice()向数组添加或者删除
    比如:删除splice(i,1) 在某循环中删除一个数值;在数组第几个添加splice(i,0,'添加老婆')
  • split()把字符串切割成数组,如果是数值类型需要将转成字符串类型
  • slice()在数组中读取元素,截取字符串,不改变原数组
let arr = ["帅", "很帅", "太帅了", "帅到生活不用自理", "来个老婆"]; 
let get = arr.slice(1,3);
console.log(get) //['很帅', '太帅了']
  • substring()截取字符串
let str = '啊!!!你好帅啊,能加个好友?';
let get = str.substring(4,8)
console.log(get) //你好帅啊

4.Math是一个内置对象,拥有一些数学常数属性和教学函数方法,用于Number类型

  • Math.abs(x) 返回一个数的绝对值
    Math.abs('-1'); // 1
    Math.abs(-2); // 2
    Math.abs(null); // 0
    Math.abs("string"); // NaN
    Math.abs(); // NaN
  • Math.ceil(x) 返回大于一个数的最小整数,向上取整
  • Math.floor(x) 返回小于一个数的最大整数,向下取整
  • Math.random() 返回随机数
  • Math.round(x) 返回四舍五入的整数

5.try...catch语句标记要尝试的语句块,并指定一个出现异常是抛出的响应

  try {
    nonExistentFunction();
  } catch (error) {
    console.error(error);
    // expected output: ReferenceError: nonExistentFunction is not defined
    // Note - error messages will vary depending on browser
  }

6.filter(),过滤一个数组筛选出符合元素组成一个新数组,不改变原数组,不对空数进行检测;

  let arr = [12,20,'',16,88,'']
  let val = arr.filter((item) => item)
  console.log(val) //[12,20,16,88]

7.map(),数组中的元素为原始数组元素调用函数处理后的值,不改变原数组,不对空数进行检测;

  let arr = [12,20,'',16,88,'']
  let val = arr.map((item) => Number(item + 1))
  console.log(val) //[13, 21, 1, 17, 89, 1]

  //组合用法:
  //过滤一个数组中对象的id出来。
  let list = [...];
  let arr = list.filter(item => item.id).map(item => {return item.id})
  //arr = [1,2]

8.call()、apply()、bind()

  • call()方法使用一个指定this值和单独给出的一个或多个参数来调用一个函数;
  function fuc(name,food){
    this.name = name || 'Tom';
    this.food = food;
  }
  function real(name,food){
    fuc.call(this,name,food)
    console.log(`${name}正在吃${food}`)
    this.yes = 'jia'
  }
  new real('Jamy','西瓜')
  • apply()调用一个具有给定this值的函数,以及以一个数组(或类数组对象)的形式提供的参数;
    注:apply和call的方法类似;区别一个是参数列表一个是数组形式
  • bind()创建一个新的函数,在bind()被调用时,新函数的this被指定为bind()的第一个参数,其余参数将作为新函数的参数,供调用时使用;
  let obj = {
    x: 99,
    getX: function (){
      return this.x
    }
  }
  let isX= obj.getX;
  console.log(isX()) //undefined
  let isY = isX.bind(obj);
  console.log(isY()) //99

9.深拷贝和浅拷贝的定义
浅拷贝:拷贝出来的目标对象的指针和源对象的指针指向的内存空间是一块空间,浅拷贝是一种简单的拷贝,就是让几个对象共用一个内存,当这个内存销毁的时候,指向这个内存空间的所有指针需要重新定义,不然会报错。
深拷贝:拷贝出来的目标对象和源对象相互独立,其中一个对象改动不会造成另一个对象改动。

10.数据结构:是计算机中组织和存储数据的一种特殊方式,可以使得数据高效的被访问和修改。
可以分为两大类:线性数据结构和非线性数据结构。
常用的数据结构有:
数组:一种固定大小的数据结构,用于存储相同类型的元素集合,通过索引进行访问。
链表:由一个一个的节点组成,每个节点包含数据和指向下一个节点的指针。
栈:只有一个出入口,遵循先进后出的原则。
队列:只有两个出口,遵循先进后出的原则。
树:体现了一个层次结构,如DOM树、组件树等。
图:由多个节点以及连接节点的边组成,用于比较复杂的关系。

11.继承方法
注:当谈到继承时,javascript只有一种结构:对象。
每个实例对象都有一个私有属性(称为__proto__ )指向他的构造函数的原型对象(prototype)。
该原型对象也有一个自己的原型对象,层层向上直到一个对象的原型对象为null。
根据定义,null没有原型,并作为原型链的最后一个环节。
父类共用:

function func(){
  this.a = 1;
  this.b = 2;
  this.add = function(){
    return this.a + this.b
  }
}
func.prototype.set = () => {}
  • 原型链继承
let pro = new func();
console.log(pro.add()) //3
console.log(pro.b) //2
console.log(pro)

继承单一,子类无法向父类传值
新实例共享父类实例

  • 构造继承
function cat(){
  func.call(this)
  this.yes = 'yes'
}
let pro = new cat();
console.log(pro.set) //undefined
console.log(pro.b) //2
console.log(pro)

可以实现多继承,没有继承父类原型属性
无法实现函数的复用,call多了会臃肿,影响性能问题

  • 实例继承
function pro(name){
  let Obj = new func();
  Obj.c = 13;
  return pro;
}
let obj = new pro();

不支持多类继承,继承父类实例,不是子类实例

  • 组合继承
function pro(){
  func.call(this)
  this.a = 10
}
pro.prototype = new func();
let obj = new pro();

console.log(obj.set) //函数
console.log(obj.b) //2
console.log(obj)

父类可以复用,引用数据不会被共享
调用了两次父类函数构造,子类构造函数会代替父类构造函数,影响性能

  • 寄生组合继承
function pro(){
  func.call(this)
  this.a = 10
}
const Obj = function() {}; //创建一个空没有实例的函数
Obj.prototype = func.prototype;
pro.prototype = new Obj();
const Pro = new pro()

console.log(Pro.set) //函数
console.log(Pro.b) //2
console.log(Pro)

该继承为常用,解决了以上继承的缺点;

  • class继承
class Person{
  constructor(name){
    this.name = name
  }
  set = () => {}
}
class Student extends Person{
  constructor(name,love){
    super(name)
    this.love = love;
  }
  drink = () => {
    console.log(`我是${this.name}`)
  }
}
const student = new Student('小明','苹果');
console.log(`他是${student.name},喜欢吃${student.love}`)
console.log(student)

class Teacher extends Person{
  constructor(name,color){
    super(name)
    this.color = color;
  }
  drink = () => {
    console.log(`我是${this.name}`)
  }
}
const teacher = new Teacher('小黑','白色');
console.log(`他是${teacher.name},喜欢颜色是${teacher.color}`)
console.log(teacher)

该继承也是为常用的一种

  • 拷贝继承
function deepCopy (target = {}) { //深拷贝继承
    let anyVal = new func();
    if (typeof anyVal !== 'object' || anyVal === null) return anyVal;
    for (let i in anyVal) {
        const val = anyVal[i];
        if (isType('array', val)) {
            target[i] = deepCopy(val, [])
        } else if (typeof val === 'object') {
            target[i] = deepCopy(val);
        } else {
            target[i] = val;
        }
    }
    return target;
}
function isType (type, anyVal) {
    let newType = type.substring(0, 1).toUpperCase() + type.substring(1);
    return Object.prototype.toString.call(anyVal) === `[object ${newType}]`;
}
let obj = new deepCopy()

效率低,内存占用高

总和:寄生组合继承、class继承比较常用,深拷贝继承在一些简单数据拷贝方面也是经常使用,其余的一些组合缺点为比较明显。

posted @ 2021-11-08 17:24  夏季的雨  阅读(41)  评论(0)    收藏  举报