目录
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数字编码并输出