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