【JS概念速记1 ES6 】

最新推荐文章于 2024-08-22 14:32:34 发布

鸢_

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量429

点赞数 1

文章标签： javascript 面试

本文链接：https://blog.csdn.net/qq_61834461/article/details/125667300

版权

本文深入探讨了ES6中的let、const与var的区别，包括它们的块级作用域、变量提升、全局属性、重复声明以及暂时性死区。同时，详细阐述了const对象的属性修改规则。接着，分析了箭头函数无法用new创建的原因及与普通函数的主要差异。此外，介绍了扩展运算符和rest参数的用法，并讲解了Proxy在数据劫持中的应用。最后，讨论了解构赋值在对象与数组中的区别，以及如何安全地获取多层数据的值。

摘要由CSDN通过智能技术生成

3.call\apply\bind不能改变this的指向

4. 构造函数不能作为构造函数使用

5.箭头函数不能作为Generator函数，不能使用yeild关键字

1.let \const\ var的区别

1.块级作用域：

const 与let严格遵守块级作用域 {}，且不存在变量提升，而var不仅仅会出现变量提升，还会出现变量泄露的情况，具体有以下两点：

· 内测变量会覆盖外层变量

· 用来计数的循环变量会泄露为全局变量

2.变量提升

只在申明前就可以使用的数据声名,var声明存在此问题。

3.全局属性

浏览器的全局对象是window，node的全局对象是global，var声明会将变量变为全局属性，但是let和const不会

4.重复声明

var重复声明变量会重新赋值，而let和const重复声明会报错

5.暂时性死区

与 4 .对应，暂时性死区是指声明变量前的部分，不能使用变量，故var不存在暂时性死区

6.初始值

let和var可以不设定初始值，但const必须设定初始值

（当不设定初始值时，let和var console输出结果为“undefined”）

7.指针指向

const不可以改变指针指向

（指针指向是只赋值引用类型数据变量时，指向一个固定的内存物理地址存储数据）

2. const对象的属性可以修改吗

const锁定的是指针的指向，但不限制所属内存区域的值变化

·基本数据类型（number string Boolean）可随意改变

·引用数据类型（obj arr）只要保证指针指向不变，内部的数据可以随便改

可以改变指针指向的操作：

const a = [xx,xx] =====> a = [ss,xx]

3.为什么箭头函数不能用new创建

箭头函数没有prototype，没有自己的this，没有arguments参数可使用，所以不能New

new操作的实现原理

1.创建一个对象

2.将构造函数的作用域赋值给新对象（将对象的_proto_指向构造函数的prototype属性）

3.指向构造函数中的代码，构造函数中的this指向该对象（为这个对象添加属性方法）

4.返回新的对象

上述 2 3 箭头函数无法完成

4.箭头函数与普通函数的区别

1.箭头函数写法更加简洁

可以大量削减代码量

如果最简状态下不想返回可以写为

let fun = ()=>void anotherFun();

这是一种常用的调用其他函数的方法

2.没有自己的this

箭头函数的this就是它所在作用域{}的this。书写时已经确认且之后不会因为调用者的不同而改变

要注意的是完全的闭包环境才能确定this，如果this只是放在对象的{}内任然会指向外侧最大的闭包中

3.call\apply\bind不能改变this的指向

4. 构造函数不能作为构造函数使用

5.箭头函数不能作为Generator函数，不能使用yeild关键字

6.理解this的底层原理

// ES6 
const obj = { 
  getArrow() { 
    return () => { 
      console.log(this === obj); 
    }; 
  } 
}

// ES5，由 Babel 转译
var obj = { 
   getArrow: function getArrow() { 
     var _this = this; 
     return function () { 
        console.log(_this === obj); 
     }; 
   } 
};

6. 扩展运算符 rest参数

1.对象

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }

对象使用扩展运算符会将对象的键值对逐一收录到新对象

2.数组

数组的效果类似于对象，数组本就是一个object

console.log(...[1, 2, 3])
// 1 2 3
console.log(...[1, [2, 3, 4], 5])
// 1 [2, 3, 4] 5

3.复制与合并

复制

const arr1 = [1, 2];
const arr2 = [...arr1];
合并
const arr1 = ['two', 'three'];
const arr2 = ['one', ...arr1, 'four', 'five'];
// ["one", "two", "three", "four", "five"]

4.与解构赋值搭配可生成新数组

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

/*
    这里只能将rest放在最后一位，收录残余数据，不然会报错
*/

5.分解字符串为数组

[..."Javascript"] 
//["J","a","v","a","s","c","r","i","p","t"]

7.Proxy可以实现什么功能

proxy是对目标对象设置一个关卡，读取与赋值操作会先被proxy拦截，通过handler处理后返回特定的值，其中的get与set分别对应读取与设定值

proxy可以一次性对多次数据全部添加数据劫持，故vue3放弃object.definePrototy而使用proxy.

8.对于对象与数组的解构赋值有什么区别

对象的解构赋值，如果对象是引用数据类型，实现的是浅拷贝，如果是基本数据类型，则是深拷贝，对于数组一样适用

当对象解构复制的时候，严格根据变量名进行赋值

而数组则是“对号入座”，将值附在对应位上

9.如何安全获取多层数据的值

const school = {
   classes: {
      stu: {
         name: 'Bob',
         age: 24,
      }
   }
}

可以逐一获取或者使用解构赋值多次嵌套去获取

//逐一获取
const { classes } = school
const { stu } = classes
const { name } = stu
name // 'Bob'
//嵌套解构赋值
const { classes: { stu: { name } }} = school
       
console.log(name)  // 'Bob'

当然我们很多时候可能不知道这个变量出现在那一层，所以赋值的时候要用递归遍历树，找到我们需要的root获取数据

10.ES6的模板语法与字符串处理

模板语法，

模板字符串，旨在简化字符串拼接，使js更加灵活，更可以使“存储html结构”到变量中成为可能

var name = 'css'   
var career = 'coder' 
var hobby = ['coding', 'writing']
var finalString = `my name is ${name}, I work as a ${career} I love ${hobby[0]} and ${hobby[1]}`

//直接编写html结构
let list = `
	<ul>
		<li>列表项1</li>
		<li>列表项2</li>
	</ul>
`;
console.log(message); // 正确输出，不存在报错

字符串存储性判断

includes(sth) //boolean

startsWith(sth) //boolean

endsWith(sth) //boolean

repeat()

const sourceCode = 'repeat for 3 times;'
const repeated = sourceCode.repeat(3) 
console.log(repeated) // repeat for 3 times;repeat for 3 times;repeat for 3 times;

扩展：之前只能用indexOf（）-1 判断

之后含出现了str.charCodeAt()将第一个字符转化为unicode数字编码并输出