常变量关键字
- 定义变量,常量
//不会覆盖, 并且不允许重复定义
//let定义的变量不会预解析
console.log(num);
let num;
const num = 666;
- ES6开始新增了一种作用域, 叫做代码块
- 通过let定义的变量受到代码块的限制, 只能在所属的作用域中使用
- 注意点:
- 常量不能修改
- 常量必须在定义的时候初始化
- 常量的指向不能改变,但指向内存中的数据可以改变
const arr = [1, 2];
//arr = [2, 4]; //报错
arr[0] = 666;
arr.push(777);
console.log(arr); //666,2,777
字符串模板
- 添加字符串
var str = `
<li>${obj.name}</li>
<li>${obj.age}</li>
<li>${obj.say()}</li>
`
oUl.innerHTML = str;
- 新增字符串想关方法
var str = "www.hate996.com";
var res1 = str.includes("996");
var res2 = str.startsWith("www");
var res3 = str.endsWith("com");
解构数组和对象
数组
- 依次将数组中的内容赋值给等号左边[]中的变量
var arr = [1, 2, 3];
//a=1, b=2, c=3
let [a, b, c] = arr;
- 如果等号右边的数组和等号左边的内容不对等,没有的就是undefined
//a=undefined,b=2,c=undefined
let [a, b, c] = [, 3, ];
- 解构数组的时候,可以指定默认值
//a=666,b=2,c=undefined
let [a=666, b, c] = [, 2, ];
对象
- 会将对象中和属性名称和解构中变量名称一致的赋值给解构的变量
let obj = {
name: "yz",
age: 18
};
<!--name=yz,age=18,gender="male"-->
let{name, age, gender="male"} = obj;
- 应用场景
//简化代码
let obj = {
name: "yz",
age: 18
};
say(obj);
function say({name, age}){
console.log(name, age);
}
- 高级使用
var arr = [
{name:"yz", age:18},
{name:"zx", age:15},
{name:"zx", age:10},
];
let [{name},{age}] = arr;
//name=yz,age=15
console.log(name, age);
函数的默认参数
function sat(name = "yz", age = -1){
console.log(name, age);
}
<!--name=yz,age=-1-->
say();
- 应用场景
某一个函数的某些参数永远都是一些固定的值,获取用于都是通过其它函数获得的,那么就可以使用默认参数
function Car(id){
this.id = id;
}
function creatCar(id = getRandom()){
return new Car(id);
}
function getRandom(){
return Math.random() * 10000;
}
var c1 = creatCar();
console.log(c1);
扩展运算符
- 可变参数的注意点:可变参数必须在参数列表的最后
function sum(a, ...ags){
//a=10,ages=arr(2)
console.log(a, ags);
var sum = 0;
for(var i = 0, len = ags.length; i < len; i++){
sum += ags[i];
}
return sum;
}
//50
console.log(sum(10, 20, 30));
- 会将数组中的元素逐个取出来赋值给形参
var arr = [1, 2, 3, 4, 5];
var res = sum(...arr);
console.log(res); //15
function sum(...ags){
var sum = 0;
for(var i = 0, len = ags.length; i < len; i++){
sum += ags[i];
}
return sum;
}
- 合并数组
var arr1 = [1, 3, 5];
var arr2 = [2, 4, 6];
//ES6之前:
//var res = arr1.concat(arr2);
var res = [...arr1, ...arr2];
//[1, 2, 3, 4, 5, 6]
console.log(res);
箭头函数
- 格式:
- let 函数名称 = (形参列表) => {函数体}
- 作用:简化代码,修改函数中的this
- 注意点:
- 如果函数体中只有一句代码, 那么{}可以省略
- 如果函数形参列表中只有一个形参, 那么()可以省略
- 如果函数体中只有一句代码, 并且是返回值,那么return可以省略
let say1 = () => console.log("hello");
let say2 = name => console.log(name);
let num = (a, b) => a + b;
this
- ES6没有this这个概念,会从所在的作用域链的上一层继承this
- 应用场景:让setTimeout/setInterval中的this变为我们想要的this
//ES6之前
setTimeout(function () {
console.log(this);// window
}, 1000);
//ES6之后
setTimeout(()=>{
console.log(this); // Person
}, 1000);
function Student() {
this.age = 666;
// this.say = function () {
// // 谁调用就是谁
// // 可以被call/apply/bind方法修改
// console.log(this);
// }
this.say = ()=>{
// 从上一级的作用域继承
// 不可以被call/apply/bind方法修改
// 因为箭头函数自己没有this
// 因为箭头函数中的this只看定义, 不看调用
console.log(this);
}
}
var stu = new Student();
stu.say();
// stu.say.call({name:"zs"});
- 箭头函数中不能使用arguments
let test = () => console.log(arguments);
test(1, 3, 5);//报错
增加对象字面量
function creatPerson(name, age){
var obj = {
name,
age,
say(){
console.log(name, age);
}
}
return obj;
}
var p = creatPerson("yz", 18);
p.say();
ES6的类
- ES6开始提供了一个关键字, 专门用于定义类 class
class Person{
// 构造函数, 创建对象时系统会默认执行
constructor(name, age){
this.name = name;
this.age = age;
}
say(){
console.log(this.name, this.age);
}
static eat(){
console.log("吃饭");
}
}
let p = new Person("zx", 18);
p.say();
p.eat();
ES6的继承
- 在子类后面添加extends 类名
class Person{
constructor(name, age){
this.name = name;
this.age = age;
}
say(){
console.log(this.name, this.age)
}
}
class Student extends Person{
constructor(name, age, score){
//利用super将父类的属性传递给父类
super(name, age);
this.score = score;
}
eat(){
console.log("吃饭");
}
//在ES6中,可以重写父类的方法
say(){
console.log(this.name, this.age, this.score);
}
}
let s = new Student("zx", 18, 99);
s.eat();
s.say();
