前端易忽略的小知识点汇总
数字中,只有0转boolean时为false。负数转boolean值时也是true;
'' 或者 "",undefined, null, NaN, 0,false 转换成Boolean值均为false
"!!"将表达式进行强制转化为bool值的运算,运算结果为true或者false。 例如 array=[1,2,3] array.num=undefind !array.num=true !!array.num=false
filter() 返回值为新的数组,不会改变原数组
splice() 返回的是删除后的数组元素,splice()会改变原来数组 添加时第二个参数设置成0就可以
//语法 arrayObject.splice(index,howmany,item1,.....,itemX) //使用 arr.splice(0,0,1);//在起始位置添加数字‘1’ arr.splice(1,1); // 删除数组中第二位元素
和splice相似的slice
slice() 方法可从已有的数组中返回选定的元素。原数组不变(这一点与splice不同)
使用方法: arr.slice(start,end); //start为初始位置,end为结尾位置,返回的结果是从start到end(不取)的新数组
arr.slice(start); //选取从start开始直至最后一个元素
Array.from() 方法可以让我们通过类数组(array-like)或可迭代对象来创建一个新的 Array(数组) 实例。
//1、该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。 //2、该类数组对象的属性名必须为数字(可加引号,也可不加) // 使用 let arrayLike = { 0: '1111', 1: '2222', 2: '3333', 3: ['apple','banana','paper'], 'length': 4 } let arr = Array.from(arrayLike) console.log(arr) // ['1111','2222','3333',['apple','banana','paper']]
for...of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等。支持新的ES6的迭代协议.
// array-example 输出 各个元素 const iterable = ['mini', 'mani', 'mo']; for (const value of iterable) { console.log(value); } // map-example 输出 Key: one and Value: 1 const iterable = new Map([['one', 1], ['two', 2]]); for (const [key, value] of iterable) { console.log(`Key: ${key} and Value: ${value}`); } // set-example 输出 1,2 const iterable = new Set([1, 1, 2, 2, 1]); for (const value of iterable) { console.log(value); } // string-example 输出 "j" "a" "v" "a" "s" "c" "r" "i" "p" "t" const iterable = 'javascript'; for (const value of iterable) { console.log(value); } // arguments-example 输出 a b c function args() { for (const arg of arguments) { console.log(arg); } } args('a', 'b', 'c'); // 终止迭代时使用 break、continue、return 和 throw //普通对象不可以用 for of 迭代 会报错:TypeError: obj[Symbol.iterator] is not a function。
for...of for...in map foreach filter的使用方式和区别
for...of 与 for...in的区别
for in 会遍历数组内或对象上所有可枚举的属性,包括原型上的属性和方法(更适合于对象的遍历,尽量不要使用 for in 遍历数组)
for of 不会遍历构造函数原型上的可枚举属性。即若 Array.prototype.newArr = () => {}; 也不会遍历newArr,一般不用于对象属性和方法的迭代
foreach会从头到尾对数组里的每个元素遍历一遍 ,他不会生成新数组,也不改变原数组,回调函数接收三个值,分别是 数组的元素,索引和当前数组
let arr = ["a","b","c","d"] arr.forEach((el,index,array) => { if(el == "b" ) return console.log(el,index,array) })
上边的例子中加一个判断,如果满足元素等于b,return出去,按理说遍历时满足这个条件后边就不遍历了,但是foreach不会,他会接着向下进行
map 和foreach类似,map也会把数组的每一项都遍历一遍,会返回一个新数组,原数组保持不变,值得注意的是,map不会对空数组进行检测
//新数组会将return后边的值计算得出新的数组,如果是表达式会返回boolean值 let arr = [1,2,3,4,5] let b = arr.map((el,val,array) => { return el > 2 }) console.log(b) //返回结果 [false,false,true,true,true]
filter 为过滤的意思,也就是说它会把满足条件的元素拿出来形成一个新的数组
0 | -0 / null / undefined / ’ ’ / NaN 返回false其余都为true,-1/-2负数都为true
let arr = [1,2,3,4,5,6,7,8,9] let result = arr.filter(el => { return el % 2 == 0 }) console.log(result) // 返回结果 [2,4,6,8]
运用filter去除数组中重复的元素:
let phone = ['苹果','锤子','三星','华为','锤子','苹果','小米','锤子'] let result = phone.filter((el,index,arr) => { return arr.indexOf(el) == index }) console.log(result)
(不定期更新中...)