JS第一课

16lz 2021-04-11

1. js引入方式

1) 行内脚本: on…

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

中" class="reference-link">2) 内部脚本, 在<script></script>中

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

3) 外部脚本: toggle.js

<script src="toggle.js"></script>
#### 效果全部是一样

## 2. 变量与常量的声明与使用方式
#### 1) 变量声明:let userName
userName =..
console.log(userName)
userName =..
console.log(userName)
userName = null;
console.log(userName)
#### 2) 常量通常全大写，多个单词之间使用下划线
const GENDER = “female”
console.log(GENDER)
#### 3) 使用方式
只允许字母，数字，下划线，$,并且禁止数字开头
- 驼峰式: userName, unitPrice
- 帕斯卡式: UserName, UnitPrice,大驼峰式,用在类/构造函数
- 蛇形式: user_name, unit_price
- 匈牙利式: 将数据类型放在变量的最前面
js推荐使用： userName, unitPrice

## 3. 函数与高阶函数 Higher order function
- 函数一定有一个返回值;
- 函数可以提升，后面写的会覆盖前面的
- 如果不希望函数提升,必须用匿名函数=>声明再使用
<script>
function getName(name) {
return “welcome to: “ + name;
}
console.log(getName(“Peter”));
</script>

let sum =function (a,b) {
return a + b;
};

      console.log(sum(1,6));

默认参数
sum = function (a, b = 10) {
return a + b;
}
console.log(sum(1));
如果很多数相加，用归并参数,rest语法(…arr)
sum = function (…arr) {
console.log(arr);
return arr.reduce((p, c) => p + c);
}
console.log(sum(1, 2, 3, 4, 5, 6, 7));
返回多个值,使用数组array或对象object
function getUser() {
return [10, “admin”, “admin@abc.com”];
}
function getUser() {
return { id: 10, username: “admin”, email: “admin@abc.com”}
}
高阶函数: 回调函数 and 偏函数

Currying 柯里化: 多个单一参数，返回同一个值
let f1 = sum(1, 2);

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;
      };
    };
  };
};
let res = sum(1)(2)(3)(4);
console.log("res =", res);

纯函数
" class="reference-link">5. 箭头函数 Arrow function =>
匿名函数常用; 如果函数中要使用到this,就不要用箭头函数,不能当构造函数用

6. 立即执行函数

声明调用二合一, 把整个函数放进一对大括号声明后直接执行。
一旦将代码块用一个立即执行函数套住,那么内部声明的变量b就不断泄露到全局中

更多相关文章

随机推荐