2020年6月3日 星期三
Everything goes back to the way it was.
今天呢主要学习了一个新的知识点：《lodash》：Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。不需要引入其他第三方依赖。是一个意在提高开发者效率,提高JS原生方法性能的JS库。简单的说就是，很多方法lodash已经帮你写好了，直接调用就行，不用自己费尽心思去写了，而且可以统一方法的一致性。Lodash使用了一个简单的 _ 符号，就像Jquery的 $ 一样，十分简洁。 类似的还有Underscore.js和Lazy.js;还有momentjs的库
简单简绍一下lodash的安装以及使用：
安装
浏览器环境：
<script src="lodash.js"></script>
通过 npm：
$ npm i -g npm
$ npm i --save lodash
通过CDN进行引入
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
为什么选择lodash呢？
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。
Lodash 的模块化方法 非常适用于：
遍历 array、object 和 string
对值进行操作和检测
创建符合功能的函数
简绍一些lodash常用函数:
1.chunk，将数组进行切分。
let arr = [1,2,3,4,5,6,7,8,9];
_.chunk(arr,2);
// 这个函数把数组按照一定的长度分开，返回新的数组。（片段化数组）
2.compact，去除假值。（将所有的空值，0，NaN过滤掉）
_.compact(['1','2',' ',0]);
// => ['1','2']
3.uniq，数组去重。（将数组中的对象去重，只能是数组去重，不能是对象去重。）
_.uniq([1,1,3]);
// => [1,3]
4、创建一个新数组，将array与任何数组 或 值连接在一起。
const arr = [1,2,3,4,5,6,7,8,9];
const arr1 = ['w','e','r'];
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, Array(3)]
5、创建一个具有唯一array值的数组，每个值不包含在其他给定的数组中。(数组去重);
const = [3, 2, 1], [4, 2];
_.difference([3, 2, 1], [4, 2]);
// => [3, 1]
lodash官网:www.lodashjs.com/docs/lodash…
Moment的使用以及简绍
Moment 被设计为在浏览器和 Node.js 中都能工作，主要用于日期和时间处理；
所有的代码都应该在这两种环境中都可以工作，并且所有的单元测试都应该在这两种环境中运行。
CI 系统当前使用以下的浏览器：Windows XP 上的 Chrome，Windows 7 上的 IE 8、9 和 10，Windows 10 上的 IE 11，Linux 上最新的 Firefox，OSX 10.8 和 10.11 上最新的 Safari。
如果您想尝试以下的示例代码，则只需打开浏览器的控制台并输入即可。
安装方法
npm install moment --save # npm
yarn add moment # Yarn
Install-Package Moment.js # NuGet
spm install moment --save # spm
meteor add momentjs:moment # meteor
bower install moment --save # bower (废弃)
浏览器
<script src="moment.js"></script>
<script>
moment().format();
</script>
日期格式化
moment().format('MMMM Do YYYY, h:mm:ss a'); // 六月 3日 2020, 9:42:23 晚上
moment().format('dddd'); // 星期三
moment().format("MMM Do YY"); // 6月 3日 20
moment().format('YYYY [escaped] YYYY'); // 2020 escaped 2020
moment().format(); // 2020-06-03T21:42:23+08:00
相对时间
moment("20111031", "YYYYMMDD").fromNow(); // 9 年前
moment("20120620", "YYYYMMDD").fromNow(); // 8 年前
moment().startOf('day').fromNow(); // 1 天前
moment().endOf('day').fromNow(); // 2 小时内
moment().startOf('hour').fromNow(); // 42 分钟前
日历时间
moment().subtract(10, 'days').calendar(); // 2020/05/24
moment().subtract(6, 'days').calendar(); // 上星期四21:42
moment().subtract(3, 'days').calendar(); // 上星期日21:42
moment().subtract(1, 'days').calendar(); // 昨天21:42
moment().calendar(); // 今天21:42
moment().add(1, 'days').calendar(); // 明天21:42
moment().add(3, 'days').calendar(); // 下星期六21:42
moment().add(10, 'days').calendar(); // 2020/06/13
moment官网: momentjs.cn/docs/
animate.css
animate.css 他是一款强大的预设css3动画库！
安装及使用
使用npm安装：
$ npm install animate.css --save
使用with yarn安装:
$ yarn add animate.css
或使用CDN将其直接添加到您的网页中：
cdn网址： https://cdnjs.com/libraries/animate.css/
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
/>
</head>
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.box {
width: 300px;
height: 100px;
background-color: darkgray;
margin: 200px auto;
}
</style>
</head>
<body>
<div class="box animate__animated animate__backInDown"></div>
</body>
</html>
js获取Dom的方法
获取id的方法：document.getElementById("");
getElementById()括号中的不需要在前面加“#”，因为方法就决定了括号中的值是一个元素的id
值。该方法返回一个DOM对象。
class获取的方法：document.getElementsByClassName();
通过标签名获取：document.getElementsByTagName("p");
通过name属性获取的方法： document.getElementsByName("");
注意：只有含有name属性的元素(表单元素)才能通过name属性获取
通过querySelector获取的方法：document.querySelector("");
注意：querySelector()方法括号中的值是元素的选择器，所以前面加了”#”符号，使用的是id
选择器。此方法直接返回DOM对象本身。
通过querySelectorAll获取的方法：document.querySelectorAll("");
注意：querySelector()和querySelectorAll()方法括号中的取值都是选择器，但从图中我们可
以看出，两个方法是有区别的。当有多个class相同的元素时，使用querySelector()方法只能
获取到第一个class为box的元素，而querySelectorAll()获取到了所有class为box的元素集合
。
深拷贝浅拷贝
如何区分深拷贝浅拷贝：如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发
生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。
浅拷贝例子：
let a=[0,1,2,3,4],
b=a;
console.log(a===b);
a[0]=1;
console.log(a,b);
明明b复制了a，为啥修改数组a，数组b也跟着变了?????????????
面试常问，基本数据类型有哪些，number，string，boolean，null，undefined，symbol以及未来E
S10新增的BigInt(任意精度整数)七类。
引用数据类型(Object类)有常规名值对的无序对象{a:1}，数组[1,2,3]，以及函数等。
a.基本类型--名值存储在栈内存中，例如let a=1;
当你b=a复制时，栈内存会新开辟一个内存，例如这样：
所以当你此时修改a=2，对b并不会造成影响，因为此时的b已自食其力，翅膀硬了，不受a的影
响了。当然，let
a=1,b=a;虽然b不受a影响，但这也算不上深拷贝，因为深拷贝本身只针对较为复杂的object类型数据。
.引用数据类型--名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值，
当b=a进行拷贝时，其实复制的是a的引用地址，而并非堆里面的值。
当b=a进行拷贝时，其实复制的是a的引用地址，而并非堆里面的值。
那，要是在堆内存中也开辟一个新的内存专门为b存放值，就像基本类型那样，岂不就达到深拷贝的效果了;
实现简单的深拷贝
function deepClone(obj){
let objClone = Array.isArray(obj)?[]:{};
if(obj && typeof obj==="object"){
for(key in obj){
if(obj.hasOwnProperty(key)){
//判断ojb子元素是否为对象，如果是，递归复制
if(obj[key]&&typeof obj[key] ==="object"){
objClone[key] = deepClone(obj[key]);
}else{
//如果不是，简单复制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
let a=[1,2,3,4],
b=deepClone(a);
a[0]=2;
console.log(a,b);
这里分享一个链接讲述深拷贝浅拷贝： www.cnblogs.com/echolun/p/7…
