js基础

最新推荐文章于 2023-07-11 19:10:10 发布

一只小兔崽子

最新推荐文章于 2023-07-11 19:10:10 发布

阅读量95

点赞数 1

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_48171199/article/details/111824893

版权

js 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一 js基本数据类型

五种简单数据类型和一种复杂数据类型
简单： String、Number、Boolean、undefined、Null
复杂：Object
我们用typeof来检测基本数据类型
“undefined”–>这个变量是未定义的(为初始化的变量和未声明的变量的 typeof操作都返回undefined)
”boolean“–>这个值是布尔值
”string“ -->这个值是字符串
”number“–>这个值是数字
”object“–>这个值为null或者obejct（对象和数组返回的都是object）
”function“–>这个值是函数
基本数据类型又分为值类型和引用数据类型
简单数据类型就是值类型，存在栈中
复杂数据类型如：Array，object是引用类型存在堆中
栈和堆的区别
栈：
（1）栈中主要存放一些基本数据类型的变量（byte，short，int，long，float，double，boolean，char）和对象的引用。
（2）栈的优势是，存取速度比堆快，栈数据可以共享。但缺点是，存放在栈中的数据占用多少内存空间需要在编译时确定下来，缺乏灵活性。
堆：
（1）Java的堆是一个运行时数据区，类的对象从堆中分配空间。这些对象通过new等指令建立，通过垃圾回收器来销毁。
（2）堆的优势是可以动态地分配内存空间，需要多少内存空间不必事先告诉编译器，因为它是在运行时动态分配的。但缺点是，由于需要在运行时动态分配内存，所以存取速度较慢。

二深拷贝

  深拷贝主要是针对对象和数组的

1 深拷贝可以用json方法来实现
例：

 **1 .JSON.parse(JSON.stringify(XXXX))**

var array = [
    { number: 1 },
    { number: 2 },
    { number: 3 }
];
var copyArray = JSON.parse(JSON.stringify(array))
copyArray[0].number = 100;
console.log(array); //  [{number: 1}, { number: 2 }, { number: 3 }]
console.log(copyArray); // [{number: 100}, { number: 2 }, { number: 3 }]

2 手写递归深拷贝

   /**
 * 深拷贝
 */

const obj1 = {
    age: 20,
    name: 'xxx',
    address: {
        city: 'beijing'
    },
    arr: ['a', 'b', 'c']
}

const obj2 = deepClone(obj1)
obj2.address.city = 'shanghai'
obj2.arr[0] = 'a1'
console.log(obj1.address.city)
console.log(obj1.arr[0])

/**
 * 深拷贝
 * @param {Object} obj 要拷贝的对象
 */
function deepClone(obj = {}) {
    if (typeof obj !== 'object' || obj == null) {
        // obj 是 null ，或者不是对象和数组，直接返回
        return obj
    }

    // 初始化返回结果
    let result
    if (obj instanceof Array) {
        result = []
    } else {
        result = {}
    }

    for (let key in obj) {
        // 保证 key 不是原型的属性
        if (obj.hasOwnProperty(key)) {
            // 递归调用！！！
            result[key] = deepClone(obj[key])
        }
    }

    // 返回结果
    return result

三变量计算、类型转换

字符串拼接
用’+'操作符来拼接字符串是最常用的一种方式

   const a=100+10  // 110
   const b= 100 + '10'  //'10010'
   conse c= true + '10' // 'true10'

    字符串用“+”操作符拼接，最后都会返回一个字符串

==运算符

   一个 =： 代表赋值 ，如：
   	 var  a= 10；
   	 console.log(a) // 10
  两个 == ： 用于值类型的对象上，判断两个对象是否相等
  三个===：用于比较两个类的对象是否指向同一引用

四、原型与原型链

1.原型：

       每个函数都有一个prototype属性，被称为显示原型
       每个实例对象都会有_ _proto_ _属性,其被称为隐式原型
       每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype

 每个prototype原型都有一个constructor属性，指向它关联的构造函数。

2.原型链
获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原型的原型，一直找到最顶层(Object.prototype)为止。Object.prototype对象也有__proto__属性值为null。

这里需要注意的是Object是属于原型链的顶层，所有构造函数的的prototype都指向 Object.prototype

在这里插入图片描述

五、class

	 class是es6新增语法，用关键字class定义定义类。该关键字的出现使得javascript在对象写法上更加清晰，更像是一种面向对象的语言。

类实质上就是一个函数。类自身指向的就是构造函数。
类的所有方法都定义在类的prototype属性上。

我们可以通过prototype属性对类添加方法。如下：

 Person.prototype.addFn=function(){
    return "我是通过prototype新增加的方法,名字叫addFn";
}
var obj=new Person("kity",88);
console.log(obj.addFn());//我是通过prototype新增加的方法,名字叫addFn

还可以通过Object.assign方法来为对象动态增加方法

Object.assign(Person.prototype,{
    getName:function(){
        return this.name;
    },
    getAge:function(){
        return this.age;
    }
})
var obj=new Person("kity",88);
console.log(obj.getName());//kity
console.log(obj.getAge());//88

constructor方法是类的构造函数的默认方法，通过new命令生成对象实例时，自动调用该方法。

class Box{
    constructor(){
        console.log("啦啦啦，今天天气好晴朗");//当实例化对象时该行代码会执行。
    }
}
var obj=new Box();

constructor方法如果没有显式定义，会隐式生成一个constructor方法。所以即使你没有添加构造函数，构造函数也是存在的。constructor方法默认返回实例对象this，但是也可以指定constructor方法返回一个全新的对象，让返回的实例对象不是该类的实例。

class Desk{
    constructor(){
        this.aa="我是一只小小小小鸟！哦";
    }
}
class Box{
    constructor(){
       return new Desk();// 这里没有用this哦，直接返回一个全新的对象
    }
}
var obj=new Box();
console.log(obj.aa);//我是一只小小小小鸟！哦

constructor中定义的属性可以称为实例属性（即定义在this对象上），constructor外声明的属性都是定义在原型上的，可以称为原型属性（即定义在class上)。hasOwnProperty()函数用于判断属性是否是实例属性。其结果是一个布尔值， true说明是实例属性，false说明不是实例属性。in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。

class Box{
    constructor(num1,num2){
        this.num1 = num1;
        this.num2=num2;
    }
    sum(){
        return num1+num2;
    }
}
var box=new Box(12,88);
console.log(box.hasOwnProperty("num1"));//true
console.log(box.hasOwnProperty("num2"));//true
console.log(box.hasOwnProperty("sum"));//false
console.log("num1" in box);//true
console.log("num2" in box);//true
console.log("sum" in box);//true
console.log("say" in box);//false

可以通过proto来为类增加方法。使用实例的proto属性改写原型，会改变Class的原始定义，影响到所有实例，所以不推荐使用！

class Box{
    constructor(num1,num2){
        this.num1 = num1;
        this.num2=num2;
    }
    sum(){
        return num1+num2;
    }
}
var box1=new Box(12,88);
var box2=new Box(40,60);
box1.__proto__.sub=function(){
    return this.num2-this.num1;
}
console.log(box1.sub());//76
console.log(box2.sub());//2

class不存在变量提升，所以需要先定义再使用。因为ES6不会把类的声明提升到代码头部，但是ES5就不一样,ES5存在变量提升,可以先使用，然后再定义。

ES6中的 class继承

我们用extends 关键字来实现class继承，然后结合super继承父类中的方法和属性

//class 相当于es5中构造函数
//class中定义方法时，前后不能加function，全部定义在class的protopyte属性中
//class中定义的所有方法是不可枚举的
//class中只能定义方法，不能定义对象，变量等
//class和方法内默认都是严格模式
//es5中constructor为隐式属性


//父类
class People{
  constructor(name='wang',age='27'){
    this.name = name;
    this.age = age;
  }
  eat(){
    console.log(`${this.name} ${this.age} eat food`)
  }
}
//子类 通过extends 继承父类
class Woman extends People{ 
   constructor(name = 'ren',age = '27'){ 
     //继承父类属性
     super(name, age); 
   } 
    eat(){ 
     //继承父类方法
      super.eat() 
    } 
} 
let wonmanObj=new Woman('xiaoxiami'); 
wonmanObj.eat();

六、 instanceof

instanceof 是 Java 的保留关键字。它的作用是测试它左边的对象是否是它右边的类的实例，返回 boolean 的数据类型。

instanceof运算符需要指定一个构造函数，或者说指定一个特定的类型，它用来判断这个构造函数的原型是否在给定对象的原型链上。

console.log(
    100 instanceof Number, //false
    'dsfsf' instanceof String, //false
    false instanceof Boolean, //false
    undefined instanceof Object, //false
    null instanceof Object, //false
    [1,2,3] instanceof Array, //true
    {a:1,b:2,c:3} instanceof Object, //true
    function(){console.log('aaa');} instanceof Function, //true
    new Date() instanceof Date, //true
    /^[a-zA-Z]{5,20}$/ instanceof RegExp, //true
    new Error() instanceof Error //true
)

基本数据类型中：Number，String，Boolean。字面量值不可以用instanceof检测，但是构造函数创建的值可以，如下:

var num = new Number(123);
var str = new String('dsfsf');
var boolean = new Boolean(false);

还需要注意null和undefined都返回了false，这是因为它们的类型就是自己本身，并不是Object创建出来它们，所以返回了false。

一只小兔崽子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js基础

一 js基本数据类型五种简单数据类型和一种复杂数据类型简单： String、Number、Boolean、undefined、Null复杂：Object我们用typeof来检测基本数据类型“undefined”–>这个变量是未定义的(为初始化的变量和未声明的变量的 typeof操作都返回undefined)”boolean“–>这个值是布尔值”string“ -->这个值是字符串”number“–>这个值是数字”object“–
复制链接

扫一扫