ES6常量和变量关键字
- ES6定义变量
let num;
let num = 666;
注意点:
ES6开始新增了一种作用域, 叫做代码块
通过let定义的变量受到代码块的限制, 只能在所属的作用域中使用
使用var定义变量会预解析,但是let定义变量不会预解析
//ES6代码块
{
const num = 888;
}
console.log(num);//报错,访问不到代码块内部变量
- 定义常量
const num = xxx;
注意点:
1.常量不能修改
2.常量必须在定义的同时初始化
3.常量的指向不能改变, 但是指向内存中保存的数据可以改变
const arr = [1,3];
// arr = [2,4]; //数组的指向不能改变
arr[0] = 666; //数组内部元素可以更改
arr.push(777);
ES6字符串模板
- ES6中新增一种字符串模板的方法
需求: 要求从服务器获取到数据之后, 根据数据渲染界面
//ES6之前需要做字符串拼接
var obj = {
name: "lnj",
age: 13,
gender: "male",
say: function () {
return "hello world";
}
};
//之前需要进行字符串拼接
var str = "<li>"+obj.name+"</li><li>"+obj.age+"</li><li>"+obj.gender+"</li>";
//ES6之后不需要字符串拼接,使用字符串模板
var str = `
<li>${obj.name}</li>
<li>${obj.age}</li>
<li>${obj.say()}</li>
`;
var oUl = document.querySelector("ul");
oUl.innerHTML = str;
字符串新增方法
- includes()方法
includes()判断是否包含指定的字符串,存在返回true
var str = "http://www.it666.com/images/lnj.mp4";
//includes()判断是否包含指定的字符串,存在返回true
//存在兼容性问题
let res = str.includes("it");
console.log(res);
- startsWith()方法
判断字符串是否以指定字符串开头 - endsWith()方法
判断字符串是否以指定字符串结尾
var res1 = str.startsWith("http://");
console.log(res1);
var res2 = str.endsWith(".mp4");
console.log(res2);
ES6解构语法
解构数组
- 数组解构方法
var arr = [1, 3, 5];
// 解构数组会依次将数组中的内容赋值给等号左边[]中的变量
let [a, b, c] = arr;
console.log(a,b,c);
注意点:
如果等号右边的数组和等号左边的内容不对等, 那么没有的就是undefined
let [a,b,c] = [1,3];
console.log(a, b, c);
- 在ES6解构数组的时候, 可以指定默认值
//在指定默认值后,解构时候不重新赋值,就是默认值
let [num1 = 777,num2,num3] = [,2,3];
console.log(num1);//777
console.log(num2);//2
console.log(num3);//3
解构对象
let obj = {
name: "lnj",
age: 13
};
// 会将对象中和属性名称和解构中变量名称一致的赋值给解构的变量
//找不到对应的变量名称就不打印
let {name,age} = obj;
console.log(name, age);
//解构的同时也可以指定默认值
let {name,age, score = 58} = obj;
console.log(name,age,score);
- 解构对象应用
- 利用解构对象传参
let obj = { name: "lnj", age: 13 }; //利用解构对象传参 function say({name,age}) { console.log(name, age); } say(obj);
ES6函数默认参数
- ES6开始函数的参数可以直接指定默认值
function say(name = "wjh",age = -1) {
console.log(name, age);
}
say();
- 应用场景:
某一个函数的某些参数永远都是一些固定的值,
获取用于都是通过其它函数获得的, 那么就可以使用默认参数
function Car(id) {
this.id = id;
}
function createCar(id = getRandom()) {
return new Car(id);
}
function getRandom() {
return Math.random() * 10000;
}
ES6可变参数
- 可变参数必须在参数列表的最后
function sum(...ags) {
var sum = 0;
for (let i = 0, len = ags.length; i < len; i++){
sum += ags[i];
}
//可变参数本质就是一个数组保存传入的参数
console.log(ags);
return sum;
}
var res = sum(1,2,3,4);
console.log(res);
- 会将数组中的元素逐个取出来赋值给形参
//需求: 把数组中的元素逐个传入到函数中
function sum(a, b, c, d) {
return a + b + c + d;
}
var arr = [1 , 2, 3, 4];
// 可变参数会将数组中的元素逐个取出来赋值给形参
let res = sum(...arr);
console.log(res);
- 可变参数可以实现数组拼接
var arr1 = [1, 3, 5];
var arr2 = [2, 4, 6];
var res = [...arr1,...arr2];
console.log(res);
ES6箭头函数
- 箭头函数的格式
let 函数名称 = (形参列表) => {函数体} - 箭头函数作用:
简化代码
修改函数中的this指向
注意点:
如果函数体中只有一句代码, 那么{}可以省略
如果函数形参列表中只有一个形参, 那么()可以省略
如果函数体中只有一句代码, 并且是返回值, 那么return可以省略
//如果函数体中只有一句代码, 那么{}可以省略
let say = () => console.log("haha");
say();
// 如果函数形参列表中只有一个形参, 那么()可以省略
let say = name => {
console.log(name);
};
say("jiajia");
//如果函数体中只有一句代码, 并且是返回值, 那么return可以省略
let sum = (a,b) => {
return a + b;
};
let sum = (a,b) => a + b;
var res= sum(110,20);
console.log(res);
- 利用箭头函数解决this指向问题
/*
1.由于Person构造函数也是一个函数, 所以也会开启一个作用域
2.由于箭头函数是在Person构造函数的作用域中定义的, 所以数据Person构造函数作用域
3.箭头函数也是一个函数, 所以也会开启一个作用域
4.在箭头函数中使用this时, 会从所在的作用域链的上一层继承this
应用场景:
1. 让setTimeout/setInterval中的this变为我们想要的this
*/
function Student() {
setInterval(() => {
// 2. ES6的箭头函数中, 没有this这个概念
// 它会从所在的作用域链的上一层继承this
console.log(this);
},1000);
}
var stu = new Student();
// 注意点:
// 箭头函数中不能使用arguments
let test = () => {
console.log(arguments);
};
test(1, 3, 5);
ES6增加对象字面量
- 在ES6中,如果对象中的key和value相同,可以省略,只写一个变量名称
function createPerson(name, age) {
var obj = {
// name: name,
// age: age,
// say: function () {
// console.log(this.name, this.age);
// }
name,
age,
//函数可以省略function
say() {
console.log(this.name, this.age);
}
};
return obj;
}
var p = createPerson("zq", 34);
console.log(p);
p.say();
ES6中的类
- ES6开始提供了一个关键字, 专门用于定义类
class
// 代表定义一个名称叫做Person的类, 将来可以通过这个类创建对象
//定义一个Person类
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("zq",77);
p.say();
Person.eat();
ES6对象继承
- ES6中新增的继承方法
1.在子类后面添加extends 类名
2.利用super将父类的属性传递给子类
//定义父类
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
say(){
console.log(this.name, this.age);
}
}
// 定义子类
// 在子类后面添加extends 父类名
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 stu = new Student("wjh",19,23.4);
stu.eat();
stu.say();
