JSX简介
01. JSX简介什么是JSX？1const element = <h1>Hello, world!</h1>;
以类似模板语法的方式描述UI的一种语法。它是JS的语法糖，本质上也是JS。可以在其中使用变量或表达式、函数等。
为什么使用JSX？将标记与逻辑 共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。
React不强制使用JSX，但在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。
在 JSX 中嵌入表达式1const element = <h1>Hello, {2+2}</h1>;
在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。
JSX 也是一个表达式在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象
可以把JSX当初一个对象来对待，可以使用它赋值给变量、当参数输入函数、返回JSX等。
JSX 特定属性通过使用引号，来将属性值指定为字符串字面量：
1c ...
flex布局案例-圣杯布局
flex布局案例-圣杯布局
可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。
::: demo [vanilla]
123456789101112131415161718192021222324252627282930313233343536373839<html> <div class="HolyGrail"> <header>#header</header> <div class="wrap"> <nav class="left">left 宽度固定200px</nav> <main class="content">center 宽度自适应</main> <aside class="right">right 宽度固定200px</aside> </div> < ...
ES6面向对象
ES6面向对象123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354//面向对象封装class Student{ //定义类 (尊从首字母大写的约定) constructor(props){ // 构造函数 （构造函数内定于属性） this.name = props.name || '匿名'; // 默认'匿名' this.grade = props.grade || 1; } hello(){ // 在构造函数的原型上定义方法 console.log(`你好,${this.name}同学，你在${this.grade}年级`); }}//使用function createStudent(props) { // 对于new构造函数的封 ...
ES5面向对象
ES5面向对象123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657//面向对象封装function Student(props){ // 构造函数 （构造函数内定于属性。尊从首字母大写的约定） this.name = props.name || '匿名'; // 默认‘匿名’ this.grade = props.grade || 1;}Student.prototype.hello = function(){ // 在构造函数的原型上定义方法 console.log('你好,'+ this.name +'同学，你在'+ this.grade+'年级');}//使用function createStudent(props) { // 对于new构造函数的封装，其优点：一是不需要new来调用，二是 ...
正则表达式-语法
文章参考自https://yanhaijing.com/javascript/2017/08/06/regexp-syntax/，个人学习记录所用
正则表达式教程——语法正则就是用有限的符号，表达无限的序列，殆已！
正则表达式的语法一般如下(js)，两条斜线中间是正则主体，这部分可以有很多字符组成；i部分是修饰符，i的意思表示忽略大小写
1/^abc/i
简单字符没有特殊意义的字符都是简单字符，简单字符就代表自身，绝大部分字符都是简单字符，例如：
123/abc/ // 匹配 abc/123/ // 匹配 123/-_-/ // 匹配 -_-
转义字符\是转义字符，其后面的字符会代表不同的意思，转义字符主要有三个作用：
是为了匹配不方便显示的特殊字符，比如换行，tab符号等
正则中预先定义了一些代表特殊意义的字符，比如\w等
在正则中某些字符有特殊含义(比如下面说到的)，转义字符可以让其显示自身的含义
常用转义字符列表：
符号
含义
\n
匹配换行符
\r
匹配回车符
\t
匹配制表符，也就是tab键
\v
匹配垂直制表符
\x20
2 ...
比typeof运算符更准确的类型判断
比typeof运算符更准确的类型判断不同数据类型的Object.prototype.toString方法返回值如下。
数值：返回[object Number]。
字符串：返回[object String]。
布尔值：返回[object Boolean]。
undefined：返回[object Undefined]。
null：返回[object Null]。
数组：返回[object Array]。
arguments 对象：返回[object Arguments]。
函数：返回[object Function]。
Error 对象：返回[object Error]。
Date 对象：返回[object Date]。
RegExp 对象：返回[object RegExp]。
其他对象：返回[object Object]。
这就是说，Object.prototype.toString可以看出一个值到底是什么类型。
12345678Object.prototype.toString.call(2) // "[object Number]"Object.protot ...
防抖与节流函数
防抖与节流函数防抖和节流的作用都是在高频事件中防止函数被多次调用，是一种性能优化的方案。
区别在于，防抖函数只会在高频事件结束后n毫秒调用一次函数，节流函数会在高频事件触发过程当中每隔n毫秒调用一次函数。
防抖函数触发高频事件后一段时间（wait）只会执行一次函数，如果指定时间（wait）内高频事件再次被触发，则重新计算时间。
封装123456789101112// 防抖函数function debounce(func, wait) { let timeout = null; return function () { let context = this; let args = arguments; if (timeout) clearTimeout(timeout); timeout = setTimeout(() => { func.apply(context, args) }, wait); }}
...
33个非常实用的JavaScript一行代码
一、日期处理1. 检察日期是否有效该方法用于检测给出的日期是否有效：
1234const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());isDateValid("December 17, 1995 03:24:00"); // true复制代码
2. 计算两个日期之间的间隔该方法用于计算两个日期之间的间隔时间：
1234const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)dayDif(new Date("2021-11-3"), new Date("2022-2-1")) // 90复制代码
距离过年还有90天~
3. 查找日期位于一年中的第几天该方法用于检测给出的日期位于今年的第几天：
1234const dayOfYear = (date) => Math.floor ...
JS随机打乱数组
JS随机打乱数组12345678910111213function shuffle(arr) { // 随机打乱数组 let _arr = arr.slice() // 调用数组副本，不改变原数组 for (let i = 0; i < _arr.length; i++) { let j = getRandomInt(0, i) let t = _arr[i] _arr[i] = _arr[j] _arr[j] = t } return _arr}function getRandomInt(min, max) { // 获取min到max的一个随机数，包含min和max本身 return Math.floor(Math.random() * (max - min + 1) + min)}
浏览器模型
浏览器模型一、浏览器环境概述JavaScript 是浏览器的内置脚本语言。也就是说，浏览器内置了 JavaScript 引擎，并且提供各种接口，让 JavaScript 脚本可以控制浏览器的各种功能。一旦网页内嵌了 JavaScript 脚本，浏览器加载网页，就会去执行脚本，从而达到操作浏览器的目的，实现网页的各种动态效果。
本章开始介绍浏览器提供的各种 JavaScript 接口。首先，介绍 JavaScript 代码嵌入网页的方法。
1、代码嵌入网页的方法网页中嵌入 JavaScript 代码，主要有三种方法。
<script> 元素直接嵌入代码。
<script> 标签加载外部脚本
事件属性
URL 协议
1.1 script 元素嵌入代码 <script> 元素内部可以直接写 JavaScript 代码。
1234<script> var x = 1 + 5; console.log(x);</script>
<script> 标签有一个type属性，用来指定脚本类型。对 JavaScrip ...
