定义和用法：data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。用户代理会完全忽略前缀为 "data-" 的自定义属性。data-* 属性包括两部分：
之前的做法：在标签里面加上我们自己设置的一些属性，然后获取里面的值是使用getAttribute来获取自定义属性里面的值
<div id="myDiv" user-defined-attribute="value">在标签里设置自定义属性</div>
<script>
var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");
</script>使用自定义属性：只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放
<div id="myDiv" data-other-attribute="value">在标签里设置H5新增的自定义属性</div>//使用getAttribute来获取
var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");
//使用Html5自定义属性对象Dataset来获取
var myDiv = document.getElementById("myDiv");
var theValue = myDiv.dataset.otherAttribute;处理多个自定义元素：dataset并不是典型意义上的JavaScript对象，而是个DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量，
<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在标签里设置多个自定义属性</div>
//使用循环遍历
var myDiv = document.getElementById("myDiv");
var attrs = myDiv.attributes,
var expense = {}, i, j;
for (i = 0, j = attrs.length; i < j; i++) {
if(attrs[i].name.substring(0, 5) == 'data-') {
expense[attrs[i].name.substring(5)] = attrs[i].value;
}
//使用dataset属性
var expense = document.getElementById('myDiv').dataset;
//让所有的自定义的属性值塞到一个数组中
var chartInput = [];
for (var item in expense) {
chartInput.push(expense[item]);
}
//删掉一个data属性
delete myDiv.dataset.attribute;
//增加一个data属性
myDiv.dataset.attribute4 = 'value4';data属性还可以应用在CSS中，前提是你的浏览器支持after伪类，以及content的attr属性（低版本的IE不支持）
<div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>
<style>
#myDiv{
position: ralative;
}
#myDiv:hover:after{
position: absolute;
top: 0px;
left: 0px;
content: attr(data-attribute);
color: red;
}
<style>dataset的兼容性处理
if(myDiv.dataset) {
myDiv.dataset.attribute = "valueXX"; // 设置自定义属性
var theValue = myDiv.dataset.attribute; // 获取自定义属性
} else {
myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性
var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性表现层（CSS）：CSS 层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持。语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为 【CSS 预处理器】 的工具，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率
CSS 预处理器：其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”
常用的 CSS 预处理器：
原理：AST 抽象语法树，是源代码的抽象语法结构树状表现形式，Webpack、ESLint、JSX、TypeScript 的编译和模块化规则之间的转化都是通过 AST 来实现对代码的检查、分析以及编译等操作。通过在线编译工具，可以将 function fn(a, b) {} 编译为下面的结构
{
"type": "Program",
"body": [
{
"type": "FunctionDeclaration",
"id": {
"type": "Identifier",
"name": "fn"
},
"params": [
{
"type": "Identifier",
"name": "a"
},
{
"type": "Identifier",
"name": "b"
}
],
"body": {
"type": "BlockStatement",
"body": []
},
"generator": false,
"expression": false,
"async": false
}
],
"sourceType": "script"
}sort排序法（最简单的打乱数组顺序的方法）
// ES5:
let arr = [1, 2, 3, 4, 5];
function randFun(arr) {
arr.sort(function () {
return Math.random() - 0.5;
});
}
let newArr = randFun(arr);
// ES6：
let arr = [1, 2, 3, 4, 5];
let newArr = arr => arr.sort(() => Math.random() - 0.5);
// 引申：
let arr = [1, 2, 3, 4, 5];
let newArr = arr => arr.sort(() => Math.random() - Math.random());循环随机位交换法：循环遍历该数组，在每次遍历中产生一个(0 ~ length - 1)之间的随机下标的数，该数代表本次循环要随机交换的位置。将本次循环当前位置的数和随机位置的数进行交换
let arr = [1, 2, 3, 4, 5];
function randFun(arr) {
for(let i=0, len = arr.length; i < len; i++) {
let index = parseInt(Math.random() * (len - 1));
let tempValue = arr[i];
arr[i] = arr[index];
arr[index] = tempValue;
}
return arr;
}
let newArr = randFun(arr);Fisher–Yates 洗牌算法
//ES6：
function shuffle(arr) {
let i = arr.length;
while (i) {
let j = Math.floor(Math.random() * i--);
[arr[j], arr[i]] = [arr[i], arr[j]];
}
}
//ES5:
function shuffle(arr) {
var i = arr.length, t, j;
while (i) {
j = Math.floor(Math.random() * i--);
t = arr[i];
arr[i] = arr[j];
arr[j] = t;
}
}原文：https://www.cnblogs.com/EricZLin/p/12130099.html