JS常见技巧

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

你,我也好久没见!!!

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

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入门里的 Iterator和for...of循环

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 sayHi(name) {
    console.log('hello', name)
}

setTiemout(function(){
    console.log('Loader')
}, 2000)

list.forEach(function(item){
    console.log(item)
})

// 以上可以简写:

sayHi = name => console.log('Hello', name);

setTimeout( () => console.log('Loaded'), 2000);

list.forEach( item => console.log(item));
5. 隐式返回值

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

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

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 observable = require('mobile/observer');
const action = require('mobile/action');
const run = require('mobile/run')

// 可以简写为:
import { observable, action, run } from  'mobile';

const from = this.props.from;
const friday = this.props.friday;
const chamming = this.porps.chamming;
const nical = this.props.nical;

// 可以简写为:
import {from, friday, chamming, nical} from this.props;

// 可以指定变量名
const { from, friday, chamming, nical:yang } = this.props;
8. 展开运算符

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

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

jQuery中的extend方法基本的就是按照这个思路实现的,但是没有办法处理源对象内部循环引用的问题,同时对Date,Funcion等类型值也没有实现真正的深度复制,但是这些类型的值在重新定义的时候一般都是直接覆盖,所以也不会对源对象产生影响,从一定程度上来说也算是实现了一个深拷贝。

--- 在下分割线君,next to meet you ----

以上就是本文的奇伎淫巧,感谢各位看官的品尝,简书,我们下回约!!!哇咔咔(以后争取一个礼拜一篇吧!💪 💪 💪 )
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 32,364评论 18 399
  • 任何一种约束心灵解放的形式化的宗教,哲学和主张都无法进入真理的国度。 要从根本改变社会与人生,必须先改变个人自我意...
    芒果和桃阅读 2,615评论 0 0
  • 月缺,月圆,十二轮。 北平,长安,几来回? 思归,思归,情在骏奔, 思归,思归,我心已归。
    雷一凡阅读 1,873评论 0 0
  • 作为战士 这一刻失去铠甲的你 该用什么来面对 无边的黑夜 于你的一生中 你将遇见太阳,月亮 河水和峰峦 你爱过信马...
    9_crimes阅读 1,553评论 0 0
  • 不喜欢一个人了,我会看清他原来有多拙劣的演技。解释,都是掩饰,因为承认自己错了很难。你不说一句,坐在他对面,再次端...
    庐山烟雨阅读 1,472评论 0 1

友情链接更多精彩内容