资讯专栏INFORMATION COLUMN

ES6 基础实践

go4it / 2259人阅读

摘要:基础实践和和的区别输出输出猜猜是否报错,以及输出什么常量模板字符串普通字符串我是一个好人多行字符串我还是可以换行的字符串猜猜的长度是多少猜猜是否相等插入变量张三你好,很高兴认识你,我是,我的性别是男,我今年岁,我想说李四延伸思考解构赋值数组

ES6 基础实践 let 和 const let 和 var 的区别

</>复制代码

  1. var a = 1;
  2. window.a; // 输出:1
  3. let b = 2;
  4. window.b; // 输出:undefined

</>复制代码

  1. {
  2. let a = 1;
  3. // let a = 2;
  4. var b = 2;
  5. }
  6. console.log(a);
  7. console.log(b);

</>复制代码

  1. let a = 1;
  2. {
  3. console.log(a);
  4. let a = 2;
  5. }

</>复制代码

  1. let i = "a";
  2. for(let i = 0; i < 10; i++){
  3. // let i = "b";
  4. console.log(i);
  5. }
  6. // 猜猜是否报错,以及输出什么
const 常量

</>复制代码

  1. const a = [1,2,3];
  2. const b = a;
  3. const c = [1,2,3];
模板字符串 普通字符串

</>复制代码

  1. `我是一个好人`
多行字符串

</>复制代码

  1. console.log(`我还是可以
  2. 换行的字符串`);

</>复制代码

  1. let a = `1
  2. 2
  3. 3
  4. 4`;
  5. a.length //猜猜a的长度是多少?
  6. let b = "1
  7. 2
  8. 3
  9. 4";
  10. a === b //猜猜是否相等?
插入变量

</>复制代码

  1. let name = "张三";
  2. let age = 12;
  3. function say(name){
  4. return "你好,很高兴认识你," + name;
  5. }
  6. console.log(`我是${name},我的性别是:${ "男" },我今年 ${ age * 2 }岁,我想说: ${ say("李四") }`);
延伸思考

</>复制代码

  1. let a = "abc";
  2. let b = new String("abc");
  3. a == b?
  4. a === b?
解构赋值 数组解构

let a = 1, b = 2, c = 3;

let [a, b, c] = [1, 2, 3];

let [a, ...b] = [1, 2, 3, 4];

let [a = 1] = [2];

let [a = 1] = [null];

let [a = 1] = [undefined];

let [a] = [null];

let [a] = [];

对象解构

let {a, b} = {a: 1, b: 2 };

let {a : newA, b: newB} = {a: 1, b: 2 };

let {a = 1} = {};

let {a = 1} = {a:2};

</>复制代码

  1. 1、先两句一起执行:
  2. let a = 1;
  3. {a} = {a: 2}
  4. 2、分开一条一条执行
  5. let a = 1;
  6. {a} = {a: 2}
  7. 3、反过来执行
  8. {a} = {a: 2}
  9. let a = 1;
  10. a ?
  11. window.a ?
  12. 上面的a 和 window.a 各输出什么?

</>复制代码

  1. let a = 1;
  2. ({a} = {a: 2})
  3. 如果这样的两句一起执行呢?
数组和对象解构?

用途

交换变量的值

</>复制代码

  1. let a = 1;
  2. let b = 2;
  3. [a, b] = [b, a];

从函数返回多个值

</>复制代码

  1. function example() {
  2. return [1, 2, 3];
  3. }
  4. let [a, b, c] = example();

</>复制代码

  1. function example() {
  2. return {
  3. a: 1,
  4. b: 2
  5. };
  6. }
  7. let {a, b} = example();

函数参数的定义

</>复制代码

  1. function example([a, b, c]) {
  2. console.log(a, b, c);
  3. }
  4. example([1, 2, 3]);

提取JSON数据

</>复制代码

  1. let myDataList = {
  2. name: "张三",
  3. sex: "男",
  4. age: "24"
  5. };
  6. let { name, sex, age} = myDataList;

函数参数的默认值

</>复制代码

  1. let throwMyErr = (errName) => {
  2. throw new Error(`请传入参数 ${errName}`);
  3. }
  4. let example = (name = throwMyErr("name")) => {
  5. console.log(name);
  6. }
箭头函数

</>复制代码

  1. let example = x => x * 2;

</>复制代码

  1. let myObj = {
  2. funA : function(){
  3. setTimeout(function(){
  4. console.log(this);
  5. }, 500);
  6. }
  7. }
  8. let myObj = {
  9. funA : function(){
  10. setTimeout(() => {
  11. console.log(this);
  12. }, 500);
  13. }
  14. }
class和extends

</>复制代码

  1. function SayHellowES5 (){
  2. this.name = "SARS";
  3. }
  4. SayHellowES5.prototype.say = function () {
  5. console.log(this.name);
  6. };

</>复制代码

  1. class SayHellow {
  2. constructor() {
  3. this.name = "SARS";
  4. }
  5. say(){
  6. console.log(this.name);
  7. }
  8. }
  9. typeof SayHellow
  10. SayHellow === SayHellow.prototype.constructor

</>复制代码

  1. var a = new SayHellow();
  2. a === SayHellow ?
  3. a.constructor === SayHellow ?

</>复制代码

  1. var b = new SayHellow();
  2. a.__proto__ === b.__proto__ ?
  3. 原型是否相等?

</>复制代码

  1. b.__proto__.say2 = function(){
  2. alert("say2");
  3. }
  4. a.say2() ?
  5. 思考 this 到底指的哪?原型呢?同样下面的继承是否也一样?
  6. (确认下节课内容)

</>复制代码

  1. class SayBey extends SayHellow{
  2. sayBey(){
  3. console.log("beybey!");
  4. }
  5. }

</>复制代码

  1. class toBey extends SayHellow{
  2. sayBey(){
  3. console.log(`${this.name} beybey!`);
  4. }
  5. }

</>复制代码

  1. class toBey2 extends SayHellow{
  2. constructor() {
  3. this.sex = "女";
  4. }
  5. sayBey(){
  6. console.log(`${this.sex} beybey!`);
  7. }
  8. }
  9. //想想为什么报错?
模块化 export import 导出模块

</>复制代码

  1. export let myLetA = 1;
  2. export let myLetB = 2;
  3. export let example = () => {
  4. alert("SARS");
  5. }

</>复制代码

  1. let myLetA = 1;
  2. let myLetB = 2;
  3. let example = () => {
  4. alert("SARS");
  5. }
  6. export {myLetA, myLetB, example as name};

</>复制代码

  1. // 正确
  2. var a = 1;
  3. export default a;
  4. // 错误
  5. export default var a = 1;
导入模块

</>复制代码

  1. import {myLetA, myLetB, example as name} from "./main";
  2. import SARS from "./main";

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82140.html

相关文章

  • 【译】前端练级攻略

    摘要:由于系统变得越来越复杂,人们提出了称为预处理器和后处理器的工具来管理复杂性。后处理器在由预处理器手写或编译后对应用更改。我之前建议的文章,,也涵盖了预处理器相关的知识。 译者:前端小智 原文:medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我记得我刚开始学习前端开发的时候。我看到了很多文章及...

    wuyumin 评论0 收藏0
  • 前端练级攻略(第二部分)

    摘要:是文档的一种表示结构。这些任务大部分都是基于它。这个实践的重点是把你在前端练级攻略第部分中学到的一些东西和结合起来。一旦你进入框架部分,你将更好地理解并使用它们。到目前为止,你一直在使用进行操作。它是在前端系统像今天这样复杂之前编写的。 本文是 前端练级攻略 第二部分,第一部分请看下面: 前端练级攻略(第一部分) 在第二部分,我们将重点学习 JavaScript 作为一种独立的语言,如...

    BWrong 评论0 收藏0
  • 学习ES6

    摘要:学习定稿有两年多的时间了,断断续续通过一些博客,书籍也学到了很多知识。将各个部分的知识整理成一篇篇博文,以便于自己系统掌握和复习。整个系列主要参考了的深入理解,可以看作是对这本书的一个学习总结,也向大家强烈推荐这本书作为的学习书籍。 学习es6 es6定稿有两年多的时间了,断断续续通过一些博客,书籍也学到了很多es6知识。可以说,es6给js语言带来了非常大的改进,引进了很多好用的特性...

    wpw 评论0 收藏0
  • 专治前端焦虑的学习方案

    摘要:不过今天我希望能够更进一步,不仅仅再抱怨现状,而是从我个人的角度来给出一个逐步深入学习生态圈的方案。最后,我还是想提到下对于的好的学习方法就是回顾参照各种各样的代码库,学习人家的用法与实践。 本文翻译自A-Study-Plan-To-Cure-JavaScript-Fatigue。笔者看到里面的几张配图着实漂亮,顺手翻译了一波。本文从属于笔者的Web Frontend Introduc...

    codeGoogle 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<