常變量關鍵字
- 定義變量,常量
//不會覆蓋, 并且不允許重復定義
//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();
