下面是详细的讲解：

把JavaScript代码改成ES6语法不完全指南(分享)

1. ES6的背景

为了更好地适应当前Web应用程序开发的需求，JavaScript语言在ES6（ECMAScript 2015）版本中添加了很多新的特性。这些特性可以让代码更加简洁，更加易于阅读和维护。

1.1 let和const声明变量

在ES6之前，JavaScript中只有var关键字用于声明变量，而ES6中添加了let和const关键字。它们可以在块级作用域内声明变量，并且能够有效地避免变量提升的问题。

// ES5中
var num1 = 10;
{
  var num1 = 20;
}
console.log(num1); // 输出 20

// ES6中
let num2 = 10;
{
  let num2 = 20;
}
console.log(num2); // 输出 10

这里，当我们在块级作用域内使用let声明变量时，在该作用域外部的变量不会受到影响。

1.2 模板字面量

在ES6中，我们可以通过模板字面量来优雅地完成字符串的拼接。通过使用反引号“``”，我们可以将变量、表达式或者函数调用插入到字符串中。

// ES5中
var str1 = 'Hello, ' + name + '!';
console.log(str1); // 输出 “Hello, world!”

// ES6中
let str2 = `Hello, ${name}!`;
console.log(str2); // 输出 “Hello, world!”

模板字面量在做字符串拼接时，不仅可以减少代码量，还可以更加方便和可读。

2. 如何将ES5代码转换为ES6

下面我们将介绍如何将一些常见的ES5代码转换为ES6。

2.1 使用let和const声明变量

在ES6中，我们可以使用let和const关键字来声明变量。这可以避免变量提升的问题，同时还能将变量范围确定在块级作用域内。

// ES5中
var x = 10;
var y = 20;

// ES6中
let x = 10;
const y = 20;

2.2 使用箭头函数

在ES6中，我们可以使用箭头函数来代替传统的函数定义方式。箭头函数不仅看起来更加简洁，还可以有效地避免this指向问题。

// ES5中
var add = function(x, y) {
  return x + y;
};

// ES6中
let add = (x, y) => x + y;

2.3 使用模板字面量

在ES6中，我们可以使用模板字面量来完成字符串拼接。

// ES5中
var name = 'world';
var str1 = 'Hello, ' + name + '!';

// ES6中
let name = 'world';
let str2 = `Hello, ${name}!`;

2.4 使用拓展运算符

在ES6中，我们可以使用拓展运算符（...）对数组进行展开。这可以使代码更加简洁，同时还有利于对数组进行合并和切分等操作。

// ES5中
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = arr1.concat(arr2);

// ES6中
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];

在上面的例子中，我们可以看到，使用拓展运算符可以将两个数组合并到一起。

2.5 使用解构赋值

在ES6中，我们可以使用解构赋值语法从数组或者对象中提取值并赋值给变量。这可以使代码更加简洁，同时还有利于对数组和对象进行快速访问。

// ES5中
var obj = { x: 1, y: 2 };
var x = obj.x;
var y = obj.y;

// ES6中
let obj = { x: 1, y: 2 };
let { x, y } = obj;

在上面的例子中，我们可以看到，使用解构赋值语法可以将对象中的值快速赋值给变量，避免冗长的代码。

总结

在本文中，我们介绍了ES6语法中的一些常见特性，并且演示了如何将ES5代码转化为ES6代码。当然，这里介绍的只是ES6语法的一部分，ES6还提供了很多其他的新特性，例如：类、Promise等。为了更好地适应Web应用程序开发的需求，我们应该尽早地开始学习和使用ES6。