javascript 学习笔记-优快云博客

本文深入探讨了JavaScript中变量、类型、对象、数组、字符串、函数、属性、条件表达式、代码块、注释等核心概念的使用与优化策略，并详细解释了变量声明、置顶解析、条件表达式的转换技巧以及如何编写更高效、易读的代码。

2019独角兽企业重金招聘Python工程师标准>>>

类型(Types)
对象 (Object)
数组 (Arrays)
字符串 (String)
函数 (Functions)
属性 (Properties)
变量 (Variables)
置顶解析（Hoisting）
条件表达式(Conditional Expressions & Equality)
代码块(Blocks)
注释 (Comments)
空格 (WhiteSpace)

类型

ECMScript变量可能包含2中不同数据类型的值：基本类型值和引用类型值

基本类型：基本类型变量是按值访问的，操作的是变量中实际的值。

string
number
boolean
null
undefined

var foo=1,
    bar=foo;
    bar=9;
    console.log(foo,bar); //=> 1,9

引用类型：引用类型的值是按引用访问的。

引用类型的值是保存在内存中的对象。javascript不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间，所以我们实际操作的是对象的引用，而不是实际的对象。

object
array
function

我们可以通过下面的实例代码来了解：

var foo=[1,2],
    bar=foo;
    bar[0]=9;
    console.log(bar[0],foo[0]); // =>9,9

对象(Objects)

1 推荐使用对象字面量的方式来创建对象

//不推荐的方式
 var obj=new Object();
 
//推荐的方式
 var obj={};

2 不要使用保留字作为对象的key

//不好的是使用方式
var man={
    class:'super',
    
};
// 好的使用方式
var man={
    klass:'super',
    defaults:{clack:'kent'},
    hidden:true
};

数组（Arrays）

(1) 使用字面量的方式创建数组

//不推荐的方式
 var items=new Array();
//推荐的方式
 var items=[];

(2) 如果你不知道数组的长度

var someStack=[];
//不推荐的方式
someStack[someStack.length]='abcdefg';
//推荐的方式
someStack.push('abcdefg');

(3) 当你要复制数组的时候，请使用slice

var len=items.length,
    copyItem=[],
    i;
    
// 不推荐的方式
 for(i=0;i<len;i++){
     copyItem[i]=items[i]l
 }
 
//推荐的方式
 copyItem=items.slice();

字符串

使用单引号‘ ’修饰字符串

//bad 
String str="Bob Para";
// good
String str='Bob Para';

函数

函数表达式

//匿名函数表达式
var anonymous=function(){
    return true;
}

//命名函数表达式
var named=function named(){
    return true;
}

//立即执行函数表达式
(function(){
    console.log('hello world');
})();

千万不要再block代码块（类似 if try while 等等）里面定义函数，但是你可以在block代码块里定义函数表达式。

// bad 不推荐的方式
if(currentUser){
    function(){
        console.log('bad');
    }
}
// good 推荐的方式
if(currentUser){
    var test=function test(){
        console.log('good');
    }
}

不要给函数参数命名为arguments，这样就会覆盖函数本身自带的arguments关键字

//bad 不要这么定义函数
function demo(arguments,name){
    ...
}

属性

使用逗号，访问属性

var luck={
    jedi:true,
    age:28
}
//bad 
var isJedi=luck['jedi'];
// good 
var isJedi=luck.jedi;

变量

坚持一直使用var来声明变量

坚持使用单var 来声明多个变量

//bad 
var items=getItems();
var flag=true;
var ball='z';

//good
var items=getItems(),
    flag=true,
    ball='z';

当声明多个变量的时候，把没有赋值的变量放在最后

//bad 
var i,len,
    items=getItems(),
    flag=true;
//good 
var items=getItems(),
    flag=true,
    i,len;

变量声明在最顶部，这可以帮我们避免变量hosting的问题

//bad 
function(){
    test();
    console.log("logger.....");
    var name=getName();
    if(name==='test'){
        return false;
    }
    return name;
}
//good
function(){
    var name=getName();
    test();
    console.log("logger....");
    if(name==='test'){
        return false;    
    }
    return name;
}

置顶解析

现在我们就来看看一些变量置顶解析的问题

function example(){
    console.log(temp);  //
}

function example(){
    console.log(temp);
    var temp=true; //  undefined
}
其实上面的例子，实际代码是这样的，这样就能理解为什么是undefined了。
这里也还需要注意一下，变量声明可以置顶，但是赋值不会置顶。
把代码翻译一下其实就是这样的：
function example(){
    var temp;
    console.log(temp);
    temp=true;
}
这个例子就是我们要说的hosting：变量置顶解析，函数声明也存在置顶解析，但是函数表达式不能置顶解析，我们看下面的例子。
function example(){
    test();   // test
    function test(){
        console.log('test');
    }
}
function example(){
    test(); // 
    var test=function test(){
        console.log('test');
    }
}

条件表达式

使用=== 和！== 替换 == 和！=

其他类型的值转boolean（Boolean（ojb））类型规则：

1、Boolean(obj) ==>true

2、Boolean（undefined) ==>false

3、Boolean(null) ==>false

4 Boolean(true)==> true Boolean(false)==>false

5 字符串除‘’为false外，其余均为true ：Boolean("str")==>true Boolean('')==>false

6 number类型的除 +0 -0 NaN外，其余均为true

那我们就来看看怎么在代码中活用上面的转换吧

//bad 
if(name!==''){
    ....
}

//good  我以前就是上面那种写法，看来以后我就可以改用这种写法了
if(name){
    ..
}
//bad 
if(

代码块

多行代码块请使用大括号{ }

//bad
if(test) 
    return false;
    
//good 
if(test)return false;

//good
if(test){
    return false;
}
//bad 
function() { return false;}

function (){
    return false;
}