javascript篇,javascript的

Web前端新手应该知道的JavaScript开发技巧有哪些?

今天小编要跟大家分享的文章是关于Web前端新手应该知道的JavaScript开发技巧有哪些?熟悉Web前端的小伙伴都知道，Javascript

的很多扩展的特性是的它变得更加的犀利，同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站。

尽管很多的开发人员都乐于颂扬javascript，但是仍旧有人看到它的阴暗面。

使用很多javascript代码的Web页面会加载很慢，过多的使用javascript使得网页丑陋和拖沓。很快如何有效地使用

javascript成为一个非常火热的话题。

今天小编就为Web前端新手准备了这篇JavaScript开发技巧，希望能够对你有所帮助，下面我们一起来看一看吧!

1、尽可能的保持代码简洁

可能大家都听到过了N遍这个代码简洁问题了。作为一个开发人员你可能在你的代码开发过程中使用了很多次，但千万不要在js开发中忘记这点。

§尽量在开发模式中添加注释和空格，这样保持代码的可读性

§在发布到产品环境前请将空格和注释都删除，并且尽量缩写变量和方法名

§使用第三方工具帮助你实现压缩javascript。

2、思考后再修改prototypes

添加新的属性到对象prototype中是导致脚本出错的常见原因。

yourObject.prototype.anotherFunction='Hello';

yourObject.prototype.anotherMethod=function(){...}

在上面代码中，所有的变量都会被影响，因为他们都继承于yourObject。这样的使用会导致意想不到的行为。所以建议在使用完后删除类似的修改。

yourObject.prototype.anotherFunction='Hello';

yourObject.prototype.anotherMethod=function(){};

test.anotherMethod();

deleteyourObject.prototype.anotherFunction='Hello';

deleteyourObject.prototype.anotherMethod=function(){};

3、DebugJavascript代码

即使最好的开发人员都会犯错。为了最大化的减少类似错误，请在你的debugger中运行你的代码，确认你没有遇到任何细微的错误。

4、避免Eval

你的JS在没有eval方法的时候也可以很好的工作。eval允许访问javascript编译器。如果一个字符串作为参数传递到

eval，那么它的结果可以被执行。

这会很大的降低代码的性能。尽量避免在产品环境中使用eval。

5、最小化DOM访问

DOM是最复杂的API，会使得代码执行过程变慢。有时候Web页面可能没有加载或者加载不完整。最好避免DOM。

6、在使用javascript类库之前先学习javascript

互联网充斥着很多的javascript类库，很多程序员都往往使用js类库而不理解负面影响。强烈建议你在使用第三方类库之前学习基本的JS

代码，否则，你就准备着倒霉吧。

7、不要用“SetTimeOut”和“Setinterval”方法来作为“Eval”的备选

setTimeOut("document.getID('value')",3000);

在以上代码中document.getID(‘value’)在setTimeOut方法中被作为字符串来处理。这类似于eval

方法，在每个代码执行中来执行一个字符串，因此会降低性能，因此，建议在这些方法中传递一个方法。

setTimeOut(yourFunction,3000);

8、[]比newArray();更好

一个常犯的错误在于使用当需要数组的时候使用一个对象或者该使用对象的时候使用一个数组。但是使用原则很简单：

“当属性名称是小的连续整数，你应该使用数组。否则，使用一个对象”_DouglasCrockford,JavaScript:Good

Parts的作者.

建议：

vara=['1A','2B'];

避免：

vara=newArray();

a[0]="1A";

a[1]="2B";

9、尽量不要多次使用var

在初始每一个变量的时候，程序员都习惯使用var关键字。相反，建议你使用逗号来避免多余的关键字，并且减少代码体积。如下：

varvariableOne='string1',

variableTwo='string2',

variableThree='string3';

10、不要忽略分号“;”

这往往是大家花费数个小时进行debug的原因之一。

我很确信你肯定也在其它的文章中阅读过以上相关的内容，但是大家可能往往都忽略了很多基本的规则。你是不是也曾经忽略过分号。是不是也遇到过eval

关键字问题导致性能问题?

以上就是小编今天为大家分享的关于Web前端新手应该知道的JavaScript

开发技巧有哪些?的文章，希望本篇文章能够对刚刚接触Web前端行业的新手们有所帮助。想要了解更多Web前端知识记得关注北大青鸟Web前端培训官网!

*声明：内容与图片均来源于网络(部分内容有修改)，版权归原作者所有，如来源信息有误或侵犯权益，请联系我们删除或授权事宜。

相关问答

Q1: Web前端开发知识点之JavaScript对象

今天小编要跟大家分享的文章是关于Web前端开发知识点之JavaScript对象。真正从事web前端工作的小伙伴们来小编一起看一看吧，希望本篇文章能够对大家有所帮助。

1、Function对象

①对象的创建

Function对象的创建共有3种方法。

第一种方法格式如下，不符合我们写代码的习惯，不建议使用

varfun=newFunction(形式参数列表,方法体);

第二种方法格式如下：

function方法名称(形式参数列表){方法体}

第三种方法格式如下：

var方法名称=function(形式参数列表){方法体}

一般我们采用后两种方法进行Function对象的创建。

②对象的属性

·length属性代表形参的个数

③对象的特点

·方法定义时，形式参数的类型不用写，返回值类型也不写。

·方法是一个对象，如果定义名称相同的方法，会覆盖。

·在JavaScript中、方法的调用只与方法的名称有关，和参数列表无关

·在方法声明中有一个隐藏的内置对象(数组)arguments封装所有的实际参数

④对象的调用

方法名称(实际参数列表);

2、Array对象

①对象的创建

Array数组对象也有三种创建方式，三种格式如下所示：

vararr=newArray(元素列表);vararr=newArray(默认长度);vararr=[元素列表];

②对象的方法

Array对象有很多方法，下面介绍两个常用的方法：

join(参数)：将数组中的元秦按照指定的分隔符拼接为字符串

push()：向数组的末尾添加一个或更多元素，并返回新的长度。

③对象的属性

·length属性代表数组的长度

④对象的特点

在JavaScript中，数组元素的类型是可变的。

在JavaScript中，数组的长度是可变的。

3、Date对象

①对象的创建

vardata=newDate();

②对象的方法

Array对象有很多方法，下面介绍两个常用的方法：

toLocalestring()：返回当前date对象对应的时间本地字符串格式

getTime()：获取毫秒值。返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差

4、Math对象

①对象的创建

Math数学对象不用创建，可以直接使用，使用方式如下：

Math.方法名();

②对象的方法

Array对象有很多方法，下面介绍四个常用的方法：

random()：返回0~1之间的随机数。含0不含1。

ceil(x)：对数进行上取整。

floor(x)：对数进行下取整。

round(x)：对数进行四舍五入。

5、RegExp对象

在学习RegExp正则对象之前，我们首先来复习一下什么是正则表达式?正则表达式就是定义字符串的组成规则。

单个字符用[]表示。如：

[a]表示字符a

[a-z]表示a-z中的任一字符

还有一些特殊符号代表特殊含义的单个字符。例如：

\d表示单个数字字符=[0-9]

\w表示单个单词字符=[a-zA-Z0-9_]

量词符号用?、*、+、{m,n}表示。其中

·?：表示出现0次或1次

·*：表示出现0次或多次

·+：出现1次或多次

·{m,n}：表示m

§m如果缺省，即{,n}：最多n次

§n如果缺省，即{m,}：最少m次

①对象的创建

RegExp正则对象的创建有两种方法，我们一般采用第二种。

varreg=newRegExp("正则表达式");varreg=/正则表达式/;

②对象的方法

RegExp对象的常用方法只有一种：

test(参数)：验证指定的字符串是否符合正则定义的规范

6、Global对象

①对象的创建

顾名思义，Global对象就是全局对象，这个Global中封装的方法不需要对象就可以直接调用。格式如下：

方法名();

②对象的方法

全局对象的方法有很多，下面简单介绍几种：

encodeURI()：url编码

decodeURI()：url解码

parseInt()：将字符串转为数字。逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number

isNaN()：判断一个值是否是NaN。NaN六亲不认，连自己都不认。NaN参与的==比较全部为false。

eval()：将JavaScript转化为字符串，并把它作为脚本代码来执行。

以上就是小编今天为大家分享的关于Web前端开发知识点之JavaScript对象的文章，希望本篇文章能够对正在从事web前端学习和工作的小伙伴们有所帮助，想要了解更多web前端知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的web前端工程师。

文章来源：原创凯哥的故事

Q2: 如何正确学习JavaScript

JavaScript作为网站前端的核心知识是非常重要的，但是如何学习JavaScript是很多初学者面对的一个难题，下面我说一下个人对于如何学习JavaScript的一点心得，希望能帮到大家。

1、首先学习基础，尤其是JavaScript与其他语言不同的基础知识。

学习每个编程语言可能都要从基础的变量函数结构等学起，JavaScript相对于其他的编程语言在基础上有一些比较有特点的地方，这些东西是尤其需要我们注意的，比如说自调函数、比如说变量值为空不是null而是undefined的等，这些东西都是和主流的编程的语言如c++、java等是有区别的，所以想要学好JavaScript，这些基础的知识一定要把握好学习好才行。

2、关于学习JavaScript的进阶

JavaScript进阶知识更是有很多难理解的东西和不同于其他语言的东西，这些东西都是深入学习JavaScript的难点，简单的说一下JavaScript是基于对象的浏览器脚本语言，但是为了使JavaScript也能够支持面向对象编程，人们就使用了很多的方法来模拟面向对象的的特点，这些就变成了JavaScript的一些难点，比如说JavaScript的继承要借助原型、比如JavaScript的类需要使用构造函数来构造一个对象等，这些东西都是和其他支持面向对象的语言是不同的，所以就导致了一些难点。关于进阶学习JavaScript，还有JavaScript一些深入的知识需要去理解比如原型链和闭包、比如收函数的作用域执行流程和上下文，这些东西都是JavaScript比较深入的知识、

最后说明，JavaScript作为前端的核心语言绝对没有没有想象的那么简单，要想学好JavaScript除了以上提到的知识和注意点，还需要的就是多动手和实践，我们都知道网页上的所有特效都是借助JavaScript来实现，那么我们就需要在学习JavaScript的过程中多使用原生的JavaScript代码实现一些特效，当然学习使用jQuery等JavaScript类库进行开发也十分的重要，但是这绝对不能是取代我们学习JavaScript的方法。

Q3: Web前端工程师要掌握的JavaScript代码片段(一)

今天小编要跟大家分享的文章是关于Web前端工程师要掌握的JavaScript代码片段(一)。正在从事web前端工作的小伙伴们来和小编一起看一看吧，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助。

1、Anagramsofstring(带有重复项)

使用递归。对于给定字符串中的每个字母，为字母创建字谜。使用map()将字母与每部分字谜组合，然后使用reduce()将所有字谜组合到一个数组中，最基本情况是字符串长度等于2或1。

constanagrams=str={

if(str.length[str];

returnstr.split('').reduce((acc,letter,i)=

acc.concat(anagrams(str.slice(0,i)+str.slice(i+1)).map(val=

letter+val)),[]);

};

//anagrams('abc')-['abc','acb','bac','bca','cab','cba']

2、数组平均数

使用reduce()将每个值添加到累加器，初始值为0，总和除以数组长度。

constaverage=arr=arr.reduce((acc,val)=acc+val,0)/

arr.length;

//average([1,2,3])-2

3、大写每个单词的首字母

使用replace()匹配每个单词的第一个字符，并使用toUpperCase()来将其大写。

constcapitalizeEveryWord=str=str.replace(/\b[a-z]/g,char=

char.toUpperCase());

//capitalizeEveryWord('helloworld!')-'HelloWorld!'

4、首字母大写

使用slice(0,1)和toUpperCase()大写第一个字母，slice(1)获取字符串的其余部分。省略lowerRest参数以保持字符串的其余部分不变，或将其设置为true以转换为小写。(注意：这和上一个示例不是同一件事情)

constcapitalize=(str,lowerRest=false)=

str.slice(0,1).toUpperCase()+(lowerRest?str.slice(1).toLowerCase():

str.slice(1));

//capitalize('myName',true)-'Myname'

5、检查回文

将字符串转换为toLowerCase()，并使用replace()从中删除非字母的字符。然后，将其转换为tolowerCase()，将('')拆分为单独字符，reverse()，join('')，与原始的非反转字符串进行比较，然后将其转换为tolowerCase()。

constpalindrome=str={

consts=str.toLowerCase().replace(/[\W_]/g,'');

returns===s.split('').reverse().join('');

}

//palindrome('tacocat')-true

6、计数数组中值的出现次数

每次遇到数组中的特定值时，使用reduce()来递增计数器。

constcountOccurrences=(arr,value)=arr.reduce((a,v)=v===

value?a+1:a+0,0);

//countOccurrences([1,1,2,1,2,3],1)-3

7、当前URL

使用window.location.href来获取当前URL。

constcurrentUrl=_=window.location.href;

//currentUrl()-''

8、Curry

使用递归。如果提供的参数(args)数量足够，则调用传递函数f，否则返回一个curried函数f。

constcurry=(fn,arity=fn.length,...args)=

arity

?fn(...args)

:curry.bind(null,fn,arity,...args);

//curry(Math.pow)(2)(10)-1024

//curry(Math.min,3)(10)(50)(2)-2

9、Deepflattenarray

使用递归，使用reduce()来获取所有不是数组的元素，flatten每个元素都是数组。

constdeepFlatten=arr=

arr.reduce((a,v)=a.concat(Array.isArray(v)?deepFlatten(v):v),

[]);

//deepFlatten([1,[2],[[3],4],5])-[1,2,3,4,5]

10、数组之间的区别

从b创建一个Set，然后在a上使用Array.filter()，只保留b中不包含的值。

constdifference=(a,b)={consts=newSet(b);returna.filter(x

=!s.has(x));};

//difference([1,2,3],[1,2])-[3]

11、两点之间的距离

使用Math.hypot()计算两点之间的欧几里德距离。

constdistance=(x0,y0,x1,y1)=Math.hypot(x1-x0,y1-y0);

//distance(1,1,2,3)-2.23606797749979

12、可以按数字整除

使用模运算符(%)来检查余数是否等于0。

constisDivisible=(dividend,divisor)=dividend%divisor===0;

//isDivisible(6,3)-true

13、转义正则表达式

使用replace()来转义特殊字符。

constescapeRegExp=str=str.replace(/[.*+?^${}()|[\]\\]/g,

'\\$');

//escapeRegExp('(test)')-\\(test\\)

14、偶数或奇数

使用Math.abs()将逻辑扩展为负数，使用模(%)运算符进行检查。如果数字是偶数，则返回true;如果数字是奇数，则返回false。

constisEven=num=num%2===0;

//isEven(3)-false

15、阶乘

使用递归。如果n小于或等于1，则返回1。否则返回n和n-1的阶乘的乘积。

constfactorial=n=n

//factorial(6)-720

16、斐波那契数组生成器

创建一个特定长度的空数组，初始化前两个值(0和1)。使用Array.reduce()向数组中添加值，后面的一个数等于前面两个数相加之和(前两个除外)。

constfibonacci=n=

Array(n).fill(0).reduce((acc,val,i)=acc.concat(i1?acc[i-

1]+acc[i-2]:i),[]);

//fibonacci(5)-[0,1,1,2,3]

17、过滤数组中的非唯一值

将Array.filter()用于仅包含唯一值的数组。

constfilterNonUnique=arr=arr.filter(i=arr.indexOf(i)===

arr.lastIndexOf(i));

//filterNonUnique([1,2,2,3,4,4,5])-[1,3,5]

18、Flatten数组

使用reduce()来获取数组中的所有元素，并使用concat()来使它们flatten。

constflatten=arr=arr.reduce((a,v)=a.concat(v),[]);

//flatten([1,[2],3,4])-[1,2,3,4]

19、从数组中获取最大值

使用Math.max()与spread运算符(...)结合得到数组中的最大值。

constarrayMax=arr=Math.max(...arr);

//arrayMax([10,1,5])-10

20、从数组中获取最小值

使用Math.min()与spread运算符(...)结合得到数组中的最小值。

constarrayMin=arr=Math.min(...arr);

//arrayMin([10,1,5])-1

21、获取滚动位置

如果已定义，请使用pageXOffset和pageYOffset，否则使用scrollLeft和scrollTop，可以省略el来使用window的默认值。

constgetScrollPos=(el=window)=

({x:(el.pageXOffset!==undefined)?el.pageXOffset:el.scrollLeft,

y:(el.pageYOffset!==undefined)?el.pageYOffset:el.scrollTop});

//getScrollPos()-{x:0,y:200}

22、最大公约数(GCD)

使用递归。基本情况是当y等于0时。在这种情况下，返回x。否则，返回y的GCD和x/y的其余部分。

constgcd=(x,y)=!y?x:gcd(y,x%y);

//gcd(8,36)-4

23、Headoflist

返回ARR[0]

consthead=arr=arr[0];

//head([1,2,3])-1

24、list初始化

返回arr.slice(0，-1)

constinitial=arr=arr.slice(0,-1);

//initial([1,2,3])-[1,2]

以上就是小编今天为大家分享的关于Web前端工程师要掌握的JavaScript代码片段(一)的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助。想要了解更多web前端相关知识和想要了解后面的代码片段的小伙伴，记得关注北大青鸟web培训官网。