Community Learn Tools Library Leisure
search
English
Home > List of blog posts > js基础：变量与常量的声明以及函数知识
Blogger Information
Blog 8
fans 0
comment 0
visits 5537
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js基础：变量与常量的声明以及函数知识
WSC
Original
703 people have browsed it

js引入方式

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       .aa {
  10.         color: red;
  11.       }
  12.     </style>
  13.   </head>
  14.   <body>
  15.     <h1>你好</h1>
  16.     <!-- 1. 行内脚本,直接与一个元素的事件属性绑定 -->
  17.     <!-- <button onclick="document.querySelector('h1').classList.toggle('aa')">Click</button> -->
  19.     <button onclick="toggleColor()">Click</button>
  21.     <!-- 2. 内部脚本,将js代码写到一对script标签中 -->
  22.     <!-- <script>
  23.       function toggleColor() {
  24.         document.querySelector("h1").classList.toggle("aa");
  25.       }
  26.     </script> -->
  28.     <!-- 3.外部脚本,实现了js代码的共享 -->
  29.     <script src="toggle.js"></script>
  30.   </body>
  31. </html>

变量与常量的声明与使用方式

变量是用于存放数值的容器
要使用变量,先要声明变量

  1. // 声明变量
  2.   let userName;
  3. // 第一次赋值: 初始化
  4.   userName = "你好"
  5. // 第二次赋值: 更新,修改
  6.   userName = "再见";

函数与高阶函数

JavaScript 使用关键字 function 定义函数。
高阶函数: 使用函数为参数或者将函数做为返回值的函数

  1. <script>
  2.     //回调函数:函数做为参数
  3.       document.addEventListener("click", function () {
  4.         alert("大家晚上好");
  5.       });
  6.       // 2. 偏函数:将函数做为返回值
  7.       let sum = function (a, b) {
  8.         return function (c, d) {
  9.           return a + b + c + d;
  10.         };
  11.       };
  12.       let f1 = sum(1, 2);
  13.       //   f1是一个函数
  14.       console.log(typeof f1);
  15.       console.log(f1(3, 4));
  17.       // 柯里化
  18.       sum = function (a) {
  19.         return function (b) {
  20.           return function (c) {
  21.             return function (d) {
  22.               return a + b + c + d;
  23.             };
  24.           };
  25.         };
  26.       };
  28.       let res = sum(1)(2)(3)(4);
  29.       console.log("res =", res);
  31.       // 纯函数: 在函数内部没有引用外部数据的函数
  32.       let c = 100;
  33.       function add(a, b) {
  34.         //   c来自函数外部
  35.         // return a + b + c;
  36.         // 去掉c即为纯函数,此时函数的所有参数都必须是通过调用者传入的
  37.         return a + b;
  38.       }
  39.       console.log(add(1, 2));
  40. </script>

函数的参数

  1.  <script>
  2.       // 函数都是单值返回
  3.       // 必选参数
  4.       let sum = function (a, b) {
  5.         return a + b;
  6.       };
  7.       //   console.log(sum(1, 2));
  8.         console.log(sum(1));
  10.       // 默认参数
  11.       sum = function (a, b = 10) {
  12.         return a + b;
  13.       };
  14.       console.log(sum(1));
  15.       console.log(sum(1, 15));
  17.       // 归并参数,rest语法,将所有参数压到一个数组中来简化参数的获取过程
  18.       sum = function (...arr) {
  19.         console.log(arr);
  20.         return arr.reduce((p, c) => p + c);
  21.       };
  22.       console.log(sum(1, 2, 3, 4, 5, 6, 7));
  24.       // 返回多个值,使用数组或对象
  25.       function getUser() {
  26.         return [10, "admin", "admin@php.cn"];
  27.       }
  29.       function getUser() {
  30.         return { id: 10, username: "admin", email: "admin@php.cn" };
  31.       }
  32.       console.table(getUser());
  33.     </script>

箭头函数的语法与使用场景

  1. <script>
  2.       let sum = function (a, b) {
  3.         return a + b;
  4.       };
  5.       //匿名函数,可以使用箭头函数来简化它
  6.       sum = (a, b) => {
  7.         return a + b;
  8.       };
  9.       console.log(sum(10, 20));
  11.       //如果箭头函数的代码体只有一行语句,可以删除大括号与return
  12.       sum = (a, b) => a + b;
  14.       //如果函数中要使用到this,就不要用箭头函数,不能当构造函数用
  15.     </script>

立即执行函数的语法与使用方式

立即执行函数可以将声明调用二合一, 声明后直接执行

  1. <script>
  2.       (function (a, b) {
  3.         console.log(a + b);
  4.       })(100, 600);
  5.     </script>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post