Home > List of blog posts > javascript基础（一）

Blogger Information

Blog 41

fans 2

comment 0

visits 29716

Special Recommendation

More>

Related recommendations

1.js引入方式

1.内部脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js引入方式一</title>
</head>
<body>
<script>
    alert('hello world!!!');
</script>
</body>
</html>

2.外部脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js引入方式</title>
</head>
<body>
<script src="demo.js"></script>
</body>
</html>

3.内联脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js引入方式</title>
</head>
<body>
<h1 onclick="alert('hello world!')">hello world!</h1>
</body>
</html>

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

1.变量声明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js引入方式</title>
</head>
<body>
<script>
    let a = '123';
    // 切记变量不可重复定义，但可以进行更新
    console.log(a)
    a ='321';
    console.log(a)
</script>
</body>
</html>

效果图

2.常量声明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js引入方式</title>
</head>
<body>
<script>
   const A = '123';
   console.log(A)
   // 常量定义后不能更新
    A = '321';
   console.log(A)
</script>
</body>
</html>

效果图

3.函数

1.普通函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function getName(name) {
        return 'hello' + name;
    }
    console.log(getName('地球'))
</script>
</body>
</html>

2.匿名函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 匿名函数就是将一个函数的声明作为值赋给一个变量或常量
   let sum = function (a,b) {
        return a + b;
   }
    console.log(sum(1,2));
</script>
</body>
</html>

3.函数的归并参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>归并参数</title>
</head>
<body>
<script>
    let sum = function (...arr) {
        console.log(arr);
        return arr.reduce((p, c)=>p + c);
    }
    console.log(sum(1,2,3,4))
</script>
</body>
</html>

4.高阶函数：回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高阶函数</title>
</head>
<body>
<!--    高阶函数：使用函数作为参数或者将函数作为返回的函数-->
<script>
    function demo(f) {
        console.log(f)
        return function f1() {
            return 'abc';
        }
    }
    // 函数作为参数,这就是回调函数
    let a = demo(function () {
    });
    console.log(a());
</script>
</body>
</html>

5.高阶函数：偏头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>偏头函数</title>
</head>
<body>
<script>
    // let sum = function (a,b,c,d) {
    //     return a+b+c+d;
    // }
    let sum = function (a,b) {
        return function (c,d) {
            return a+b+c+d;
        }
    }
    let f1 = sum(1,2);
    // f1是一个函数
    console.log(typeof f1);
    console.log(f1(3,4));
    // 颗粒化
    sum = function (a) {
        return function (b) {
            return function (c) {
                return function (d) {
                    return a+b+c+d;
                }
            }
        }
    }
    console.log(sum(1)(2)(3)(4));
</script>
</body>
</html>

6.纯函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯函数</title>
</head>
<body>
<script>
    let c = 100;
    function add(a,b) {
       // return a+b+c;
       // 去掉c就是纯函数
       return a+b;
    }
    console.log(add(1,2))
</script>
</body>
</html>

7.箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数</title>
</head>
<body>
<script>
    let sum = function (a,b) {
        return a+b;
    }
    // 匿名函数可以用箭头函数进行简化
    sum =(a,b) => {
        return a+b;
    }
    console.log(sum(10,20));
    // 如果箭头函数的代码体只有一行语句，可以删除大括号,而且自带return;
    sum = (a,b) => a+b;
    console.log(sum(3,2));
    // 如果只有一个参数，连参数列表的圆括号都可以删除
    let tips = (name) => console.log(100+name);
    tips(123);
    // 如果函数中要用到this，就不要用箭头函数了，不能当构造函数用
</script>
</body>
</html>

8.立即执行函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>立即执行函数(IIFE)</title>
</head>
<body>
<script>
    //声明
    let sum = (a,b) => console.log(a+b);
    sum(100,200);
    //调用
    // 立即执行函数
    ((a,b) => console.log(a+b))(100.200);
    // 在很久之前，js是不支持块作用域
    // if (true) {
    //     var b = 100;
    // }
    (function () {
        if (true) {
            // 一旦将代码块用一个立即执行函数套住，那么内部声明的变量b就不会泄露到全局
            var b = 100;
        }
    })()
    console.log(b);
</script>
</body>
</html>

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

php之类与继承

2021-05-07 22:53:35