再不学ES6你就out啦,腾讯T2大佬手把手教你

41 阅读7分钟

最后

面试题千万不要死记,一定要自己理解,用自己的方式表达出来,在这里预祝各位成功拿下自己心仪的offer。

大厂面试题

面试题目录

开源分享:docs.qq.com/doc/DSmRnRG…

  • let好处:防止循环 变量变成全局变量(i)
  • 不存在变量提升,只能先声明再使用
  • 暂时性死区,也就是说在块级作用域中变量会被整体绑定在整个块级区域,不再受外部代码影响,虽然两个变量名相同但是里面的变量跟外面的变量是没有关系的

案例:

a是没有定义的,也就是说在外面是不可以访问到a的 

if(true) {

 let a =10;

}

log(a) //a是没有定义的,也就是说在外面是不可以访问到a的

 let没有变量提升 ,所以不能这样先使用后声明:

//let没有变量提升 ,所以不能这样先使用后声明:

console.log(a) //a is not defined

let a =20;

 大括号里面的tmp变量不会受外部tem变量的影响

//大括号里面的tmp变量不会受外部tem变量的影响

var tmp = 123;

if(true) {

tmp ='abc'; //会报错,报变量没有定义的错

let tmp;

}

2.2、const关键字声明变量


作用:用于声明常量,常量就是值(内存地址)不能变化的量

特点:

  • 具有块级作用域------作用在大括号里面
  • 声明常量时必须赋初始值
  • 常量赋值后,值不能更改,比如简单数据类型:数值、字符串不能更改;复杂数据类型时:不能重新赋值,也就是常量里面的对应的内存地址不可以更改,但是可以修改数据结构中的值比如数组或者对象,里面的值是可以更改的

案例

const ary =[100,200];

ary[0]='a';

ary[1]='b';

ary['a','b']; //是正确的

ary=['a','b']; //但是这种是错误的 不能重新赋值

2.3 声明变量的总结


**使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象--函数作用域 值可更改

使用let声明的变量,其作用域为该语句所在的块级内,不存在变量提升--块级作用域  值可更改

使用const声明的是常量,在后面出现的代码中不能再修改该常量的值--块级作用域  值不可以更改

  

函数的定义、派值、存储的数据不需要变化、数学公式中不变的值,const比let的效率高**

三、解构赋值 

=======

很容易的从数组和对象中取值;ES6中允许从数组中提取值,按照对应位置,对应量赋值。对象也可以实现解构

3.1数组解构 


数组解构的基本形式

形式一:变量与数组的值的个数相同

等号左边代表的是解构不是代表的数组是变量;与数组中的值是一一对应的关系

let ary = [1,2,3];

let [a,b,c] = ary;

console.log(a) //a=1

console.log(b) //b=2

console.log(c) //c=3

 形式二:变量与数组中的值的个数不相同  不对等的值是undefined的

let ary = [1,2,3];

let[a,b,c,d,e]=ary;

//d和e的值是undefined

3.2对象解构 


实际上是属性的匹配如果匹配成功就将对应的值赋给变量

写法一:

let person ={name:'章三',age:20};

let {name,age} =person ; //左边相当于解构

console.log(name) //章三

console.log(age) //20

写法二:变量的名字和对象里面的属性名不一样

myName 和 myAge 属于别名;属性名匹配就将右侧name的值赋值给myName 和 myAge

let person ={name:'章三',age:20};

let{name:myName,age:myAge} = person;

console.log(myName); //章三

console.log(myAge); //20

剩余参数   (...args)表示接受所有的实参

剩余参数语法允许我们将一个不定数量的参数表示为一个数组;就是当实参大于形参的时候,将剩余的参数放入到一个数组中

    const sum = (...args) => {
        let total = 0;
        args.forEach(item => total += item); //item是箭头函数的参数   
        return total;
    };
    console.log(sum(10, 20));;
    console.log(sum(10, 20, 30));;

 剩余参数和解构搭配使用

    let arr =['里斯','斯','里'];
    let[s1,...s2] =arr;
    console.log(s1); //里斯
    console.log(s2); //[斯,里]

四、箭头函数

======

语法:()=> { }

const fn = () =>{ }

调用函数 fn()

通常给函数定一个变量,函数名字就是变量名字,调用函数就是调用变量名字就可以了  常量fn的值就等于箭头函数

特点:

  1. 函数体只有一句代码,且代码的执行结构就是返回值,可以省略大括号 const sum=(num1,num2)=>num1+num;相当于返回num1+num2的值给sum
  1. 如果形参只有一个,可以省略小括号。const fn = v =>v;返回值是将v的值返回给fn,输出就直接调用fn(20)

五、Array的扩展运算符 

==============

扩展运算符可以将数组或者对象转为用逗号分割的参数序列

let ary =[1,2,3];

console.log(...ary) // 1 2 3

5.1、扩张运算符可以运用于合并数组


方法一:

let ary1 = [1,2,3]

let ary2 = [4,5,6]

let ary3 =[...ary1 , ...ary2];

方法二:

let ary1 = [1,2,3]

let ary2 = [4,5,6]

let arr1.push(...ary2) 可以将多个参数追加到arr1数组中

5.2、将伪数组或可遍历对象转换为真正的数组


方法一:

将伪数组转换为真正的数组 oDivs = [...oDivs];

好处:就是可以调用数组下面的方法

let oDivs =document.getElemnetsByTagName("div");

oDivs = [...oDivs];

方法二:

构造函数方法 Array.from()

将伪数组或可遍历对象转换为真正的数组

let arr1 ={

  '0':'a',
  '1':'b',
  '2':'c',
  length:3  

}

let arr2 =Array.from(arr1) //['a','b','c']

**此方法还可以接受第二个参数,作用类似于数组的each方法,用来对每个元素进行处理,将处理后的值放入返回的数组

Array.from(arr1,(item)=>{}) 函数里面的形参item就是当前要处理的值**

 

let arr1 ={

      '0':20,

      '1':21,

      '2':22,

      length:3  

  }

let newary =Array.from(arr1 , item=>item *2)  //函数是将数组中的每个值都乘以2

5.3、find()方法


用于找出第一个符合条件的数组成员,如果没有找到返回undefined   返回值就是你要查找的那个元素

let ary =[{

id:1,

name:'张三'

},

{

id:2,

name:'李三'

}

];

let target =ary.find((item,index)=>item.id ==2)

5.4、findIndex()方法


用于查找处第一个符合条件的数组成员的位置,如果没有找到返回-1

let ary =[1,2,3,4,5,9];

let index = ary.findIndex((value,index) => value>4);

console.log(index) // 4

//注意查找的第一个符合的值 是5 所以返回5的索引号是4

5.5、includes方法


表示某个数组是否包含给定的值,返回布尔值

[1,2,3].includes(2) //true

[1,2,3].includes(4) //false

六、模版字符串 

========

创建字符串的方式,使用反引号定义

let name = `张三`

特点

  • 模版字符串中可以解析变量

let name='张三'

let sayHello = hello,my name is ${name}; 就不要用加号拼接字符串了

  • 模版字符串中可以换行
<script>
    let result = {
        name: 'zhangsan',
        age: 20,
        sex: '男'
    }
    let html = `
        <div>
        <span>${result.age}</span>
        <span>${result.age}</span>
        <span>${result.sex}</span>
        </div>`

最后

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言:世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它