javascript 重头再来

隐式声明全局变量

先来看以下代码，输出为什么

const run = (a, b) => {
    obj={
        a:a,
        b:b
    }
    result = a + b
    let c = d = result
    let f = g = obj;
    return c
}

run(1, 2)

console.log(result)
console.log(d)
console.log(obj)
console.log(g)

result = 12
delete obj.a;

console.log(result)
console.log(d)
console.log(obj)
console.log(g)

// 输出
3
3
{ a: 1, b: 2 }
{ a: 1, b: 2 }
12
3
{ b: 2 }
{ b: 2 }

这里变量obj、result、d 、g做了隐式的全局变量声明。所以一定要注意在javascript中在使用变量时，先做声明。另外在javascript中尽量少用全局变量，因为你不知道你声明的变量是否会覆盖其他插件或他人代码的全局变量，这样会可能会导致严重的BUG。在commonJs中，提出了模块规范，使用module变量代表当前模块，通过exports表现对外接口，通过require加载模块内容，module可以很好的避免全局变量混乱的问题，每一个在module中声明的变量都是局部变量，每一个在modul中声明的方法未exports的都是私有方法。模块化开发更加方便协作开发。

扩展知识点

delete对全局变量的操作,判断以下速出内容

// 声明
var global_var=1;

// 未声明
global_novar=2;

// 隐身全局变量
(()=>{
  global_funvar=3;
})

// 试图删除
console.log(delete global_var);
console.log(delete global_novar);
console.log(delete global_funvar); 

// 测试该删除
console.log(typeof global_var); 
console.log(typeof global_novar); 
console.log(typeof global_funvar);

// 输出
false
true
true
"number"
"undefined"
"undefined"

for的理解

看以下代码，进行理解for循环的运行机制。

for (let arr = ['a', 'b', 'c'], i = arr.length; console.log(i), i--; console.log(arr[i]))
{
    console.log(i)
}

标准库对for语法的解释

initialization:一个表达式或变量声明。可省略条件
condition:是否执行下一次循环的条件。可省略条件
final-expression：每次循环最后执行的表达式，可省略条件

for ([initialization]; [condition]; [final-expression])
   statement

不常见的for循环使用

let arr = ['a', 'b', 'c'];
let index =  arr.length;
let newArr=[];

for (;index--;newArr.push(arr[index]));

console.log(newArr); // ['c','b','a']

// 变形
for (;index--;){
    newArr.push(arr[index])
}

// 变形
for (;;newArr.push(arr[index])){
    if(!index){
        break;
    }
    index--;
}

// 变形
for(;;){
    if(!index){
        break;
    }
    index--;
    newArr.push(arr[index]
}

// 相当于while
while(index){
    index--;
    newArr.push(arr[index]
}

花括号

看以下代码判断会输出什么。

function func() {
  return
  {
    name : "Batman"
  }
}
console.log(func())

出现这种情况是因为javascript的分号补全机制，javascript运行时会默认在一行的结束位置输出一个分号。所以在规范括号的格式时候，应保持左花括号在当前行，而非换行，保持一致统一。

理解括号、函数声明、函数表达式、立即执行函数

// 函数声明
function foo(){

}

// 函数表达式
const bar = function foo(){

}

// 括号运算符
const a=(1+2)*3

// 立即执行函数
(function foo(){
   console.log(1); 
}())

函数声明就是声明一个函数，很简单，函数表达式指的是一个函数在表达式中,那么这个函数是不会被声明的，表达式无法声明函数。大部分含有运算符号的都是表达式。

理解立即执行函数

立即执行函数最外层的括号是运算符，这样导致括号里的函数声明隐式转换为表达式，里面的括号也是运算符，当括号前有函数的话，运行函数，如果没有函数的话运行括号里的内容，如果括号里没有内容，会直接报错。

iliuyt / blog

分享 javascript 重头再来 #11