ES详解

发布时间:2023-05-22

一、变量

在ES中,使用var / let / const定义变量。其中,var是定义变量的一种方式,它有着很多缺陷。let语句声明一个块级作用域的本地变量,var语句声明一个函数作用域的或全局作用域的变量。 例如:

var a = 1;
if(true){
  var a = 5;
}
console.log(a);

上述代码输出结果为5,因为var定义的变量作用域的范围是函数或全局作用域,if块中的a对函数外面的a产生了影响。 而let没有这个问题,它定义的变量只在它声明的块中有效。例如:

let a = 1;
if(true){
   let a = 5;
}
console.log(a);

上述代码输出结果为1。

二、箭头函数

ES6中引入了箭头函数,它可以让我们写出更加简洁的匿名函数。例如:

var arr = [1, 2, 3, 4, 5, 6];
// 普通函数写法
arr = arr.map(function(item) {
    return item * 2;
});
console.log(arr);
// 箭头函数写法
arr = arr.map((item) => item * 2);
console.log(arr);

箭头函数使用匿名函数的形式,如上述代码中的(item) => item * 2,代表输入参数是item,输出结果是item * 2。

三、解构

ES6中引入了解构,它可以让我们更加方便地获取数组或对象中的值。例如:

let arr = [1, 2, 3];
// 解构数组
let [a, b, c] = arr;
console.log(a, b, c);
let obj = {name: 'John', age: 18};
// 解构对象
let {name, age} = obj;
console.log(name, age);

上述代码中,使用数组解构可以快速获取数组中的元素,使用对象解构可以快速获取对象中的键值对。

四、Promise

ES6中引入了Promise,它可以让我们更加方便地管理异步操作。例如:

function myPromise() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('success');
        }, 2000);
    });
}
myPromise().then(result => console.log(result));

上述代码中,myPromise函数返回一个Promise对象,我们可以使用.then方法来获取异步操作的结果。在2秒钟后,Promise对象会返回一个成功的结果'success'。

五、模板字符串

ES6中引入了模板字符串,可以方便地处理字符串拼接操作。例如:

let name = 'John';
let age = 18;
let str1 = name + ' is ' + age + ' years old.';
let str2 = `${name} is ${age} years old.`;
console.log(str1);
console.log(str2);

模板字符串使用${}来引用变量,可以使代码更加清晰易懂。