JS NOTE
变量
- 如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
let
- 块作用域：使用 let 关键词声明拥有块作用域的变量。在块 {} 内声明的变量无法从块外访问
- 通过 var 关键词定义的全局变量属于 window 对象
- 相同作用域中不能使用let重新声明
const
函数
- 函数可以赋值给变量，也可以作为变量加入表达式：
1.function fn() {}
fn();
2.var fun = function(){}
fun(); 调用必须写在函数表达式下面 - 匿名函数：没有函数名，响应事件触发
myButton.onclick = function () { alert("hello"); }; - 函数可以使用函数名称来调用：
btn.onclick = displayMessage;
箭头函数
- 在匿名函数基础简化
- 传统函数：
(function (a, b) { const chuck = 42; return a + b + chuck; });
箭头函数：
(a, b) => { const chuck = 42; return a + b + chuck; };
arguments对象
- arguments对象是所有（非箭头）函数中都可用的局部变量。
- 可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引 0 处。
字符串
- 基本包装类型：string, number, boolean是简单数据类型，有属性和方法是被包装成了复杂数据类型
- length 属性返回字符串的长度
- search() 方法搜索特定值的字符串，并返回匹配的位置，可以应用正则表达式
- indexOf() 方法返回字符串中指定文本首次出现的索引（位置）
- 提取部分字符串：slice(start, end)；substring(start, end)；substr(start, length)
- replace() 方法用另一个值替换在字符串中指定的值，大小写敏感，可以应用正则表达式
- match() 方法根据正则表达式在字符串中搜索匹配项，并将匹配项作为 Array 对象返回。
- 如果字符串包含指定值，includes() 方法返回 true。
字符串模板：
-反引号分隔，允许字符串中的变量或表达式：
Total: ${(price * (1 + VAT)).toFixed(2)}
数字
运算
- === 等值等型
- == 比较运算符总是在比较之前进行类型转换
- 三元运算符：
variablename = (condition) ? value1:value2 - 当数值和字符串相加时，JavaScript 将把数值视作字符串。
- JavaScript 数值始终是 64 位的浮点数
- 数据类型：number，string，boolean，undefined
- 在除了+的所有运算中，JavaScript 会尝试将字符串转换为数字
- 任何涉及 NaN 的运算通常都会返回 NaN
- $$:有一个false时，返回false一侧的值；有两个true时，返回运算符之后（右侧）的值。
- ||:第一个条件判断结果为 true 就返回左侧操作数的值，如果为 false 就返回右侧操作数的值。
数字方法
- toString() 方法将数字作为字符串返回
- toFixed() 返回一个字符串，其中的数字带有指定位数的小数部分
- toPrecision() 返回一个字符串，其中包含指定长度的数字
数组
- var arr = [item1, item2, …];
- var arr = new Array(item1, item2, …);//只写单个数字参数，为数组长度
- 可以在相同数组中存放不同类型的变量，包括对象、函数、数组
- 判断是否为数组(返回boolan)：1. Array.isArray(arr) 2.arr instanceof Array
数组方法
- length 属性返回数组的长度
- push() 方法向数组末尾添加一个或多个元素，返回新长度
- unshift() 方法向数组开头添加一个或多个元素
- pop() 方法从数组中删除最后一个元素，返回“被弹出”的值
- shift() 方法删除数组的第一个元素，返回被删除的值
- toString() 把数组转换为逗号分隔的字符串，不接受任何参数
- join() 把数组连接为字符串，可以指定分隔符
- shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引，返回被“位移出”的字符串
- indexOf(元素) 返回指定数组元素的第一个索引号,找不到返回-1
- lastIndexOf(元素) 返回指定数组元素的最后一个索引号，找不到返回-1
- splice() 方法可用于向数组添加新项：（添加新元素的位置，删除元素个数，新元素(可省略)）
- concat() 方法通过合并（连接）现有数组来创建一个新数组，可有多个参数
- slice() 方法用数组的某个片段切出新数组
- sort() 方法以字母顺序对数组进行排序，参数为定义排序顺序的函数。
- reverse() 方法反转数组中的元素
- 按数字顺序升序排序：points.sort(function(a, b){return a - b});
- forEach(函数名) 方法为每个数组元素调用一次函数
- map() 方法通过对每个数组元素执行函数来创建新数组
- filter() 方法创建一个包含通过测试的数组元素的新数组。
- reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。
- every() 方法检查所有数组值是否通过测试。
- some() 方法检查某些数组值是否通过了测试。
日期Date
- new Date() 用当前日期和时间创建新的静态日期对象，参数为格式化输入
- var date = +new Date() 返回距离1970 年 1 月 1 日 00:00:00 UTC总毫秒数
- 7个数字分别指定年、月、日、小时、分钟、秒和毫秒
- JavaScript 从 0 到 11 计算月份。
- 如果只提供一个参数，则将其视为毫秒。
- JavaScript 将日期存储为自 1970 年 1 月 1 日 00:00:00 UTC 以来的毫秒数。
- toUTCString() 方法将日期转换为 UTC 字符串；toDateString() 方法将日期转换为更易读的格式
- 日期输入格式：“2018-02-19” （国际标准）；“02/19/2018” 或者 “2018/02/19”；“Feb 19 2018” 或者 “19 Feb 2019”；“Monday February 25 2015”
- 日期获取方法：用于获取日期对象的某个部分。
- 日期设置方法：用于设置日期的某个部分。
Math 对象
- 常用属性：Math.PI // 返回圆周率
- 常用方法：
| 方法 | 描述 |
|---|
| Math.max() | 返回最大值，如果参数无法被转换为数值，返回NaN |
| abs() | 绝对值，会将字符串参数转化为数值 |
| floor()/ceil()/round() | 向下取整/向上取整/四舍五入（处理.5时取较大数，1.5取2，-1.5取-1） |
| random() | 返回[0, 1)之间的随机浮点数 |
- 返回两数之间随机整数（闭区间）：
function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min + 1) ) + min; }
数据类型
简单数据类型(值类型)
- null，undefined，Boolean，string，number，symbol，bigint
- null：typeof null返回一个空对象；如果一个变量准备存储为对象，初始化时可以用null
- 内存分配：值存放在栈里
复杂数据类型(引用类型)
- object，array，function，date
- 地址存放在栈里，值存放在堆里
- 当复杂数据类型作为函数参数时，形参和实参保存同一个堆地址，操作同一个对象
预解析
- 运行js两步：1.预解析 2.执行
- 预解析：js引擎将代码中所有变量声明和函数声明提升到当前作用域最前面
- 变量预解析（变量提升）：将所有变量声明提升到当前作用域最前面，不提升赋值操作。
- let和const声明的变量不适用变量提升
对象
- 属性和方法的集合
- 创建对象的方法（多个属性和方法之间用"，"隔开; 方法：匿名函数）：
var obj = {}; //创建一个空对象
var obj = { uname: 'xx', age: 18, sayHi: function(){ console.log('Hi');} };var obj = new Object(); //创建一个空对象 obj.uname = 'xx'; obj.age = 18; obj.sayHi = function(){console.log('Hi');}
- 调用属性：对象名.属性名/对象名[‘属性名’]
- 调用方法：对象名.方法名()
obj.sayHi();
- 构造函数：批量创建对象
function Person(name){ this.name = name； this.introduce = function(){console.log(``我是 ${this.name}。``);} }
- 构造函数名首字母大写
- 调用构造函数：
var alice = new Person('Alice')
- new构造函数在内存中创建一个新的空对象
- this指向这个新的
- 执行构造函数内的代码，给空对象添加属性和方法
- 返回这个对象（所以构造函数不需要return）
- 遍历对象：for in语句，也可以遍历方法
for(var k in obj){ console.log(k);//输出obj属性名 console.log(obj[k]);//输出属性值 }
类
- 创建类：
class ClassName {
constructor() { … }
method_1() { … }
method_2() { … }
method_3() { … }
}
Map
- 插入键值对：map1.set(‘a’, 1);
- 查找键返回值：map1.get(‘a’); 判断是否存在：.has(key)
- 获取项目数量：map1.size
- for…of迭代：for (const element of map1);
- forEach迭代：.forEach(function)对该 map 中的每个键/值对执行一次function
- 移除指定键值对：.delete(key)；移除所有键值对：.clear()
- 返回一个可迭代对象包含所有键：.key();包含所有值：.value();
- 构造函数：const myMap = new Map(可选Array);可以将二维的键值对数组转换成Map 对象
part2
DOM
DOM树
- 页面：document；页面中的标签：element；网页中的标签、属性、文本、注释等：node
- DOM把树中内容都看做对象
- console.dir()打印返回的元素对象
获取元素
- document.getElementById(‘id’)：返回一个匹配特定id的元素对象
- document.getElementsByTagName(‘li’)：返回带有指定标签名的对象集合
- 不管对象有几个，都以伪数组形式存储，可以遍历；找不到返回空伪数组
- document可以替换为父元素，获取内部所有指定标签名的子元素；但父元素必须是单个元素对象
- document.getElementsByClassName(‘className’)：返回带有指定类名的对象集合，使用方法类似getElementsByTagName
- document.querySelector(‘选择器’)：根据指定选择器返回第一个元素对象，参数为CSS选择器字符串，推荐使用
- document.querySelectorAll(‘选择器’)：根据指定选择器返回所有元素对象，以伪数组形式存储，推荐使用
获取特殊元素
- 获取body元素：document.body
- 获取html元素：document.documentElement
操作元素
- element.innerText/innerHTML:可以获取/修改元素内部从起始到终止位置的内容，innerText不可以识别HTML标签，非标准，会去除空格和换行
- 操作元素属性：element.属性 获取内置属性值
- 操作表单元素属性：表单的值/文字内容等通过value获取；disabled = true禁用元素
- 修改元素样式：
element.style.样式属性(驼峰命名法)修改单个内联样式；
element.className：提前在css定义类选择器样式表，需要批量修改元素样式时，更改元素类名；如果需要保留原类名，使用多类名选择器’class1 class2’ - 自定义属性操作：
获取属性：element.getAttribute(‘属性’)
设置属性值：element.setAttribute(‘属性’, ‘值’)
移除属性：element.removeAttribute(‘属性’) - H5自定义属性规范：自定义属性名均为"data-xx"，可以通过element.dataset.xx获取，获取时使用驼峰命名法；dataset是一个存放所有data开头自定义属性的集合。
节点
- 节点的基本属性：nodeType，nodeName，nodeValue；元素nodeType为1，属性nodeType为2，文本nodeType为3
- 父节点：node.parentNode得到离元素最近的父节点，找不到返回null
- 子节点：
node.childNodes得到所有子节点(包括元素和文本等)，返回一个伪数组。
node.children返回所有子元素节点(推荐使用)
node.firstElementChild返回第一个子元素节点；node.lastElementChild返回最后一个子元素节点 - 兄弟节点：
node.nextSibling返回下一个兄弟节点(包括元素和文本等)；node.previousSibling返回上一个兄弟节点
node.nextElementSibling返回下一个兄弟元素节点)；node.previousElementSibling返回上一个兄弟元素节点 - 向页面添加新元素：1.创建元素 2.添加元素
创建元素节点：document.createElement(‘tagName’)
将节点添加到界面：node.appendChild(child)将一个节点添加到指定父节点的子节点列表末尾
node.insertBefore(child, 指定元素)将一个节点添加到父节点的指定子节点之前 - 删除节点：node.removeChild(child)删除父节点的指定子节点
- 复制节点：newNode = node.cloneNode(true)无参或参数为false为浅拷贝，不复制标签内部内容；参数为true为深拷贝
动态创建元素的区别
- innerHTML将内容写入某个DOM节点，不会导致界面全部重绘，使用数组进行拼接时创建多个元素效率高于createElement，但结构复杂
事件
- 事件三要素：事件源、事件类型、事件处理程序
- this指向事件函数调用者
常用事件
| 事件 | 描述 |
|---|
| change | HTML 元素已被改变 |
| click | 用户点击了 HTML 元素 |
| mouseover | 用户把鼠标移动到 HTML 元素上 |
| mouseout | 用户把鼠标移开 HTML 元素 |
| mousemove | 鼠标移动事件，移动1px就会触发 |
| keyup | 某个键盘按键被松开 |
| keydown | 某个键盘按键被按下,比press先执行(不松开则一直触发) |
| keypress | 某个键盘按键被按下(不识别ctrl,shift等功能键) |
| focus | 元素获得焦点(用户与input等元素交互) |
| blur | 元素失去焦点 |
| contextmenu | 用户尝试打开上下文菜单(鼠标右键等) |
| selectstart | 用户开始进行选择时触发(如选中文字) |
事件处理器
注册事件的两种方式：
- 元素的on开头事件属性(btn.onclick = 回调函数)：同一元素同一事件只能设置一个处理函数
- element.addEventListener(事件类型字符串，回调函数，options) 方法将指定的监听器注册到 元素element 上，当该对象触发指定的事件时，指定的回调函数就会被执行。可以给同一元素同一事件添加多个事件处理程序。
- options是一个指定有关 listener 属性的可选参数对象，如果是true，在事件捕获阶段调用处理程序，如果是fasle(默认)，在事件冒泡阶段调用处理程序
- 为一个事件设置多个处理器：myElement.addEventListener(“click”, functionA);
myElement.addEventListener(“click”, functionB);
删除事件：
- 传统方式：将on开头事件属性设为null
- 删除事件处理器：btn.removeEventListener(“click”, 回调函数);
DOM事件流
- 事件发生时会在元素节点之间按照特定顺序传播：捕获阶段→处理阶段→冒泡阶段
- 捕获阶段事件从document开始逐级向下传递到目标节点，冒泡阶段事件由目标节点逐级向上传播到最顶层节点；实际开发中更关注事件冒泡。
- 如果在父元素和子元素均设置了点击事件监听器，在事件捕获阶段调用处理程序，则父元素事件先触发；在事件冒泡阶段调用处理程序，则子元素事件先触发。
- 有些事件没有冒泡：onblur，onfocus，onmouseenter，onmouseleave
事件对象
- 固定指定名称的参数，例如 event、evt 或 e，有一系列事件相关的属性和方法。它被自动传递给事件处理函数，作为事件处理函数的形参。
- 属性和方法包括绑定事件的元素，鼠标位置，按键等信息
- 常见属性方法：
| 方法 | 描述 |
|---|
| e.target | 返回触发事件的对象(元素) 注意：事件处理函数的this返回绑定事件的对象 |
| e.currentTarget | 和this一样返回绑定事件的对象 |
| e.type | 返回事件类型(比如click) |
| e.preventDefault() | 阻止事件默认行为(让链接不跳转或提交按钮不提交) |
| e.stopPropagation() | 阻止事件冒泡(在上级元素上触发） |
鼠标事件对象MouseEvent
| 属性 | 描述 |
|---|
| e.clientX/Y | 返回鼠标相对于浏览器窗口可视区的X/Y坐标 |
| e.pageX/Y | 返回鼠标相对于整个页面文档的X/Y坐标 |
| e.screenX/Y | 返回鼠标相对于电脑屏幕的X/Y坐标 |
- 图片跟随鼠标：图片绝对定位，每次鼠标移动获取鼠标坐标，将x和y坐标作为图片的left和top值(pic.style.left=e.pageX+‘px’；)
键盘事件对象KeyEvent
| 属性 | 描述 |
|---|
| e.key | 返回触发键盘事件的对应键 |
| e.code | 返回触发键盘事件对应的唯一物理键(例如Shift会区分Left和Right，但不区分字母大小写) |
事件冒泡
- 在用户单击按钮时，最先触发按钮上的单击事件，然后是按钮的父元素（div元素），然后是 div 的父元素（body 元素）
- Event 对象有一个可用的函数，叫做 stopPropagation()，当在一个事件处理器中调用时，可以防止事件向任何其他元素传递。
- 我们使用 event.target 来获取事件的目标元素（也就是最里面的元素）。如果我们想访问处理这个事件的元素（在这个例子中是容器），我们可以使用 event.currentTarget。
事件委托
- 当需要监听大量子元素上发生的事件时，在它们的父元素上设置事件监听器，让发生在它们身上的事件冒泡到它们的父元素上，而不必在每个子元素上单独设置事件监听器。
- 例如：给ul注册点击事件，利用事件对象的target找到当前点击的li，事件冒泡到ul时触发事件监听器。只需操作一次DOM，提高了程序性能。
BOM
- 浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象
- 构成：window{document, location, navigation, screen, history}
window对象
- 浏览器的顶级对象，是JS访问浏览器窗口的接口，还是一个全局对象，所有全局变量和函数都会变成window对象的属性和方法。
| 属性 | 描述 |
|---|
| window.name | 获取/设置 window 对象的名称，初始为空 |
| window.innerWidth/Height | 获取浏览器窗口内容区域的宽/高 |
定时器
- setTimeout(回调函数，延迟毫秒数，传给回调函数的参数)：延迟指定时间后调用回调函数，时间默认为0；可以给定时器加标识符：
var timer1 = setTimeout(callback，2000); - clearTimeout(定时器标识符)：清除定时器(在执行回调之前清除)
- setInterval(回调函数，间隔毫秒数，传给回调函数的参数)：每隔指定时间就调用一次回调函数，也可以加标识符
- clearInterval(定时器标识符)：清除setInterval定时器
- 注意： setInterval() 和 setTimeout() 共享同一个 ID 池，并且 clearInterval() 和 clearTimeout() 在技术上可互换使用
- 关于定时器的this：定时器回调函数中如果使用this，this指向全局对象window
const myArray = ["zero", "one", "two"];
myArray.myFunction = function () {
console.log(this);
}
myArray.myFunction();
setTimeout(myArray.myFunction, 1000);
解决方案：1. 使用匿名函数或箭头函数包装回调函数：
setTimeout(function () {
myArray.myFunction();
}, 1000);
- 使用.bind()手动绑定函数的this：
myFunction = function () {
console.log(this);
}.bind(myArray)
setTimeout(myFunction, 1000);
浏览器相关事件
| 事件 | 描述 |
|---|
| load | 文档内容完全加载完成后触发(包括图像，JS，CSS等) |
| DOMContentLoaded | 仅当DOM加载完成后触发 |
| resize | 浏览器窗口大小变化时触发 |
this指向
- 全局作用域或者普通函数中this指向全局对象window(默认绑定)
- 方法调用中this指向调用方法的对象(隐式绑定)
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
console.log(this);
});
- 构造函数中this指向新创建的对象(new绑定)
location对象
- window对象提供location属性，返回一个对象，可以获取或设置窗口的url
- protocol://host[:port]/path/[?query]#fragment
| 属性/方法 | 描述 |
|---|
| location.href | 获取/设置整个URL，重新赋值可以跳转页面 |
| location.host | 返回域名 |
| location.port | 返回端口号，没有则返回空字符串 |
| location.pathname | 返回路径 |
| location.search | 返回查询部分(?query) |
| location.hash | 返回#fragment |
| location.assign(url字符串) | 实现页面跳转，记录浏览历史，可以后退 |
| location.replace(url字符串) | 替换当前页面，不可以后退 |
| location.reload() | 实现页面重新加载，如果参数为true，强制刷新(不使用缓存) |
navigator对象
- navigator对象包含有关浏览器的信息，userAgent属性可以返回请求中user-agent头部的值
history对象
- history对象可以与浏览器历史记录进行交互，实现浏览器的后退前进功能
| 方法 | 描述 |
|---|
| back() | 实现后退功能 |
| forward() | 实现前进功能 |
| go(参数) | 实现前进后退功能，参数为正数则前进几个页面，参数为负数则后退几个页面，参数为0或默认时刷新当前页面 |
扫一扫
636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
