当前位置：网站首页>ES6基础语法

ES6基础语法

2022-08-05 05:13:00 【@前端攻城狮】

1、块作用域构造let和const

let声明

使用let声明的变量的作用域限制在当前代码块中：

//函数内部
function changeState(flag) {
    
    if(flag){
    
        let color = "red";
    }
    else{
    
        console.log(color); //此处不能访问color(color is not defined)
        return null;
    }
}

//块中
{
    
    let a=1;
}
console.log("a =" + a); //此处报错：a is not defined

//for循环中
for(let i=0; i < 10; i++){
    }
console.log("i = " + i); //报错：i is not defined

不能使用 let 在同一作用域下声明已经声明过的变量：

var index = 0;
var index = 10;
let index = 100; //Identifier 'index' has already been declared

var a = 0;
{
    
    let a = 10; //OK
}

const声明

const用于声明常量，在声明的同时必须初始化：

const num = 10; //OK

//错误
const a;
a = 10;

在同一作用域下用 const 声明已经存在的标识符会导致语法错误，无论该标识符是使用var还是let声明。

使用 const 声明的对象，其本身的绑定不能修改，但对象的属性和值是可以修改的：

const person = {
    
    name: "zhangsan"
};

person.name = "lisi"; //OK
person.age = 20; //OK

//错误，Assignment to constant variable.
person = {
    
    name: "wang"
};

全局块作用域绑定

在全局作用域中使用var声明的变量或对象，将作为浏览器环境中的window对象的属性，这意味着var很可能会覆盖一个已存在的全局属性。例如:

<head>
	<script>
		var greeting = "Welcome";
		console.log(window.greeting); //Welcome
		console.log(window.Screen); //function Screen() { [native code] }
		var Screen = "liquid crystal";
		console.log(window.Screen); //liquid crystal
	</script>
</head>

如果在全局作用域下使用 let 或 const ，则不会成为window对象的属性。如下：

<script>
	let greeting = "Welcome";
	console.log(window.greeting); //undefined
	const Screen = "something";
	console.log(Screen === window.Screen); //false
</script>

2、模板字面量

多行字符串

模板字面量的基础语法就是用反引号（`）来替换字符串的单、双引号。例如：

let message = `Hello World`;

这时变量的值与普通的字符串并无差异。
使用模板字面量语法，可以很方便实现多行字符串的创建。如果需要在字符串中添加新行，直接换行即可：

let msg = `Hello
World`;
console.log(msg);

输出结果：

Hello
World

在反引号中的所有空白字符（包括但不限于空格、换行、制表符）都属于字符串的一部分。

字符串占位符

在模板字面量中，可以将变量或JS表达式嵌入占位符中作为字符串的一部分输出。
占位符语法为${…}，花括号中间可包含变量或表达式：

let name = "zhangsan";
let msg = `Hello, ${
       name } `;
console.log(msg); //Hello,zhangsan

let amout = 5;
let price = 6;
let total = `The total price is ${
       price * amout }`;
console.log(total); //The total price is 30

模板字面量本身也是JS表达式，因此可在一个模板字面量中嵌入另一个模板字面量。如：

let name = "lisi";
let msg = `Hello, ${
       `my name is ${
         name }`}`;
console.log(msg); //Hello, my name is lisi

3、默认参数

可以直接在参数列表中为形参指定默认值。如：

function makeRedirect(url = "/home", timeout = 2000)
{
	//函数的其余部分
}

如果调用时不传入任何参数，则使用默认值，若传入一个参数，则第一个参数不使用默认值，其余参数使用默认值，依此类推。

4、rest参数

在参数名前加三个点（…），就表明这是一个rest参数，用于获取函数的多余参数。所以rest参数是一个数组，包含自它之后传入的所有参数，通过这个数组名可以访问里面的参数。如：

function calculate(op, ...data) {}

rest 参数（data）包含的是op之后传入的所有参数。
要注意，每个函数最多只能声明一个rest参数，并且它只能是最后一个参数。例如，下面是错误的：

//语法错误
function calculate(op, ...data, last) {}

5、展开运算符

展开运算符也是三个点（…），它可以将一个数组转换为各个独立的参数，也可用于取出对象的所有可遍历属性，而rest参数是让你指定多个独立的参数，并通过整合后的数组访问。例如：

function sum(a, b, c) {
	return a + b + c;
}
let arr = [1, 2, 3];
sum(...arr);

展开运算符（…）提取数组arr中的各个值并传入sum函数中。
展开运算符可用来复制数组，例如：

let arr1 = [1, 2, 3];
let arr2 = arr1; //arr2与arr1是同一个数组对象
let arr3 = [...arr1]; //arr3与arr1是两个不同的数组对象

arr1[0] = 4;
console.log(arr2[0]); //4
console.log(arr3[0]); //1

展开运算符还可以取出对象的所有可遍历属性，复制到当前对象中。如：

let book = {
    
	title: "Vue.js 从入门到实战",
	price: 98
}

let bookDetail = {
    ...book, desc: "a fine book"}
console.log(bookDetail); //{ title: 'Vue.js从入门到实战', price: 98, desc: 'a fine book' }

6、对象字面量语法扩展

属性初始值的简写

当一个对象的属性与本地变量同名时，可以不用写冒号和值，简单地只写属性名即可：

function createCar(color, doors) {
    
	return {
    
		//有同名的参数，只写属性名即可
		color, //color: color
		doors //doors: doors
	}
}

let name = "zhang";
let age = 18;
// 有同名的本地变量，只写属性名即可
let person = {
     name, age };

对象方法的简写语法

ES6中定义对象方法时可以省略冒号和function关键字：

let car = {
    
	color: "red",
	doors: 4,
	showColor() {
     //ES5及更早版本必须这样定义： showColor: function(){}
		console.log(this.color);
	}
}
console.log(car.showColor.name); //showColor

可计算的属性名

在JS中，访问对象的属性可通过点号或者方括号，如果属性名包含了特殊字符或中文，或者需要计算得到属性名，则只能使用方括号：

let suffix = "name";
let person = {
    };
person["first name"] = "san"; //属性名中有空格
person["last " + suffix] = "zhang"; //属性名由表达式计算得到
person.age = 10; //常规属性
console.log(person); //{'first name': 'san', 'last name': 'zhang', age: 10 }

可在对象字面量中使用可计算的属性名：

let suffix = "name";
let person = {
    
	["first " + suffix] : "san",
	["last " + suffix]: "zhang",
	age: 10
}
console.log(person); //{'first name': 'san', 'last name': 'zhang', age: 10 }

7、解构赋值

对象解构

对象解构的语法形式是在赋值操作符的左边放置一个对象字面量：

let book = {
    
	title: "Vue.js从入门到实战",
	id: "123",
	price: 98
}
let {
    title, id, price} = book;
console.log(title); //Vue.js从入门到实战
console.log(id); //123
console.log(price); //98

以上title、id、price都是本地声明的变量。

如果变量已经声明过，之后想要用解构语法给变量赋值，需要用圆括号包裹整个解构赋值语句：

let book ={
    
	title: "Vue",
	id: "123",
	price: 99
}
let title, id, price;
{
    title, id, price} = book; //语法错误
({
    title, id, price} = book); //OK

JS引擎将一对开放的花括号视为一个代码块，而语法规定，代码块语句不允许出现在赋值语句的左侧，添加圆括号可以将块语句转化为一个表达式。

整个解构赋值表达式的值与表达式右侧（即"="右侧）的值相等，这样，可以给变量赋值的同时向函数传参：

let book = {
    
	title: "Vue",
	id: 123,
	price: 98
}
let title, id;
function outputBookInfo(book) {
    
	console.log(book);
}
// 给title、id变量赋值后，因解构表达式的值是“=”右侧的值，
// 所以此处向outputBookInfo()函数传递的参数是book对象
outputBookInfo({
    title, id} = book);
console.log(title); //Vue
console.log(id); //123

使用解构赋值表达式时，如果指定的局部变量名称在对象中不存在，那么这个局部变量会被赋值为 undefined，这时可为该变量定义一个默认值，在变量名后添加一个等号和默认值：

let book = {
    
	title: "Vue",
	id: "123",
	price: 98
}
let {
     title, id, other = 0 } = book;
console.log(title); //Vue
console.log(id); //123
console.log(other); //0

如果希望在使用解构赋值时，使用与对象属性名不同的局部变量名字，可以采用“属性名：局部变量名”的语法形式：

let book = {
    
	title: "Vue",
	id: "123",
	price: 98
}
let {
    title: bookTitle, id: bookId} = book;
console.log(bookTitle); //Vue
console.log(bookId); //123

title: bookTitle语法的含义是：读取名为title的属性并将其值存储到变量bookTitle中。

对于嵌套的对象如何通过解构语法来提取值呢？看下面的代码：

let book = {
    
	title: "Vue.js从入门到实战",
	isbn: "1234",
	price: 98,
	category: {
    
		id: 1,
		name: "Web前端"
	}
}

// let {category: {name}} = book; //局部变量名为name
let {
    title, isbn, category: {
    name: category}} = book;
console.log(title); //Vue.js从入门到实战
console.log(isbn); //1234
console.log(category); //Web前端

其中 category: {name: category} 的含义是：在找到book对象的category属性后，继续深入下一层（即到category对象中）查找name属性，并将其值赋给category局部变量。

展开运算符可以和对象解构结合使用：

let person = {
    
	name: '张三',
	age: 18
}
let {
    ...newObject} = person;
let {
    anotherObject} = person;
let {
    name, age, gendar} = {
    ...person, gendar: '男'};
console.log(newObject); //{ name: '张三', age: 18 }
console.log(anotherObject); //undefined
console.log(name); //张三
console.log(gendar); //男

数组解构

数组解构使用方括号：

let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a); //1
console.log(b); //2
console.log(c); //3

如果要获取指定位置的数组元素值，可以只为该位置元素提供变量名。例如：

let arr = [1, 2, 3];
let [, , c] = arr;
console.log(c); //3

对于组数解构，为已经声明过的变量进行数组解构赋值时，不需要使用圆括号包裹解构赋值语句：

let arr = [1, 2, 3];
let a, b, c;
[a, b, c] = arr; //OK

嵌套数组解构如下：

let categories = ["C/C++", ["Vue", "React"], "Java"];
let [language1, [, language2]] = categories;
console.log(language1); // C/C++
console.log(language2); // React

可以将展开运算符和数组解构结合使用：

let arr = [1, 2, 3];
let [a, ...others] = arr;
let [...newArr] = arr;
console.log(a); // 1
console.log(others); //[2, 3]
console.log(others[0]) //2
console.log(newArr); //[1, 2, 3]

8、箭头函数

箭头函数的语法

单一参数、函数体只有一条语句的箭头函数：

let welcome = msg => msg;
/*相当于 function welcome(msg) { return msg; } */
console.log(welcome("Hello")); //Hello

如果函数有多于一个参数，则需要为参数添加括号：

let welcome = (user, msg) => `${
      user}, ${
      msg}`;
/*相当于 function welcome(user, msg) { return user + ", " + msg; } */
console.log(welcome("zhang", "Hello")); //zhang, Hello

如果函数没有参数，则需要使用一对空圆括号：

let welcome = () => "welcome you";
/*相当于 function welcome(){ return "welcome you"; } */
console.log(welcome()); //welcome you

如果函数体有多条语句，则需要用花括号包裹函数体：

let add = (a, b) => {
    
	let c = a + b;
	return c;
}
/*相当于 function add(a, b) { let c = a + b; return c; } */
console.log(add(1, 2)); //3

如果要创建一个空函数，则需要写一对空圆括号代表参数部分，一对空花括号代表空函数体：

let emptyFunction = () => {
    };
/*相当于 function emptyFunction(){} */

如果箭头函数返回的是一个对象字面量，则需要将字面量包裹在圆括号中：

let createCar = (color, doors) => ({
    color: color, doors: doors})；
/*相当于 function createCar(color, doors) { return { color: color, doors: doors } } */
console.log(createCar("black", 4)); //{ color: 'black', doors: 4 }

箭头函数可以和对象解构结合使用：

let personInfo = ({
     name, age}) => `${
      name}'s age is ${
      age} years old`;
/*相当于 function personInfo({name, age}) { return `${name}'s age is ${age} years old`; } */
let person = {
    name: "zhangsan", age: 18};
console.log(personInfo(person)); //zhangsan's age is 18 years old

箭头函数与this

JS中的 this 的指向可以改变：

var greeting = "Welcome";
function sayHello(user) {
    
	alert(this.greeting + ", " + user);
}
var obj = {
    
	greeting: "Hello",
	sayHello: sayHello
}
sayHello("zhangsan"); //Welcome, zhangsan
obj.sayHello("lisi"); //Hello, lisi
var sayHi = obj.sayHello;
sayHi("wangwu"); //Welcome, wangwu

根据当前的执行上下文，调用sayHello和sayHi的对象是window对象。

为了解决 this 指向的问题，可以使用函数对象的 bind() 方法，将 this 明确地绑定到某个对象上：

var sayHi = obj.sayHello.bind(obj);

箭头函数与this：

var obj = {
    
	greeting: "Hello",
	sayHello: function(){
    
		setTimeout((function(){
    
			alert(this.greeting);
		}).bind(this), 2000);
//等同于
var obj = {
    
	greeting: "Hello",
	sayHello: function() {
    
		setTimeout(() => alert(this.greeting), 2000);
	}
}