ES6 教程之基本语法

发布于 2021-12-14 12:56:04 字数 7698 浏览 1079 评论 0

let, const, forEach,for of
class, extends, super
arrow functions, template string,
destructuring, default,
rest arguments

以上是我们需要掌握的常用的 ES 新特性，一个一个的玩，不要怕,下面这段代码是模板，写完ES6可以直接跑在最新版 Chrom 浏览器上的，其他浏览器估计跑不起来。

<!DOCTYPE html>
<html lang="en">
 <head> 
 <meta charset="UTF-8"> 
 <title>Document</title>
 </head>
 <body> 
   <script>
  "use strict"
   //es6代码写这里，直接在浏览器运行，P5和P6为自定义的方法函数，用于打印log输出
  let count = 0;
   /**
   * 打印
   * @param  {[type]} name [description]
   * @return {[type]}    [description]
   */
  function p5(name = "") {
    console.log(count++ + "、ES5 console:" , arguments);
  }

  function p6(name = "") {
    console.log(count++ + "、ES6 console:" , arguments);
  }
   </script>
 </body>
 </html>

2.1 变量

玩一门新技术，最先玩的是哪里，对，跟我读，是变量，js 最大的坑是变量作用域，如果一个人够吊，他可以写出一堆变量作用域炸弹，让人不知不觉之间就看不懂代码了，恩对，这样的程序员就是不可替代的程序员，替换了，代码就爆炸了，那么言归正传。

2.1.1 let

我们来看一个老生常谈的话题，ES5 里面 js 变量作用域的坑：


function funA(){  
  for(var i = 0; i < 5; i++){
  
  }
  console.log(i);//不好意思，我从for循环里面出来了，我木有被干掉
}

我们再来看一下ES6的玩法


function funB(){
  for(let i = 0; i < 5; i++){

   }
   console.log(i);//undefined;我被限制在了作用域里面，无法动弹
}

以后大家写代码，尽量用let代替var就可以了，你会看到github或者你同事的电脑上面，一堆的let，不要惊讶，这是正确的，一个替代var的优雅的关键词let，你要记住它，俗话说有好处就有坏处，这是矛盾论，那么我们使用了let之后，需要注意哪些坑呢。

坑1：重复定义，var 两个一样的变量没事，后面的会覆盖前面的，而let同一个变量名字就挂了

function funC(){
  //坑1：重复定义
  let a = 1000;
   let a = 200;//Uncaught SyntaxError: Identifier 'a' has already been declared
   
   for(let i = 0; i < 5; i++){
  
  }
  console.log(i);//undefined;我被限制在了作用域里面，无法动弹
}

坑2：不要使用关键词做变量 let let = 2；

function funD(){
    let a = 1000;
    let let = 200;//Uncaught SyntaxError: let is disallowed as a lexically bound name
    
  }

2.1.2 const

玩过java的都知道，一般的静态变量，static final 的变量后续是不能被修改的，比如static final PI=3.14，后面再胆敢对PI进行任何的加减乘除，都是报错的，编译器都通不过，同样的，js缺少一个这种强制不让改变的关键词，这次const出来了,好处就是防止程序员手一抖嗦把不该改变的变量给改变了。

举个栗子先

 const A = 0;
 A = 2; //Uncaught TypeError: Assignment to constant variable.

当然和let一样，它也不能两次定义同一个变量

 const A = 0;
 const A; //Uncaught TypeError: Assignment to constant variable.

哈哈，此刻的我忽然脑洞大开，如果让let和const都声明一个变量，会怎么样尼。

  let A;
  A = 2;
  const A = 3;//Identifier 'A' has already been declare  
  const A ; //Missing initializer in const declaration
  const A = 2 ; //Uncaught TypeError: Assignment to constant variable.

自己感受下哈

2.2 for 循环


var words = "this is a world";
var arr = words.split(" ");

//es5: for each
for(var i=0; i<arr.length; i++){
  console.log(arr[i]);//缺点是遍历下标，优点是好歹还有个下标
}

//es6: for of

for(var i of words){
  console.log(arr[i]);//缺点是木有下标，优点是省去遍历下标
}

//es6: forEach
arr.forEach(n => console.log(n));

也有人说，用for in也可以循环，无论是老的es5还是新的es6，for in不建议用来遍历数组，因为遍历出来的结果可能会异常，比如遍历一个你认为是数组但是却不是数组的元素，就可能大批量的undefined，以后用for of即可。

2.3 解构

解构是个非常好玩的东西，你有个对象，有不同的key和value，那么就可以是用解构，快速的对应相应的结果，同样，解构也常用于数组。

[a, b] = [1, 2]
[a, b, ...rest] = [1, 2, 3, 4, 5]
{a, b} = {a:1, b:2}
{a, b, ...rest} = {a:1, b:2, c:3, d:4}  //ES7

{a, b} = {a:1, b:2}作为独立语法是非法的，左侧的{a, b}会被当成块结构而不是一个对象。

然而({a, b} = {a:1, b:2})的形式是允许的，其等价于var {a, b} = {a:1, b:2} 。

也许你还看不懂上面写的是个啥，没问题，我也看不懂，那么我们来一起看看这玩意是咩

2.3.1 解构数组

var arr = ["one", "two", "three"];

// 没有解构赋值
var one   = arr[0];
var two   = arr[1];
var three = arr[2];

// 解构赋值
var [one, two, three] = foo;

如上可以清晰的感觉到，一行代码就完成了以前三行代码的赋值，并且，我可以清晰的在自己的大脑以及别人的大脑中留下印象：原来one就是arr[0],...,但是这又有何用呢，我难道有一百个数组元素，我就弄一百个解构体来接吗？

你说的很对，没有必要，这个例子只是告诉你，神马是解构，下面我们来玩点ES5玩不了的，而ES6又特别特别方便的。

2.3.1.1 交换数组变量

var a = 1;
var b = 3;
console.log([a,b]);//[1, 3]

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

[a, b] = [b, a+b];
console.log([a,b]);//[1, 4]

/*
  //交换
  a = a^b ;
  b = a^b ; 
  a = a^b ;
  console.log(a,b);
*/

就这样，数组内的元素，悄无声息的，发生了互换/计算，比你冒泡、置换快多了，也比a = a^b ; b = a ^ b ; a = b ;这种交换方便阅读。

2.3.1.2 返回多个值

以前想返回多个值，我们得制作一个对象，然后返回出去，或者制造一个数组，返回上去。来看下新玩法

  function fun() {
    return [1, 2, 3];
  }
  
  //ES5我们还得用变量来接，然后再循环处理
  var arr = fun();
  p5(arr);//1，2，3
  
  a = arr[0];
  b = arr[1];
  p5(a,b);
  
  //ES6我们可以直接接住，并且兑到指定的单个变量中
  var [c,d,e] = fun();
  p6(c,d,e);
  var [f,,g,h] = fun();//解构可以空着~
  p6(f,g,h);//1,3,undefined
  var arr2 = fun();//es5的语法依然没问题
  p6(arr2);//1，2，3
  var [,,] = fun();//神马也不解构，也没问题的

当然，这些只是最最基础的部分，下面我们来搞点复杂的嵌套，这才有意思。

//解构全部
  var [a1,[a2,a3],a4] = [1,[2,3],4];
  p6([a1,[a2,a3],a4]);//[1,[2,3],4];
  
  //故意不解构全部 [a2]
  var [a1,[a2],a4] = [1,[2,3],4];
  p6([a1,[a2],a4]);//[1,[2],4];
  
  //弄个数组来接收数组
  var [a1,a2,a4] = [1,[2,3],4];
  p6([a1,a2,a4]);//[1,[2,3],4]; a2 = [2,3]

  //不定参数 ...
  var [a1,,a4] = [1,[2,3],4];
  p6([a1,,a4]);//[1, undefined × 1, 4]

  var [a1,...a4] = [1,[2,3],4];
  p6([a1,a4]);//[1, [[2,3],4]

结论：当解构时，访问空数组或越界访问数组时，对其解构与对其索引的行为一致，最终得到的结果都是：undefined。

2.3.1.3 应用于迭代器

function* fibs() {

var a = 0;

var b = 1;

while (true) {

yield a;

[a, b] = [b, a + b];

}

}

var [first, second, third, fourth, fifth, sixth] = fibs();

console.log(sixth);

2.3.2 解构对象

哈哈，这个更有意思，如果说你对刚才的数组解构不过瘾，那么我们来瞅瞅对象的解构
对象的解构，和数组不同，因为数组是有解构的前后顺序的，而对象就是一堆kv而已，木有啥顺序，解构更舒服

var obj = {k:'key',v:'value'};
var {k,v} = obj;
var {k:k1} = obj; //这种的k1直接就是obj[k]
p6(k); // key
p6(v); //value
p6(k1); // key

同样的，也可以解构嵌套的对象，只不过嵌套的时候，如果key与obj的key变量想通，是不会被赋值的，这点需要注意

var obj = {
    data: {
      a: 1,
      b: 2
    }
  };

  var {
    data: { 
      a,b
     }
  } = obj;
  // p6(data); undefined
  p6(a);//1
  p6(b);//2

2.3.3 解构Map

var map = new Map();
map.set('a','hello');
map.set('b','world');

for(let[k,v] of map){
  p6(k,v);//0、ES6 console: ["a", "hello"],["b", "world"]
}

for(let[k] of map ){
  //只获取k 
}

2.3.4 解构字符串

const [a,b] = 'hello';
//a:h
//b:e

2.3.5 解构模块

const {Slider,SliderCode } = require('slider');//接收加载模块的指定方法

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

关于作者

终止放荡

暂无简介

0 文章

0 评论

658 人气

关注发私信

友情链接

文江博客

ES6 教程之基本语法

2.1 变量

2.1.1 let

2.1.2 const

2.2 for 循环

2.3 解构

2.3.1 解构数组

2.3.1.1 交换数组变量

2.3.1.2 返回多个值

2.3.1.3 应用于迭代器

2.3.2 解构对象

2.3.3 解构Map

2.3.4 解构字符串

2.3.5 解构模块

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

你可能也喜欢

创建 Docker Swarm 集群

重建 CentOS 或 RHEL 上被损坏的 RPM 数据库

修复 passwd:Authentication token manipulation error 的步骤

如何退出无响应的 ssh 会话

Maven 中 optional 关键字

HappyPack 并行编译提高 Webpack 构建速度

查看 Linux 内核路由表以及 route 命令的使用

xmlrpc.php 被刷流量导致 WordPress 瘫痪崩溃

发布评论

关于作者

热门标签

推荐作者

漫雪独思

垂暮老矣

鹊巢

萌酱

雨说

冰葑

友情链接

ES6 教程之基本语法

2.1 变量

2.1.1 let

2.1.2 const

2.2 for 循环

2.3 解构

2.3.1 解构数组

2.3.1.1 交换数组变量

2.3.1.2 返回多个值

2.3.1.3 应用于迭代器

2.3.2 解构对象

2.3.3 解构Map

2.3.4 解构字符串

2.3.5 解构模块

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

你可能也喜欢

发布评论

关于作者

热门标签

推荐作者

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。