总结些琐碎的知识点问题描述: 假如有一个数字arr = [1,2,3,4,5,6,7,8,9]。我想删除其中的2,5,

平常工作中,经常会遇到一些琐碎的知识点,光靠脑力去记容易有遗漏。这篇文章会帮助记忆这些琐碎的知识点,让我们的知识体系更加完善和成熟。

1.删除数组某几项产生的问题

问题描述: 假如有一个数字arr = [1,2,3,4,5,6,7,8,9]。我想删除其中的2,5,8。怎么做？

答案: ① 正常for循环，每次删除后都要进行一次下标i--,所以,不能用下标i作为判断是否删除的依据 ② 倒序for循环。由于是从后往前删，所以可以以下标i作为判断依据，且不用i--。代码如下

let arr = [1,2,3,4,5,6,7,8,9];
let newArr = arr.slice();
for (let i = 0; i < arr.length; i++) {
	if(arr[i] === 2 || arr[i] === 5  || arr[i] === 8) {
		arr.splice(i,1);
		i--;
	}
}
console.log(arr); // [1,3,4,6,7,9]
for(let i = newArr.length-1; i >= 0; i--){
	// if(newArr[i] === 2 || newArr[i] === 5  || newArr[i] === 8) {
	if(i === 1 || i === 4 || i === 7) {
		newArr.splice(i,1);
	}
}
console.log(newArr); //[1,3,4,6,7,9]

2. 数组扁平化处理

使用es6 展开运算符, 利用arr.some判断当数组中还有数组的话，递归调用flatten扁平函数(利用es6展开运算符扁平), 用concat连接，最终返回arr;

var arr = [1,2,{a: 1, b: 2}, 5, [{}, [99, {g: 111}, [{}, {c: 12}]], 1, 'abc', Symbol('aaa')], null, undefined, true, [true, false, 21, [123], 4]];
function flatten(arr){
   while(arr.some(item => Array.isArray(item))){
   		// arr=[].concat.apply([],arr)
   	arr=[].concat(...arr)
   }
   return arr
}

3. 文件下载。后端提供页面，前端打开页面

// 如果是get请求可以直接通过window.open下载
downloadFile(v) {
 const url = `${window.location.origin}${service.defaults.baseURL}/file/download/${v.id}`
 window.open(url)
},

// 如果是post请求， 需要通过传递{responseType: 'blob'}的方式下载

export function exportAllApp(){
   return axios.get(`${baseUrl}/daas/api/apps/exportAllApp`, {}, {responseType:'blob'})
   
/**
* 全部导出
*/
async allExport(){
   let res = await exportAllApp()
   if(res.status === 200){
       const elink = document.createElement('a');
       elink.download = '应用输出表.xlsx';  //定义表格名称，后缀是文件格式
       elink.style.display = 'none';
       const blob = new Blob([res.data], { type: 'text/csv,charset=UTF-8'});
       elink.href = URL.createObjectURL(blob);
       document.body.appendChild(elink);
       elink.click();
       document.body.removeChild(elink);
   }
},
}

4. 获取高度。

// 1. 获取屏幕高度
let clientHeight = document.documentElement.clientHeight | | document.body.clientHeight 
// 2. 获取滚动高度
let scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop

5. 点击拨打电话

function toTel(phone){
    const to = `tel:${phone}`;
    window.location.href = to;
}
// 或者直接用a标签
<a href="tel:18311011111"></a>

6. 将光标移动到input框的末尾

function textarea_focus_end(objTextarea) {
	var objTextarea =
		(typeof objTextarea == "string" || objTextarea instanceof String) ?
		document.getElementById(objTextarea) :
		objTextarea;
	var pos = objTextarea.value.length;
	if (objTextarea.setSelectionRange) { //firefox
		objTextarea.focus();
		objTextarea.setSelectionRange(pos, pos);
	} else if (objTextarea.createTextRange) { //IE
		var range = objTextarea.createTextRange();
		range.collapse(true);
		range.moveEnd('character', pos);
		range.moveStart('character', pos);
		range.select();
	}
}

7. object.definePropty定义一个属性

  Object.defineProperty(car, 'price', {
        get(){
            console.log('price属性被读取了')
            return val;
        },
        set(newVal){
            console.log('price属性被修改了')
            val = newVal;
        }
    })

8. jsx的使用

在.vue文件中不光可以引入.vue后缀的组件，也可以引入.jsx文件，引入方式跟引入.vue后缀的组件是一样的。如果定制化要求比较高的地方可以考虑使用.jsx文件。下面是最基础的写法

export default {
  data() {
    return {
      author: "andy凌云"
    };
  },
  render() {
    return (
      <div id="footer">
        <span>Written by {this.author}</span>
      </div>
    );
  }
};

9. 按照指定端口运行项目

// 默认8080端口
npm run dev

// 也可以指定端口, 注意=两边不能有空格
PORT=8090 npm run dev

10. 复制浏览器中console.log打印出的对象

通过console.log打印出的对象，由于有原型链或者对象过长的原因，所以有时无法直接复制对象。而且控制台打印出来的对象是经过格式化处理且直接选择粘贴会有格式问题，所以此时我们可以通过chrome控制台内置的 copy() 方法来进行打印结果的复制。

操作步骤:

在chrome浏览器中，右键单击要复制的对象。选择 Store as global variable。这时chrome下控制台下会多出个temp1。
用chrome内置的copy方法操作 copy(temp1)
这时，对象已经复制到剪切板上了。直接键盘操作ctrl + v 就可以把对象复制到你想复制的地方了

小提示: 在network中也可以使用这种方法去复制对象哦。

11. 解决 ios 下微信浏览器输入法调用页面不回位

const blurWxIos = ()=> {
	if(isWeiXinAndIos()){
		let body = document.body
		let result = body.scrollHeight <= body.clientHeight
		body.scrollIntoView(result)
	}
	// 判断浏览器
	function isWeiXinAndIos() {
		let ua = window.navigator.userAgent
		let isWeixin = /MicroMessenger/i.test(ua)
		let isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua)
		return isWeixin && isIos
	}
}

12. Object.prototype.toString.call()的值

在JavaScript里使用typeof判断数据类型，只能区分基本数据类型，即：number、string、undefined、boolean、object。对于null、array、function、object来说，使用typeof都会统一返回object字符串。要想区分对象、数组、函数、单纯使用typeof是不行的。在JS中，可以通过Object.prototype.toString方法，判断某个对象属于哪种内置类型。分为null、string、boolean、number、undefined、array、function、object、date、math。

13. es6函数参数的定义

一般我们在定义函数的时候，如果函数有多个参数时，在es5语法中函数调用时参数必须一一对应，否则就会出现赋值错误的情况，来看一个例子：

function personInfo(name, age, address, gender) {
  console.log(name, age, address, gender)
}
personInfo('william', 18, 'changsha', 'man')

上面这个例子在对用户信息的时候需要传递四个参数，且需要一一对应，这样就会极易出现参数顺序传错的情况，从而导致bug，看es6解构赋值是怎么解决这个问题的：

function personInfo({name, age, address, gender}) {
  console.log(name, age, address, gender)
}
personInfo({gender: 'man', address: 'changsha', name: 'william', age: 18})

这么写我们只需要知道要传什么参数就行来，不需要知道参数的顺序也没问题

14. 编码解码问题

let obj ={"channelcode":"yj-test"}
let res =btoa(encodeURIComponent(JSON.stringify(obj)));
console.log(res) // JTdCJTIyY2hhbm5lbGNvZGUlMjIlM0ElMjJ5ai10ZXN0JTIyJTdE

15. window.location各属性的值

属性API	返回值说明	举例
window.location.href:	设置或返回完整的 UR	http://192.168.1.3:8189/saas/?code=11#/saas/home?type=&route=home
window.location.protocol:	协议名.取值有'https:','https:','file:' 等等 , 注意带有冒号":"	http:
window.location.host:	=location.hostname+location.port：主机名+端口号	192.168.1.3:8189
window.location.hostname:	主机名	192.168.1.3
window.location.port:	端口号, 如果采用默认的80端口(即使添加了:80 如:www.baidu.com:80)，那么返回值并不是默认的80而是空字符 ""	8189
window.location.pathname:	路径	/saas/
window.location.search:	查询串.从问号 (?) 开始的 URL（查询部分)	?code=11
window.location.hash:	书签名设置或返回从井号 (#) 开始的 URL（锚:a标签中设置的href值）。如果地址里没有“#”，则返回空字符串	#/saas/home?type=&route=home

控制台下打印输出。完整url为: http://192.168.1.3:8189/saas/?code=11#/saas/home?type=&route=home

16. 解决某些网址打不开的情况。配置host域名(命令仅针对mac电脑)

在打开vant和mint官网的时候，出现了打不开网址的情况。所以后端同事教了我如何进行配置的方法。以mint.ui官网(mint-ui.github.io/)为例。

如果打不开这种大型官网的网址， 99%的可能性是你本人的电脑出了问题。 mac下修改hosts的方式可以解决大部分的情况。首先，打卡终端，输入sudo vi /etc/hosts。然后按E： dit anyway 。然后按 i 进行编辑。在最底部输入185.199.108.153 mint-ui.github.io。这里，你要输入你要打开的网址对应的ip和域名。按esc退出，然后:wq保存就已经配置好了。重新打开网址发现可以打开了大功告成。

这里是进行ip地址查询的网站。如果不知道当前网站对应的ip，在这里输入当前网址就可以查出对应ip。
ping.chinaz.com/

17. 解决chrome浏览器跨域

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/andy/Documents/MyChromeDevUserData

18. 在github中直接打开github项目的方法

在github后边加1s。例如https://github1s.com/ljianshu/mt-app 加 1s变成https://github1s.com/ljianshu/mt-app

总结些琐碎的知识点