js 引入方式，常量，变量，函数的声明和使用----0331

1. js 引入方式

1.内脚本,直接与一个元素的事件属性绑定

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

2.内部脚本,将 js 代码写到一对 script 标签中

<button onclick="toggleColor()">Click</button>
<script>
  function toggleColor() {
    document.querySelector('h1').classList.toggle('active');
  }
</script>

3.外部脚本,实现了 js 代码的共享

<script src="toggle.js"></script>

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

1.变量(let)：数据共享,重复使用

//   1. 变量
// 声明
let userName;
console.log(userName); // undefined
// 第一次赋值: 初始化
userName = '小明';
console.log(userName); // 小明
// 第二次赋值: 更新,修改
userName = '小华';
console.log(userName); // 小华
// 变量赋值为 null,将被删除
userName = null;
console.log(userName);
// 推荐声明时直接初始化
let price = 99;
price = 199;

2.常量(const)：常量通常全大写，多个单词之间使用下划线;因为常量不能被更新,所以声明时必须赋值(初始化)

const GENDER = 'female';
console.log(GENDER);

3.标识符：字母，数字，下划线，$,并且禁止数字开头;严格区分大小写;不能使用保留字或关键字

3. 函数与高阶函数

1.函数是一个可重用的代码块，用来完成某个特定功能。每当需要反复执行一段代码时，可以利用函数来避免重复书写相同代码。

// 函数声明
function getName(name) {
  return 'welcome to: ' + name;
}
// 函数调用,按名
console.log(getName('小明'));
// 函数允许重写
function getName(name) {
  return '欢迎: ' + name;
}

2.匿名函数: 是将一个函数的声明做为值赋值给一个变量或常量，通常这个变量或常量来引用这个函数

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

3.高阶函数: 使用函数为参数或者将函数做为返回的函数

function demo(f) {
  return function () {
    return 'abc';
  };
}

4. 函数的参数

函数的参数：必选参数，默认参数，归并参数

// 1.必选参数,函数调用时需要传两个值
let sum = function (a, b) {
  return a + b;
};
sum(1, 2);
// 2.默认参数：函数调用时可只传一个值，b 使用默认值 10
sum = function (a, b = 10) {
  return a + b;
};
sum(1);
// 3.归并参数,rest语法,将所有参数压到一个数组中来简化参数的获取过程
sum = function (...arr) {
  // 获取传入数值，逐个相加
  let t = 0;
  for (let i = 0; i < arr.length; i++) {
    t += arr[i];
  }
  return t;
  //   return arr.reduce((p, c) => p + c);
};
sum(1, 2, 3, 4, 5, 6, 7);

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

• 箭头函数可以用来简化匿名函数
• 如果函数中要使用到 this,就不要用箭头函数,不能当构造函数用

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

• 如果箭头函数的代码体只有一行语句,可以删除大括号,自带 return 功能

sum = (a, b) => a + b;

• 如果只有一个参数,连参数列表的圆括号 都可以删除

//
let tips = name => console.log('欢迎: ' + name);
tips('php中文网的学员');

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

声明调用二合一, 声明后直接执行,使用()()实现

(function (a, b) {
  console.log(a + b);
})(100, 600);