对es5和es6进行归纳总结,不会的记下来。
object 对象方法:
Object.assign(target,...sources)//将一个或多个源对象的可枚举属性复制到目标对象中,return(target)
target:目标对象,sources:源对象
参考https://www.cnblogs.com/heiye168/p/5689006.html
数组方法map:
map()方法返回一个由原数组中每个元素调用一个指定方法后的返回值组成的新数组
arr.map(funtion(){return()})
canvas:https://www.yuque.com/airing/canvas/readme
flat()
方法会递归到指定深度将所有子数组连接,并返回一个新数组。
var arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] var arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [5, 6]] var arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); // [1, 2, 3, 4, 5, 6] //Infinity展开所有嵌套数组 arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6]
Object.keys
返回一个所有元素为字符串的数组,其元素来自于从给定的object
上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。
// simple array var arr = ['a', 'b', 'c']; console.log(Object.keys(arr)); // console: ['0', '1', '2'] // array like object var obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.keys(obj)); // console: ['0', '1', '2'] // array like object with random key ordering var anObj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(Object.keys(anObj)); // console: ['2', '7', '100'] // getFoo is a property which isn't enumerable var myObj = Object.create({}, { getFoo: { value: function () { return this.foo; } } }); myObj.foo = 1; console.log(Object.keys(myObj)); // console: ['foo']
不知道大家对slice,splice,splite是肿么样的感觉,反正我刚接触到这三个函数的时候整个人都懵了,因为一个个长的跟孪生兄弟似的,每次用的时候都会混,于是决定记下来,也给大家当个参考吧。
- slice :
定义:接收一个或两个参数,它可以创建一个由当前数组中的一项或多项组成的新数组,注意是新数组哦~ 也就是说它不会修改原来数组的值。
用法:slice( para1 ),会截取从para1开始的到原数组最后的部分;
slice(para1,para2)会截取原数组的从para1开始的para2-para1个数组。
注意:当两个参数中存在负数时,用原数组的长度加上两个负数的参数作为相应的参数来计算。
2. splice :
定义:强大的数组操作方法
用法 : splice( para1,para2 ) : 删除数组中任意数量的项,从para1开始的para2项。注意的是用splice删除数组中的值会直接将某几项从数组中完全删除,会导致数组length值的改变,这与delete的删除置为undefined是不一样的。
splice( para1,para2,val1,val2… ):项数组中添加和删除项,para1表示可以添加的项数,para2表示删除的项数,后面的变量表示要添加的项的值,注 意是从para1之后开始删除和添加的。
注意 : 参数为负数的问题,如果para1为负数,则会加上数组的长度作为para1的值,而para2为负数或0的话不会执行删除操作。
3.split : 根据特定的字符切割字符串并且返回生成的数组。
例如 : str = “s-aaa-sss-eee-www”;
targetArr = str.split(“-”); //[‘s’,’aaa’,’sss’,’eee’,’www’]
现在看看其实这三位长相相近的函数都是与数组有关的,不过各自的功能还是有很大差异的~有了它们就方便我们的数组操作了。
js数组合并有两个常用方法,用法如下:
var a=[1,2,3],b=[4,5,6];
1.a.concat(b);//得到1,2,3,4,5,6;
1.1那个数组在前面合并后那个数组的元素就在前面
1.2 可以利用这个来复制一份数组,a.concat(a);
1.3 数组长度无限制,返回值是合并后的数组
1.4 千万级别的数组合并大约30毫秒
2.Array.prototype.push.apply(a,b) or a.push.apply(a,b);
2.1.Array.prototype.push.apply(a,b) ;//a,b两个数组都变成合并后的数组
2.2 数组长度有限制,不同浏览器不同,一般不能超过十万
2.3返回值是合并后数组的长度
2.4 在一万数据左右性能和concat差不多,大约2毫秒
const person = { name: 'John Smith', job: 'agent' }; for (const [prop, value] of Object.entries(person)) { console.log(prop, value); } // 'name', 'John Smith' // 'job', 'agent'
返回一个键和值的元组数组:
Object.entries(person)[[''name','John Smith'],['job','agent']]
。然后,使用for...of
循环遍历数组,并将每个元组解构为const [prop,value]
。
// 判断奇偶 const num=5; !!(num & 1) // true !!(num % 2) // true
// 判断数据类型 可判断类型:undefined、null、string、number、boolean、array、object、symbol、date、regexp、function、asyncfunction、arguments、set、map、weakset、weakmap function dataTypeJudge(val, type) { const dataType = Object.prototype.toString.call(val).replace(/\[object (\w+)\]/, "$1").toLowerCase(); return type ? dataType === type : dataType; } console.log(dataTypeJudge("young")); // "string" console.log(dataTypeJudge(20190214)); // "number" console.log(dataTypeJudge(true)); // "boolean" console.log(dataTypeJudge([], "array")); // true console.log(dataTypeJudge({}, "array")); // false
// 数字千分位 function thousandNum(num = 0) { const str = (+num).toString().split("."); const int = nums => nums.split("").reverse().reduceRight((t, v, i) => t + (i % 3 ? v : `${v},`), "").replace(/^,|,$/g, ""); const dec = nums => nums.split("").reduce((t, v, i) => t + ((i + 1) % 3 ? v : `${v},`), "").replace(/^,|,$/g, ""); return str.length > 1 ? `${int(str[0])}.${dec(str[1])}` : int(str[0]); } thousandNum(1234); // "1,234" thousandNum(1234.00); // "1,234" thousandNum(0.1234); // "0.123,4" console.log(thousandNum(1234.5678)); // "1,234.567,8"
// 限制输入为中文
const input = document.querySelector('input[type="text"]') const clearText = target => { const { value } = target target.value = value.replace(/[^\u4e00-\u9fa5]/g, '') } input.onfocus = ({target}) => { clearText(target) } input.onkeyup = ({target}) => { clearText(target) } input.onblur = ({target}) => { clearText(target) } input.oninput = ({target}) => { clearText(target) }
// 去除字符串中的html代码
const removehtml = (str = '') => str.replace(/<[\/\!]*[^<>]*>/ig, '') console.log(removehtml('<h1>哈哈哈哈<呵呵呵</h1>')) // 哈哈哈哈<呵呵呵
const isMobile = () => 'ontouchstart' in window // 判断是否是移动端
以上几个牛皮的都是来自开课吧团队https://mp.weixin.qq.com/s/S0xHUMGvSVy0hJLGMf68rA