JS前端面试题（二）

31.说说你对promise的了解

• 依照Promise/A+的定义，Promise有四种状态：
  • pending:初始状态, 非fulfilled或rejected.
  • fulfilled:成功的操作.
  • rejected:失败的操作.
  • settled: Promise已被fulfilled或rejected，且不是pending
• 另外，fulfilled与rejected一起合称settled
• Promise对象用来进行延迟(deferred) 和异步(asynchronous) 计算

Promise 的构造函数

• 构造一个Promise，最基本的用法如下：

var promise = new Promise(function(resolve, reject) {
   
        if (...) {
     // succeed
            resolve(result);
        } else {
      // fails
            reject(Error(errMessage));
        }
    });

• Promise实例拥有then方法（具有then方法的对象，通常被称为thenable）。它的使用方法如下：

  1promise.then(onFulfilled, onRejected)

• 接收两个函数作为参数，一个在fulfilled的时候被调用，一个在rejected的时候被调用，接收参数就是future，onFulfilled对应resolve,onRejected对应reject

32.谈谈你对AMD、CMD的理解

• CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数
• AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的

33.web开发中会话跟踪的方法有哪些

• cookie
• session
• url重写
• 隐藏input
• ip地址

34.介绍js有哪些内置对象？

• Object是JavaScript中所有对象的父对象
• 数据封装类对象：Object、Array、Boolean、Number和String
• 其他对象：Function、Arguments、Math、Date、RegExp、Error

35.说几条写JavaScript的基本规范？

• 不要在同一行声明多个变量
• 请使用===/!==来比较true/false或者数值
• 使用对象字面量替代new Array这种形式
• 不要使用全局函数
• Switch语句必须带有default分支
• If语句必须使用大括号
• for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污

36.javascript创建对象的几种方式？

javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用

• 对象字面量的方式

person={
   firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

• 用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();

• 用function来模拟参构造函数来实现（用this关键字定义构造的上下文属性）

function Pet(name,age,hobby){
   
       this.name=name;//this作用域：当前对象
       this.age=age;
       this.hobby=hobby;
       this.eat=function(){
   
          alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");
       }
    }
    var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象
    maidou.eat();//调用eat方法

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

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

• 用原型方式来创建

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

• 用混合方式来创建

function Car(name,price){
   
 this.name=name;
 this.price=price; 
}
Car.prototype.sell=function(){
   
  alert("我是"+this.name+"，我现在卖"+this.price+"万元");
 }
var camry =new Car("凯美瑞",27);
camry.sell(); 

37.eval是做什么的？

• 它的功能是把对应的字符串解析成JS代码并运行
• 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）
• 由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')')

38.null，undefined 的区别？

• undefined表示不存在这个值。
• undefined:是一个表示”无”的原始值或者说表示”缺少值”，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回undefined
• 例如变量被声明了，但没有赋值时，就等于undefined
• null表示一个对象被定义了，值为“空值”
• null: 是一个对象(空对象, 没有任何属性和方法)
• 例如作为函数的参数，表示该函数的参数不是对象；
• 在验证null时，一定要使用　===，因为==无法分别null和　undefined

39.[“1”, “2”, “3”].map(parseInt) 答案是多少？

• [1, NaN, NaN]因为parseInt需要两个参数(val, radix)，其中radix表示解析时用的基数。
• map传了3个(element, index, array)，对应的radix不合法导致解析失败。

40.javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？

• use strict是一种ECMAscript 5添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行,使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为

41.js延迟加载的方式有哪些？

• defer和async、动态创建DOM方式（用得最多）、按需异步载入js

42.defer和async

• defer并行加载js文件，会按照页面上script标签的顺序执行
• async并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序执行

43.说说严格模式的限制

• 变量必须声明后再使用
• 函数的参数不能有同名属性，否则报错
• 不能使用with语句
• 禁止this指向全局对象

44.attribute和property的区别是什么？

• attribute是dom元素在文档中作为html标签拥有的属性；
• property就是dom元素在js中作为对象拥有的属性。
• 对于html的标准属性来说，attribute和property是同步的，是会自动更新的
• 但是对于自定义的属性来说，他们是不同步的

45.ECMAScript6 怎么写class么，为什么会出现class这种东西?

• 这个语法糖可以让有OOP基础的人更快上手js，至少是一个官方的实现了
• 但对熟悉js的人来说，这个东西没啥大影响；一个Object.creat()搞定继承，比class简洁清晰的多

46.常见兼容性问题

• png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8
• 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一,，但是全局效率很低，一般是如下这样解决：
• IE下,event对象有x,y属性,但是没有pageX,pageY属性
• Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

47.函数防抖节流的原理

防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于设置的时间，防抖的情况下只会调用一次，而节流的情况会每隔一定时间调用一次函数。

防抖(debounce): n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

function debounce(func, wait, immediate=true) {
   
    let timeout, context, args;
        // 延迟执行函数
        const later = () => setTimeout(() => {
   
            // 延迟函数执行完毕，清空定时器
            timeout = null