JavaScript的三种引用方式

行内引用

行内引用，直接与一个HTML元素的事件属性绑定

<button onclick="document.querySelector('h1') .classList.toggle('active')">Click</button>

内部引用

在head或body中，将js代码写到一对 <scripu></scripu>标签中

<script>
    function togglecolor() {
      document.querySelector("h1").classList.toggle("active");
    }

外部引用
导入外部js脚本，实现了js代码的共享，可以在多个html文件中使用
```
<script src="toggle.js">  </script>
```

语法和数据类型

本章内容 变量与常量、函数与高阶函数、函数的参数、归并参数、箭头函数与立即执行函数。

1. 变量与常量

在应用程序中，使用变量来作为值的符号名。变量的名字又叫做标识符，其需要遵守一定的规则。
一个 JavaScript 标识符必须以字母、下划线（_）或者美元符号（$）开头；后续的字符也可以是数字（0-9）。因为 JavaScript 语言是区分大小写的，所以字母可以是从“A”到“Z”的大写字母和从“a”到“z”的小写字母。

合法的标识符示例：Number_hits，temp99，$credit 和 _name、

1.1 声明变量

1.使用关键词 var 。例如 var name = 42这个语法可以用来声明局部变量和全局变量。

2.直接赋值：例如name = 42在函数外使用这种形式赋值，会产生一个全局变量。在严格模式下会产生错误。因此你不应该使用这种方式来声明变量。

3.使用关键词 let 。例如let name = 13这个语法可以用来声明块作用域的局部变量

1.2 变量求值

用 var 或 let 语句声明的变量，如果没有赋初始值，则其值为 undefined
变量：数据共享,重复使用
变量重复使用，就需要一个名称来保存它

不赋初始值

let userName;
console.log(userName) // 打印结果为：undefined

第一次赋值
```
let userName="PHP用户"
```

第二次赋值，更新，修改

userName ="第二次赋值"
console.log(userName)

1.3 变量的原始类型：

原始类型分为:数组number、字符串string、布尔型boolean、和两种特殊类型NULL、undefined

数组（number）

数组就是以数字形式存在的值

let num=999;
console.log(typeof num); // 会返回 number类型

字符串（string）

字符串在一对“”中表示

let eamli="eamli@php.cn";
console.log(typeof eamli); // 会返回 string类型

布尔型（boolean）

布尔型只有两个值, true真， false假

let isEmpty=true;
console.log(typeof isEmpty); // 会返回 boolean类型

NULl （空）

let obj = null;
console.log(obj, typeof null); // 会返回 NULL

undefined

创建了一个变量：只声明不赋值，他就是undefined(未定义)

let num;
console.log( tupeof num); // 会返回 undefined

1.4 变量提升

JavaScript 变量的另一个不同寻常的地方是，你可以先使用变量稍后再声明变量而不会引发异常。这一概念称为变量提升。
JavaScript 变量感觉上是被“提升”或移到了函数或语句的最前面。但是，提升后的变量将返回 undefined 值。因此在使用或引用某个变量之后进行声明和初始化操作，这个被提升的变量仍将返回 undefined 值。

 console.log(x=== undefined);
 var x=1;

1.5 常量（const）

常量标识符的命名规则和变量相同：常量通常都是用大写字母，多个单词之间使用下划线_连接，或美元符号（$）开头并可以包含有字母、数字或下划线。

常量不可以通过重新赋值改变其值，也不可以在代码运行时重新声明。所以声明时必须赋值（初始化）

const GENDER = "female"; // 常量通常都是用大写字母
console.log(GENDER);  // 在声明时，首选常量，可以防止被误改

2. 函数与高阶函数

2.1 函数声明

一个函数定义（也称为函数声明，或函数语句）由一系列的function关键字组成，依次为:

function :关键字 getName :函数名，函数名必须符合标识符命名规范
() ：里面是参数列表,可以没有参数，也可以有参数
{} ：-函数体- 写在一对大括号里面{}，里面有多行代码
一个函数一定要有 返回值
例如，以下的代码定义了一个简单的square函数：
```
function square(number) {
      return number*number;
    }
```
2.2 函数的调用

定义一个函数并不会自动的执行它。定义了函数仅仅是赋予函数以名称并明确函数被调用时该做些什么。调用函数才会以给定的参数真正执行这些动作。例如，一旦你定义了函数square，你可以如下这样调用它：

console.log(square(5)) // 得出的值为25

上述语句通过提供参数 5 来调用函数。函数执行完它的语句会返回值25。

2.3 函数的提升

函数一定要处于调用它们的域中，但是函数的声明可以被提升(出现在调用语句之后)，只有命名函数可以提升。
如下例：

console.log(square(5)); // 控制台打印 结果：25
function square(a,b){
    return a*b
}  // 有名称(square)的函数被称为命名函数

函数域是指函数声明时的所在的地方，或者函数在顶层被声明时指整个程序

2.4 匿名函数

如果不希望函数提升，那就必须先声明、再使用，用 匿名函数
所谓匿名函数，就是将函数名删除（不添加函数名）
函数没有名字，可以用变量或者常量来引用它

匿名函数
```
let num = function(a,b){
  reutrn a + b;
};
console.log(num(5,5));
```
匿名函数就是将一个函数的声明作为值赋值给一个变量或常量
然后通过这个变量或常量来引用这个函数

2.5 函数的重写

函数重写，函数允许重写

先声明一个函数

function getName(name) {
      return "weLcome to:" + name;
    }

然后进行函数重写

function getName(name) {
      return "欢迎：" + name;
    }
console.log(getName("同学们"));

2.6 高阶函数(回调函数)

高阶函数 ：使用函数为参数，或者将函数做为返回值的函数

什么叫把函数作为参数？：就是把一个函数作为另一个函数的参数把它传进去就可以了

document.addEventListener("click", function () {
// function就是一个函数，这个函数出现在另外一个函数的参数位置上，因此它
// 就是一个 *回调函数*
        alert("大家晚上好");
      });

3. 函数的参数

从ECMAScript 6开始，有两个新的类型的参数：默认参数，剩余参数

3.1 必选参数

在下面的例子中，调用函数时没有实参传递给b，那么它的值就是undefined，于是计算a*b得到、函数返回的是 NaN

let num = function(a,b){
    return a * b
    }
console.log(num(5 ))// 得出结果NAN，因为没有给第二个参数传参

由以上例子得出：sun 中的a,b 参数，少一个都不行，少一个最后的运算结果就是NAN

3.2 默认参数

在JavaScript中，函数参数的默认值是undefined。然而，在某些情况下设置不同的默认值是有用的。这时默认参数可以提供帮助
使用默认参数，在函数体的检查就不再需要了。现在，你可以在函数头简单地把5设定为b的默认值：

let num = function(a ,b=5){
    return a*b
}
console.log(sum(5)); 
// 得出值为15，等价于console.log(sum(5,10))
console.log(sum(5, 15));
//得出值为20 ，以最终用户传入的值为准，如果没有传，则使用默认值

3.3 剩余参数

剩余函数又叫归并参数(…)，允许将不确定数量的参数整合为数组，可以将所有参数压缩到一个数组中统一处理

我们将这个数组的每一个数与第一个参数相加。这个例子是使用了一个箭头函数，这将在下一节介绍

let arr = function(...acc){
    return acc.reduce((a,b)=>a + b  )
}
console.log(arr(5,5,5,5,5,5)) // 等于5*6=30

4. 箭头函数与立即执行函数。

4.1 箭头函数

箭头函数表达式（也称胖箭头函数）相比函数表达式具有较短的语法并以词法的方式绑定 this。箭头函数总是匿名的。

匿名函数 可以用 箭头函数 在简化它。
换句话说,就是 箭头函数 是用来简化 匿名函数 的

1.首先箭头函数是不需要写 function 的

2.然后要在 ) 和 { 之间写上一个胖箭头 =>

let num = (a,b) => {
  return a+b
};
console.log(num(10,20)) // 控制台打印结果:30

进一步简化

如果箭头函数的代码体只有一行语句，可以删除大括号 {}

删除{} return 就也不能要了,他是自带return功能

let num = (a,b) => a+b;
console.log(num(10,10)) // 控制台打印结果:20

如果只有一个参数，那么连参数列表的圆括号 ()，也可以删除
```
let num = a,b => a+b;
console.log(num(5,5);) // 控制台打印结果:10
```
箭头函数虽好，但是可不要滥用
如果函数中要使用到 this. 就不要使用箭头函数 ，箭头函数不支持 this.
因此箭头函数不能当构造器函数使用
箭头函数中的this始终是和上下文绑定的(当前执行环境)，而构造函数中的this 始终指向一个新的对象
其他环境下可放心使用

4.2 立即执行函数(缩写：IIFE)

立即执行函数用两个 ()() 表示
一个普通的函数有两部组成

1.声明
```
let num = function(a,b){
  return a+b;
};
```
2.调用
```
console.log(num(5,5))
```

立即执行函数 ()() ：声明、调用二合一，声明后直接执行:

将函数声明放到第一个()中，将参数放到第二个()中
因为是立即调用，所以不需要函数名

(function (a,b){
         console.log(a*b)
       })(10,20)

不积蛙步,无以至千里；不积小流,无以成江海

[JS基础入门] 变量、常量及函数的语法与使用方式

JavaScript的三种引用方式

行内引用

内部引用

外部引用

语法和数据类型

1. 变量与常量

1.1 声明变量

1.2 变量求值

1.3 变量的原始类型：

原始类型分为:数组number、字符串string、布尔型boolean、和两种特殊类型NULL、undefined

数组（number）

字符串（string）

布尔型（boolean）

NULl （空）

undefined

1.4 变量提升

1.5 常量（const）

2. 函数与高阶函数

2.1 函数声明

2.2 函数的调用

2.3 函数的提升

2.4 匿名函数

2.5 函数的重写

2.6 高阶函数(回调函数)

3. 函数的参数

3.1 必选参数

3.2 默认参数

3.3 剩余参数

4. 箭头函数与立即执行函数。

4.1 箭头函数

进一步简化

如果只有一个参数，那么连参数列表的圆括号 ()，也可以删除

4.2 立即执行函数(缩写：IIFE)

立即执行函数 ()() ：声明、调用二合一，声明后直接执行:

更多相关文章

随机推荐

[JS基础入门] 变量、常量及函数的语法与使用方式

JavaScript的三种引用方式

行内引用

内部引用

外部引用

语法和数据类型

1. 变量与常量

1.1 声明变量

1.2 变量求值

1.3 变量的原始类型：

原始类型分为:数组number、字符串string、布尔型boolean、和两种特殊类型NULL、undefined

数组（number）

字符串（string）

布尔型（boolean）

NULl （空）

undefined

1.4 变量提升

1.5 常量（const）

2. 函数与高阶函数

2.1 函数声明

2.2 函数的调用

2.3 函数的提升

2.4 匿名函数

2.5 函数的重写

2.6 高阶函数(回调函数)

3. 函数的参数

3.1 必选参数

3.2 默认参数

3.3 剩余参数

4. 箭头函数与立即执行函数。

4.1 箭头函数

进一步简化

如果只有一个参数，那么连参数列表的圆括号 ()，也可以删除

4.2 立即执行函数(缩写：IIFE)

立即执行函数 ()() ： 声明、调用 二合一，声明后直接执行:

更多相关文章

随机推荐

立即执行函数 ()() ：声明、调用二合一，声明后直接执行: