前端那点事 - 码农教程

先来两个有意思的冷门小知识.

1.浏览器地址栏运行HTML代码

data:text/html,<h1>Hello, 1802!</h1>浏览器页面输出hello 1802;

2.浏览器地址栏运行HTML代码

data:text/html, <html contenteditable>浏览器页面变成可编辑页面

下面总结一下项目中遇到的忘记的小知识.

1. 保留小数(一位)

a. Math.floor(num * 10) / 10

b. num.toFixed(1)

2. js 如何将字符串转换为数字

方法一：

利用js自带的数字转化方法

let a = "12"
parseInt(a)

方法二：

利用强制数字转换方法

let a = "12"
Number(a)

方法三：

利用弱转换的方式

let a = "12"
a = a * 1

3.根据参数对象拼接 URL query 字符串

const createLinkString = (paras) => {
let queryStr =''
    const keys = Object.keys(paras)

    // 拼接query参数
    keys.map((key) => {
    queryStr += key +'=' + paras[key] +'&'
    })

    // 去掉最后一个&字符
    queryStr = queryStr.substr(0, queryStr.length -1);

    // 如果存在转义字符，那么去掉转义
    queryStr = queryStr.replace(/['"\/bfnrt]/g, '')
return queryStr
}

createLinkString({
    name:'Test',
    age:20
})// name=Test&age=20

4.由对象组成的数组如何去重？

//创建data对象
let data = [ 
{ id: 201801, name: '张三', age: 15, }, 
{ id: 201802, name: '李四', age: 18, }, 
{ id: 201801, name: '张三', age: 15, }, 
{ id: 201805, name: 'Jack', age: 18, }, 
{ id: 201805, name: 'Jack', age: 18, }, 
{ id: 201805, name: 'Jack', age: 18, }, 
];

1.数组的reduce()方法

let hash = {};
data = data.reduce((preVal, curVal) => { 
  hash[curVal.id] ? '' : hash[curVal.id] = true && preVal.push(curVal); 
  return preVal 
}, [])

1.1、上述方法的实现思路

利用reduce()方法的累积器作用，在对由对象组成的数组进行遍历时，通过对象hash来标记数组中每个元素id是否出现过，如果出现过，那么遍历到的当前元素则不会放入到累积器中，如果没有出现，则添加到累积器中，这样保证了最后返回值中每个数据id的唯一性。

1.2、关于数组的reduce()方法

官方解释：reduce()方法接收一个函数作为累积器，数组中的每个值从左到右开始合并，最后返回一个值。

我的理解：reduce()其实也就是对数组从左到右进行遍历，在遍历的同时按照回调函数中的方法进行处理，reduce()的特别之处是在于它每遍历一个元素之后会将这个元素放在累积器中累积起来，类似于收割机收小麦一样，从左往右收割，收割机中用来放收割好小麦的地方就类似于reduce()的累积器，最后满满收好的一大袋小麦就类似于reduce()的返回值。

语法:

array.reduce(callbackfunction, initialVal);
function callbackfunction(preVal, curVal, index, array){
  //函数体
}

数组的reduce()方法接收两个参数，callbackfunction回调函数和initialVal初始值；callbackfunction是必需项，initialVal是可选项；callbackfunction回调函数接收四个参数：

preVal —> 上一次调用回调函数返回的值，或者初始值initialVal；

curVal —> 数组中当前被处理的值；

index —> 当前的值在数组中的索引；

array —> 调用reduce()方法的数组；

callbackfunction函数中必须有返回值，也就是累积器，它每次的返回值都是下一次调用回调函数中的preVal值。

2. for遍历

function removeRepeat(arr, key){
for(let i = 0; i < arr.length; i++) { 
    for(let j = i+1; j < arr.length; j++) { 
        if(arr[i][key] === arr[j][key]){ 
 // 关键，因为splice()删除元素之后，会使得数组长度减小，此时如果没有j=j-1的话，会导致相同id项在重复两次以上之后无法进行去重，且会错误删除id没有重复的项。
            arr.splice(j, 1); j = j-1;  
            } 
        } 
     } 
 }
removeRepeat(data, 'id');

2.1、上述方法的实现思路

利用for循环遍历数组，并将数组中的每一个元素与剩余元素一一进行比较，如果在剩余元素中出现id相同的项，则通过splice()方法将相同id项删除，这样在最终得到的数组中每个数据id将是唯一的。通过splice()方法删除元素后，会使得数组长度减小，为了实现去重应该执行j = j-1。上面将去重方法直接封装成函数removeRepeat，使用时可以直接调用该函数，并传入要去重的数组和唯一属性名。

普通的数组去重: 参考博客

https://www.cnblogs.com/baiyangyuanzi/p/6726258.html

https://segmentfault.com/a/1190000016418021

vuex页面刷新,数据不保留.

数据写到computed计算属性里.

Computed属性的优点我试着来总结一下：

1. 纯响应式，computed里面所用到的data一旦改变，整个computed的方法就回重新计算这个属性值

2. 计算结果会被缓存起来，方便下次使用，如果下次调用的时候，其中的数据没有发生变化，则不会重新计算。

详见博客: https://www.cnblogs.com/zhongchao666/p/9567527.html