1. let 关键字
let 关键字用来声明变量,使用 let 声明的变量有几个特点:
- 不允许重复声明
- 块儿级作用域
- 不存在变量提升
- 不影响作用域链
// let 声明变量
// console.log(a); //error: Cannot access 'a' before initialization
let a = 10;
// let a = false; // error: Identifier 'a' has already been declared
if (true) {
let b = 10;
}
// console.log(b); // error:b is not defined
for (let index = 0; index < 10; index++) {}
// console.log(index); // error: index is not defined
应用场景:以后声明变量使用 let 就对了
2. const 关键字
const 关键字用来声明常量,const 声明有以下特点
-
声明必须赋初始值
-
标识符一般为大写
-
不允许重复声明
-
值不允许修改
-
块儿级作用域
// const 定义常量 // 1.不会变量提升 // console.log(a); // error Cannot access 'a' before initialization // 2.必须有初始值 const a = 10; // 3.基本类型的值不能修改 // a = false; // error: 基本类型的值不能修改 // 4.块级作用域 // 5.不能重复声明 if (true) { const x = 'hello world'; } // console.log(x); // error: x is not defined for (const index = 0; index < 10; index++) { // const w = 10; // 重复定义 } // 引用类型 const obj = { name: 'admin', age: 18, }; obj.name = '张三'; obj.height = 1.83; const arr = [1, 2, 3, 4, 5, 6]; arr[0] = 10; console.log(obj, arr);
注意: 对象属性修改和数组元素变化不会触发 const 错误
应用场景:声明对象、数组类型、以及常量时使用 const,非对象类型声明选择 let
3. 变量的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构赋值
//数组的解构赋值:将数组中的元素安装顺序取出来,通过=赋默认值
const arr = ['张学友', '刘德华', '黎明', '郭富城'];
const [one, two, three, four, five = '没有这个人'] = arr;
console.log(one, two, three, four, five);
// 对象的解构赋值:通过属性名进行解构赋值,=默认值
const lin = {
name: '林志颖',
tags: ['车手', '歌手', '小旋风', '演员'],
};
const { tags, name, age = 18 } = lin;
console.log(tags, name, age);
//复杂解构
const wangfei = {
name: '王菲',
age: 18,
songs: ['红豆', '流年', '暧昧', '传奇'],
history: [{ name: '窦唯' }, { name: '李亚鹏' }, { name: '谢霆锋' }],
};
let {
songs: [one, two, three],
history: [first, second, third],
} = wangfei;
注意:频繁使用对象方法、数组元素,就可以使用解构赋值形式
4. 模板字符串
模板字符串(template string)是增强版的字符串,用反引号(`)标识,特点:
- 字符串中可以出现换行符
- 可以使用 ${xxx} 形式输出变量
// 定义字符串
let str = `<ul>
<li>沈腾</li>
<li>玛丽</li>
<li>魏翔</li>
<li>艾伦</li>
</ul>`; // 变量拼接
let star = '王宁';
let result = `${star}在前几年离开了开心麻花`;
注意:当遇到字符串与变量拼接的情况使用模板字符串
5. 简化对象写法
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁
let name = '网星软件';
let slogon = '永远追求行业更高标准’;
let improve = function () {
console.log('可以提高你的技能');
}
//属性和方法简写
let atguigu = {
name, slogon, improve, change() {
console.log('可以改变你')
}
};
注意:对象简写形式简化了代码,所以以后用简写就对了
6. 箭头函数
ES6 允许使用「箭头」(=>)定义函数
箭头函数的注意点:
- 如果形参只有一个,则小括号可以省略
- 函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的执行结果
- 箭头函数 this 指向声明时所在作用域下 this 的值
- 箭头函数不能作为构造函数实例化
- 不能使用 arguments
// 1. 通用写法
let fn = (arg1, arg2, arg3) => {
return arg1 + arg2 + arg3;
}; // 2. 省略小括号的情况
let fn2 = (num) => {
return num * 10;
}; // 3. 省略花括号的情况
let fn3 = (score) => score * 20; // 4. this 指向声明时所在作用域中 this 的值
let fn4 = () => {
console.log(this);
};
let school = {
name: '网星软件',
getName() {
let fn5 = () => {
console.log(this);
};
fn5();
},
};
注意:箭头函数不会更改 this 指向,用来指定回调函数会非常合适
7. rest 参数
ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments
/**
* 作用与 arguments 类似
*/
function add(...args) {
console.log(args);
}
add(1, 2, 3, 4, 5);
/**
* rest 参数必须是最后一个形参
*/
function minus(a, b, ...args) {
console.log(a, b, args);
}
minus(100, 1, 2, 3, 4, 5, 19);
注意:rest 参数非常适合不定个数参数函数的场景
8. spread 扩展运算符
扩展运算符(spread)也是三个点(…)
spread 运算符|扩展运算符|三点运算符
// 展开数组
let tfboys = ['德玛西亚之力', '德玛西亚之翼', '德玛西亚皇子'];
function fn() {
console.log(arguments);
}
fn(...tfboys); // 展开对象
let skillOne = {
q: '致命打击',
};
let skillTwo = {
w: '勇气',
};
let skillThree = {
e: '审判',
};
let skillFour = {
r: '德玛西亚正义',
};
let gailun = { ...skillOne, ...skillTwo, ...skillThree, ...skillFour };