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 ----

以上就是本文的奇伎淫巧,感谢各位看官的品尝,简书,我们下回约!!!哇咔咔(以后争取一个礼拜一篇吧!💪 💪 💪 )
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容

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