【Js高级——ES6] ES6介绍、搭建环境、变量声明、解构赋值

目录

一、ECMAScript 6简介

二、babel 搭建ES6环境

1.初始化项目：npm init -y

2.安装babel

3.创建src、dist目录

4.配置babel

三、变量声明let、const

var方法声明变量：

let方法声明变量：

const声明变量：

四、symbol定义对象的唯一属性名

五、解构赋值

数组解构

对象解构

字符串解构

数字解构

布尔解构

 参数结构

---

一、ECMAScript 6简介

ES6全称ECMAScript 6，ES6是javaScript语言的下一代标准，ES6和JavaScript的关系换句话说，如果JavaScript是一门语言的话，那么ES6就是JavaScript的语法。其使得JavaScript可以用来编写复杂的大型应用程序，成为企业级开发语言。

ES6是一个泛指，指在ES5之后的JavaScript语言标准，包括了ES2015、ES2016......等，ES2015是正式称呼，特指该年发布的语言标准。

---

二、babel 搭建ES6环境

由于浏览器版本在发布的时间也许早于ES6的定稿和发布，如果使用ES6的新特性，浏览器没有对ES6的特性进行兼容，那么浏览器肯定无法识别ES6代码， 这就是浏览器对ES6的兼容性问题。

即使浏览器对ES6新特性开始渐渐支持，但是这还需要很长一段时间，我们不能百分百依赖浏览器本身对ES6的支持度来开发。

因为在浏览器中不识别ES6，所以我们就要将ES6转换为ES5.

---

• 需要安装node：可以去Node.Js官网下载：https://nodejs.org
• 在node的使用中，使用npm下载安装包；安装使用英文路径
• （LTS）：长期稳定版；项目开发一般会选择长期稳定版,根据项目所需，自行选择。
• （Current）：最新版;可以用于自己体验新版本功能，但最新版可能会出现未知bug

进度条不动或速度过慢可以配置镜像站：

在终端输入命令：

淘宝镜像地址：

npm config set registry http://registry.npmmirror.com/   或npm config set registry http://registry.npm.taobao.org/

---

1.初始化项目：npm init -y

2.安装babel

//本地安装babel-cli及对应转化规则
npm install --save-dev babel-cli babel-preset-es2015

3.创建src、dist目录

src目录：存放编写的ES6代码文件；dist目录：存放由编写的ES6代码转化后的代码文件；

4.配置babel

新建.babelrc文件（文件名、后缀不要加别的东西，就这个）

.babelrc文件内输入内容

//配置转化代码的规则集
{
  "presets": ["es2015"]
}

babel基本用法：

在src目录里建立一个文件写入代码

---

之后在终端输入：

//单个文件转码
node_modules/.bin/babel src/1-0.js --out-file dist/1-0.js
//或
node_modules/.bin/babel src/1-0.js -o dist/1-0.js
//src/文件名
//将要转码的目标文件
//dist/文件名
//转码后的输出文件

例：

---

整个目录转码：

终端输入：

//整个目录转码
node_modules/.bin/babel src --out-dir dist
//或 
node_modules/.bin/babel src -d dist
//src、dist是之前建立的目录

整个src目录里所有文件转码到dist目录

---

每次修改文件都需要在终端输入这么长的代码过于麻烦；

所有可以配置package.json文件，启动脚本

在scripts中加入三条

  "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1",

//监听1-0.js文件，一旦发生变化就执行babel转译
"dev":"babel src/1-0.js -w -o dist/1-0.js",

//将1-0.js文件转译到指定位置
"build":"babel src/1-0.js -o dist/1-0.js",

//将src目录下转译到dist目录
"buildall":"babel src -w -d dist"
},
//1-0.js是文件名转译哪个更换哪个；复制的话，之后把注释删掉，json文件不能这样注释

在终端输入npm run 脚本名

脚本启动后，修改文件，在等待几秒或失去焦距后，

终端出现change src/1-0.js，转码完成，dist中文件也完成修改。

---

三、变量声明let、const

在ES6之前大部分声明变量使用var，

var方法声明变量：

• var方法在全局声明，就是全局变量；在函数方法内声明就是局部变量；
• var 存在变量提升；var 声明变量可以先赋值后声明；存在预解析
• var 可以重复声明

---

let方法声明变量：

• let只在声明的块级作用域内有效
• let在同一块级作用域内不允许重复声明，在ES6中新增了块级作用域：只要是花括号，就是一个作用域。
• 暂时性死区

let a = 90;
if(true){
    console.log(a);
    let a = 20;
}
console.log(a);

//暂时性死区：进入if，if里面存在let，并且if(){}形成一个作用域，但是let没有变量提升效果，所以if里面的 console.log(a);就会报错，导致程序停止执行

//let在同一作用域声明同一变量会直接句法报错

//在不同作用域可以声明同一名称的变量，但不建议这样做，容易自己搞混。

---

const声明变量：

const 大部分与let相似

不同点：

• const 声明时必须赋值
• const 不能重复赋值，值不可改变
• 所以const用来声明不变的常量

---

四、symbol定义对象的唯一属性名

创建对象时为了避免属性名容易冲突，为了确保键名的唯一性，ES6引入了symbol

定义对象的唯一属性名

//sybol返回的值是唯一的，独一无二的，与括号内无关
let a1=Symbol('11');
let a2=Symbol('22');
let a3=Symbol('11');
console.log(a1,a2,a3);
console.log(a1===a3);
//加[],不加[]是定义自变量
let obj={[a1]:1,[a2]:2,[a3]:3};
console.log(obj);
//添加属性
Object.defineProperty(obj,'name',{value:123123})
console.log(obj.name);

//Symbol.for()
//Symbol.for()会查找曾经有没有使用过Symbol.for()，第二次会返回之前的值
//Symbol.for()返回的，与上面的不一样
var b1 =Symbol.for('name')
var b2 =Symbol.for('name')
var b3 =Symbol('name')
    console.log(b1 === b2);
    console.log(b1 === b3);

//symbol声名字符串常量，唯一性，不可改变
const user = Symbol('nick')
console.log(user);

Symbol.for()会查找曾经有没有使用过Symbol.for()，第二次会返回之前的值，但与之前的不一样

---

五、解构赋值

解构赋值针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

ES6中只要是可以循环迭代的都可以进行数组的解构赋值

数组解构

"... 运算符"：三点运算符扩展数组的元素，其中需要零个或多个参数。

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

---

对象解构

• 对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
• 如果变量与属性不同名，需要先匹配属性名，在定义变量。
• 左边定义的变量名与右边对象的属性名相同时

//对象-1
let obj = {a:1,b:2}
// let {a,b} = obj;
let c,d;
({a:c,b:d} = obj);
console.log(c,d)

//对象-2
function fn(){
	return {
		name:'Nick',
		nameList:[
			{name:'Jack'},
			{name:'Rose'}
		]
	}
}

let data = fn();
// console.log(data)
let {name,nameList:list} = data;
// let name1 =data['name']
// let list1 = data['nameList'];
console.log(name)
console.log(list)

---

字符串解构

//字符串-1
let str = 'abcde';
let [a1,...b1] = str;
console.log(a1,b1)

---

数字解构

//数字解构-1
let a = 123;
let {toString:b} = a;
console.log(a, b,Number.prototype.toString);
console.log(b === Number.prototype.toString);

---

布尔解构

//布尔解构-1
let bool = true;
let {toString:c} = bool
console.log(bool.toString())
console.log(bool, c,Boolean.prototype.toString);
console.log(c === Boolean.prototype.toString);

console.log(b === c)

---

 参数结构

//参数结构 -1

function fn([a,b,c]=[2,3,4]){
	console.log(a,b,c)
}

fn([1,2,3]);
fn()

function fn2({a,b,c}={a:2,b:3,c:4}){
	console.log(a,b,c)
}

fn2({a:1,b:2,c:3});
fn2()

---