专栏首页达达前端【一起来烧脑】入门ES6体系

【一起来烧脑】入门ES6体系

为什么要学习ES6 掌握ES3、ES5、ES6的联系和区别

快速入门ES6

学会快速构建ES6的编译环境

学习ES6:

  1. 常量
  2. 作用域
  3. 箭头函数
  4. 默认参数
  5. 对象代理
git
git clone https://github.com/cucygh/es6-webpack.git
cd es6-webpack && npm install

npm i
npm i webpack -g
npm i webpack-dev-server -g

npm start

image.png

touch src/const.js 创建文件

常量

// ES5 中常量的写法

Object.defineProperty(window, "PI2", {
    value: 3.1415926,
    writable: false,
})

console.log(window.PI2)

// ES6 的常量写法

const PI = 3.1415926
console.log(PI)

// PI = 4

作用域

// ES5 中作用域
const callbacks = []
for (var i = 0; i <= 2; i++) {
    callbacks[i] = function() {
        return i * 2
    }
}

console.table([
    callbacks[0](),
    callbacks[1](),
    callbacks[2](),
])

const callbacks2 = []
for (let j = 0; j <= 2; j++) {
    callbacks2[j] = function() {
        return j * 2
    }
}

console.table([
    callbacks2[0](),
    callbacks2[1](),
    callbacks2[2](),
])
;((function() {
    const foo = function() {
        return 1
    }
    console.log("foo()===1", foo() === 1)
    ;((function() {
        const foo = function() {
            return 2
        }
        console.log("foo()===2", foo() === 2)
    })())
})())

{
    function foo() {
        return 1
    }

    console.log("foo()===1", foo() === 1)
    {
        function foo() {
            return 2
        }

        console.log("foo()===2", foo() === 2)
    }
    console.log("foo()===1", foo() === 1)
}

箭头函数

function a(){ ()=> {
}}
/* eslint-disable */

{
  // ES3,ES5
  var evens = [1, 2, 3, 4, 5];
  var odds = evens.map(function(v) {
    return v + 1
  });
  console.log(evens, odds);
};
{
  // ES6
  let evens = [1, 2, 3, 4, 5];
  let odds = evens.map(v => v + 1);
  console.log(evens, odds);
} {
  // ES3,ES5
  var factory = function() {
    this.a = 'a';
    this.b = 'b';
    this.c = {
      a: 'a+',
      b: function() {
        return this.a
      }
    }
  }

  console.log(new factory().c.b());
// a+
};

{
  var factory = function() {
    this.a = 'a';
    this.b = 'b';
    this.c = {
      a: 'a+',
      b: () => {
        return this.a
      }
    }
  }
  console.log(new factory().c.b());
// a
}

默认参数

image.png

/* eslint-disable */

{
  // ES5\ES3 默认参数的写法
  function f(x, y, z) {
    if (y === undefined) {
      y = 7;
    }
    if (z === undefined) {
      z = 42
    }
    return x + y + z
  }
  console.log(f(1, 3));
} {
  // ES6 默认参数
  function f(x, y = 7, z = 42) {
    return x + y + z
  }
  console.log(f(1, 3));
} {
  function checkParameter() {
    throw new Error('can\'t be empty')
  }
  function f(x = checkParameter(), y = 7, z = 42) {
    return x + y + z
  }
  console.log(f(1));
  try {
    f()
  } catch (e) {
    console.log(e);
  } finally {}
} {
  // ES3,ES5 可变参数
  function f() {
    var a = Array.prototype.slice.call(arguments);
    var sum = 0;
    a.forEach(function(item) {
      sum += item * 1;
    })
    return sum
  }
  console.log(f(1, 2, 3, 6));
} {
  // ES6 可变参数
  function f(...a) {
    var sum = 0;
    a.forEach(item => {
      sum += item * 1
    });
    return sum
  }
  console.log(f(1, 2, 3, 6));
} {
  // ES5 合并数组
  var params = ['hello', true, 7];
  var other = [1, 2].concat(params);
  console.log(other);
} {
  // ES6 利用扩展运算符合并数组
  var params = ['hello', true, 7];
  var other = [
    1, 2, ...params
  ];
  console.log(other);
}

对象代理

/* eslint-disable */
{
  // ES3,ES5 数据保护
  var Person = function() {
    var data = {
      name: 'es3',
      sex: 'male',
      age: 15
    }
    this.get = function(key) {
      return data[key]
    }
    this.set = function(key, value) {
      if (key !== 'sex') {
        data[key] = value
      }
    }
  }

  // 声明一个实例
  var person = new Person();
  // 读取
  console.table({name: person.get('name'), sex: person.get('sex'), age: person.get('age')});
  // 修改
  person.set('name', 'es3-cname');
  console.table({name: person.get('name'), sex: person.get('sex'), age: person.get('age')});
  person.set('sex', 'female');
  console.table({name: person.get('name'), sex: person.get('sex'), age: person.get('age')});
} {
  // ES5
  var Person = {
    name: 'es5',
    age: 15
  };

  Object.defineProperty(Person, 'sex', {
    writable: false,
    value: 'male'
  });

  console.table({name: Person.name, age: Person.age, sex: Person.sex});
  Person.name = 'es5-cname';
  console.table({name: Person.name, age: Person.age, sex: Person.sex});
  try {
    Person.sex = 'female';
    console.table({name: Person.name, age: Person.age, sex: Person.sex});
  } catch (e) {
    console.log(e);
  }
} {
  // ES6
  let Person = {
    name: 'es6',
    sex: 'male',
    age: 15
  };

  let person = new Proxy(Person, {
    get(target, key) {
      return target[key]
    },
    set(target,key,value){
      if(key!=='sex'){
        target[key]=value;
      }
    }
  });

  console.table({
    name:person.name,
    sex:person.sex,
    age:person.age
  });

  try {
    person.sex='female';
  } catch (e) {
    console.log(e);
  } finally {

  }

}

依次输出0到9

for (let i = 0; i < 10; i++) {
   func.push(function() {
       console.log(i)
   })
}

箭头有哪些新特点?

不需要function关键字来创建函数 省略return关键字 继承当前上下文的 this 关键字


请点赞!因为你们的赞同/鼓励是我写作的最大动力!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 全栈开发工程师微信小程序-下

    WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

    达达前端
  • 小程序笔记篇

    豆瓣top250的数据https://api.douban.com/v2/movie/top250

    达达前端
  • 【一起来烧脑】一步学会TypeScript入门

    字符串新特性 变量和参数新特性 函数新特性 匿名函数 for of循环 TypeScript语言中的面向对象特性

    达达前端
  • 学会这几个JS知识点,面试包你通过

    “ 关注 前端开发社区 ,回复 '领取资源',免费领取Vue,小程序,Node Js,前端开发用的插件以及面试视频等学习资料,让我们一起学习,一起进步

    前端老道
  • WordPress记住评论用户信息的js版本,直接操作cookie无视缓存

    这两天一直在折腾博客的评论功能,原因是开启了百度云加速的 html 缓存,导致原有的记住评论者信息的功能失效了,每次刷新文章页面,用户信息都会清空。 于是就折腾...

    张戈
  • CVE-2020-9484:Tomcat Session 反序列化复现

    Apache Tomcat 是一个开放源代码、运行servlet和JSP Web应用软件的基于Java的Web应用软件容器。

    Timeline Sec
  • 详解Android沉浸式实现兼容解决办法

    自android5.0开始,沉浸式状态栏似乎成为一种潮流,应用里缺少沉浸式总感觉少些什么。于是乎,我开始到处找如何兼容低版本的沉浸式,由于Android平台跨度...

    砸漏
  • TreeView结合UpdatePanel使用时,SelectedNodeStyle不生效的解决方案

    在某些时候,使用UpdatePanel可以极大的提升开发效率并且获得比较好的用户体验,尤其是做SharePoint开发时。老早就看过MSDN上申明UpdateP...

    雪雁-心莱科技
  • Recon-ng 信息收集框架

    https://bitbucket.org/LaNMaSteR53/recon-ng/overview

    意大利的猫
  • ES6之模版字符串

      但是我们可以看到:这样的传统做法需要使用大量的“”(双引号)和 + 来拼接才能得到我们需要的模版。但是这样是十分不方便的。

    吴裕超

扫码关注云+社区

领取腾讯云代金券