一省：HTML
18. html5自定义数据属性？
html5允许给元素指定非标准的属性，但要以data-开头，获取时通过元素的dataset属性来访问。如果做过小程序的同学会发现，小程序已经经常使用这个属性了。
<div class="myDiv" data-name="Jack" data-age="18"></div>
<script>
let box = document.querySelector(".myDiv")
console.log(box.dataset);//DOMStringMap {name: 'Jack', age: '18'}
console.log(box.dataset.name);//Jack
console.log(box.dataset.age);//18
</script>
二省： CSS
18. rgba()和 opacity的透明效果有什么不同？
rgba(0)和 opacity:0; 都能实现透明效果，但它们最大的不同是opacity作用于元素，并且可以设置元素内所有内容的透明度；而 rgba(0)只作用于元素的颜色或其背景色（设置rgba透明的元素的子元素不会继承透明效果）。
三省：JavaScript
18. 数组的方法(一)
1.检测数组
- instanceof
let str = "123" let obj = { 0:123} let arr = [123] console.log(str instanceof Array);//false console.log(obj instanceof Array);//false console.log(arr instanceof Array);//true- isArray()
//ES6方法 Array.isArray() console.log(Array.isArray(str));//false console.log(Array.isArray(obj));//false console.log(Array.isArray(arr));//true
- isArray()
2.迭代器方法
let arr = ["Jack", "Marry", "Jarry", "Bob"]
- keys()返回数组索引的迭代器
console.log(arr.keys());//Array Iterator {} // 因为返回的是迭代器对象，可以通过Array.from()直接转化为数组实例 console.log(Array.from(arr.keys()));//[0, 1, 2, 3] values()返回数组元素的迭代器
console.log(arr.values());//Array Iterator {} console.log(Array.from(arr.values()));//['Jack', 'Marry', 'Jarry', 'Bob']entries()返回键值对的迭代器
console.log(arr.entries());//Array Iterator {} console.log(Array.from(arr.entries()));//[[0, 'Jack'], [1, 'Marry'], [2, 'Jarry'], [3, 'Bob']]3.填充和复制方法
- fill()填充数组
// fill()填充
let arr = ["old", "old", "old", "old"]
// 用new填充整个数组
console.log(arr.fill("new"));//['new', 'new', 'new', 'new']
arr.fill("old");//重置
// 填充下标大于2的元素
console.log(arr.fill("new", 2));//['old', 'old', 'new', 'new']
arr.fill("old");//重置
// 填充下标大于1且小于3的元素
console.log(arr.fill("new", 1, 3));//['old', 'new', 'new', 'old']
arr.fill("old");//重置
// 填充下标倒数大于等于1且小于4的元素
console.log(arr.fill("new", -4, -1));//['new', 'new', 'new', 'old']
arr.fill("old");//重置
// fill()会忽略超出边界的情况，如下标太大或者太小
console.log(arr.fill("new", 5, 10));//['old', 'old', 'old', 'old']
console.log(arr.fill("new", -10, -6));//['old', 'old', 'old', 'old']
console.log(arr.fill("new", -3, -10));//['old', 'old', 'old', 'old']
// 部分可用
console.log(arr.fill("new", 3, 10));//['old', 'old', 'old', 'new']
- copywithin()复制数组
// copyWithin()复制
let arr
reset = () => {
arr = [0,1,2,3,4,5,6,7,8,9] }
reset()
// 从下标为0开始复制，从下标为4开始插入
console.log(arr.copyWithin(4));//[0, 1, 2, 3, 0, 1, 2, 3, 4, 5]
reset();
// 从下标为5开始复制，从下标为0开始插入
console.log(arr.copyWithin(0, 5));//[5, 6, 7, 8, 9, 5, 6, 7, 8, 9]
reset();
// 从下标0复制到下标为3的内容，从下标为5开始插入
console.log(arr.copyWithin(5, 0, 3));//[0, 1, 2, 3, 4, 0, 1, 2, 8, 9]
reset();
// copyWithin()也会忽略超出边界的情况
4. 栈方法
- push() 推入
- pop() 弹出\
两个方法都只能操作栈尾，即数组末尾
// push pop push可以push多项，pop只能pop一项
let arr = [1,2,3,4,5]
// push一项
arr.push(6)
console.log(arr);//[1, 2, 3, 4, 5, 6]
// push两项
arr.push(7,8)
console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8]
// pop
arr.pop()
console.log(arr);//[1, 2, 3, 4, 5, 6, 7]
5. 队列方法
// shift可以从数组头部取出一个元素
// unshift可以从数组头部推入一个或多个元素
let arr = [1, 2, 3, 4, 5]
arr.shift()
console.log(arr);//[2, 3, 4, 5]
arr.unshift(0, 1);
console.log(arr);//[0, 1, 2, 3, 4, 5]
6. 排序方法
// reverse() 把数组反转
// sort() 按升序把数组排序
let arr = [1, 3, 2, 6, 4, 5]
arr.reverse()
console.log(arr);// [5, 4, 6, 2, 3, 1]
arr.sort()
console.log(arr);//[1, 2, 3, 4, 5, 6]
// 注意 sort方法会把元素转化成字符串来比较，所以很多时候会有问题
let arr1 = [1, 3, 5, 12, 25]
arr1.sort()
console.log(arr1);//[1, 12, 25, 3, 5]
// sort() 方法可以传一个比较函数来解决这个问题
arr1.sort((a, b) => a < b ? -1 : a > b ? 1 : 0);// 第一个参数大于第二个参数就返回-1，小于就返回1，相等就返回0
console.log(arr1);//[1, 3, 5, 12, 25]
