JavaScript基本入门02

JavaScript基础入门 02

条件语句

在js中提供了if和switch语句，只有满足了条件判断，才能执行相应的语句。

if 语句

if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是 JavaScript 的两个特殊值，true表示真，false表示伪。

if(布尔值)
  语句;

// 或者 是
if(布尔值) 语句;

上面是if结构的基本形式。需要注意的是，“布尔值”往往由一个条件表达式产生的，必须放在圆括号中，表示对表达式求值。如果表达式的求值结果为true，就执行紧跟在后面的语句；如果结果为false，则跳过紧跟在后面的语句。

var name = "zhangsan";
if (name === "zhangsan") console.log("Welcome zhangsan");

上面的代码会输出Welcome zhangsan，因为此时if的条件语句里面条件为真，这是就会返回true,if语句条件为true,就直接执行了后面的console.log()语句，但是如果我们尝试去更改这个变量，就会发现console.log()语句将不会执行。

需要注意的是上面这种写法if语句里面只能有一个语句，如果需要写多个语句，那么需要在if条件之后使用{}.

if (条件){
  //code ... ;
  //code ... ;
}

建议总是在if语句中使用大括号，因为这样方便插入语句。

注意，if后面的表达式之中，不要混淆赋值表达式（=）、严格相等运算符（===）和相等运算符（==）。尤其是赋值表达式不具有比较作用。

var x = 1;
var y = 2;
if (x = y) {
  console.log(x);
}
// "2"

在上面的代码中，原意是，当x等于y的时候，才执行相关语句。但是，不小心将严格相等运算符写成赋值表达式，结果变成了将y赋值给变量x，再判断变量x的值（等于2）的布尔值（结果为true）。

这种错误可以正常生成一个布尔值，因而不会报错。为了避免这种情况，有些开发者习惯将常量写在运算符的左边，这样的话，一旦不小心将相等运算符写成赋值运算符，就会报错，因为常量不能被赋值。

if (x = 2){
    
}// 不报错
if (2 = x){
    
} // 报错 

if .. else 语句

if代码块后面，还可以跟一个else代码块，表示不满足条件时，所要执行的代码。

if (m === 3) {
  // 满足条件时，执行的语句
} else {
  // 不满足条件时，执行的语句
}

上面代码判断变量m是否等于3，如果等于就执行if代码块，否则执行else代码块。

对同一个变量进行多次判断时，多个if...else语句可以连写在一起。

if (m === 0) {
  // ...
} else if (m === 1) {
  // ...
} else if (m === 2) {
  // ...
} else {
  // ...
}

switch 结构

多个if...else连在一起使用的时候，可以转为使用更方便的switch结构。

switch (fruit) {
  case "banana":
    // ...
    break;
  case "apple":
    // ...
    break;
  default:
    // ...
}

上面代码根据变量fruit的值，选择执行相应的case。如果所有case都不符合，则执行最后的default部分。需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。

需要注意的是，switch语句后面的表达式，与case语句后面的表示式比较运行结果时，采用的是严格相等运算符（===），而不是相等运算符（==），这意味着比较时不会发生类型转换。

循环语句

循环语句主要用于执行重复性的操作，在js当中循环具有多种形式。

while 循环

While语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。

while (条件)
  语句;

// 或者
while (条件) 语句;

while语句的循环条件是一个表达式，必须放在圆括号中。代码块部分，如果只有一条语句，可以省略大括号，否则就必须加上大括号。

while (条件) {
  语句;
}

下面是向指定的人打招呼的一个循环一句：

var name = "zhangsan";
var i = 0;
while(i<10){
    console.log('Hello,' + name);
    i = i + 1;
}

下面的例子是一个无限循环，因为循环条件总是为真。

while(true){
  console.log("hello,world!");
}

continue 关键字

continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环。

var i = 0;
while (i<100) {
    i = i + 1;
    if (i % 2 !==0) continue;
    console.log(i);
}

例如上面的例子当中，输出100以内的偶数，这是一种重复性较高的工作，那么就可以使用循环的形式。
上面的案例，让i的初始值为0,并且随着每一次的循环递增，在递增的过程中，判断除以2是否会存在余数，如果存在
则使用continue跳过。如果不存在则输出。

do...while语句

do..while循环与while循环类似，唯一的区别是先运行依次循环体，然后判断循环条件。

do
  语句
while (条件);

// 或者
do {
  语句
} while (条件);

需要注意的是，不管do ... while条件是否为真，都会至少执行一次循环。同时，while语句后面的分号不能省略.

var x = 3;
var i = 0;

do {
  console.log(i);
  i++;
} while(i < x);

一定要注意，虽然while语句和do...while语句很类似，但是while语句必须在条件为真的情况下才能执行，而do..while语句则
不论条件是否为真，都会执行至少一次，这是二者之前的区别。

for 循环

for循环语句是循环的另外一种形式，可以指定循环的起点、终点和结束条件。
它的语法格式如下：

for (初始化表达式; 条件; 递增表达式)
  语句

// 或者

for (初始化表达式; 条件; 递增表达式) {
  语句
}

for语句后面的括号里面，有三个表达式。

• 初始化表达式（initialize）：确定循环变量的初始值，只在循环开始时执行一次。
• 条件表达式（test）：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环。
• 递增表达式（increment）：每轮循环的最后一个操作，通常用来递增循环变量。
  例如:

var x = 3;
for (var i = 0; i < x; i++) {
  console.log(i);
}

下面是小练习：
1.入职薪水10K，每年涨幅5%，50年后工资多少？

demo:

//入职薪水10K，每年涨幅5%，50年后工资多少？

var base_m = 10000;

for (var i =1;i <= 50; i++){
  base_m = base_m * 0.05 + base_m;

}

console.log('五十年后的薪水为:' + base_m);

2.打印100以内的偶数

demo:

for(var i=0;i<100;i++){
  if (i % 2 ===0 ) {
    console.log(i);
  }
}

3.打印100以内所有偶数的和:

demo:

var num_val = 0;
for(var i=0;i<100;i++){
  if (i % 2 ===0 ) {
    num_val = num_val + i;
  }
}
console.log(num_val);

for循环的嵌套

一般情况下，循环与循环之间是可以完成嵌套的。 例如，我们可以通过两个for循环的嵌套打印出一个直角三角形。

demo:

for(var i =0;i<9;i++){ 
  console.log("one" + i);
  for(var j = 0; j < i -1 ;j++){
    console.log("two - "+j)
    document.writeln("*");
  }
  document.write("
");
}

想要合理的使用嵌套循环，需要清楚的知道整个循环的执行顺序。

在使用for循环的过程中，我们可以将for循环的条件省略，例如:

for(;;){
  // 此时将会是一个死循环
}

break 关键字

break关键字类似于continue关键字，可以让代码不按既有顺序执行。
而和continue不同的是，break会直接跳过整个循环流程，而continue只会跳过那一个步骤。

例如:

for(var i=0;i<10;i++){
  console.log('当前的i值是: ' + i);
  if (i === 5) break;
}

代码运行的结果就是当i 等于5时，整个循环都会被跳出。
而如果把上面的代码中break换成continue，那么当i等于5时，就会跳过当前这一步的循环开启一个新的循环。

死循环

循环主要根据我们设定的条件来判断是否要开启下一次循环过程。如果我们设定的循环的条件不合理的话，就会进入死循环
，代码进入死循环后，将一直陷入到死循环当中。

for(var i=0;i >=0 ;i++){
  console.log('hello,world');
}

debug 调试工具

在编写js代码的过程中，我们经常需要调试代码，虽然可以使用console.log()的形式来调试代码，但是当业务
逻辑过于复杂时，将变得复杂起来。
所以我们在开发debug的过程中，除了使用console.log()以外，还应该更加灵活的使用关键字debugger就可以让代码执行到
debugger的位置停止。
当然，我们可以选择使用不同浏览器当中内置的辅助工具帮助我们调试也是没有问题的。无论用什么工具，只要能够帮助我们准确的定位
错误就都可以。

1. 打印100–200之间所有能被3或者7整除的数

demo:

for(var i=100; i<= 200; i++){
  if(i % 3 === 0 || i % 7 === 0) {
    console.log(i);
  }
}

2. 计算100的阶乘

阶乘指从1乘以2乘以3乘以4一直乘到所要求的数。例如所要求的数是4，则阶乘式是1×2×3×4，得到的积是24，24就是4的阶乘。 例如所要求的数是6，则阶乘式是1×2×3×……×6，得到的积是720，720就是6的阶乘。
例如所要求的数是n，则阶乘式是1×2×3×……×n，设得到的积是x，x就是n的阶乘。任何大于1的自然数n阶乘表示方法： n!=1×2×3×……×n 　或 n!=n×(n-1)! 　 5！=54321=120。
demo:

// 计算100 的阶乘
var b_n = 1;

for(var i=1;i<=100;i++){
  b_n =  b_n * i;
}

console.log(b_n);

函数

函数是一段可以反复调用的代码块，在使用函数的过程中，也可以给函数传入一定的参数，让函数的使用更加的灵活。
同时，需要知道的是，不同的函数返回不同的值。

函数的声明方式

在js中有三种函数的声明方式：

(1)function 命令
function命令声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。

例如：

function fn1() {
  // code ...
}

上面的代码定义了一个函数fn1，我们想要使用这个函数，只需要通过fn1()这种形式即可执行其中相应的代码段。
这就叫做函数的声明(Function Declaration)。

(2) 函数表达式
除了用function命令声明函数，还可以采用变量赋值的写法。

var fn1 = function () {
  console.log("hello,world!");
}

这种写法将一个匿名函数赋值给变量。这时，这个匿名函数又称函数表达式（Function Expression），因为赋值语句的等号右侧只能放表达式。

采用函数表达式声明函数时，function命令后面不带有函数名。如果加上函数名，该函数名只在函数体内部有效，在函数体外部无效。

例如：

var fn1 = function test() {
  console.log(typeof test);
};

fn1(); // 通过这种调用方式可以顺利执行代码
test(); // 通过这种调用方式则会出现not defined 错误。

在实际开发的过程中，上面的这种在使用函数表达式写法并且同时给函数设置名字的做法其实很常见。
这么做的目的有两个：

• 可以非常方便的在函数体内部调用自身
• 方便除错，除错工具显示函数调用栈时，将显示函数名，而不再显示这里是一个匿名函数

var f = function f() {};

需要注意的是，函数的表达式需要在语句的结尾加上分号，表示语句结束。而函数的声明在结尾的大括号后面不用加分号。总的来说，这两种声明函数的方式，差别很细微，可以近似认为是等价的。

(3) Function 构造函数
第三种方式是通过Function构造函数。

例如：

var add = new Function (
    'x',
    'y',
    'return x + y'
    );

console.log(add);

上面这个通过构造函数创建的代码与下面的代码大体是相等的：

function add(x,y) {
    return x + y;
}

上面通过构造函数创建函数的代码中，Function构造函数接受三个参数，除了最后一个参数是add函数的“函数体”，其他参数都是add函数的参数。

你可以传递任意数量的参数给Function构造函数，只有最后一个参数会被当做函数体，如果只有一个参数，该参数就是函数体。

var foo = new Function(
  'return "hello world";'
);

// 等同于
function foo() {
  return 'hello world';
}

总的来说，这种声明函数的方式非常不直观，几乎无人使用。

函数重复声明

当在js代码中出现函数重复声明的情况(也就是函数名相同)，那么后面的函数会把前面的函数给覆盖掉。

function fn1() {
    console.log(1111);
}

function fn1() {
    console.log(2222);
}

fn1(); // 2222

函数提升

在js当中，函数存在函数提升的现象，类似于变量提升。在宿主环境执行代码的前一刻，会预先解析一次代码
，将代码中的变量声明和函数都提升到代码的最顶端。
也就意味着我可以在函数定义之前的任何位置调用后面才定义的函数。

fn1();

function fn1() {
    console.log("hello,world!");
}

圆括号运算符

在我们调用函数的时候，要使用圆括号运算符。圆括号之中，可以加入函数的参数。

例如：

function fn1() {
    console.log("hello,world!");
}
fn1();

在上面的案例中,函数名后面紧跟一对圆括号，就会调用这个函数。

我们也可以通过在调用函数的时候传递参数从而实现数据的传递。

function sayHello(name) {
    console.log("你好,"+name);
}
sayHello("张三");

一般情况下，我们将函数名后面的括号里面的参数称之为形参,而在调用函数时使用的圆括号里面传递的参数，我们称之为实参。

return 语句

在js函数体内的return语句，表示返回。
JavaScript 引擎遇到return语句，就直接返回return后面的那个表达式的值，后面即使还有语句，也不会得到执行。也就是说，return语句所带的那个表达式，就是函数的返回值。return语句不是必需的，如果没有的话，该函数就不返回任何值，或者说返回undefined。

例如:

function fn1(){
    var name = "zhangsan";
    var  age = 19;

    return name + "今年" + age + "岁!";
}

上面的案例中我们在函数体内设置了一个返回值。返回值会将表达式的结果从函数体内返回到函数体的外部，让我们可以在函数外部访问。
那么该如何访问函数的返回值呢?

例如：

function fn1(){
    var name = "zhangsan";
    var  age = 19;

    return name + "今年" + age + "岁!";
}

// 可以直接打印调用函数的语句。就可以在调用函数的同时还打印出返回值
console.log(fn1());
// 也可以直接将返回值赋值给一个变量
var return_value = fn1(); // 函数在执行的同时也将返回值赋值给了变量return_value
console.log(return_value);

如果函数内没有返回值，但是我们偏偏还来打印，那么结果将返回undefined。

function fn1(){
    var name = "zhangsan";
    var  age = 19;
}
console.log(fn1()); // undefined
var return_value = fn1();
console.log(return_value);//undefined

递归函数

当函数发生在函数体内自己调用自己这样的情况时，这个函数我们就可以称之为叫做递归函数。
例如下面的demo，就是一个递归函数:

// 递归函数
function fib(num) {
  if (num === 0) return 0;
  if (num === 1) return 1;
  return fib(num - 2) + fib(num - 1);
}

console.log(fib(6)); // 8

在上面的demo中，通过递归函数计算了一下斐波那契数列。
上面代码中，fib函数内部又调用了fib，计算得到斐波那契数列的第6个元素是8。

第一等公民的函数

在js中，函数被称为一等公民。
什么意思呢，就是说函数被看作是一种值，与其他的数据值(数值、字符串、布尔值等)地位相等。凡是可以使用值的地方都可以使用函数。
例如，我们可以将一个值赋值给一个变量，对应的，同样也可以将函数赋值给一个变量。

var fn = function () {};

同时，因为函数是一等公民，所以也可以将函数当做参数传递给其他函数，或者作为函数的返回结果。

function fn1() {}
function fn2(parm) {
  parm();
}

fn2(fn1);

到此，你需要明白，函数只是一个可以执行的值，此外并没有什么特殊的地方。

函数的属性和方法

1. name 属性
   函数的name属性返回函数的名字。

function fn1() {}
fn1.name; // "fn1"

如果是通过变量赋值定义的函数，那么name属性返回函数的名字。

var fn2 = function () {};
fn2.name; // fn2 

上面的案例中，函数是一个匿名函数，我们使用name属性就可以获得存储函数的变量的名称，但是一旦我们给匿名函数也定义了一个函数名，那么我们通过name属性查看到的将会是函数的名字而不是变量名。

var fn2 = function test () {};
fn2.name;  // test

需要注意的是，虽然打印出来的名称是test,但是真正的函数名还是fn2,test只是表达式的名字，并且test这个名字只能够在表达式内部使用。

我们可以通过name属性获取参数函数的的名字。

function fn1() {}

function fn2(parm){
    console.log(parm.name);
}
fn2(fn1); // fn1

在上面的代码中，在函数的内部通过name属性就获取了要传入的函数的名字。

1. length属性
   函数的length属性返回函数预期传入的参数个数，即函数定义之中的参数个数也就是形参的个数。

function fn1(a,b) {

}
console.log(fn1.length);//2 

上面代码定义了空函数f，它的length属性就是定义时的参数个数。不管调用时输入了多少个参数，length属性始终等于2。

length属性提供了一种机制，判断定义时和调用时参数的差异，以便实现面向对象编程的“方法重载”（overload）。

1. toString()
   函数的toString方法返回一个字符串，内容是函数的源码。

function fn1(a,b) {
    console.log("hello,world!");
}

console.log(fn1.toString());

通过toString方法可以将函数全部的源码返回。

而toString方法可以返回function(){native code}。

console.log(Math.abs.toString()); // function abs() { [native code] }

上面代码中，Math.abs是js提供的原生的函数，toString方法就会返回原生代码的提示。

需要注意的是，当我们使用toString方法时，函数内部的注释也会被返回

函数的作用域

1. 定义
   作用域(scope)指的是变量可以生存的范围或者说存在的范围。
   在老版本的ES5的规范里，JS只有两种作用域：一种是全局作用域，变量在整个程序中一直存在，在任何的地方都可以读取；另外一种
   是函数作用域，变量只在函数内部存在，在函数的外部没有办法访问到函数内部的变量。

   ES6当中新增加了块级作用域。

对于顶层函数来说，函数外部声明的变量就是全局变量(global variable)，可以在函数内部读取。

var a = 10;
function fn1() {
    console.log(a);
}
fn1(); // 10

上面的代码中，我们在函数的外部声明了一个变量，我们在函数的内部也读取到了全局变量的值。

在函数内部定义的变量，在函数的外部则无法读取，我们将其称为局部变量(local variable)。

function t_fn1() {
    var a = 10;
}

console.log(a); // ReferenceError: a is not defined

上面的案例中，我们尝试从函数的外部访问函数内部的局部变量(local variable)，发现js提示我们变量没有定义，访问失败。

函数内部定义的局部变量，会覆盖掉函数外部定义的同名的全局变量

例如：

var x = 10;

function fn1(){
    var x = 20;
    console.log(x);
}
fn1(); // 20

在上面的代码中，变量x同时在函数外部和函数内部定义。结果显而易见，函数内部的变量x覆盖了函数外部的变量x。
但是需要注意的是，这种覆盖的变量，生效范围只能是在函数内部，如果出了函数，则变量x恢复到本身的10。

例如：

var x = 10;
function fn1() {
    var x = 20;
    console.log(x);

}
fn1(); // 20

console.log(x); // 10

在上面的代码中，我们在函数内部访问变量,x的值输出为函数内部变量的值20,而当出了函数，我们再来访问，你会发现变量x的值仍然为10。
所以说函数内部变量的覆盖仅停留于函数内部，出了函数就会恢复过来。

注意，对于var命令来说，局部变量只能在函数内部声明，在其他区块中声明，一律都是全局变量。

if (true) {
  var x = 5;
}
console.log(x);  // 5

函数内部的变量提升

与全局作用域一样，函数作用域内部也会产生变量提升现象。var命令声明的变量，不管在什么位置，变量声明都会提升到函数体的头部。

例如：

function fn1() {
    var x = 2;
    if (x > 3){
      var tmp = x - 100;
      x = x + 1;
    }
}

上面的代码并没有什么实际的意义，但是这样一段代码在发生变量提升之后等同于下面的代码：

function fn1() {
  var x,tmp;
  x = 2;
  if(x > 3) {
    tmp = x - 100;
    x = x + 1;
  }
}

函数本身的作用域

上面我们说过，函数在js当中是一等公民。本质上来讲也就是一个能够运行的值。So,函数既然是一个值，那么函数也就有着自己的
作用域。
函数的作用域与变量相同，就是其声明时所在的作用域，一定要注意的是，函数的作用域与其运行时所在的作用域没有关系。

例如：

var a = 1;
var x = function () {
  console.log(a);
};
// 函数x在全局作用域环境下创建，所以说x函数的作用域就是全局，虽然x函数是在函数f中调用，但是作用域仍然是在全局。
function f() {
  var a = 2;
  x();
}

f() // 1

在上面的代码中，函数x是在全局作用域声明的函数，所以此时函数的作用域被绑定到全局。

函数的参数

函数的运行时，有时需要提供外部数据，我们提供不同的数据会导致不同的结果。这种外部的数据就叫做参数。

// 定义一个函数，此时函数需要外部的数据a和b
function fn1(a,b) {
    return a + b;
}

// 调用函数并且传入数据
var x = 10;
var y = 20;

console.log(fn1(x,y));

在上面的案例中，a和b就是函数fn1的参数。在调用的时候，我们需要从外部传入数据来使用。

函数参数使用时需要注意的点:

1.函数参数不是必须的，JavaScript允许省略参数。

function f1(a,b) {
    // 如果函数在运行时没有使用参数，那么参数也可以省略
    console.log('hello,world!');
}
f1(); // hello,world

上面的代码中，我们的函数在运行过程中并不需要参数a和b，所以我们在调用函数时候可以选择省略。但是需要注意的是，我们
在函数运行的过程中如果定义了参数并且使用了参数而你却没有传入实参。那么函数体内使用该参数会返回undefined。

function f1(a,b) {
    // console.log('hello,world!');
    console.log(a,b);// undefined
}
// 调用函数的时候并没有传入实参
f1();

如果通过length属性查看参数，那么length属性返回的值其实是形参的长度而不是实参的长度，也就意味着，只要你定义了函数
的形参，即使你在调用函数的时候没有传入实参，length属性也可以返回值。

2.函数的参数不能只省略个别

当我们调用函数的时候，我们不能省略只省略靠前的参数，而保留靠后的参数。如果一定要这么做，那么只有显示的传入undefined才可以。

function f1(a,b,c,d) {
    console.log(a,b,c,d);
}

// 调用函数的时候，如果想省略其中的个别参数，只能显示的传入undefined
// 而如果省略其中的一个参数就会报错。
f1(undefined,undefined,10,20);

3.函数参数传递方式

函数参数如果是原始类型的值（数值、字符串、布尔值），传递方式是传值传递（passes by value）。这意味着，在函数体内修改参数值，不会影响到函数外部。

例如：

var a = 10;
function fn1(param) {
    param += 3;
    console.log('在函数内部的变量值为:' + param);
}

fn1(a); // 在函数内部的变量值为：13

console.log(a);// 10

上面代码中，变量p是一个原始类型的值，传入函数f的方式是传值传递。因此，在函数内部，p的值是原始值的拷贝，无论怎么修改，都不会影响到原始值。

但是，如果函数参数是复合类型的值（数组、对象、其他函数），传递方式是传址传递（pass by reference）。也就是说，传入函数的原始值的地址，因此在函数内部修改参数，将会影响到原始值。

var obj = { p: 1 };

function f(o) {
  o.p = 2;
}
f(obj);

obj.p // 2

上面代码中，传入函数f的是参数对象obj的地址。因此，在函数内部修改obj的属性p，会影响到原始值。
注意，如果函数内部修改的，不是参数对象的某个属性，而是替换掉整个参数，这时不会影响到原始值。

var obj = [1, 2, 3];

function f(o) {
  o = [2, 3, 4];
}
f(obj);

obj // [1, 2, 3]

上面代码中，在函数f内部，参数对象obj被整个替换成另一个值。这时不会影响到原始值。这是因为，形式参数（o）的值实际是参数obj的地址，重新对o赋值导致o指向另一个地址，保存在原地址上的值当然不受影响。

4.同名参数

如果有同名的参数，则取最后出现的那个值。

例如：

function f1(a,a){
    console.log(a);
}

f1(1,2); // 2 

上面代码中，函数f有两个参数，且参数名都是a。取值的时候，以后面的a为准，即使后面的a没有值或被省略，也是以其为准。

function f(a, a) {
  console.log(a);
}

f(1) // undefined

调用函数f的时候，没有提供第二个参数，a的取值就变成了undefined。这时，如果要获得第一个a的值，可以使用arguments对象。

function f(a, a) {
  console.log(arguments[0]);
}

f(1) // 1

arguments对象

定义

因为JavaScript允许存在不定数目的参数，所以在开发的过程中就需要一种机制，通过这种机制，我们能够很好的在函数内读取所有的参数。
这就是arguments对象的由来。

arguments对象包含了函数运行时所有的参数(实参)，arguments[0]就是第一个参数，arguments[1]就是第二个参数，以此类推。
需要注意的是，这个对象只有在函数体内部才能使用。

function f1() {
    // 获取传入的实参
    console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments[2]);
    console.log(arguments[3]);
}
f1(1,2,3,4);// 1 2 3 4

在正常的模式下，arguments对象可以在运行的时候进行修改。

var f = function(a, b) {
  arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}

f(1, 1) // 5

上面代码中，函数f调用时传入的参数，在函数内部被修改成3和2。

严格模式下，arguments对象与函数参数不具有联动关系。也就是说，修改arguments对象不会影响到实际的函数参数。

var f = function(a, b) {
  'use strict'; // 开启严格模式
  arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}

f(1, 1) // 2

上面代码中，函数体内是严格模式，这时修改arguments对象，不会影响到真实参数a和b。

通过arguments对象的length属性，可以判断函数调用时到底带几个参数。

function f() {
  return arguments.length;
}

f(1, 2, 3); // 3
f(1); // 1
f(); // 0

与数组的关系 -- 类数组对象

需要注意的是，虽然arguments很像数组，但它是一个对象。数组专有的方法（比如slice和forEach），不能在arguments对象上直接使用。

如果要让arguments对象使用数组方法，真正的解决方法是将arguments转为真正的数组。下面是两种常用的转换方法：slice方法和逐一填入新数组。

var args = Array.prototype.slice.call(arguments);

// 或者
var args = [];
for (var i = 0; i < arguments.length; i++) {
  args.push(arguments[i]);
  }

callee属性

arguments对象带有一个callee属性，返回它所对应的原函数。

var f = function () {
  console.log(arguments.callee === f);
}

f() // true

可以通过arguments.callee，达到调用函数自身的目的。这个属性在严格模式里面是禁用的，因此不建议使用。

闭包函数

闭包（closure）是JavaScript中的一个难点，在js当中非常多的高级应用都是通过闭包来实现的。

想要顺利的理解和使用闭包函数，需要理解变量的作用域问题。在上面的博文中曾经讲到，JavaScript中有两种作用域，
一种是全局作用域，另外一种是函数作用域。而且在函数内部可以直接读取全局变量。

例如：

var x = "hello,world!";
function f() {
    console.log(x);// 读取函数外部的全局作用域
}
f(); // hello,world

在上面的案例当中，函数f可以直接读取函数外部的全局变量x。
但是我们需要知道的是，在函数的外部，我们没有办法直接读取到函数内部的变量。

例如:

function f() {
    var x = "hello,world!";
}
console.log(x);//  Uncaught ReferenceError: x is not defined(

变量x是函数f内部的变量，所以在函数的外部我们是没有办法读取的。原因是函数内部声明的变量作用域仅限于函数的内部。

而如果在开发中存在需要调用函数内部变量的需求，我们只能通过一些特殊的手段才能够得到函数内部的变量。
例如，我们在函数的内部在来创建一个函数，通过这个函数来调用函数内部的变量。

例如：

function f1() {
  var n = 999;
  function f2() {
　　console.log(n); // 999
  }
}

上面代码中，函数f2就在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1就是不可见的。这就是 JavaScript 语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

此时，函数f2可以得到函数f1的变量，那么我们只要将函数f2作为返回值即可。

function f1() {
  var n = 999;
  function f2() {
    console.log(n);
  }
  return f2;
}

var result = f1();
result(); // 999

上面代码中，函数f1的返回值就是函数f2，由于f2可以读取f1的内部变量，所以就可以在外部获得f1的内部变量了。

闭包就是函数f2，即能够读取其他函数内部变量的函数。由于在 JavaScript 语言中，只有函数内部的子函数才能读取内部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。闭包最大的特点，就是它可以“记住”诞生的环境，比如f2记住了它诞生的环境f1，所以从f2可以得到f1的内部变量。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

闭包的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在。请看下面的例子，闭包使得内部变量记住上一次调用时的运算结果。

例如：

function  f1 (start) {
    return function () {
        return start ++;
    }
}
var a = f1(1);
console.log(a()); // 1
console.log(a()); // 2
console.log(a()); // 3

上面代码中，start是函数f1的内部变量。通过闭包，start的状态被保留了，每一次调用都是在上一次调用的基础上进行计算。从中可以看到，闭包a使得函数f1的内部环境，一直存在。所以，闭包可以看作是函数内部作用域的一个接口。

为什么会这样呢？原因就在于a始终在内存中，而a的存在依赖于f1，因此也始终在内存中，不会在调用结束后，被垃圾回收机制回收。

闭包的另一个用处，是封装对象的私有属性和私有方法。

function Person(name) {
  var _age;
  function setAge(n) {
    _age = n;
  }
  function getAge() {
    return _age;
  }

  return {
    name: name,
    getAge: getAge,
    setAge: setAge
  };
}

var p1 = Person('张三');
p1.setAge(25);
p1.getAge() // 25

上面代码中，函数Person的内部变量_age，通过闭包getAge和setAge，变成了返回对象p1的私有变量。

注意，外层函数每次运行，都会生成一个新的闭包，而这个闭包又会保留外层函数的内部变量，所以内存消耗很大。因此不能滥用闭包，否则会造成网页的性能问题。

立即调用的函数表达式 (IIFE)

在 JavaScript 中，圆括号()是一种运算符，跟在函数名之后，表示调用该函数。比如，print()就表示调用print函数。

有时，我们需要在定义函数之后，立即调用该函数。这时，你不能在函数的定义之后加上圆括号，这会产生语法错误。

例如：

function(){ /* code */ }();
// SyntaxError: Unexpected token (

产生这个错误的原因是，function这个关键字即可以当作语句，也可以当作表达式。

例如：

// 语句
function f() {}

// 表达式
var f = function f() {}

为了避免解析上的歧义，JavaScript 引擎规定，如果function关键字出现在行首，一律解释成语句。因此，JavaScript 引擎看到行首是function关键字之后，认为这一段都是函数的定义，不应该以圆括号结尾，所以就报错了。

解决方法就是不要让function出现在行首，让引擎将其理解成一个表达式。最简单的处理，就是将其放在一个圆括号里面。

(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();

上面两种写法都是以圆括号开头，引擎就会认为后面跟的是一个表示式，而不是函数定义语句，所以就避免了错误。这就叫做“立即调用的函数表达式”（Immediately-Invoked Function Expression），简称 IIFE。

注意，上面两种写法最后的分号都是必须的。如果省略分号，遇到连着两个 IIFE，可能就会报错。

// 报错
(function(){ /* code */ }())
(function(){ /* code */ }())

上面代码的两行之间没有分号，JavaScript 会将它们连在一起解释，将第二行解释为第一行的参数。

推而广之，任何让解释器以表达式来处理函数定义的方法，都能产生同样的效果，比如下面三种写法。

var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();

甚至像下面这样写，也是可以的。

!function () { /* code */ }();
~function () { /* code */ }();
-function () { /* code */ }();
+function () { /* code */ }();

通常情况下，只对匿名函数使用这种“立即执行的函数表达式”。它的目的有两个：一是不必为函数命名，避免了污染全局变量；二是 IIFE 内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量。

eval命令

eval命令接受一个字符串作为参数，并将这个字符串当作语句执行。

eval('var a = 1;');
a // 1

上面代码将字符串当作语句运行，生成了变量a。

如果参数字符串无法当作语句运行，那么就会报错。

eval('3x') // Uncaught SyntaxError: Invalid or unexpected token

放在eval中的字符串，应该有独自存在的意义，不能用来与eval以外的命令配合使用。举例来说，下面的代码将会报错。

eval('return;'); // Uncaught SyntaxError: Illegal return statement

上面代码会报错，因为return不能单独使用，必须在函数中使用。

如果eval的参数不是字符串，那么会原样返回。

eval(123) // 123

eval没有自己的作用域，都在当前作用域内执行，因此可能会修改当前作用域的变量的值，造成安全问题。

var a = 1;
eval('a = 2');

a // 2

上面代码中，eval命令修改了外部变量a的值。由于这个原因，eval有安全风险。

为了防止这种风险，JavaScript 规定，如果使用严格模式，eval内部声明的变量，不会影响到外部作用域。

(function f() {
  'use strict';
  eval('var foo = 123');
  console.log(foo);  // ReferenceError: foo is not defined
})()

上面代码中，函数f内部是严格模式，这时eval内部声明的foo变量，就不会影响到外部。

不过，即使在严格模式下，eval依然可以读写当前作用域的变量。

(function f() {
  'use strict';
  var foo = 1;
  eval('foo = 2');
  console.log(foo);  // 2
})()

上面代码中，严格模式下，eval内部还是改写了外部变量，可见安全风险依然存在。

总之，eval的本质是在当前作用域之中，注入代码。由于安全风险和不利于 JavaScript 引擎优化执行速度，所以一般不推荐使用。通常情况下，eval最常见的场合是解析 JSON 数据的字符串，不过正确的做法应该是使用原生的JSON.parse方法。

eval的别名调用

前面说过eval不利于引擎优化执行速度。更麻烦的是，还有下面这种情况，引擎在静态代码分析的阶段，根本无法分辨执行的是eval。

例如：

var m = eval;
m('var x = 1');
x // 1

上面代码中，变量m是eval的别名。静态代码分析阶段，引擎分辨不出m('var x = 1')执行的是eval命令。

为了保证eval的别名不影响代码优化，JavaScript 的标准规定，凡是使用别名执行eval，eval内部一律是全局作用域。

例如：

var a = 1;

function f() {
  var a = 2;
  var e = eval;
  e('console.log(a)');
}

f() // 1

上面代码中，eval是别名调用，所以即使它是在函数中，它的作用域还是全局作用域，因此输出的a为全局变量。这样的话，引擎就能确认e()不会对当前的函数作用域产生影响，优化的时候就可以把这一行排除掉。

eval的别名调用的形式五花八门，只要不是直接调用，都属于别名调用，因为引擎只能分辨eval()这一种形式是直接调用。

eval.call(null, '...')
window.eval('...')
(1, eval)('...')
(eval, eval)('...')

上面这些形式都是eval的别名调用，作用域都是全局作用域。

递归函数

递归函数指的是在函数执行的过程中，自己调用自己。通常情况下通过递归调用可以实现阶乘等操作。

例如:

function f(n) {
    if (n <= 1){
        // console.log(1111);
        return 1;
    }else {
        // console.log(n * f(n-1));
        return n * f(n-1);
    }
}

console.log(f(10)); // 3628800

小练习

1.编写一个函数，计算两个数字的和、差、积、商。

要求：使用传参的形式

demo:

function count(num1,num2,sym) {

    switch (sym) {
        case "+" :
            console.log(Number(num1) + Number(num2));
            break;
        case "-":
            console.log(Number(num1) - Number(num2));
            break;
        case "*":
            console.log(Number(num1) * Number(num2));
            break;
        case "/":
            console.log(Number(num1) / Number(2));
            break;
        default:
            console.log("对不起，输入有误");
    }
}

count(10,20,"+");
count(10,20,"-");
count(10,20,"*");
count(10,20,"/");