JavaScript ES6新特性_html-js-css

JavaScript ES6带来了新的语法和特性，使得代码更加的现代和可读。它包括许多重要功能，如箭头函数、模板字符串、解构赋值等等。

const 和 let

const 是 ES6 中用于声明变量的新关键字。const 比 var 强大。一旦使用，变量就不能重新分配。换句话说，它声明的是一个只读的常量。

这对于定位选择器非常有用。例如，当我们有一个触发事件的按钮时，或者当您想在JavaScript中选择HTML元素时，请使用const而不是var。

	// ES5
	var btn = document.getElementById("btn");
	
	// ES6
	const btn = document.getElementById("btn");

在上面的代码中，const不会更改，也不能重新分配。如果尝试给它一个新值，它将返回一个错误。

{
  let a = 0;
  a   // 0
}
a   // 报错 ReferenceError: a is not defined

let和var的区别在于 let 是在代码块内有效，var 是在全局范围内有效。

箭头函数

箭头函数使代码更可读、更结构化，并且看起来更加时髦。

function myFunc(name){
	console.log('Hello '+ name);
}
myFunc('World');

使用箭头函数替代上述代码

const myFunc = name => {
	console.log(`Hello ${name}`);
}
myFunc('World');

// 没有参数的写法
const myFunc = () => {
	console.log(`Hello World`);
}

模板字符串

模板字符串的产生使我们在进行字符串和变量拼接时不需要使用 “+” 号来实现。

传统写法

var name = 'World'
console.log('Hello ' + name);

ES6 写法

let name = 'World'
console.log(`Hello ${name}`);

新写法使用了 `` 用来替代引号， ${} 中放置变量名。这使得代码更有条理和结构性。

默认参数

php 中可以在函数中定义默认参数，ES6中也引入了这一特性。因此，当您忘记写入参数时，它不会返回未定义的错误，因为该参数已定义默认值。

const myFunc = (name) => {
	console.log(`Hello ${name}`);
}
myFunc(); // 输出 Hello undefined

定义默认参数

const myFunc = (name='World') => {
	console.log(`Hello ${name}`);
}
myFunc(); // 输出 Hello World

解构赋值

结构赋值使数组或对象的值更容易分配给新变量。

数组 Array 的解构

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

对象模型 Object 的解构

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

Import 和 export

字面意义为 “导入” 和 “导出” ，在任何JS MVC框架中（类似 vue 项目）它们大多数时候都使用导入和导出来处理组件。

示例可参考：https://blog.csdn.net/weixin_43930421/article/details/124745006

Promise 对象

Promise 是一种编写异步代码的方法。例如，当我们想从API获取数据时，或者当我们有一个需要花费时间才能执行的函数时，可以使用它。简言之，Promise 是异步编程的一种解决方案。

const myPromise = () => {
	return new Promise((resolve, reject)=>{
		resolve('Hello Promise');
	})
}
console.log(myPromise());

以上打印结果返回的是一个 Promise 对象，fulfilled 代表的是已成功的状态，Promise 异步 *** 作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步 *** 作的结果，任何其他 *** 作都无法改变这个状态。

使用 then 方法处理数据。

const myPromise = new Promise(function(resolve,reject){
  resolve('Hello Promise');
});
 
myPromise.then((value)=>{
  console.log(value);
});

rest 参数和扩展运算符

rest参数（形如 “…变量名” ）用于获取数组的参数，并返回一个新数组，可替代函数arguments变量。

function restFunc(...a){
	console.log(a);
}
restFunc('325', 222); // ['325', 222]

扩展运算符是三个点(…)，好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列。

function restFunc(...a){
	console.log(a);
	
}
restFunc(...['325',222]); // ['325', 222]

可用于合并数组

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

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

Class 类

类是面向对象编程（OOP）的核心。在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。

class MyClass{
	constructor(a) {
        this.a = a;
		console.log('Hello Class')
    }
}
	
new MyClass();

更多新特性可查阅：https://www.runoob.com/w3cnote/es6-tutorial.html

欢迎分享，转载请注明来源：内存溢出

JavaScript ES6新特性