es6的8条新特性总结

简介: es6的8条新特性总结

es6的8条新特性总结

ES6(ECMAScript 2015)是JavaScript的新版本,引入了许多新特性和语法。下面是一些ES6的新特性以及示例的总结:


1.块级作用域变量(let和const)

let和const关键字可以用来声明块级作用域变量,使得变量只在当前作用域内有效。


eg1:

{
  let x = 1;
  const y = 2;
  console.log(x); // 1
  console.log(y); // 2
}
console.log(x); // ReferenceError: x is not defined
console.log(y); // ReferenceError: y is not defined



2.箭头函数

箭头函数是一种新的函数声明方式,可以更简洁地定义函数。

eg2:

const add = (x, y) => x + y;
console.log(add(1, 2)); // 3
let a = ()=>{
      alert(1);
    }
a();


3.模板字符串

模板字符串可以用来更方便地拼接字符串。

eg3:

const name = "孙悟空";
console.log(`Hello, ${name}!`); // Hello, 孙悟空!

4.解构赋值

解构赋值可以用来快速地从数组或对象中提取值并赋给变量。

eg4:

const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c); // 1 2 3
const obj = {x: 1, y: 2, z: 3};
const {x, y, z} = obj;
console.log(x, y, z); // 1 2 3

5.默认参数

函数可以设置默认参数,当调用函数时没有传入该参数时,会使用默认值。

eg5:

const greet = (name = "World") => `Hello, ${name}!`;
console.log(greet()); // Hello, World!
console.log(greet("Alice")); // Hello, Alice!


6. 扩展运算符

扩展运算符可以用来将数组或对象展开成一系列参数。

eg6:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]
const obj1 = {x: 1, y: 2};
const obj2 = {z: 3};
const obj3 = {...obj1, ...obj2};
console.log(obj3); // {x: 1, y: 2, z: 3}

7. 类和继承

ES6引入了class关键字来定义类和继承关系。

eg7:

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}
class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}
const d = new Dog("Rex");
d.speak(); // Rex barks.


8.Promise

Promise是一种新的异步编程方式,可以更方便地处理异步操作,解决地狱回调非常好用。

eg8:

const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms));
wait(1000).then(() => console.log("1 second passed."));

resolved [成功后调用]

rejected [失败后调用]

Promise的状态只有这 2 种, 且一个 promise 对象只能改变一次

写法

const promise = new Promise((resolve, reject) => {
          setTimeout(function() {
            var data = {
              retCode: 0,
              msg: '啊哈'
            };
            // 接口返回的数据
            if (data.retCode == 0) { //如果状态为0则成功
              // 接口请求成功时调用
              resolve(data);
            } else { //状态不为0则失败
              // 接口请求失败时调用
              reject({
                retCode: -1,
                msg: '略略略'
              });
            }
          }, 100);
        });
        promise.then(data => {
          // 从 resolve 获取正常结果
          console.log(data);
        }).catch(data => {
          // 从 reject 获取异常结果
          console.log(data);
        });

以上是ES6的一些新特性和小demo,它们可以使JavaScript代码更简洁、易读和易维护。

相关文章
|
6月前
|
JavaScript 前端开发 开发者
ES6的常用新特性17条
ES6,也称为ECMAScript 2015,是JavaScript语言的一个重大更新,它引入了许多新的语法特性。以下是ES6的一些主要语法
|
4天前
|
前端开发
ES6 中常用的新特性
ES6 中常用的新特性
|
3月前
|
JavaScript 前端开发
ES6新特性(一)
ES6新特性(一)
|
3月前
|
JavaScript 前端开发
ES6新特性(二)
ES6新特性(二)
|
6月前
|
JavaScript 前端开发 开发者
es6的新特性
es6的新特性
55 7
|
存储 JavaScript 前端开发
ES6新特性
ES6新增特性详细内容
|
JavaScript 前端开发 网络架构
关于ES6新特性的总结 1
关于ES6新特性的总结
53 0
|
6月前
|
前端开发
ES6 部分新特性使用
ES6 部分新特性使用
36 0
|
JavaScript 前端开发 开发者
ES6 新特性
这是每个前端开发者都应该掌握的技能。ES6是JavaScript的一个重要的版本升级,它带来了许多新特性和语法糖,让我们的代码更加简洁高效。无论你是新手还是有经验的开发者,掌握ES6都会让你的编码变得更加愉快和高效。那么,让我们开始吧!
|
前端开发
关于ES6新特性的总结 2
关于ES6新特性的总结
40 0