![e1121034e7daebfda39e727ea08d998c.png](https://i-blog.csdnimg.cn/blog_migrate/8322ef588b02d030958619a397d3149c.jpeg)
大好,我来了,本期为大家带来的前端入门知识是”javascript:排序算法和json“,有兴趣做前端的朋友,和我一起来看看吧!
本节主要内容:
- 数组去重
- 数组排序
- json概述
- json方法
- json解析
学习目标:
![13de966f158acae3ddbaa765a03026d4.png](https://i-blog.csdnimg.cn/blog_migrate/ffedc46e3f12ea714e51c6746760d47d.png)
一、数组去重
数组去重是指:从数组中找到相同的元素,并将相同的元素删除。
保证数组中的每个元素都是独一无二的操作。
1.1.indexOf去重
基本思想是:利用数组的indexOf方法,目的是寻找存入参数在数组中第一次出现的位置。
缺点:实现这个方法的时候会遍历数组直到找到目标为止,消耗掉很多时间。
<
最初arr2中没有元素。
循环判断,
只要arr中的元素不在arr2中
就把arr中的这个元素存入arr2中
那么最后arr2中的元素就是arr中所有不重复的元素
![ac03878bcecb38708a67d4728599ad8f.png](https://i-blog.csdnimg.cn/blog_migrate/db4768f530519b1217d4762c9382ec6c.png)
![9b57cf083b57f01f6d256951fcae0dc7.png](https://i-blog.csdnimg.cn/blog_migrate/026670581519cc42b4b61a69ca93e2b7.png)
![f255a3deaae9423ec297de883c536c40.png](https://i-blog.csdnimg.cn/blog_migrate/a5506cf04a65f4e5b2ac85a4e608c4b9.jpeg)
1.2 splice去重(作业)
![b2108d9e0e7dcc583756a57f5c320709.png](https://i-blog.csdnimg.cn/blog_migrate/0fcc685001eb48b8a6b81b1e7da95e78.png)
1.3.hash表去重
基本思想是:将已经出现过的元素当做属性名,存入一个object内,下标的引用要比用indexOf搜索数组快的多
缺点:内存占用很多,以牺牲空间来换取时间。
var arr = [1,2,1,3,1,4];
var result = []
var hash = {};
for (var i = 0; arr[i] != undefined; i++) {
if (!hash[arr[i]]) {
result.push(arr[i]);
hash[arr[i]] = true;
}
}
最初result中没有元素
hash对象中没有属性
一直循环,直到数组元素是null为止
判断如果:
【hash对象】中,没有名为
【当前arr元素】的属性
则
为新数组result中添加这个元素
并为hash对象添加这个属性
![2d8f0da60aeee9c93ce31ea085b75ceb.png](https://i-blog.csdnimg.cn/blog_migrate/0ef82343c7dcd701ba6f3e72c3885311.jpeg)
二、数组排序
2.1冒泡排序
冒泡排序法:
数组当中两两相邻的元素比较,如果前一个比后一个大,那么两个数组元素就交换(就是把小的放前面),最终会找到一个最大的元素,放到最后面,然后再一次的循环比较。
$arr=[100,90,98,70,85,60,87]
第1次冒泡:90,98,70,85,60,87,100
第2次冒泡:90,70,85,60,87,98,100
第3次冒泡:70,85,60,87,90,98,100
第4次冒泡:70,60,85,87,90,98,100
第5次冒泡:60,70,85,87,90,98,100
第6次冒泡:60,70,85,87,90,98,100
![16594a4e3a7a24e9c6795a7947a5dcfc.png](https://i-blog.csdnimg.cn/blog_migrate/a22a068b1c2d816a9149595081d525cf.jpeg)
![2088e50f200ac7ba1c74cd3d9dd48d37.png](https://i-blog.csdnimg.cn/blog_migrate/9630d414122a4c096790440b63342528.jpeg)
2.2.快速排序
快速排序“的思想很简单,整个排序过程只需要三步:
(1)在数据集之中,选择一个元素作为“基准”(pivot)。
(2)所有小于“基准”的元素,都移到“基准”的左边;所有大于“基准”的元素,都移到“基准”的右边。
(3)对"基准"左边和右边的两个子集,不断重复第一步和第二步,直到所有子集只剩下一个元素为止。
![338cc5703be0e30754fac9c9dad0c367.png](https://i-blog.csdnimg.cn/blog_migrate/feca709d3d9c9cfcca79b4238747a3e5.jpeg)
![d4867cc3ae1d02723257b0e476d00c14.png](https://i-blog.csdnimg.cn/blog_migrate/450cb35be79f5e11103d8e3283b6a68a.png)
![ef4820ccbbe21ed9b07d9cb9d2f4efee.png](https://i-blog.csdnimg.cn/blog_migrate/10b02a71406352593804aac4b064d10b.jpeg)
![54eb234748b9918149cc235f4dfc70ad.png](https://i-blog.csdnimg.cn/blog_migrate/3aaa68a01e8fc98412e61e9d569395ff.png)
![8398a67122c03ae6f9ec68cec88c94a2.png](https://i-blog.csdnimg.cn/blog_migrate/53c745737d87179c1bafaa6f7ba9a667.jpeg)
2.3 递归函数
能够自己调用自己的函数称为递归函数。
可以说递归是编程思想当中最让人头疼的一种算法也不为过。
下面我们来看一个递归中最经典的例子
var func = function (x) {
if (x === 1) {
return 1;
} else {
return x*func(x-1);
}
};
这是递归中最经典的一个例子,叫做N!。
2.4 二分查找
二分查找的前提:有序数组,自然顺序(从小到大顺序)
找到中间的数,这个中间的数和你输入的数进行比较,如果你输入的数比中间的数大,就到后一半数据查找,否则就到前一半数据查找。
重复以上过程,直到找到满足条件的记录
var arr = [2, 4, 5, 9, 31, 60, 79, 80, 90];
使用原型来做。如果有这个数来输出true,没有输出false.
三、JSON概述
JSON英文全称JavaScript Object Notation,是一种轻量级的数据交换格式。它可以存储数据和传输数据。
JSON是一门独立的语言,用于存储和传输数据的格式,通常用于服务端向网页传递数据 。
JSON语言采用了JavaScript的语法,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包,但是还是需要说明的一点就是:
JSON和Javascript是两门不同的语言。
JSON的格式仅仅是一个文本,而文本是可以被任何编程语言读取及作为数据格式传递的。
3.1 json的语法
- 数据在名称/值对中
- 数据由逗号分隔
- 大括号保存对象
- 中括号保存数组
JSON 对象在大括号({})中书写:
Var obj = {
“name”:”peter”,
“sex”:”男”,
“age”:25
}
对象可以包含多个名称/值对:
JSON 数据的书写格式是:名称/值对。
名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值
{ "name":"halon", "sex":"woman", "from":"希腊" }
3.2 JSON 与 JS 对象的区别与对比
![c8ef5076b67206716979cfcefb23a69a.png](https://i-blog.csdnimg.cn/blog_migrate/e7a515e75c75e859c6a8704b48348490.png)
四、JSON提供的方法
个人理解,JSON就是
(1)将【前台的数据(对象、数组等)】转换成【字符串发送给后台】。
(2)将【后台回传的数据(字符串)】转换为【普通的数据(对象、数组等)】。
4.1 parse()方法
JSON.parse(后台传输过来的数据)
反序列化(有时候也被称作JSON数据解析,简称为JSON解析),
能够把JSON字符串转换成JS的数据类型。
转换的时候,如果字符串中存在不符合JSON要求的格式,会直接报错。
JSON解析就是通过某种手段,将【后台回传的字符串数据】转换成【可以直接被使用的数据】的过程。
通常情况下JS中的JSON解析会直接采用JSON中提供的JSON.parse方法来直接转换。
![c572c02a63c00ec685a96ff9cb86b29f.png](https://i-blog.csdnimg.cn/blog_migrate/aa0fd5fa5e3299932d347e6185db4255.png)
![2bbf83a6fbe56a82836a01e1da5098fe.png](https://i-blog.csdnimg.cn/blog_migrate/403b46bdeecd94dba58c8aef3fa75430.png)
var info = '{
"name":"halon",
"sex":"woman",
"from":"希腊"
}'console.log(JSON.parse(info));
4.2 stringify()方法
JSON.stringify(要往后台传输的数据)
序列化(有时候也被称作JSON数据封装或数据加密)
能够把JS的数据类型转换成JSON字符串。
转换的时候,如果数据中存在不符合JSON要求的格式,会做对应的处理
![71fc2b8a4ebce4335b6dbb9efb0e89c8.png](https://i-blog.csdnimg.cn/blog_migrate/c36e33204954462fc76b38d709bcc4c2.jpeg)
五、JSON解析
5.1 实例:添加购物车
![77367b40aaa34d86ff87fb3b777b0c59.png](https://i-blog.csdnimg.cn/blog_migrate/630849ddb1b4bad29c76ec95bc3b8cc8.jpeg)
![2598f2b11b0f684c37a6cd555f3904f0.png](https://i-blog.csdnimg.cn/blog_migrate/de2396d9e68dcbe96b69d193720f90a0.png)
![d7de4e88a9ee63c6fe3919bf4d02f190.png](https://i-blog.csdnimg.cn/blog_migrate/364f5a4e1203965e43a634ef7d8e6aa6.png)
![44b99d6bd182636cec27998f43db176a.png](https://i-blog.csdnimg.cn/blog_migrate/e6d96d8a6d522cc393ef4046a881048f.jpeg)
![84f73a6445f1bd50184fe9da382c9c47.png](https://i-blog.csdnimg.cn/blog_migrate/43cd6412c0afb4bc22f46d3c39bd5ce1.png)
![69666025fc34169eec5a240fdc35773e.png](https://i-blog.csdnimg.cn/blog_migrate/ce6f2a2277ae7f1c2ffbf0e6a9343f4e.jpeg)
![694032ef2958d5626ab274caa77b3f16.png](https://i-blog.csdnimg.cn/blog_migrate/613846af7f759a3c9b2f90817c5d5820.jpeg)
![1d5066d728f8e9cd55a094ca536ad978.png](https://i-blog.csdnimg.cn/blog_migrate/d42b76d3cd20e2b8e116b41d6074e2c1.png)
![a0c0d16897cb9a621373826273f3ab26.png](https://i-blog.csdnimg.cn/blog_migrate/e562cb446029fa6d24393a2654ca6cb5.jpeg)
5.2 实例:轮播图
![d2978bf0398ddef15aa2e1879c7144dc.png](https://i-blog.csdnimg.cn/blog_migrate/fdd1edeccf0716f051cf650969f57e6a.png)
![fa1d86ba6923e0b9f3fc0aacb778b839.png](https://i-blog.csdnimg.cn/blog_migrate/e031d232315c7f2b64f64baf55645503.png)
![7bbd6c8f2470e8930f8b703dbb4ed8df.png](https://i-blog.csdnimg.cn/blog_migrate/a236676ef0c43b3df52d2bc23d74afed.png)
![49e720e7386c15e3e80d9fa09b5df0eb.png](https://i-blog.csdnimg.cn/blog_migrate/933c1b157043f6f5695fa06596f78322.png)
![9c14ece6a31791882390ebdc88a19252.png](https://i-blog.csdnimg.cn/blog_migrate/234aea178d8474a3f6159527c5e8c43c.png)
![7c3e8b502ad9220493fc96acb9efa701.png](https://i-blog.csdnimg.cn/blog_migrate/b302e1040e354fca8c1b3e193462a410.png)
![d68b1206fe7305c4e98e7de55099023c.png](https://i-blog.csdnimg.cn/blog_migrate/67f970c88e7f739a67350fdffcee57d7.png)
![8f27a50396a8625263811d7bf34cc5d8.png](https://i-blog.csdnimg.cn/blog_migrate/f18989aa13bd29e631f3174a525b3ceb.jpeg)
![875f902ab05f13c48b75b9d3e88cc11a.png](https://i-blog.csdnimg.cn/blog_migrate/6ed7cf954a60aebf11e95f71b57ee37a.png)
![8322945173945d4456821723e5189249.png](https://i-blog.csdnimg.cn/blog_migrate/a9bb589fa72910b157f82d390abd4083.png)
![a7e0ba75299f2400d36dc3171e229ab8.png](https://i-blog.csdnimg.cn/blog_migrate/3c314b0eec1680e9abc54a275e59b74c.jpeg)
好了,本期的前端知识”javascript:排序算法和json“到此结束了,有兴趣的朋友点赞关注我,更多内容等你来看,我们下期再见!