面试集合-js-02基础理论

左手的ㄟ右手 2024-04-17 14:17 42阅读 0赞

**这是一篇JavaScript基础理论知识点参照于：https://github.com/markyun/My-blog/blob/master/Front-end-Developer-Questions/Questions-and-Answers/README.md**  
*会一直实时保持更新的哦*

*  数据类型  
    js的数据类型大致分为5种(基础类型)：  
    Number数据类型  
    String字符串类型  
    Boolean 布尔类型  
    Null 空类型  
    Undefined 未定义类型  
    es6新增Symbol类型（创建后独一无二且不可变的数据类型）

--------------------

栈：原始数据类型（Undefined，Null，Boolean，Number、String）  
堆：引用数据类型（对象、数组和函数）

*  Javascript如何实现继承？
    
        1、构造继承
          2、原型继承
          3、实例继承
          4、拷贝继承

基础函数
    
    function Animal(){
    　　　　this.species = "动物";
    　　}
    　　
    function Cat(name,color){
    　　　　this.name = name;
    　　　　this.color = color;
    　　}

1.构造继承
    （ Function.apply(obj,args)方法能接收两个参数
    obj：这个对象将代替Function类里this对象
    args：这个是数组，它将作为参数传给Function（args-->arguments）
    ）
    function Cat(name,color){
    			  Animal.apply(this,arguments)
    　　　　this.name = name;
    　　　　this.color = color;
    　　}

2.原型继承
    Cat.prototype = new Animal();
    Cat.prototype.constructor = Cat
    var cat1 = new Cat("小喵","狸花")
    console.log（cat1.species ）//动物

es6继承
    class Person {
    }
    
    class Test extends Person{
    	constructor(x,y,h){
    		super(x,y);//调用父类的constructor(x,y)
    		this.h = h
    	}
    }

*  javascript创建对象的几种方式
    
    1、对象字面量的方式
    
        person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};
    
    2、用function来模拟无参的构造函数
    
        function Person(){}
         var person=new Person();//定义一个function，如果使用new"实例化",该function可以看作是一个Class
         person.name="Mark";
         person.age="25";
         person.work=function(){
         alert(person.name+" hello...");
         }
         person.work();

3、用工厂方式来创建（内置对象）

var wcDog =new Object();
             wcDog.name="旺财";
             wcDog.age=3;
             wcDog.work=function(){
               alert("我是"+wcDog.name+",汪汪汪......");
             }
             wcDog.work();

4、用原型方式来创建

function Dog(){
    
     }
     Dog.prototype.name="旺财";
     Dog.prototype.eat=function(){
     alert(this.name+"是个吃货");
     }
     var wangcai =new Dog();
     wangcai.eat();

*  什么是闭包（closure），为什么要用它？  
    闭包的特性：  
    1.函数内再嵌套函数  
    2.内部函数可以引用外层的参数和变量  
    3.参数和变量不会被垃圾回收机制回收  
    具体研究：[https://www.jianshu.com/p/26c81fde22fb][https_www.jianshu.com_p_26c81fde22fb]
 *  new操作符具体干了什么呢?  
    1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。  
    2、属性和方法被加入到 this 引用的对象中。  
    3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。
 *  ES6新特性（https://www.jianshu.com/p/87008f4f8513）  
    1、const与let变量  
    2、模板字面量  
    3、解构  
    4、for…of 循环  
    5、展开运算符  
    6、ES6箭头函数  
    7、默认参数函数
 *  数组 字符串 对象 常用函数掌握  
    1、数组部分常用函数  
    (1)splice函数(改变原始数组,有向数组指定位置添加元素的功能，即删除，插入，替换)  
    语法：**Array.splice(begin, deleteCount, addItem1, addItem2…)**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]  
    （2）slice 函数(不改变原数组，创建新数组)  
    （slice() 方法将数组中一部分元素**浅复制**存入新的数组对象，并且返回这个数组对象。）  
    语法：**arrayObject.slice(start,end)**  
    参数 start 指定复制开始位置的索引，end如果有值则表示复制结束位置的索引（不包括此位置）。  
    如果 *start* 的值为负数，假如数组长度为 *length*，则表示从 *length+start* 的位置开始复制，此时参数 end 如果有值，只能是比 start 大的负数，否则将返回空数组。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]  
    （3）join 函数（join() 方法将数组中的所有元素连接成一个字符串。）  
    语法：arrayObject.join(separator)

var b =[1,2,3]
    console.log(b.join(','))
    //打印出来为1,2，3

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]  
（4）push 函数  
（5）concat 函数  
语法：arrayObject.concat(arrayX,arrayX,…,arrayX)  
(concat() 方法将传入的数组或者元素与原数组合并，组成一个新的数组并返回。)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 3]  
（6）indexOf函数  
语法：arrObject.indexOf(searchvalue,fromindex)  
（indexOf() 方法用于查找元素在数组中第一次出现时的索引，如果没有，则返回-1。，indexOf使用严格相等（即使用 === 去匹配数组中的元素）。）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 4]  
（7）includes 函数  
语法：arr.includes(searchElement)  
说明：includes() 方法基于ECMAScript 2016（ES7）规范，它用来判断当前数组是否包含某个指定的值，如果是，则返回 true，否则返回 false。

**加粗样式**注意：indexOf和includes唯一的区别就是includes能够发现NaN，而indexOf不能。

2、字符串常用函数  
（1）split 函数  
语法：stringObject.split(separator,howmany)  
说明：把字符串分割称数组，不改变原始字符串  
（2）substr 函数  
语法：stringObject.substr(start,length)  
说明：substr() 方法返回字符串指定位置开始的指定数量的字符。  
（  
start 表示开始截取字符的位置，可取正值或负值。取正值时表示start位置的索引，取负值时表示 length+start位置的索引。

length 表示截取的字符长度  
）

3、对象的常用函数  
暂无

[https_www.jianshu.com_p_26c81fde22fb]: https://www.jianshu.com/p/26c81fde22fb
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d5e90c60043c4bf58d581b7ca1f89c9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a3561d1b807e4b5b91fb25c379e3afe3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/5f140658a55a4d01807660c7c452aa67.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/90be32173d3b40fcaf405e5a315fa17a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwNzI4Mw_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/153f2ae1d7a84e0da32d17028c4ae1d1.png