香港管家婆论坛一句中特

长沙网站优化排名

香港管家婆论坛一句中特分类

联系我们

香港管家婆论坛一句中特企业名称:长沙简界网络科技有限香港管家婆论坛一句中特

联系人:房经理

香港管家婆论坛一句中特电话:0731-82880004

手机:188-7414-8081

邮箱:779923984@qq.com

传真:0731-82880004

网址 :  www.xdtbus.com  

香港管家婆论坛一句中特地址:长沙市岳麓区铜盆湖路1号山水誉峰5栋5楼


JS优化代码技巧

JS优化代码技巧

香港管家婆论坛一句中特日期:2018-04-02 香港管家婆论坛一句中特:简界科技 香港管家婆论坛一句中特:

  1. 香港管家婆论坛一句中特Insert item inside an Array(向数组中插入元素) 

向一个数组中插入元素是平时很常见的一件事情。你可以使用push在数组尾部插入元素,可以用unshift在数组头部插入元素,也可以用splice在数组中间插入元素。

香港管家婆论坛一句中特·     它们都是基本类型

香港管家婆论坛一句中特·     null === undefined //false

 

5.Check if a property is in a Object(检查某对象是否有某属性)

香港管家婆论坛一句中特 1 //method1

 2     var myObject = {

 3       name: '@tips_js'

香港管家婆论坛一句中特 4     };

香港管家婆论坛一句中特 5     if (myObject.name) { }

香港管家婆论坛一句中特 6 

 7 //method2

 8     var myObject = {

香港管家婆论坛一句中特 9       name: '@tips_js'

10      };

11 

12      myObject.hasOwnProperty('name'); // true

香港管家婆论坛一句中特13      'name' in myObject; // true

14 

15      myObject.hasOwnProperty('valueOf'); //false, valueOf 继承自原型链

16      'valueOf' in myObject; // true

两者检查属性的深度不同,换言之hasOwnProperty只在本身有此属性时返回true,香港管家婆论坛一句中特而in操作符不区分属性来自于本身或继承自原型链。

 

6.Tip to measure performance of a javascript block(测量javascript代码块性能的小知识)

快速的测量javascript的性能,我们可以使用console的方法,例如 

香港管家婆论坛一句中特1  console.time("Array initialize");

2  var arr = new Array(100),

3      len = arr.length,

4      i;

6  for (i = 0; i < len; i++) {

7      arr[i] = new Object();

8  };

9  console.timeEnd("Arrayinitialize"); // 0.711ms

 

香港管家婆论坛一句中特7.Fat Arrow Functions(箭头函数)

语法更少的代码行不再需要一遍一遍的打function了

语义从上下文中捕获this关键字

 1  // 使用functions

 2  vararr = [5,3,2,9,1];

 3  vararrFunc = arr.map(function(x) {

 4   return x * x;

 5  });

 6 console.log(arrFunc )

 7 

香港管家婆论坛一句中特 8  // 使用箭头函数

香港管家婆论坛一句中特 9  vararr = [5,3,2,9,1];

香港管家婆论坛一句中特10  var arrFunc = arr.map((x) => x*x);

11  console.log(arrFunc )

箭头函数在这种情况下省去了写小括号,function以及return的时间。

 

8.Even simpler way of using indexOf as a contains clause(更简单的使用indexOf实现contains功能)

JavaScript并未提供contains香港管家婆论坛一句中特方法。检测子字符串是否存在于字符串或者变量是否存在于数组你可能会这样做。

1  var someText = 'javascript rules';

2  if (someText.indexOf('javascript') !== -1) {

3  }

香港管家婆论坛一句中特5  // or

6  if (someText.indexOf('javascript') >= 0) {

7  }

建议的方法:

1  var someText = 'text';

2  !!~someText.indexOf('tex'); // someTextcontains "tex" - true

3  !~someText.indexOf('tex'); // someText NOTcontains "tex" - false

香港管家婆论坛一句中特4  ~someText.indexOf('asd'); // someText doesn'tcontain "asd" - false

5  ~someText.indexOf('ext'); // someTextcontains "ext" - true

 

9.Rounding the fast way(更快的取整)

一个位操作符 ~ 将输入的32位的数字(input)转换为 -(input+1). 两个位操作符将输入(input)转变为 -(-(input + 1)+1) 是一个使结果趋向于0的取整好工具对于数字负数就像使用Math.ceil()方法而正数就像使用Math.floor()方法转换失败时,返回0,这在Math.floor()方法转换失败返回NaN时或许会派上用场。

 1  // 单个 ~

香港管家婆论坛一句中特 2 console.log(~1337)    // -1338

香港管家婆论坛一句中特 3 

香港管家婆论坛一句中特 4  // 数字输入

 5 console.log(~~47.11)  // -> 47

 6 console.log(~~-12.88) // -> -12

 7 console.log(~~1.9999) // -> 1

 8 console.log(~~3)      // -> 3

 9 

10  // 转换失败

11  console.log(~~[]) // -> 0

香港管家婆论坛一句中特12  console.log(~~NaN)  // -> 0

香港管家婆论坛一句中特13  console.log(~~null) // -> 0

14 

15  // 大于32位整数时转换失败

香港管家婆论坛一句中特16  console.log(~~(2147483647 + 1) ===(2147483647 + 1)) // -> 0

 

10.Safe string concatenation

 1 //method 1

香港管家婆论坛一句中特 2  varone = 1;

香港管家婆论坛一句中特 3  vartwo = 2;

 4  varthree = '3';

香港管家婆论坛一句中特 5  varresult = ''.concat(one, two, three); //"123"

香港管家婆论坛一句中特 6 //method 2

 7  varone = 1;

 8  vartwo = 2;

香港管家婆论坛一句中特 9  varthree = '3';

10  var result = one + two + three;//"33" instead of "123"

香港管家婆论坛一句中特拼接时使用加号,可能会导致意想不到的错误结果。

 

香港管家婆论坛一句中特11.Return objects to enable chaining of functions(返回对象,使方法可以链式调用)

香港管家婆论坛一句中特 1 function Person(name) {

 2   this.name = name;

香港管家婆论坛一句中特 3 

 4   this.sayName = function() {

香港管家婆论坛一句中特 5     console.log("Hello my name is: ", this.name);

香港管家婆论坛一句中特 6     return this;

香港管家婆论坛一句中特 7    };

香港管家婆论坛一句中特 8 

 9    this.changeName = function(name) {

10      this.name = name;

11      return this;

12    };

13  }

14 

香港管家婆论坛一句中特15  var person = new Person("John");

16 person.sayName().changeName("Timmy").sayName();

 在面向对象的Javascript香港管家婆论坛一句中特中为对象建立一个方法时,返回当前对象可以让你在一条链上调用方法。

 

12.Converting to number fast way(转换为数字的更快方法)

将字符串转换为数字是极为常见的。最简单和快速的方法是使用+(加号来实现。

香港管家婆论坛一句中特1  var one = '1';

2  var numberOne = +one; // Number 1

3  var one = '1';

香港管家婆论坛一句中特4  var negativeNumberOne = -one; // Number -1

  

13.Use === instead of ==(使用 === 而不是 ==

== (或者 !=) 操作在需要的情况下自动进行了类型转换。=== (或 香港管家婆论坛一句中特!==)操作不会执行任何转换。===在比较值和类型时,可以说比==更快。

 1  [10]==  10      // 为 true

 2  [10]=== 10      // 为 false

 3 

 4  '10'==  10      // 为 true

 5  '10'=== 10      // 为 false

 6 

 7  []  ==  0      // 为 true

 8  []  === 0       // 为 false

 9 

10   '' ==  false   // 为 true  true == "a" false

11   '' === false   // 为 false

 

香港管家婆论坛一句中特14.Filtering and Sorting a List of Strings(过滤并排序字符串列表)

香港管家婆论坛一句中特你可能有一个很多名字组成的列表,需要过滤掉重复的名字并按字母表将其排序。

香港管家婆论坛一句中特1  var keywords = ['do', 'if', 'in', 'for','new', 'try', 'var', 'case', 'else', 'enum', 'null', 'this', 'true', 'void','with', 'break', 'catch', 'class', 'const', 'false', 'super', 'throw', 'while','delete', 'export', 'import', 'return', 'switch', 'typeof', 'default','extends', 'finally', 'continue', 'debugger', 'function', 'do', 'if', 'in','for', 'int', 'new', 'try', 'var', 'byte', 'case', 'char', 'else', 'enum','goto', 'long', 'null', 'this', 'true', 'void', 'with', 'break', 'catch','class', 'const', 'false', 'final', 'float', 'short', 'super', 'throw','while', 'delete', 'double', 'export', 'import', 'native', 'public', 'return','static', 'switch', 'throws', 'typeof', 'boolean', 'default', 'extends','finally', 'package', 'private', 'abstract', 'continue', 'debugger','function', 'volatile', 'interface', 'protected', 'transient', 'implements','instanceof', 'synchronized', 'do', 'if', 'in', 'for', 'let', 'new', 'try','var', 'case', 'else', 'enum', 'eval', 'null', 'this', 'true', 'void', 'with','break', 'catch', 'class', 'const', 'false', 'super', 'throw', 'while','yield', 'delete', 'export', 'import', 'public', 'return', 'static', 'switch','typeof', 'default', 'extends', 'finally', 'package', 'private', 'continue','debugger', 'function', 'arguments', 'interface', 'protected', 'implements','instanceof', 'do', 'if', 'in', 'for', 'let', 'new', 'try', 'var', 'case','else', 'enum', 'eval', 'null', 'this', 'true', 'void', 'with', 'await','break', 'catch', 'class', 'const', 'false', 'super', 'throw', 'while','yield', 'delete', 'export', 'import', 'public', 'return', 'static', 'switch','typeof', 'default', 'extends', 'finally', 'package', 'private', 'continue','debugger', 'function', 'arguments', 'interface', 'protected', 'implements','instanceof'];

2  var filteredAndSortedKeywords = keywords

3    .filter(function (keyword, index) {

香港管家婆论坛一句中特4        return keywords.lastIndexOf(keyword)=== index;

5      })

香港管家婆论坛一句中特6    .sort(function (a, b) {

7        return a < b ? -1 : 1;

香港管家婆论坛一句中特8      });

 因为我们不想改变我们的原始列表,所以我们准备用高阶函数叫做filter,它将基于我们传递的回调方法返回一个新的过滤后的数组。回调方法将比较当前关键字在原始列表里的索引和新列表中的索引,仅当索引匹配时将当前关键字push到新数组。

最后我们准备使用sort方法排序过滤后的列表,sort只接受一个比较方法作为参数,并返回按字母表排序后的列表。

香港管家婆论坛一句中特1  const filteredAndSortedKeywords = keywords

2   .filter((keyword, index) =>keywords.lastIndexOf(keyword) === index)

香港管家婆论坛一句中特3    .sort((a, b) => a < b ? -1 : 1);

4  console.log(filteredAndSortedKeywords);

5  // ['abstract', 'arguments', 'await','boolean', 'break', 'byte', 'case', 'catch', 'char', 'class', 'const','continue', 'debugger', 'default', 'delete', 'do', 'double', 'else', 'enum','eval', 'export', 'extends', 'false', 'final', 'finally', 'float', 'for','function', 'goto', 'if', 'implements', 'import', 'in', 'instanceof', 'int','interface', 'let', 'long', 'native', 'new', 'null', 'package', 'private','protected', 'public', 'return', 'short', 'static', 'super', 'switch','synchronized', 'this', 'throw', 'throws', 'transient', 'true', 'try','typeof', 'var', 'void', 'volatile', 'while', 'with', 'yield']

 

15.Short circuit evaluation in JS(JS中的短路求值)

短路求值是说只有当第一个运算数的值无法确定逻辑运算的结果时,才对第二个运算数进行求值:当AND(&&)的第一个运算数的值为false时,其结果必定为false;当OR(||)的第一个运算数为true时,最后结果必定为true

香港管家婆论坛一句中特逻辑或可以用来给参数设置默认值。

1  function theSameOldFoo(name){

香港管家婆论坛一句中特2      name = name || 'Bar' ;

3      console.log("My best friend's nameis " + name);

4  }

5  theSameOldFoo();  // My best friend's name is Bar

6  theSameOldFoo('Bhaskar');  // My best friend's name is Bhaskar

 逻辑与可以用来避免调用undefined参数的属性时报错

香港管家婆论坛一句中特 1  vardog = {

香港管家婆论坛一句中特 2   bark: function(){

 3      console.log('Woof Woof');

香港管家婆论坛一句中特 4     }

 5  };

 6  // 调用 dog.bark();

 7 dog.bark(); // Woof Woof.

 8  // 但是当dog未定义时,dog.bark() 将会抛出"Cannot read property 'bark' ofundefined." 错误

 9  // 防止这种情况,我们可以使用 &&.

10  dog&&dog.bark();   // This will only call dog.bark(), if dog isdefined.

 

16.!!(!!)

 1 !!"" // false

香港管家婆论坛一句中特 2  !!0// false

香港管家婆论坛一句中特 3 !!null // false

 4 !!undefined // false

香港管家婆论坛一句中特 5  !!NaN// false

 6 

 7 !!"hello" // true

 8  !!1// true

香港管家婆论坛一句中特 9  !!{}// true

10  !![] // true

 

17.Avoid modifying or passing arguments into other functions — it kills optimization(避免修改和传递arguments给其他方法 — 影响优化)

JavaScript的方法里,arguments参数可以让你访问传递给该方法的所有参数。arguments是一个类数组对象arguments可是使用数组标记访问,而且它有length参数,但是它没有filter, map, forEach这样内建到数组内的方法。因此,如下代码是一个非常常见的将arguments转换为数组的办法:

1 var args =Array.prototype.slice.call(arguments);

2 //或者

香港管家婆论坛一句中特3 var args =[].slice.call(arguments);

不幸的是,传递arguments给任何参数,将导致ChromeNode中使用的V8引擎跳过对其的优化,这也将使性能相当慢。所以,正确的做法只有:

1 var args = newArray(arguments.length);

香港管家婆论坛一句中特2     for(var i = 0; i < args.length; ++i) {

香港管家婆论坛一句中特3         args[i] = arguments[i];

4     }

 

香港管家婆论坛一句中特18.Implementing asynchronous loop(实现异步循环)

试着写一个异步方法,每秒打印一次循环的索引值。

香港管家婆论坛一句中特1 for (var i=0;i<5; i++) {

2     setTimeout(function(){

香港管家婆论坛一句中特3         console.log(i);

4     }, 1000);

5 } 

但输出的结果会是5,5,5,5,5。这明显是有问题的,原因是:每次时间结束(timeout)都指向原始的i,而并非它的拷贝。所以,for循环使i增长到5,之后timeout运行并调用了当前i的值(也就是5)。

解决的办法是:有几个不同的方式可以拷贝i。最普通且常用方法是通过声明函数来建立一个闭包,并将i传给此函数。我们这里使用了自调用函数。

1 for (var i=0;i<5; i++) {

香港管家婆论坛一句中特2     (function(num){

香港管家婆论坛一句中特3         setTimeout(function(){

香港管家婆论坛一句中特4             console.log(num);

香港管家婆论坛一句中特5         }, 1000);

香港管家婆论坛一句中特6     })(i); 

7 } 

 

19.Flattening multidimensional Arrays in JavaScript(Javascript多维数组扁平化)

测试地址:

 

 

20.Using JSON.Stringify(使用JSON.Stringify

加入有一个对象具有参数"prop1", "prop2", "prop3"。 我们可以通过传递 附加参数 给 JSON.stringify 来选择性将参数生成字符串,像这样:

香港管家婆论坛一句中特 1 var obj = {

香港管家婆论坛一句中特 2    'prop1': 'value1',

香港管家婆论坛一句中特 3    'prop2': 'value2',

香港管家婆论坛一句中特 4    'prop3': 'value3'

 5 };

 6

 7 var selectedProperties = ['prop1', 'prop2'];

 8

 9 var str = JSON.stringify(obj,selectedProperties);

10

11 // str

12 //{"prop1":"value1","prop2":"value2

企业官网建设长沙优化网站,就找长沙简界科技!

本文网址:http://www.xdtbus.com/news/451.html

关键词:企业官网建设,长沙网站优化排名,长沙优化网站

最近浏览:

  • 在线客服
  • 联系电话
    18874148081
  • 在线留言
  • 手机网站
  • 在线咨询
    河南快3投注山东11选5投注香港马会内部资料香港最准一肖中特公开选料免费平特一肖资料大全香港复试平特六连肖管家婆精选心水资料网云南快乐十分投注香港复试平特六连肖六合一句爆特码重庆快乐十分投注网址甘肃11选5投注贵州11选5投注