1. const let
使用var声明的函数和变量会被提升至作用域的最顶部,变量提升的规则:
- 变量声明会被提升
- 函数声明会使整个函数体提升到最顶部
console.log(name);
foo(); // 'foo'
var name = 'ian';
function foo(){
console.log('foo');
};
const 和 let是对var问题的补充和修复,使用const和let声明的变量不会提升
2. 模板字符串
- 模板字符串可以换行使用,空格也会被保留
- 模板字符串以${}占位符的形式使用变量,比变量拼接更好用
var student = 'ian';
var welcome = `hello, ${student}, i am your teacher,
welcole to school ! `;
consol.log(welocme);
模板字符串做函数参数的时候与普通的函数参数有所区别
const teacher = 'ian';
const student = 'tom';
function sayHello(stringTemplate, ...rest){
console.log(stringTemplate,rest);
};
sayHello `hello,${student},i am ${teacher},welcome!`
3. 箭头函数
箭头函数内的this指向上级作用域的this,也就是箭头函数本身所在的词法作用域的this
var name = 'globalName';
var user = {
name: 'ian',
age: 21,
test: function () {
function foo() {
console.log(this.name); //globalName
};
const bar = () => {
console.log(this.name); //age
};
foo();
bar();
}
};
user.test();
4. 解构赋值
4.1 数组的解构
var a, b;
var [a,b] = ['jack','tom','ian','lisa'];
console.log(a,b)//jack tom
//不借助临时变量进行值的交换
var c = 1,d=2;
[c,d]=[d,c];
console.log(c,d);//2 ,1
4.2对象的解构赋值
var user = { name: 'ian', age: 21, gender: 'male', phone: 1111111 };
var { name, age } = user;
console.log(name, age); //ian 21
5. 拓展运算符
5.1 基础使用
使用拓展运算符可以从对象或数组中获取部分参数,而剩下的部分可以通过…拓展运算符获取
//在数组中使用拓展运算符
var names = ['jack', 'tom', 'ian', 'lisa'];
var [student1, student2] = [student1, student2, ...rest] = names;
console.log(student1, student2, rest); //jack tom ['ian', 'lisa']
//在对象中使用拓展运算符、
var user = { name: 'ian', age: 21, gender: 'male', phone: 111111 };
var { name, age, ...rest } = user;
console.log(name, age, rest); //ian 21 {gender: 'male', phone: 111111}
5.2 使用拓展运算符合并数组/对象
var arr1 = ['a', 'b', 'c'];
var arr2 = [1, 2, 3];
var arrs = [...arr1, ...arr2, 4, 5];
console.log(arrs); //['a', 'b', 'c', 1, 2, 3, 4, 5]
var obj1 = { name: 'ian', age: 21 };
var obj2 = { gender: 'male', phone: 111111 };
var obj = { ...obj1, ...obj2, gender: 'female' };
console.log(obj); //{name: 'ian', age: 21, gender: 'female', phone: 111111}
数组在合并的时候按照从左往右的顺序,对象在合并的时候相同的属性会被后面的覆盖掉
6 函数的剩余参数和默认值
6.1 使用拓展运算符获取函数参数
// 使用arguments获取函数的全部参数
function add() {
var arrs = Array.slice.call(arguments);
let total = 0;
for (var i = 0; i < arrs.length, i++;) {
total += arr[i]
};
return total;
};
//使用拓展运算符获取函数参数
function add(...rest) {
console.log(rest.length)
let total = 0;
for (var i = 0; i < rest.length; i++) {
total += rest[i]
};
return total;
}
//使用拓展运算符获取函数的的剩余参数
function add(a, ...rest) {
};
6.2 函数的默认值
//es6之前给函数设置默认值
function welcome(name1, name2) {
name1 = name1 || 'jack';
name2 = name2 || 'rose';
console.log(`Hello, i am ${name1},welcome ${name2}`);
};
//使用es6给函数设置默认值
function welcome(name1 = 'jack', name2 = 'rose') {
console.log(`Hello, i am ${name1},welcome ${name2}`);
};
7. 对象属性简写
当对象属性的的key和value使用相同的变量名字时,value可以省略
//不使用简写
var name = 'name';
var age = 21;
var user = {
name: name,
age: age,
};
//使用简写
var user = {
name,
age,
};
8. 空值运算符
8.1 空值合并运算符
空值合并运算符由??组成,a??b a为空值(undefined或者null)的时候取b,否则取a的值
var a;
var b = 5;
var c = a ?? b; // c=5
console.log(undefined ?? 0); // 0
console.log(0 ?? 1);// 0
8.2 空值赋值运算符
当左侧为空值(null或者undefined)的时候才赋值
var a;
a ??= 2; //a =2
a ??=5; //a=2
9. Map、Set、WeakMap、WeapSet
待更新…
10. esm
待更新…
11. 可选链
待更新…
12.类和装饰器
待更新…