阅读:11645回复:9
Es6教程-基本语法
let, const, forEach, for of
class, extends, super arrow functions, template string, destructuring, default, rest arguments 以上是我们需要掌握的常用的ES新特性,一个一个的玩,不要怕. <script> //es6代码写这里,直接在浏览器运行 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> |
|
沙发#
发布于:2018-08-17 21:31
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之后,需要注意哪些坑呢。 |
|
板凳#
发布于:2018-08-17 21:32
坑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 } |
|
地板#
发布于:2018-08-17 21:36
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. |
|
4楼#
发布于:2018-08-17 21:38
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); //缺点是遍历下标,优点是好歹还有个下标 } //es6: for of for(var i of words){ console.log(arr); //缺点是木有下标,优点是省去遍历下标 } //es6: forEach arr.forEach(n => console.log(n)); 也有人说,用for in也可以循环,无论是老的es5还是新的es6,for in不建议用来遍历数组,因为遍历出来的结果可能会异常, 比如遍历一个你认为是数组但是却不是数组的元素,就可能大批量的undefined,以后用for of即可。 |
|
5楼#
发布于:2018-08-17 22:12
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 ;这种交换方便阅读。 |
|
6楼#
发布于:2018-08-17 22:19
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(); //神马也不解构,也没问题的 |
|
7楼#
发布于:2018-08-17 22:22
当然,这些只是最最基础的部分,下面我们来搞点复杂的嵌套,这才有意思。
//解构全部 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。 |
|
8楼#
发布于:2018-08-17 22:53
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');//接收加载模块的指定方法 2.3 Map 2.4 Set 2.5 箭头 2.6 对象 |
|
9楼#
发布于:2018-08-17 22:53
|
|