1. let 关键字
1. 变量不能重复声明
2. 块级作用域
3. 不存在变量提升
4. 不影响作用域链
2. const 关键字
1. 一定要赋初始值
2. 一般常量使用大写(小写也可以)
3. 常量的值不能修改
4. 块级作用域
5. 对于数组和对象的元素修改,不算做对常量的修改,不报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>const定义常量</title>
</head>
<body>
<script>
// 声明常量
const school = 'dongbei';
console.log(school); // 'dongbei'
// 1. 一定要赋初始值
// 2. 一般常量使用大写(小写也可以)
// 3. 常量的值不能修改
// 4. 块级作用域
// 5. 对于数组和对象的元素修改,不算做对常量的修改,不报错
const t = [1, 2, 4, 4];
t.push(5);
console.log(t); // [1, 2, 4, 4, 5]
t[2] = 3;
console.log(t); // [1, 2, 3, 4, 5]
</script>
</body>
</html>
3. 模板字符串
模板字符串(template string)是增强版的字符串,用反引号 【` `】 标识,特点:
- 字符串中可以出现换行符
- 可以使用 ${xxx} 形式输出变量
应用场景:当遇到字符串与变量拼接的情况使用模板字符串
// ES6 引入新的声明字符串的方式 反引号
// let str = `我是字符串`;
// console.log(str, typeof str); // 我是字符串 string
// 1. 内容中可以直接出现换行符
let str = `<ul><li>沈腾</li>
<li>玛丽</li></ul>`;
console.log(str);
// 2. 直接变量拼接
let l = `yusheng`;
let b = `${l}是最棒的选手`;
console.log(b);
4. 简化对象写法
ES6允许在大括号{ }里面,直接写入变量和函数,作为对象的属性和方法。
let name = 'yusheng';
let change = function() {
console.log('是最棒的选手');
}
const hua = {
name,
change,
// 与以下代码等价
// improve: function() {
// console.log('可以进步');
// }
improve() {
console.log('可以进步');
}
}
5. 箭头函数
1. this 是静态的,始终指向函数声明时 所在作用域下的this值 ,不能使用 call 调用去改变
function getName() {
console.log(this.name);
}
let getName1 = () => {
console.log(this.name);
}
window.name = 'yusheng';
const obj = {
name: 'guanjun'
}
// 直接调用
getName(); // yusheng
getName1(); // yusheng
// call()调用,普通函数可以改变this指向,但是箭头函数不行
getName.call(obj); // guanjun
getName1.call(obj); // yusheng
2. 不能作为构造函数实例化对象
let Person = (name, age) => {
this.name = name;
this.age = age;
}
let n = new Person('yusheng', 28);
console.log(n); // Person is not a constructor
3. 不能使用arguments变量
let fn = () => {
console.log(arguments);
}
fn(1, 2, 3); // Uncaught ReferenceError: arguments is not defined
4. 箭头函数简写
(1)当形参有且仅有一个,省略 ()
(2) 当代码体只有一条语句,省略 {} 此时return必须省略,语句的执行结果就是函数的返回值
// (1) 当形参有且仅有一个,省略 ()
let add = n => {
return n+n;
}
console.log(add(9));
// (2) 当代码体只有一条语句,省略 {} 此时return必须省略,语句的执行结果就是函数的返回值
let pow = n => n * n;
console.log(pow(9));
6. rest 参数
1. ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments,作用与 arguments 类似,将接收的参数序列转换为一个数组对象(arguments 是伪数组)
2. 语法格式:fn(a, b, ...args),写在参数列表最后面
3. 应用场景:rest 参数非常适合不定个数参数函数的场景
// rest 参数,用于获取函数的实参 用于代替 arguments
// ES5 获取实参
// function date() {
// console.log(arguments);
// }
// date('yusheng', 'youzi');
// ES6 rest 参数
function date(...args) {
console.log(args); // 可以使用数组的方法 map() filter() every()
}
date('yusheng', 'youzi'); // ['yusheng', 'youzi']
// rest 必须放在参数的最后
function fn(a, b, ...args) {
console.log(a, b, args);
}
fn(1, 2, 3, 4, 5, 6); // 1 2 [3, 4, 5, 6]
7. 扩展运算符
// ... 扩展运算符,能将数组转换为逗号分隔的参数序列
const a = ['yusheng', 'ansk', 'youzi'];
function hua() {
console.log(arguments);
}
hua(...a); // 等同于 hua('yusheng', 'ansk', 'youzi')
hua(a);
扩展运算符的用法:
// 1. 数组合并
const kuaizi = ['wtl', 'xy'];
const fenghuang = ['zy', 'lh'];
const he = kuaizi.concat(fenghuang);
const he1 = [...kuaizi, ...fenghuang];
// 2. 数组克隆
const yusheng = ['Yuzuru', 'youzi', 'ansk'];
const ys = [...yusheng];
console.log(ys); // ['Yuzuru', 'youzi', 'ansk']
// 3. 将伪数组转为真数组
const divs = document.querySelectorAll('div');
console.log(divs); // NodeList[3]
const a = [...divs];
console.log(a);
8. 模块化语法
模块功能主要由两个命令构成
●export 命令用于规定模块的对外接口
●import 命令用于输入其他模块提供的功能
1. 分别暴露
m1.js 文件
// 分别暴露
export let school = 'ABCD';
export function teach() {
console.log('学习123');
}
2. 统一暴露
m2.js 文件
// 统一暴露
let school = "B站云学院";
function study() {
console.log('在这里上大学!');
}
export { school, study }
3. 默认暴露
m3.js 文件
// 默认暴露 [暴露的数据可以是任意类型]
export default {
school: 'B站学堂',
change: function () {
console.log('通过自学改变');
}
}
4. 导入方式
1. 通用导入方式
// 1. 通用的导入方式,三种暴露方式都可以用
// 引入 m1.js 模块内容
import * as m1 from './js/m1.js';
// 引入 m2.js 模块内容
import * as m2 from './js/m2.js'
// 引入 m3.js 模块内容
import * as m3 from './js/m3.js';
2. 解构赋值导入
// 2. 解构赋值形式
import { school, teach } from './js/m1.js'
// 重名了,使用别名
import { school as B, study } from './js/m2.js'
// 固定写法,default as B ,给 default 起别名为 B ,不能直接使用 default
import { default as d } from './js/m3.js';
3. 简便形式:针对默认暴露
// 3. 简便形式:针对默认暴露
import m3 from './js/m3.js';