JS常见技巧_H5之家 - 中国HTML5教程资源分享第一站

本文旨在日常学习与记录；简书好久不见_)

你，我也好久没见！！！

こんにちは!初めから始めましょう

1. 关于数组遍历 for...of 与 for...in // for in是遍历键名，for of是遍历键值。 var arr = [4,3,5) for(var i in arr){ console.log(i); // 0,1,2 } for(var v of arr){ console.log(v); // 4,3,5 }

for in是循环遍历对象；for of语法和for in语法很像，但它的功能却丰富的多，它能循环很多东西,还可以实现对iterator对象的遍历，而for in就是简单的遍历了。

具体参考：阮一峰的]阮一峰大神的es6入门里的

2. ES6中的`` const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t' + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t' + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t' + ' veniam, quis nostrud exercitation ullamco laboris\n\t' + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t' + ' irure dolor in reprehenderit in voluptate velit esse.\n\t' // 相当于下面这种只用引号的写法 const lorem = `Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse. ` // 还有一种情况 const someLove = 'I have got ' + ye + 'yue' + yue + sheng // 简写为： const someLove = `I have got ${ye} yue ${yue} ${sheng}` 3. 变量赋值

将一个变量的值赋给另一个变量时，首先需要确认原值不是null、未定义或者空值
可以通过编写一个包含多个条件的判断语句来实现：

if (variable1 !== null || variable !== undefined || variable1 !== ' ') { variable2 = variable1; } // 或者可以简写成： const variable2 = variable1 || 'new' // 测试代码： let variable1; let variable2 = variable1 || ' '; console.log(variable2 === ' '); // true variable1 = 'foo'; variable2 = variable1 || ' '; console.log(variable1); // foo 4.箭头函数

这个就很熟悉了，使用起来也很方便，自己平常的使用还是少了，之后加强使用吧！！！

返回值是通常用来返回函数最终结果的关键字。只有一个语句的箭头函数，可以隐式返回结果（函数必须省略括号 ({})，以便省略返回关键字）。

要返回多行文本（例如对象文本），需要使用（）而不是{}来包裹函数体，这样可以确保代码以单个语句的形式进行求值。

function calc(diameter){ return Math.PI * diameter } // 简写为： calc = diameter => ( Math.PI * diameter ) 6. 默认参数值

可以在函数声明中定义默认值

function volume(l, w, h){ w ? w : 3; h ? h : 4; return l * w * h; } // 可以简写为： volume = (l, w = 3, h = 4) => (l * w * h); colume(2); // 24 7. 解构赋值

从数组或对象中快速提取

使用展开运算符可以替换某些数组函数

const odd = [1, 5, 3]; const number = [4, 5, 6].concat(odd); // [1, 5, 3, 4, 5, 6] // 可以简写为 const odd = [1, 5, 3]; const number = [4, 5, 6, ...odd] console.log(number); // [4, 5, 6, 1, 5, 3] const arr = [1, 2, 3, 4]; const num = arr.splice(); // [1, 2, 3, 4] 可以这样写： const arr = [1, 2, 3, 4]; const num = [...arr] // [1, 2, 3, 4] // 还可以这样用： const arr = [1, 2, 3] const num = [1, ...arr, 2, 3]; // [1, 1, 2, 3, 2, 3] 9. 双位操作符

可以用来代替 Math.floor()，而且它执行相同的操作运算更快。

Math.floor(4.9) === 4; // true // 可以简写为： ~~4.9 === 4; // true 10.深复制对象

其实最简单的方法就是：

JSON.parse(JSON.stringify(Object)) // 利用JSON序列化实现一个深拷贝 function deepClone(source){ return JSON.parse(JSON.stringify(source)); } var o1 = { arr: [1, 2, 3], obj: { key: 'value' }, func: function(){ return 1; } }; var o2 = deepClone(o1); console.log(o2); // => {arr: [1,2,3], obj: {key: 'value'}}

从例子就可以看到，源对象的方法在拷贝的过程中丢失了，这是因为在序列化JavaScript对象时，所有函数和原型成员会被有意忽略，这个实现可以满足一些比较简单的情况，能够处理JSON格式所能表示的所有数据类型，同时如果在对象中存在循环应用的情况也无法正确处理。

// 递归实现一个深拷贝 function deepClone(source){ if(!source && typeof source !== 'object'){ throw new Error('error arguments', 'shallowClone'); } var targetObj = source.constructor === Array ? [] : {}; for(var keys in source){ if(source.hasOwnProperty(keys)){ if(source[keys] && typeof source[keys] === 'object'){ targetObj[keys] = source[keys].constructor === Array ? [] : {}; targetObj[keys] = deepClone(source[keys]); }else{ targetObj[keys] = source[keys]; } } } return targetObj; } // test example var o1 = { arr: [1, 2, 3], obj: { key: 'value' }, func: function(){ return 1; } }; var o3 = deepClone(o1); console.log(o3 === o1); // => false console.log(o3.obj === o1.obj); // => false console.log(o2.func === o1.func); // => true