js常见面试题及简单回答

一 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指向问题

五 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);

十 js中的三个包装对象

String、Number、Boolean 可以通过new创建

十一在数组中查找某一个值，可以用哪些方法？

find ,filter some