2019-10-21

css浏览器兼容性写法

/* 设置文字不可选取 */
* {
  -moz-user-select: none; /* 火狐 浏览器 */
  -webkit-user-select: none; /* Webkit 浏览器 */
  -o-user-select: none; /* Opera 浏览器 */
  -ms-user-select: none; /* IE10 浏览器 */
  -khtml-user-select: none; /* 早期浏览器 */
  user-select: none; /* 默认 */
}

cookies、session、sessionStorage、localStorage、 indexDb

-cookies: 存储于浏览器端的数据。可以设置 cookies 的到期时间，如果不设置时间，则在浏览器关闭窗口的时候会消失。
-session:存储于服务器端的数据。session 存储特定用户会话所需的属性和配置信息。
-cookies 和 session 的区别在于：
1、cookies 数据存放在客户的浏览器上，session 数据存放在服务器上。
2、前端都是裸君子，没有安全可言，cookies 可能会被黑客利用作数据欺骗。所以重要信息记得存 session。
3、session 如果在生效期内量过大，会占用服务器性能。
4、单个 cookies 保存的数据不能超过 4 K，很多浏览器限制一个站点保存最多 20 个 cookies。

---

sessionStorage：生命周期存在于标签页或窗口，用于本地存储一个会话（session）中的数据，这些数据会随着窗口或者标签页的关闭而被清空。
localStorage：生命周期是永久的，除非用户主动清除浏览器上存储的 localStorage 信息，否则它将会永久存在。
sessionStorage 和 localStorage 操作方法：setItem、getItem 以及 removeItem。

localStorage.getItem('name'); // 获取 name 的值
localStorage.setItem('name', 'jsliang'); // 设置 name 的值为 jsliang
localStorage.removeItem('name'); // 删除 name 的值

css

HTML 属于结构层，负责描绘出内容的结构。
CSS 属于表示层，负责如何显示有关内容。
JavaScript 属于行为层，负责内容应如何对事件做出反应。
####### CSS reset
版本很多，各个大厂都有，主要用来统一浏览器不同的样式

什么是css盒模型

for(var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

闭包经典问题：打印出来的是什么
三个3
因为for是同步所以会先执行三个3，再执行异步setTimeout
如何打印123,只要吧var替换成let，成为一个块级作用域

深浅拷贝

浅拷贝：es6的...，object.assign

map数组遍历

let arr = [1,2,3,4,5,6]
arr.map(i => {
console.log(i)
})

filter过滤数据

arr.filter(item => item>2)
//[3,4,5,6]

数组操作

es6还有很多的操作，这里列举常用的

let arr = ['第一天', '第二天', '第三天', '第四天', '第五天', '第六天'],
    numberArr = [3, 1, 2, 4, 5, 6, 7, 8],
    numberArr2 = [9, 10]
for (let i = 0; i < 3; i++) {
    (function (i) {
        setTimeout(function () {
            console.log(i);
        }, 5000);
    })(i)
}
console.group('map数组遍历')
arr.map((i) => {
    console.log(i)
})
console.groupEnd()
console.group('filter数组过滤')
console.log(numberArr.filter(item => item > 3))
console.groupEnd()
console.group('数组some 查找')
console.log(numberArr.some(item => item > 1))
console.groupEnd();
console.group('数组every 遍历条件')
console.log(numberArr.every(item => item > 1))
console.groupEnd()
console.group('数组,字符串join,字符串连接通过指定字符')
console.log(arr.join('0.0'))
console.groupEnd()
console.group('数组push')
arr.push('第七天');
console.table({ arr })
console.groupEnd()
console.group('数组pop 用来删除数组最后一个元素并返回')
arr.pop()
console.table({ arr })
console.groupEnd()
console.group('数组unshift 数组头部添加元素')
arr.unshift('第0天')
console.table({ arr })
console.groupEnd()
console.group('数组shift 删除数组头部第一个元素')
arr.shift()
console.table({ arr })
console.groupEnd()
console.group('数组sort 顺序')
console.table(numberArr.sort())
console.groupEnd()
console.group('数组reverse 倒序')
console.table(numberArr.reverse())
console.groupEnd()
console.group('数组concat 数组合并')
console.log(numberArr.concat(numberArr2))
console.groupEnd()
console.group('数组slice 返回截断后的新数组')
console.log(arr.slice(3, 4))//起始第3个，包括第3个,结束第4个不包括第四个,返回截断后的新数组，不改变原数组
console.groupEnd()
console.group('数组slice插入 删除元素组成的数组，value 为插入项，改变原数组')
console.log(arr.slice(3, 4, '第八天'))
console.groupEnd()
console.group('数组indexOf 返回位置下标，无返回-1')
console.log(numberArr.indexOf(5))
console.log(numberArr)
console.groupEnd()
console.group('数组lastIndexOf，从后向前检索')
console.log(numberArr.lastIndexOf(7))
console.groupEnd()
console.group('数组相加的总和 首位至末尾')
let fn = (total, num) => total + num;
console.log(numberArr.reduce(fn))
console.groupEnd()
console.group('数组相加的总和 末位至首尾')
console.log(numberArr.reduceRight(fn))
console.groupEnd()