首页 > 博客列表 > [JS基础入门] 变量、常量及函数的语法与使用方式

博主信息

博文 10

粉丝 0

访问量 12432

专题推荐

更多>

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)

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

以上便是变量与常量、函数与高阶函数、函数的参数、归并参数、箭头函数与立即执行函数的基本使用方式

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

markdown与Emmet插件的使用方式

2021-03-20 00:42:10