网络科技

    今日:1068| 主题:245095
收藏本版
互联网、科技极客的综合动态。

[其他] 温故知新之JS基础

[复制链接]
沧桑 发表于 2016-10-5 04:43:11
107 0

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
数据类型

  
       
  •       NAN
         
    1. NaN === NaN; // false
    复制代码
         唯一能判断NaN的方法是通过isNaN()函数:
         
    1. isNaN(NaN); // true
    复制代码
       
  •       浮点数的相等比较:
         
    1. 1 / 3 === (1 - 2 / 3); // false
    复制代码
         这不是JavaScript的设计缺陷。浮点数在运算过程中会产生误差,因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等,只能计算它们之差的绝对值,看是否小于某个阈值:      
         
    1. Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
    复制代码
       
  •       避免使用        new Array(1, 2, 3); // 创建了数组[1, 2, 3]方式      
      
  字符串

  
       
  •         需要特别注意的是,字符串是不可变的        
            如果对字符串的某个索引赋值,不会有任何错误,但是,也没有任何效果:
               
    1. var s = 'Test';
    2. s[0] = 'X';
    3. alert(s); // s仍然为'Test'
    复制代码
       
  •               JavaScript为字符串提供了一些常用方法,注意,调用这些方法本身不会改变原有字符串的内容,而是返回一个新字符串      
      
  数组

  
       
  •       大多数其他编程语言不允许直接改变数组的大小,越界访问索引会报错。然而,        JavaScript的Array却不会有任何错误。在编写代码时,不建议直接修改Array的大小,访问索引时要确保索引不会越界。      
       
  •         对原数组进行操作的方法和返回新数组的方法
            原数组:
              
    •           pop/push,unshift/shift
              
    •           sort
              
    •           reverse
              
    •           splice
            
          新数组:
          
              
    •           slice
              
    •           concat
            
                  join返回的是新的字符串      
            
  •       扩展:数组扁平化的几种方法
         
    1. var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
    复制代码
              
    •           使用concat()和apply()
               
      1. var myNewArray = [].concat.apply([], myArray);
      2. // [1, 2, 3, 4, 5, 6, 7, 8, 9]
      复制代码
            
    •           使用reduce()
               
      1. var myNewArray = myArray.reduce(function(prev, curr) {
      2.   return prev.concat(curr);
      3. });
      4. // [1, 2, 3, 4, 5, 6, 7, 8, 9]
      复制代码
                           MSDN reduce 方法         
              
    •           使用 ES6 的展开运算符
               
      1. var myNewArray4 = [].concat(...myArray);
      2. console.log(myNewArray4);
      3. // [1, 2, 3, 4, 5, 6, 7, 8, 9]
      复制代码
                           MDN 展开运算符         
              
    •           最后这个方法返回的是字符串
               
      1. myArray.join(',')
      2. //"1,2,3,4,5,6,7,8,9"
      复制代码
           
            
  •       请注意,for ... in对Array的循环得到的是String而不是Number  
  对象

  
       
  •       注意,        最后一个键值对不需要在末尾加,,如果加了,有的浏览器(如低版本的IE)将报错。      
       
  •       访问属性是通过.操作符完成的,但这要求属性名必须是一个有效的变量名
         
    1. isNaN(NaN); // true0
    复制代码
         xiaohong的属性名middle-school不是一个有效的变量,就需要用''括起来。访问这个属性也无法使用.操作符,必须用['xxx']来访问:
         
    1. isNaN(NaN); // true1
    复制代码
       
  •       访问不存在的属性不报错,而是返回undefined
      
  函数

  
       
  •       小心你的return语句
          如果把return语句拆成两行:
         
    1. isNaN(NaN); // true2
    复制代码
         要小心了,由于JavaScript引擎在行末自动添加分号的机制,上面的代码实际上变成了:
         
    1. isNaN(NaN); // true3
    复制代码
         所以正确的多行写法是:
         
    1. isNaN(NaN); // true4
    复制代码
       
  •         变量提升
            由于JavaScript的这一怪异的“特性”,我们在函数内部定义变量时,请严格遵守“在函数内部首先申明所有变量”这一规则。
       
  •       闭包应用:封装私有变量
         
    1. isNaN(NaN); // true5
    复制代码
       
  •         箭头函数
            箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种只包含一个表达式,连{ ... }和return都省略掉了。还有一种可以包含多条语句,这时候就不能省略{ ... }和return
            返回对象:
               
    1. isNaN(NaN); // true6
    复制代码
         箭头函数完全修复了this的指向,箭头函数内部的this是词法作用域,由上下文确定   
  •       扩展:装饰器
          现在假定我们想统计一下代码一共调用了多少次parseInt(),可以把所有的调用都找出来,然后手动加上count += 1,不过这样做太傻了。最佳方案是用我们自己的函数替换掉默认的parseInt():
         
    1. isNaN(NaN); // true7
    复制代码

  对象

  
       
  •       需要遵守的规则
              
    •           不要使用            new Number()、new Boolean()、new String()创建包装对象;         
              
    •           用            parseInt()或            parseFloat()来转换任意类型到number;         
              
    •           用            String()来转换任意类型到string,或者直接调用某个对象的toString()方法;         
              
    •           通常不必把任意类型转换为boolean再判断,因为可以直接写if (myVar) {...};
              
    •                       typeof操作符可以判断出number、boolean、string、function和undefined;         
              
    •           判断Array要使用            Array.isArray(arr);         
              
    •           判断null请使用            myVar === null;         
              
    •           判断某个全局变量是否存在用            typeof window.myVar === 'undefined';         
              
    •           函数内部判断某个变量是否存在用            typeof myVar === 'undefined'。         
            
            
  •       获取时间戳
         
    1. isNaN(NaN); // true8
    复制代码
       
  •       JSON.stringify()
              
    •           格式化
               
      1. isNaN(NaN); // true9
      复制代码
            
    •             筛选数据
                  第二个参数用于控制如何筛选对象的键值,如果我们只想输出指定的属性,可以传入Array:
                        
      1. 1 / 3 === (1 - 2 / 3); // false0
      复制代码
              
      1. 1 / 3 === (1 - 2 / 3); // false1
      复制代码
               也可以传入函数进行处理
            
          
  浏览器

  
       
  •       获取UA
         
    1. 1 / 3 === (1 - 2 / 3); // false2
    复制代码
         请注意,navigator的信息可以很容易地被用户修改,所以JavaScript读取的值不一定是正确的   
  •                   cookie安全问题        
            由于JavaScript能读取到页面的Cookie,而用户的登录信息通常也存在Cookie中,这就造成了巨大的安全 隐患。为了解决这个问题,服务器在设置Cookie时可以使用httpOnly,设定了httpOnly的Cookie将不能被JavaScript读取。这个行为由浏览器实现,主流浏览器均支持httpOnly选项,IE从IE6 SP1开始支持。
            为了确保安全,服务器端在设置Cookie时,应该始终坚持使用httpOnly。
       
  •       按字符串顺序重新排序DOM节点
         
    1. 1 / 3 === (1 - 2 / 3); // false3
    复制代码
       
    1. 1 / 3 === (1 - 2 / 3); // false4
    复制代码
       
  •                   children属性时刻都在变化        
            当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新。
            例如,对于如下HTML结构:
               
    1. 1 / 3 === (1 - 2 / 3); // false5
    复制代码
         当我们用如下代码删除子节点时:
         
    1. 1 / 3 === (1 - 2 / 3); // false6
    复制代码
         浏览器报错:        parent.children[1]不是一个有效的节点。原因就在于,当        <p>First</p>节点被删除后,        parent.children的节点数量已经从2变为了1,索引[1]已经不存在了。      
       
  •         扩展练习
            把与Web开发技术不相关的节点删掉
               
    1. 1 / 3 === (1 - 2 / 3); // false7
    复制代码
       
    1. 1 / 3 === (1 - 2 / 3); // false8
    复制代码

  事件

  
       
  •       需要特别注意的是,下面这种写法是无效的:
         
    1. 1 / 3 === (1 - 2 / 3); // false9
    复制代码
           这是因为两个匿名函数虽然长得一模一样,但是它们是两个不同的函数对象,          off('click', function () {...})无法移除已绑定的第一个匿名函数。        
            为了实现移除效果,可以使用          off('click')一次性移除已绑定的click事件的所有处理函数。        
            同理,无参数调用          off()一次性移除已绑定的所有类型的事件处理函数。        
       
  •         事件触发条件
            一个需要注意的问题是,事件的触发总是由用户操作引发的,但是,如果用          JavaScript代码去改动,将不会触发change事件        
            有些时候,我们希望用代码触发change事件,可以直接调用无参数的change()方法来触发该事件
               
    1. Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true0
    复制代码
                 input.change()相当于        input.trigger('change'),它是        trigger()方法的简写。      
       
  •         浏览器安全限制
            在浏览器中,有些JavaScript代码只有在用户触发下才能执行,例如,window.open()函数:
               
    1. Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true1
    复制代码
         这些“敏感代码”只能由用户操作来触发:
         
    1. Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true2
    复制代码
         当用户点击button1时,click事件被触发,由于        popupTestWindow()在click事件处理函数内执行,这是浏览器允许的,而button2的click事件并未立刻执行        popupTestWindow(),延迟执行的        popupTestWindow()将被浏览器拦截。      
      
      Ajax  

  
       
  •                   open方法的第三个参数        
            千万不要把第三个参数指定为false,否则浏览器将停止响应,直到AJAX请求完成。        
       
  •       跨域方案
              
    •           flash插件,现在用的很少
              
    •           代理服务器,需要服务器端做额外开发
              
    •           jsonp,只支持get请求
              
    •           cors,通过http头的            Access-Control-Allow-Origin验证         
            
          
  编写jquery插件原则

  
       
  •       给        $.fn绑定函数,实现插件的代码逻辑;      
       
  •       插件函数最后要        return this;以支持链式调用;      
       
  •       插件函数要有默认值,绑定在        $.fn.<pluginName>.defaults上;      
       
  •       用户在调用时可传入设定值以便覆盖默认值。
      
  扩展jQuery对象的功能十分简单,但是我们要遵循jQuery的原则,编写的扩展方法能支持链式调用、具备默认值和过滤特定元素,使得扩展方法看上去和jQuery本身的方法没有什么区别。
  此篇跳过了js中的面向对象,高阶函数,正则,原型等难点,下篇等我好好研究一下继续

  参考资料

            Javascript多维数组扁平化   
    廖雪峰老师的js教程
友荐云推荐




上一篇:Data Mining in Python: A Guide
下一篇:Meet Google’s New Answer to the iPhone
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表