那些你面试必须知道的ES6知识点

1、var、let、const的区别

区别一:

var有变量提升,而let和const没有

 	<script>
      console.log(str); //undefined
      var str = "你好";
    </script>
 	<script>
      console.log(str); //
      let str = "你好";
    </script>
    <script>
      console.log(str); //
      const str = "你好";
    </script>

在这里插入图片描述

区别二:

var可以多次声明一个变量
let和const不能多次声明一个变量

	<script>
      var str = "你好";
      var str = '我好'
      var str = '大家好'
      console.log(str); //大家好
    </script>
	<script>
      let str = "你好";
      let str = '我好'
      let str = '大家好'
      console.log(str); //大家好
    </script>
    <script>
      const str = "你好";
      const str = '我好'
      const str = '大家好'
      console.log(str); //大家好
    </script>

在这里插入图片描述

区别三:

var、let声明变量、
const声明常量
var和let声明的变量可以再次赋值,但是const不可以再次赋值了。

	<script>
      var str1 = "你好";
      let str2 = "我好";
      const str3 = "大家好";
      str1 = "哈哈";
      str2 = "哈哈哈";
      str3 = "哈哈哈哈";
      console.log(str1); //哈哈
      console.log(str2); //哈哈哈
      console.log(str3); //报错,/*  */Uncaught TypeError: Assignment to constant variable.
    </script>

区别四:

var声明的变量没有块级作用域
let和const声明的变量有自身块级作用域

	 <script>
      if (true) {
        var str = "哈哈哈";
      }
      console.log(str);//哈哈哈
    </script>
	 <script>
      if (true) {
        let str = "哈哈哈";
      }
      console.log(str);// ReferenceError: str is not defined
    </script>
	 <script>
      if (true) {
        const str = "哈哈哈";
      }
      console.log(str);// ReferenceError: str is not defined
    </script>

2、作用域考题

考题一:let和const没有变量提升性

 	<script>
      console.log(str); //undefined
      var str = "你好";
      console.log(num); //报错
      let num = 10;
    </script>

考题二:

 <script>
      function demo() {
        var n = 2;
        if (true) {
          var n = 1;
        }
        console.log(n); //1
      }
      demo();
    </script>
<script>
	   function demo() {
        let n = 2;
        if (true) {
          let n = 1;
        }
        console.log(n); //2
      }
      demo();
</script>

考题三:可以修改引用对象里面的值,不能直接修改本身

 <script>
      const obj = {
        a: 1,
      };
      obj.a = 11111;
      console.log(obj);

      const arr = ["a", "b", "c"];
      arr[0] = "aaaaa";
      console.log(arr);
    </script>

在这里插入图片描述

 <script>
      const obj = {
        a: 1,
      };
      obj = {
        a: 2,
      };
      console.log(obj);

      const arr = ["a", "b", "c"];
      arr = ["hh"];
      console.log(arr);
  </script>

在这里插入图片描述
直接报错。

3、合并两个对象

方式一:Object.assign

 <script>
      let a = {
        a: 1,
        b: 2,
      };
      let b = {
        a: 4,
        b: 5,
        c: 6,
      };
      const obj1 = Object.assign(a,b);
      console.log(obj1);
    </script>

如果有相同的属性值,后者覆盖前者。

方式二:…扩展运算符

<script>
      let a = {
        a: 1,
        b: 2,
      };
      let b = {
        a: 4,
        b: 5,
        c: 6,
      };
      const obj1 = {...a,...b};
      console.log(obj1);
    </script>

方式三:自己封装方法

	<script>
      let a = {
        a: 1,
        b: 2,
      };
      let b = {
        a: 4,
        b: 5,
        c: 6,
      };
      function merge(target, source) {
        for(let key in source) {
          target[key] = source[key];
        }
        return target;
      }
      console.log(merge(a, b));
    </script>

4、箭头函数和普通函数的区别

1、this指向问题

箭头函数的this指向在定义的时候就决定了,不能通过(call、apply、bind)改变
箭头函数的this指向定义的时候,指向外层第一个普通函数,如果为最顶层则指向window。

 <script>
      let obj = {
        a: function () {
          console.log(this);
        },
        b:()=>{
          console.log(this);
        }
      };
      obj.a();
      obj.b();
    </script>

在这里插入图片描述
使用call改变this指向,无效果.
apply和bind同样。

 <script>
      let obj = {
        a: function () {
          console.log(this);
        },
        b:()=>{
          console.log(this);
        }
      };
      obj.a();
      obj.b.call(obj);
    </script>

在这里插入图片描述
2、箭头函数不能new(不能实例化成构造函数)

<script>
      let obj = {
        a: function () {
          console.log(this);
        },
        b:()=>{
          console.log(this);
        }
      };
      let objA = new obj.a();
      let objB = new obj.b();
    </script>

在这里插入图片描述
3、箭头函数没有prototype(原型)

<script>
      let obj = {
        a: function () {
          console.log(this);
        },
        b:()=>{
          console.log(this);
        }
      };
      console.log(obj.a.prototype)
      console.log(obj.b.prototype)
</script>

在这里插入图片描述
4、箭头函数没有arguments

	<script>
      let ff = function () {
        console.log(arguments);
      };
      let fn = () => {
        console.log(arguments);
      };
      ff();
      fn();
    </script>

在这里插入图片描述

 <script>
      let ff = function () {
        return fn = () => {
        console.log(arguments);
      };
      };
     
      ff()();
    </script>

如果箭头函数的外层第一个普通函数有arguments,则改箭头函数的arguments为父级作用域的arguments。

我们可以通过Rest(剩余)运算符解决箭头函数没有arguments的问题。

<script>
      let ff = function() {
        console.log(arguments);

      } 
      let fn = (...res) => {
        console.log(res);
      };
      ff(1)
      fn(1)
    </script>

在这里插入图片描述

5、Promise有几种状态

  1. 使用promise的时候,给它一个承诺,我们可以将他划分为三个阶段
  • pending(待定),执行了executor,状态还在等待中,没有被兑现,也没有被拒绝
  • fulfilled(已兑现),执行了resolve函数则代表了已兑现状态
  • rejected(已拒绝),执行了reject函数则代表了已拒绝状态
  1. 简单理解:
  • 你承诺自己明天开始好好学习(还未到明天,此时为待定状态
  • 时光飞逝,到了第二天你去图书馆好好学习了(已兑现状态
  • 时光飞逝,到了第二天你因为某些事情而无法去图书馆学习(已拒绝状态
  1. 状态只要从待定状态,变为其他状态后,则状态不能再改变。
  • 比如从pengding状态变为fulfilled状态后,则不能在从fulfilled状态变为rejected状态
  • 同样从pengding状态变为rejected状态后,则不能在从rejected状态变为fulfilled状态

举个栗子:

	const p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('成功了')
                reject('失败了')
            },1000)
        })
        p.then(resolve=>console.log(resolve)).catch(reject=>console.log(reject))
        //成功了

当我调用resolve之后,在调用reject是无效的,因为状态已经发生改变,并且是不可逆的。

6、find和filter的区别

区别一:返回的内容不同

filter 返回是新数组
find 返回具体的内容

区别二:

find :匹配到第一个即返回
filter : 返回整体(每一个匹配到的都返回)

	<script>
      let arr = [1, 2, 3, 4, 5];
      let newArr1 = arr.find((item) => {
        return item > 2;
      });
      let newArr2 = arr.filter((item) => {
        return item > 2;
      });
      console.log(newArr1);
      console.log(newArr2);
      console.log(arr);
      //都不改变原数组
    </script>

在这里插入图片描述

7、some和every的区别

some ==》 如果有一项匹配则返回true
every ==》 全部匹配才会返回true

<script>
      let arr = [1, 2, 3, 4, 5];
      let newArr1 = arr.some((item) => {
        return item > 2;
      });
      let newArr2 = arr.every((item) => {
        return item > 2;
      });
      console.log(newArr1);
      console.log(newArr2);
    </script>

在这里插入图片描述

 <script>
      let arr = [1, 2, 3, 4, 5];
      let newArr1 = arr.some((item) => {
        return item > 0;
      });
      let newArr2 = arr.every((item) => {
        return item > 0;
      });
      console.log(newArr1);
      console.log(newArr2);
    </script>

在这里插入图片描述