ES6语法总结
一.环境搭建(这个环境自动编译es6语法,并且页面自动会刷新)
1.执行下面三条命名(采用的是ssh安装)
git clone [email protected]:huanggengzhong/es6-webpack.git
cnpm i
cnpm i webpack -g
cnpm i webpack-dev-server -g
npm start
安装成功后,自动会打开如下页面:
测试es6模块语法:
上述代码浏览器自动打印:
二.export和import模块语法
在ES6标准中，javascript原生支持module了。将不同功能的代码分别写在不同文件中，各模块只需导出(export)公共接口部分，然后在需要使用的地方通过模块的导入(import)就可以了.
案例:
1.上面可以看出，export命令除了输出变量，还可以输出函数，甚至是类;
2.修改变量名:此时我们不喜欢type这个变量名，因为它有可能重名，所以我们需要修改一下它的变量名。在es6中可以用as实现一键换名。
代码演示如下:
//index.js
import animal, { say, type as animalType } from './src/test.js'
let says = say()
console.log(`The ${animalType} says ${says} to ${animal}`)
//结果一致,打印:The dog says Hello to A cat
3.整体加载:
除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
通常星号*结合as一起使用比较合适。
代码操作如下:
//index.js
import animal, * as content from './src/test.js'
let says = content.say()
console.log(`The ${content.type} says ${says} to ${animal}`)
//结果一致,打印:The dog says Hello to A cat
三.const和let
1.const常量:定义了就无法修改,原理代码如下
常量const的原理:是Object对象里有有一个defineProperty方法(这个方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。)这个方法是有三个参数,第一个是写window,第二个是自己定义的属性名,第三个参数是写自己要求的属性特性,在第三个参数里定义了value值,另外还有一个属性是writable写了false,因为这个writable的只读属性起了作用,导致定义了就无法修改.
另外,defineProperty方法介绍传送门:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
四.数组和对象的扩展运算符:…arr/{…obj}
1.数组:可以快速打印数组的各个元素,可以快速进行数组合并;
2.对象:不能直接打印对象的值,但是可以快速合并对象
五.数组的Set方法:快速的数组去重
思路:new一个Set方法,把数组丢进去,返回一个去重后的Set对象,然后用去重后的Set对象丢进数组的扩展运算符里,可以快速的将数组去重.
(下面的要好好复习)