js常见面试题及简单回答_js 面试translate-CSDN博客

本文链接：https://blog.csdn.net/weixin_44134588/article/details/108385810

一 h5新特性:

1, 新增了语义化标签

header,footer,article,aside,section,nav,hgroup,time,main等

2,新增表单控件

email,tel,url,number,range,search,color,

3 表单属性

palceholder 输入框提示

autofocus 表单获取输入焦点

required 必填字段

4 本地存储

4.1localStorage

储存时间:除非手动清除,永久保存,

大小:20MB

4.2 sessionsStorage

储存事件:关闭页面则消失

大小:5MB

二 css3新特性

1圆角

border-radius

2 阴影

bos-shadow

3 盒子模型

border-box:border-box(高宽不再受内边距和边框的影响)

4 过渡,动画

transform(旋转),scale(缩放),translate(定位) transition(过渡)

5,flex伸缩盒子

6 新增属性选择器

E[data] —— 选择带有data属性的元素对象

E[data=“one”] —— 选择带有data属性的元素对象且属性值为one

E[data^=“o”] —— 选择带有data属性的元素对象且属性以o开头

E[data$=“e”] —— 选择带有data属性的元素对象且属性以e结尾

E[data*=“n”] —— 选择带有data属性的元素对象且属性包含n

三 es6语法

es6新增了块级作用域,let声明的变量只能在作用域内使用,取消了变量提升

const 用来声明常量,声明后不可更改新增箭头函数(变量1,变量2)=>{};

3.1解构数组和对象:

let arr = [2, 3, 5];

let [a, b, c] = arr;

console.log(a); //2

console.log(b);//3

let obj = {

uname: ‘张三’,

age: 23,

sex: ‘男’

}

let {

uname: a1,

age: b1,

sex: c1

} = obj;

console.log(a1); //张三

console.log(b1);//23

console.log(c1);//男

3.2快速为对象赋值

let uname = ‘张三’

let sex = ‘男’

let age = 19;

let obj = {

uname,

age,

sex

};

console.log(obj);打印结果:
在这里插入图片描述

四 this指向问题

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KHG4EuNU-1599120813582)(C:\Users\老范\AppData\Roaming\Typora\typora-user-images\image-20200903104418702.png)]$

五 js继承的方式

1,类的继承(使用extends关键字)

  class Father {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            sum() {
                console.log(this.x + this.y);
            }
        }
        class Son extends Father {
            constructor(x, y) {
                super(x, y); //调用了父类中的构造函数
            }
        }
        var son = new Son(1, 2);
        var son1 = new Son(11, 22);
        son.sum();
        son1.sum();

在这里插入图片描述

2,子构造函数继承父构造函数中的属性和方法

    // 借用父构造函数继承属性
        // 1. 父构造函数
        function Father(uname, age) {
            // this 指向父构造函数的对象实例
            this.uname = uname;
            this.age = age;
        }
        // 2 .子构造函数 
        function Son(uname, age, score) {
            // this 指向子构造函数的对象实例
            Father.call(this, uname, age);
            this.score = score;
        }
        var son = new Son('刘德华', 18, 100);
        console.log(son);

使用父构造函数继承属性,使用原型对象继承方法:
通过call改变this的指向,将this指向为子构造函数本身

  function Father(uname, age) {

      //this指向父构造函数的对象实例

      this.uname = uname;

      this.age = age;

    }

    Father.prototype.money = function () { //父构造函数的原型对象上面增加的方法

      return 11111111111

    }

    //2,子构造函数

    function Son(uname, age, sore) {

      //this指向子构造函数的实例对象

      Father.call(this, uname, age) //先调用父,将指向改为子

      this.sore = sore; //子构造函数自身属性

    }
  Son.prototype = new Father(); //利用对象的方式改变了原型对象,需要利用constructor指回原对象
        Son.prototype.constructor = Son; //指回原对象
        Son.prototype.exat = function () {
            console.log('考试');
        }
        let son = new Son("刘德华", 23, 99)
        console.log(son.money());
        console.log(son);
        console.log(Father.prototype);

六浅拷贝和深拷贝

浅拷贝:只拷贝第一层属性,更深层次的属性是对内存地址的复制，让目标对象指针和源对象指向同一片内存空间。注意：当内存销毁的时候，指向对象的指针，必须重新定义，才能够使用;改变更深层次赋值对象的属性时,原对象的属性也会改变

方法一:遍历对象for (var k in obj){}

  let obj = {
            uname: 'zs',
            age: 22,
            msg: {
                sex: '男'
            }
        }
        let o = {}
        for (let k in obj) {
            o[k] = obj[k]
        }
        // o.msg.sex = '女'
        console.log(o);

改变o.msg.sex时,obj里面的值也会变

方法二:Object.assign(o, obj); assign es6新增语法糖,第一个参数为拷贝后的对象,第二个参数为要拷贝的对象,

  let obj = {
            uname: '张三',
            age: 18,
            msg: {
                sex: '男'
            }
        }
        let o = {}
        Object.assign(o, obj); //ES6新增语法糖  
        console.log(o);
        o.uname = '李四'
        o.msg.sex = '女'
        console.log(o);
        console.log(obj); //浅拷贝会改变原来的数据 有就覆盖,没就添加

打印结果:

在这里插入图片描述

因为uname属性是第一层的,因此修改uname属性后并没有改变原对象的uname值,但是sex属性在msg对象中,属于深层次的,由于浅拷贝只拷贝了地址,因此改变了msg里面的sex后,原对象中的sex属性值也发生了变化;

深拷贝:拷贝多层,开辟一个独立的空间,将所有东西都拷贝进来,

方法:

   let o1 = {}
        deepCopy(o1, obj)
        o1.msg.sex = '女'
        console.log(o1);
        console.log(o);

        function deepCopy(newobj, oldobj) {
            for (let k in oldobj) {
                //先判断数据类型
                //1,获取属性值  oldobj[k]
                let item = oldobj[k];
                //2先判断是否为数组
                if (item instanceof Array) {
                    newobj[k] = [];
                    deepCopy(newobj[k], item) //再次遍历,遍历的是数组 把值给属性
                    // 3,判断是否为对象
                } else if (item instanceof Object) {
                    newobj[k] = {};
                    deepCopy(newobj[k], item) //再次遍历,遍历的是对象 把值给属性 
                } else {
                    //简单数据类型
                    newobj[k] = item;
                }
            }
        }

在这里插入图片描述

由于是深拷贝,所以改变深层的属性值也不会对原对象内容进行改变;

七闭包的理解应用场景

闭包:指有权访问另一个函数作用域中变量的函数

在当前作用域内使用了其他作用域中的局部变量

	闭包的主要作用: 延伸了变量的作用范围

在js中,子函数可以使用父函数中的局部变量,因为子函数依赖父函数而存在;这样子函数就形成了闭包

八原型链

原型链由构造函数,原型对象,实例对象组成,实例对象通过对象原型使用原型对象中的方法,

如果没有就通过原型对象中的__proto去Object原型对象中查找,一层层向上查找;

就是一个函数调用它本身不存在的方法,通过原型链一层层向上查找;

在这里插入图片描述

kk可以调用Object原型对象和Star原型对象中的方法;

详细说明:https://blog.csdn.net/weixin_44134588/article/details/108101633

九数组去重

这里提供三种方法

    var arr = [1, 2, 3, 6, 7, 4, 2, 5, 8, 4, 3, 6, 5];
        var newarr = [];
        // 传统遍历
        for (var n = 0; n < arr.length; n++) {
            if (newarr.indexOf(arr[n]) === -1) {
                newarr.push(arr[n]);
            }
        }
        console.log(newarr);
        //set数据结构
        var newArr = new Set(arr); //set数据结构实现快速去重
        let newArr2 = [...newArr] //存入数组中
        console.log(newArr2);
        // filter方法
        let newArr1 = arr.filter(function (value, index, self) {
            return self.indexOf(value) === index //判断索引值是否===在数组中的索引值,如果等,则返回,后面的重复元素因为返回的索引值不等,所以不被返回
        })
        console.log(newArr1);