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个元素【常用】
var shuiguo = [{"Banana":1}, {"Orange":2},{"Apple":3}];
shuiguo.splice(1, 0, {"Lemon":33});//在第1和2条中间插入
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));
}
- some，循环到符合条件项后，返回true就会停止后面循环。
let arr=['a','b','c'];
arr.some((item,index)=>{
if(item==='b'){
console.log(index);//对象索引
return true;
}
});
- 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有颜色日志\r\n换行显示', '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)();
//-----
const str1=`
return function(a,b){console.log(a,b)}
`
const fn=new Function(str1)()
fn(1,2)
const str2=`
console.log(a,b)
`
new Function('a','b',str2)(1,2)
- “短路运算、
??、?.”都能用问号表达式实现。 - 短路运算
&& 逻辑与:
如果左边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 ，按键弹起才触发一次弹起事件
- 日期和毫秒互转
let b = (new Date()).valueOf();//当前时间转毫秒 返回如：1638857666250
let a = (new Date(1638857666250)).toLocaleString();//毫秒 转 时间
-
格式化输出json：
console.log(JSON.stringify(userJson,null,2));（2，两个空格留白） -
显示控件元素所有属性
let title=document.querySelector('#titile') as HTMLImageElement;
console.dir(title);
// 选择一个元素
const element = document.querySelector('.myClass');
// 添加一个类
element.classList.add('newClass');
// 删除一个类
element.classList.remove('myClass');
// 切换一个类
element.classList.toggle('active');
- js创建DOM元素
const newElement = document.createElement(‘div’);
newElement.textContent = ‘Hello, world!’;
document.body.appendChild(newElement);
- console对象常用的方法有：
console.log()：打印一条普通信息，无参数时，输出一个空行。 会引起内存泄露
console.debug()：打印调试信息。
console.error()：打印错误信息。
console.warn()：打印警告信息。
console.table()：将对象或数组的信息以表格形式输出。
console.trace()：输出当前执行的代码所在的函数调用堆栈信息。
console.table([{a:1,b:'a'},{a:21,b:'a1'}])
console.memory 查看内存使用情况。返回：JS Heap Size Limit JS堆大小限制
total JS Heap Size JS堆总大小
used JS Heap Size 使用的JS堆大小
