js编码中常用的知识点

【 字符串常用方法1、2 】

var myStr = "I,Love,You,Do,you,love,me";
var substrArray = myStr.split(","); // ["I", "Love", "You", "Do", "you", "love", "me"];
var arrayLimited = myStr.split(",", 3); // ["I", "Love", "You"];
myStr.slice(1);和myStr.substring(1)//这两个都是返回第一个“,”到最后一个字符 arr.find
myStr.slice(1,4);和myStr.substring(1,4)//返回",Lo"【截取含start到 end （不含end）为止的所有字符】
myStr.substr(1,4)//返回",lov"【第二个参数代表截取的字符串长度】
var str="HELLO";
var n=str.charAt(str.length-1);//O ,返回最后一个字符

var ss="     hello world      ";  
ss.trim();    //hello world 【去掉首尾空白符（空格、制表符 tab、换行符等）】

• 对象操作（循环、移除、添加、修改等）用到下面的数组常用方法和循环知识点。

【数组和对象的区别】

• 数组使用数字索引。对象使用命名索引。数组是特殊类型的对象。
• 如果希望元素名为字符串(文本)则使用对象。如果希望元素名为数字则使用数组。
• Array.isArray([1,2])或 [1,2] instanceof Array 检测数组

• 判断数据类型：typeof([1,2])== 'object'返回true，[1,2] instanceof String返回false
• 自己写一个数组类

function MyArray() {
	this.length = arguments.length;
	for(var i=0; i< arguments.length; i++) {
		this[i] = arguments[i];
	}
} 
var arr = new MyArray(11,3,55,88,99, "abc");
arr[6] = 100;

【数组常用方法】：常用 —— push / splice / concat

let obj = [1,2,3] //数组
obj= [1,"ab",{age:11,name:"tome"}];//数组内含字符串，对象
obj.push('12')//数组底部追加，并返回长度。【常用】
obj.pop()//底部移除一个，并返回删除的值。
obj.unshift('1')//数组的头部追加，并返回长度
obj.shift()//头部移除一个，并返回删除的值。
obj.splice(2,0,"abc","dd")//在下标2处添加两个元素 —— 在指定位置“粘接”n个元素【常用】
obj.splice(2,1,"asd","d")//从下标2处接入后面2个元素 —— 删除指定 + 然后“粘接”n个元素
obj.splice(2,1)//从下标2处移除1个元素 —— 删除指定索引元素【常用】
split()字符串分割数组
let arr = obj.concat(['啊啊'],'ff');//多个数组合（union all）成一个新数组并返回【常用】
obj.slice(1,3);//（单词：切成薄片）截取从索引1到3（含1不含3的中间元素）—— 返回指定索引范围元素，得到一个新的。
[1,2].indexOf(2)//返回：1
[1,2].join() //返回"1,2"

• 用slice对数组进行等分操作

let newArr = [];
let data=[1,2,3,4,5,6];
for (let index = 0; index < data.length; index += 2) { 
	let per = 2;//每2条一组等分
	newArr.push(data.slice(index, index + per)); 
}

【数组循环】 （常用 —— for / forEach / filter / map / find）

• for （使用频率高） for(let i=0;i<10;i++){}、for-in遍历对象的属性，而 for-of（ES6） 遍历可迭代对象的值

• forEach（中）遍历数组，类似for。

let arr=[1,2,3,4,5,6,7];
arr.forEach(function(v){console.log(v)});//数组每个元素都执行一下函数

• filter （中）过滤，数组每个元素都按函数过滤，符合条件的组成新数组返回。

let a = arr.filter(item => item.Sex === '女');

• find （中）查找符合条件第一个元素。

$(this.$refs[this.UserName].$el).find("input").focus();//找到第一input放入筛选框
let a = arr.find(item => item.Sex == '女');

• map（中）遍历每个元素，按逻辑组成新数组返回。(新数组个数不变，而filter是过滤个数会变)

let arr=[1,2,3,4,5,6,7];
let a = arr.map((v)=>v*2);//数组每个元素都执行一下函数，组成新数组后返回。

let people=[{a:1,b:'tome'},{a:2,b:'lily'}]; 
let pa=people.map(v=>v.a===1);//返回：[true, false]

let data = people.map(function (obj, index) {
	let item = {
	  value: obj.a,
	  label: obj.b
	}
	return item;
}); // 返回：[{value: 1, label: "tome"},{value: 2, label: "lily"}]

• every （少）检测数组所有元素是否都符合指定条件

//true则small是big子集
public static includes(big, small): Boolean {
	return small.every(val => big.includes(val));
}

• findIndex（少）返回符合条件的数组第一个元素位置。reduce（少）数组元素相加后的总和
• for循环与forEach有什么区别呢？

1.for循环可以使用break跳出循环，但forEach不能。
2.for循环可以控制循环起点（i初始化的数字决定循环的起点），forEach只能默认从索引0开始。
3.for循环过程中支持修改索引（修改 i），但forEach做不到（底层控制index自增，我们无法左右它）。
如果用for则要写const element = keys[index];，foreach相比较于for来说代码量其实是少了很多的

let mustField={...};
let keys=Object.keys(mustField);//对象所有key（对象所有value：let vals = Object.values(t)）
//mustField.hasOwnProperty('name')，对象是否包含name节点
for (let index = 0; index < keys.length; index++) {
	const element = keys[index];
	let r = data[element].toString()
	if (r == '') {
		return ['“' + mustField[element] + '”不能为空！']
	}
}

keys.forEach(v=>{
	if(data[v]==''){
		return ['“' + mustField[element] + '”不能为空！']
	}
})

【js异常】

try {
	 throw "自己抛异常"; //throw new Error ("自己抛异常"); 
}catch(err) {
	console.log(err);
} finally {
	//....
}

【日期常见操作】：格式转换和加减、大小

var d=new Date();
console.log(d.toLocaleString());//2021年8月14日09:02:29
new Date("January 12,2006 22:19:35");
new Date("January 12,2006")
new Date(2006,1,12,22,19,35);
new Date(2006,1,12);
new Date(1137075575000);
当前日期的年：(new Date()).getFullYear() 
当前日期的月：(new Date()).getMonth()+1
当前日期的日：(new Date()).getDate()
当前日期的时/分/秒：.getHours()，getMinutes(),getSeconds

• JavaScript 设置日期方法大全
• Moment.js 是一个简单易用的轻量级 JavaScript 日期处理类库，提供了日期格式化、日期解析、设置、比较等功能。

【前端缓存】

• sessionstorage和localstorage
• 前端缓存大全

【日志输出】

• console.log('%c有颜色日志 换行显示', 'color:blue');
• console.dir(window)可以显示一个对象所有的属性和方法.

【其他】

• Tencent：JavaScript安全指南
• 页面支持快捷键(TS代码)

mounted() {
	document.addEventListener("keydown", this.WindowKeyDown);//页面支持快捷键 
}
//页面支持快捷键 
public async WindowKeyDown(e) { 
	if (e.altKey && e.keyCode == 83) {//alt+s 触发保存事件
	  this.btnSave();
	}
}

• JS中window对象和document对象

• 浏览器每打开一个窗口生成一个window对象，并且窗口内部的页面会自动生成一个document对象，通过document对象来操作页面中的所有元素.
• 常见方法：window.alert()/window.setTimeout() window可以省略。document.getElementByld()通过id获取元素

• 计算代码执行时间

var aa = "{name:'cola',item:[{age:11},{age:22},{age:23},{age:23}]}";
var now = new Date().getTime();
for (var i = 0; i < 100000; i++) {
	var a = eval("(" + aa + ")");

}
var now1 = new Date().getTime();
console.log("eval 时间为：" + (now1 - now) );

• 计算代码执行时间，可以使用console.time(),过程如下：

console.time("起个名");
//需要检测的代码段
console.timeEnd("起个名");

• 还需要一些其他的性能指标的话，可以使用console.profile,过程如下：

console.profile("XX");
//需要检测的代码段
console.profileEnd("XX");

• 两种把js字符串按代码执行方法。推荐后者，可以调试：加入输出日志，然后在调试窗口中看到的VM，点进去就可以调试了。

var js='window.test=function(a){console.log(a);alert(a)};';
eval(js) 或 new Function(js)();

• “短路运算、??、?.”都能用问号表达式实现。
• 短路运算

&& 逻辑与:
	如果左边true,返回右边
	如果左边false,返回左边
 
|| 逻辑或: 
	如果左边true,返回左边
	如果左边false,返回右边

• 空值合并操作符——??，左边为null或undefined，返回右边，不是则返回左边

let a = null ?? 'tome';//返回tome

• 可选链操作符——?.

let obj ={
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
}
let n = obj.cat?.name;// 等价于 obj.cat ? adventurer.name : ''

• obj.hasOwnProperty('name') —— 对象中是否存在name，有则true，无则false。
• 事件“keyup”和“keydown”区别？ 如表单要求回车跳到下一个input。若要求弹起才让跳则用keyup，如果想按着不丢就一直跳就keydown。

○ key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。
 keydown ，按键按住不放会一直触发按下事件。
 keyup ，按键弹起才触发一次弹起事件