JavaScript
JavaScript 基础
最新的 ECMAScript 2020 标准定义了 8 种数据类型:
• Boolean(布尔值)
• Null(空对象 空指针)
• Undefined(未初始化)
• Number(整数 浮点值)
• BigInt(大数值)(ES11新增)
• String(字符串)
• Symbol(唯一标识符)(ES6新增)
• Object(对象)
基本类型
Boolean(布尔值)
Boolean (布尔值) 是一个取值仅能为 true (真) 或 false (假) 的数据类型
Null(空对象、空指针)
Null 是一个 不存在或者无效的Object对象 或 地址引用。
Undefined(未初始化)
一个声明未定义的变量的初始值,或没有实际参数的形式参数。
Number(整数、浮点值)
String(字符串)
Symbol(唯一标识符)
BigInt(大整数)
引用类型
字符串模板语言
作用域的定义
作用域是定义变量的区域。
它有一套访问变量的规则。
这套规则用于管理浏览器引擎如何在当前作用域以及嵌套的作用域中根据变量名(标识符)进行变量查找。
&& || !! 运算符分别是什么意思?能做什么?
• && 叫逻辑与,在其操作数中找到第一个虚值表达式并返回它,如果没有找到任何虚值表达式,则返回最后一个真值表达式。它采用短路来防止不必要的工作。
• || 叫逻辑或,在其操作数中找到第一个真值表达式并返回它。这也使用了短路来防止不必要的工作。在支持 ES6 默认函数参数之前,它用于初始化函数中的默认参数值。
• !! 运算符可以将右侧的值强制转换为布尔值,这也是将值转换为布尔值的一种简单方法。
浅拷贝与深拷贝分别是什么意思?有什么区别?
深拷贝:重新创建一个相同的数据,指向不同的内存地址。
浅拷贝:复制内存地址值,实际上指向同一个内存地址。
区别:修改赋值前的变量数据不会影响赋值后的变量。
对象解构
从对象或数组中获取或提取值得一种新的、更简洁的方法。
const people = {
name: 'Liuzln'
}
const { name: username } = people
展开运算符
箭头函数
没有 this,arguments,super,new,target。
适用于本来需要匿名函数,并且不需要用作构建函数。
会有一个隐式返回。
Object.assign 深拷贝还是浅拷贝?
第一级属性是深拷贝。
若源对象得属性值是一个对象得引用。
也只是指向这一个对象的引用。当改变这个引用的对象时,合并后的变量,指向这个引用的对象时,也会被改变。
简单的类型(栈储存)则是深拷贝。
例如:String、Number、Boolean。
null 和 undefined 的区别?
首先 Undefined 和 Null 都是基本数据类型。
这两个基本数据类型分别都只有一个值,就是 undefined 和 null。
undefined 代表的含义是未定义, null 代表的含义是空对象(其实不是真的对象,请看下面的注意!)。
一般变量声明了但还没有定义的时候会返回 undefined,null 主要用于赋值给一些可能会返回对象的变量,作为初始化。
Array every
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every
Array some
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some
进阶
多个异步任务并发运行
Promise.all()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
如何获得粘贴内容?
handleCellPaste (e) {
console.log(e)
// IE浏览器 window.clipboardData
const clipboard = e.clipboardData || window.clipboardData
let clipboardData = void 0
try {
clipboardData = clipboard.getData('text/html')
} catch (e) {
console.error(e)
}
if (clipboardData) {
// 暂不开发 解析HTML 转换为Vue能处理的数据
console.log(clipboardData)
this.sheetData = clipboardData
} else {
try {
// 判断是否为IE浏览器,IE浏览器只能用 Text 参数
clipboardData = IEVersion() > -1 ? clipboard.getData('Text') : clipboard.getData('text/plain')
} catch (e) {
console.error(e)
}
if (clipboardData) {
// 解析文字 转换为Vue能处理的数据
console.log('clipboardData:', clipboardData)
this.sheetData += this.parsePasteText(clipboardData)
} else {
// 判断是否为图片
}
}
},
参考
知乎:JavaScript 如何获得粘贴的内容 ?
https://www.zhihu.com/question/20747877
MDN:粘贴板事件
https://developer.mozilla.org/zh-CN/docs/Web/API/ClipboardEvent
MDN:原始数据的类文件对象
https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
MDN:常见 MIME 类型列表
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types
DOM 事件流
事件捕捉 事件冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>JS事件的捕获和冒泡</title>
</head>
<body>
<div id="app">
<div id="container">
<div id="obj">
点击
</div>
</div>
</div>
<script type="text/javascript">
const app = document.getElementById('app')
const container = document.getElementById('container')
const obj = document.getElementById('obj')
app.addEventListener('click', function () {
console.log('app捕捉')
}, {
capture : true // 表示该事件捕获阶段触发
})
container.addEventListener('click', function () {
console.log('container捕捉')
}, {
capture : true // 表示该事件捕获阶段触发
})
obj.addEventListener('click', function () {
console.log('obj捕捉')
}, {
capture : true // 表示该事件捕获阶段触发
})
app.addEventListener('click', function () {
console.log('app冒泡')
}, {
capture : false
})
container.addEventListener('click', function () {
console.log('container冒泡')
}, {
capture : false
})
obj.addEventListener('click', function (e) {
console.log('obj冒泡')
}, {
capture : false
})
// 运行结果:
// app捕捉
// container捕捉
// obj捕捉
// obj冒泡
// container冒泡
// app冒泡
</script>
</body>
</html>
Proxy
用于修改某些操作的默认行为。
可以理解尾,在目标对象之前加架设一层“拦截”。
外界对该对象得访问,都必须通过这层拦截。
因此提供了一种机制,可以对外界得访问进行过滤和改写。