百度IFE之Task2学习笔记(JavaScript基础)

24 Apr 2015

Task1的时候我直接做任务,完成后才恶补参考资料,以至于看材料的时候偶尔就会萌生相识恨晚的感觉,也意识到原来写的代码有许多地方可以改进。这次任务二我决定同步进行,边写代码边整理笔记,少走弯路才是硬道理😄

Ready Go! >>

一、关于JavaScript的性能优化

JavaScript的阻塞特性
无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成。

<script>的位置
HTML 4 规范指出 <script> 标签可以放在 HTML 文档的<head><body>中,并允许出现多次。Web 开发人员一般习惯在 <head> 中加载外链的 JavaScript,接着用 <link> 标签用来加载外链的 CSS 文件或者其他页面信息。

由于脚本会阻塞页面其他资源的下载,因此推荐将所有<script>标签尽可能放到<body>标签的底部,以尽量减少对整个页面下载的影响。

🌺优化 JavaScript 的首要规则:将脚本放在底部

【减少 JavaScript 对性能的影响的几种方法:】
1.将所有的<script>标签放到页面底部,也就是闭合标签之前,确保在脚本执行前页面已经完成了渲染。
2.尽可能地合并脚本。页面中的<script>标签越少,加载也就越快,响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。
3.采用无阻塞下载 JavaScript 脚本的方法:

  • 使用<script>标签的 defer 属性(仅适用于 IE 和 Firefox 3.5 以上版本);
  • 使用动态创建的<script>元素来下载并执行代码;
  • 使用 XHR 对象下载 JavaScript 代码并注入页面中。

通过以上策略,可以在很大程度上提高那些需要使用大量 JavaScript 的 Web 网站和应用的实际性能。

参考:JavaScript 的性能优化:加载和执行

二、JavaScript数据类型及语言基础

知识整理 》》

【数据类型】

最新的 ECMAScript 标准定义了 7 种数据类型:
6 种 原始类型: Boolean
Null
Undefined
Number
String
Symbol (new in ECMAScript 6)
和 Object

【typeof 和 instanceof 的用法】

typeof 运算符
对变量或值调用 typeof 运算符将返回下列值之一:

  • undefined - 如果变量是 Undefined 类型的
  • boolean - 如果变量是 Boolean 类型的
  • number - 如果变量是 Number 类型的
  • string - 如果变量是 String 类型的
  • object - 如果变量是一种引用类型或 Null 类型的

具体做法,举个栗子🌰:

var a = "hello";
console.log(typeof a); //输出"string"

instanceof 运算符

在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 "object"。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。
instanceof 运算符与 typeof 运算符相似,用于识别正在处理的对象的类型。与 typeof 方法不同的是,instanceof 方法要求开发者明确地确认对象为某特定类型。

🌰看【边学边练】里面1、2的实现就依赖于instanceof 运算符。

【indexOf()用法】

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

语法

stringObject.indexOf(searchvalue,fromindex)

参数
searchvalue-- 必需。规定需检索的字符串值。
fromindex--可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。
indexOf() 方法对大小写敏感!
如果要检索的字符串值没有出现,则该方法返回 -1。

补充:类似的还有lastIndexOf() ,但它是从后向前搜索。
该方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。

【Trim】

为String对象增加一个trim方法 用正则表达式将字符串头尾空格用空字符串替代。

String.prototype.trim = function(){           
      return this.replace(/^\s+|\s+$/g,"");     
    }

边学边练 》》

🔥实践判断各种数据类型的方法

1.判断arr是否为一个数组,返回一个bool值。
代码如下:

function isArray(arr) {
    return arr instanceof Array;
}

var a = isArray([0, 1]);
console.log(a);
var b = isArray("hello");
console.log(b);
var c = isArray(5);
console.log(c);

显然,console.log出的结果依次是true false false 。

2.判断fn是否为一个函数,返回一个bool值。
代码如下:

function isFunction(fn) {
    return fn instanceof Function;
}
var a = function() {}; 
console.log(isFunction(a));
var b = "hello";
console.log(isFunction(b));

显然,console.log出的结果依次是true false。

🔥学习数组、字符串、数字等相关方法
获取一个对象里面第一层元素的数量,返回一个整数。

function getObjectLength(obj) {
    var n = 0;
    for ( i in obj) {
        n++;
    }   
    return n ; 
}

//使用示例
var obj = { 
    a: 1,
    b: 2,
    c: {
        c1: 3,
        c2: 4
    }   
};
console.log(getObjectLength(obj)); // 3

拓展一下:
如果传入数组则计算数组长度,传入对象则计算对象成员数,如果传入字符串则计算字符串的字数,其他类型返回false。

function count(o){
     var t = typeof o;
     if(t == 'string'){
         return o.length;
     }else if(t == 'object'){
         var n = 0;
         for(var i in o){
             n++;
         }
         return n;
    }
    return false;
}

后记

虽然理想中是边写代码边做笔记,但是到后面时间原因笔记就慢慢脱节了。 不过,Task2的五个小练习按时完成提交了 (^o^)。
Task2 任务要求 JavaScript基础
Demo 戳这里 > > Task2 by Lucky7ky

接下来的计划
1.Task2前面还有些JS练习有时间要补一下,完善笔记📒
2.向Task3进发 🏃