🌈ES6 —— Promise 与 Class 类⭕ES6 —— Promise🔔Promise 是什么?🐼概念
Promise是异步操作的一种解决方案
🐼什么时候使用 Promise
Promise 一般用来解决层层嵌套的回调函数(回调地狱 callback hell)的问题
🔔Promise 的基本用法🐼1.实例化构造函数生成实例对象1const p = new Promise(()=>{})
🐼2.Promise 的状态12345678910111213const p = new Promise((resolve, reject)=>{ // Promise 有3种状态,一开始是 pending(未完成),执行 resolve,变成 fulfilled(resolve),已完成 // 执行 reject,变成 rejected(reject),已失败 // Promise 的状态一旦变化,就不会再改变了 // pending --> fulfilled // reso ...
🌈ES6基础入门⭕let和const
let:代替var,用于声明变量的关键字
const:用于声明常量的关键字
💡let、const与var的区别1. 重复声明:
var允许重复声明,但let和const不允许
2.变量提升:
var存在变量提升,但let和const不存在变量提升(会报错)
3.暂时性死区:
只要作用域内存在let、const,它们声明的变量或常量就自动“绑定“这个区域,不再受到外部作用域的影响,即let和const存在暂时性死区
4.window对象的属性和方法:
全局作用域中,var声明的变量会成为window对象的属性,function声明的函数会成为window对象的方法,而let和const不会
5.块级作用域:
let、const有块级作用域,并且会根据作用域链从内往外被访问到,而var没有块级作用域
⭕模版字符串与箭头函数💡模板字符串
const str = ‘abc’; // 普通字符串
const str = `abc`; // 模板字符串
实际应用中:
...
🌈正则表达式⭕什么是正则表达式
正则表达式描述了字符串的“构成模式”,经常被用于检查字符串是否符合预定的格式要求
💡正则表达式“按位”描述规则
正则表达式“按位”描述规则,是指它是一位一位的描述字符串的构成形式
比如检查字符串是否是这样的:以字母m开头,然后是3个数字,最后以字母n结尾(/^m\d{3}n$/)
⭕正则表达式的创建
使用**/内容/**的语法形式,可以快速创建正则表达式
也可以使用**new RepExp(‘内容’)**的形式,创建正则表达式
🔔使用typeof运算符检查正则表达式的类型,结果是object
12345678910// 方式一:/内容/ 的形式var regexp1 = /^m\d{3}n$/;// 方式二:new RegExp('内容') 的形式var regexp2 = new RegExp('^m\\d{3}n$'); // \\d 两个反斜杠是将\d转义var str = 'm123n'; ...
面向对象👀🌈认识对象
对象是”键值对“的集合,表示属性和值的映射关系
123456var obj = { name: '小明', age: 19, gender: '男', hobbies: ['羽毛球', '乒乓球']}
❗注意及规范
对象的语法:键和值之间用冒号隔开,每组键值对之间用逗号隔开,最后一个键值对后可以不写逗号
属性是否加引号:如果对象的属性键名不符合JS标识符命名规范,则这个键名必须用引号包裹,如对象键值对: ‘favorite-book’: ‘舒克和贝塔’
📍属性的访问
1234567891011// 用打点的方式访问对象中指定键的值obj.name; // '小明'obj.age; // 19obj.hobbies; // ['羽毛球', '乒乓球']// 如果访问的属性名不符合命名规范,需要用到方括号obj['favorite-book']; ...
BOM👀⭕BOM 是什么
BOM(浏览器对象模型)是 JS 与浏览器窗口交互的接口
⭕window 对象
window 对象是当前 JS 脚本运行所处的窗口,而这个窗口中包含 DOM 结构,window.document 属性就是 document 对象
📍 全局变量是 window 的属性
全局变量会成为 window 对象的属性
12var a = 10;console.log(window.a == a); // true
❗ 这就意味着,多个 JS 文件之间是共享全局作用域的,即 js 文件没有作用域隔离功能
📍 内置函数普遍是 window 的方法
如 setInterval()、alert()等内置函数,普遍是 window 的方法
🔔 窗口尺寸相关属性
属性
意义
innerHeight
浏览器窗口内容区域的高度,包含水平滚动条
innerWidth
浏览器窗口内容区域的宽度,包含垂直滚动条
outerHeight
浏览器窗口的外部高度
outerWidth
浏览器窗口的外部宽度
💡 获得不包含滚动条的窗口宽度 ,要用: ...
DOM👀🌈 什么是DOM
DOM(Document Object Model,文档对象模型)是JavaScript操作HTML文档的接口,使文档操作变得非常优雅、简便。
🔔nodeType属性值
节点的nodeType属性可以显示这个节点具体的类型。
nodeType值
节点类型
1
元素节点
3
文本节点
8
注释节点
9
document节点
10
DTD节点(文档类型声明)
⭕DOM节点操作📍访问元素节点的常用方法
方法
功能
兼容性
document.getElementById()
通过id获得元素
IE6
document.getElementsByTagName()
通过标签名获得元素数组
IE6
document.getElementsByClassName()
通过类名获得元素数组
IE9
document.querySelect()
通过选择器获得元素
IE8部分兼容、IE9完全兼容
document.querySelectAll()
通过选择器获得元素数组
IE8部分兼容、IE9完全兼容
...
JS 函数相关 👀⭕ 函数的定义及调用123456789101112// 函数的定义function fun () { console.log('A')}// 调用函数fun() // A// 函数表达式(匿名函数)var fun = function(){ console.log('B')}fun() // B
⭕ 函数声明提升12345// 函数声明提升fun1() // Cfunction fun1 (){ console.log('C')}
❗ 注意:匿名函数会报错,本质上是变量的声明提升12345// 匿名函数会报错,本质上是变量的声明提升fun2() // 报错,实则变量 fun2 进行了声明提升,进行了undefined() 的调用(错误的)var fun2 = function () { console.log('D')}
💡 拓展:函数优先提升(优先级;函数 & ...
数组遍历相关算法👀✔求数组总和、平均值12345678// 求总和、平均数var arr = [1, 2, 3, 4, 5, 6];var sum = 0,avg;for (var i = 0; i < arr.length; i++) { sum += arr[i];}avg = sum / arr.length;console.log("总和:" + sum + ",平均数:" + avg);
✔找最大值123456789// 找最大值var arr1 = [23, 15, 67, 54, 47, 58];var max = arr1[0];for (var i = 1; i < arr1.length; i++) { if(arr1[i] > max) { max = arr1[i] }}console.log('最大值:'+max)
✔数组去重123456789// 数组去重var arr = [1, 2 ...
数组的常用方法数组的声明123456789101112131415// 数组的声明var arr1 = [1, 2, 3, 4, 5];var arr2 = new Array(6, 7, 8, 9, 10);var arr3 = new Array(4);console.log(arr1);console.log(arr2);console.log(arr3);// 访问数组项console.log(arr1[1]) // 2// 数组下标越界console.log(arr2[6]) // undefined// 数组长度console.log(arr3.length) // 4// 数组的检测方法console.log(Array.isArray(arr2)) // true
数组的常用方法1 —— 以下4种方法均会改变原数组
数组的push()方法
1234567// 数组的头尾操作var arr4 = [1,2,3,4]var backValue // 接收返回值// push 尾部推入一项,无返回值arr4.push(5)console.log(arr4) // [1,2, ...
























