1：
先去nodejs官网下载nodejs:https://nodejs.org/zh-cn/download/
安装完nodejs之后
安装git
安装完Git后，应该在Git Bash里执行如下语句：
git clone https://www.github.com/cucygh/es6-webpack.git
克隆完后 cd es6-webpack
执行：npm install
等待安装完成
执行：npm start
2:ES6常量
使用bash 创建文件 touch src/const.js
Object.defineProperty(window,"PI2",{
value:3.1415926,
writable: false, //ES5写法 不可写，只能读
})
console.log(window.PI2);
//ES6
const PI = 3.1415926;
PI = 5;
console.log(PI);
3：作用域
// ES6 作用域
var callbacks = [];
for(var i =0 ;i<=2 ;i++)
{
callbacks[i] = function() {
return i*2;
}
}
console.table([
callbacks[0](),
callbacks[1](),
callbacks[2](), //所有的值都是6 闭包
])
闭包复习：
闭包：是指有权访问另一个函数作用域中变量的函数.
var callbacks2 = [];
for(let j =0 ;j<=2 ;j++)
{
callbacks[j] = function() {
return j*2;
}
}
console.table([
callbacks[0](), //0,2 ,4
callbacks[1](),
callbacks[2](),
])
使用let声明的变量块作用域,每循环一次相当于重新生成一个块作用域。
我们在ES5中为了使用块作用域一般使用匿名函数
;(function(){
const foo = function(){
return 1;
}
console.log("foo ===1",foo() === 1)
//匿名函数是作用域隔离所以不会报错
;(function(){
const foo = function(){
return 2;
}
console.log("foo ===2",foo() === 2)
})()
})()//作用域
//ES6作用域
//ES6 使用作用域
{
const name="name";
console.log(name);
{
const name = "diaomaoshou";
console.log(name);
}
}
4：箭头函数
ES5中函数声明 function(){} =>ES6 ()=>{} ;//箭头函数 ()当只有一个参数的时候可以不写，
{}//当里面直接返回的时候{}括号也可以不写
ES6 使用map遍历 let adds = events.map(v => v+1)
ES5 var adds = events.map(function(v){return v+1;})
普通函数this->调用次函数的对象，箭头函数this->arguments()里面的参数，箭头函数this->定义的时候函数的指向;
{
function factory(){
this.a = "a";
this.b = "b";
this.c = {
a:"a++",
b:"b++",
c:()=>{
return this.a;
}
}
} console.log(new factory().c.c());//this->a;
}
5:默认参数
//ES5
function f(x,y,z) {
x = x||1;
y = y||2;
z = z|| 3;
return (x+y+z);
}
//
//console.log(f());
//ES6 默认参数
function fun(x=1,y=2,z=3){
return (x+y+z);
}
console.log(fun());
//检查参数 Error: 参数 can't 为空
function checkarguments(){
throw new Error("参数 can't 为空");
}
function fun(x=checkarguments(),y=2,z=3){
return (x+y+z);
}
console.log(fun(1));
try{
fun();
}
catch(e){
console.log(e);
}
finally{
}
//可变参数 arguemtns
*/ES6
function f(...a) {
var sum = 0;
a.forEach(item => {
sum += item * 1
});
return sum;
}
console.log(f(1, 2, 3, 6));
//ES5
function fun(){
//返回参数的和
var sum =0;
for(var i =0;i<arguments.length;i++)
sum+=arguments[i]*1;
return sum;
}
console.log(fun(1,2,3))
ES6扩展运算符（合并数组）
//ES6
var arr = [1,"name","object"];
var arr1 = [3,4,...arr];
console.log(arr1);
ES5
var arr = [1,"name","object"];
var arr1 = [3,4].concat(arr);
//console.log(arr1);
6：对象代理
//类似于c++ java 的私有成员，只能在内部访问，外部无法直接访问
{
//ES3保护数据
function Person(name,age,sex) {
var arr = {
name :name,
age : age,
sex: sex
}
this.set = function(key,value)
{
arr[key] = value;
}
this.get = function(key)
{
return arr[key];
}
}
//通过调用特定的API
var a = new Person("ES3","11","男");
console.log(a.get("name"));
{
//ES5来设置私有属性
var a = {
name:"ES5",
age :"18"
};
Object.defineProperty(a,"sex",{
writable:false,
value : "male"
});
try{
a.sex = "female";
}
catch(e){
console.log(e);
}
console.log(a);
{
//ES6使用代理的方法设置私有属性
let person = {
name : "ES6",
age : "18",
sex : "男"
}
//设置私有属性
let person = new proxy(person,{
get(target,key){
return target[key]
},
set(target,key,value){
if(key!=sex)
{
target[key] = value;
}
}
})
}
}
}