Java教程

JavaScript 知识总结(一)

本文主要是介绍JavaScript 知识总结(一),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1.基本类型

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

2.引用类型

  • Object(对象)
  • Array(数组)
  • Function(函数)

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]

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

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

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

  • 构造继承
function cat(){
  func.call(this)
  this.yes = 'yes'
}
let pro = new cat();

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

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

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

  • 拷贝继承
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()

效率低,内存占用高

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

调用了两次父类函数构造,子类构造函数会代替父类构造函数

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

该继承为常用,解决了很多继承的缺点;

这篇关于JavaScript 知识总结(一)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!