ES6解析彩票项目学习记录（一）

一、构建项目目录

目录创建

• app —— 前端
  • css
  • js
    • class —— 存放类
      • test.js
    • index.js —— 入口文件
  • views
    • error.ejs
    • index.ejs （express框架使用的模板引擎就是ejs）
• server ——服务器
  • bin
    • www
  • public
    • js
      • index.js
  • routes
    • index.js
    • users.js
  • views
    • error.ejs
    • index.ejs
  • app.js
  • package.json
• tasks ——构建工具
  • util —— 常见脚本
    • args.js
  • browser.js
  • build.js
  • clean.js
  • css.js
  • page.js
  • script.js
  • server.js
• package.json （npm init -y）
• gulpfile.babel.js （夹杂 babel 是因为要使用 es6 语法）
• .babelrc （ES6语法转译器）

express部分

server/ 执行 npm install express -g

server/ 执行 express -e .

提示报错 express : 无法将“express”项识别为 cmdlet

这是express 4.X 版本的更新 导致的。参见 https://github.com/visionmedia/express/wiki/New-features-in-4.x。

使用 $ npm install -g express-generator 后就解决了。

server/ 执行 npm install 即可

二、ES6基础

1.let 与 const

function test() {
  // 大括号内就是一个块级作用域
  for (let i = 1; i < 3; i++) {
    console.log(i);
  }
  // console.log(i);
  // 报错:脱离了块级作用域 i is not defined

  let a = 1
  // let a = 2
  // 报错:不能重复定义
}
test()

function last() {
  const PI = 3.1415926
  // PI = 8
  // 报错:"PI" is read-only

  // const zxc
  // zxc = 55
  // 必须赋值

  // 引用类型，返回的是指针，指针是不变的，但对象本身是可以改变的
  const k = {
    a: 1
  }
  k.b = 2

  console.log(PI, k)
}
last()

2.解构赋值

数组解构

{
  let a, b, rest;
  [a, b] = [1, 2];
  console.log(a, b); //1 2
}
{
  let a, b, rest;
  [a, b, ...rest] = [1, 2, 3, 4, 5, 6];
  console.log(a, b, rest); // 1 2 [3,4,5,6]
}
{
  let a, b, c, rest;
  [a, b, c = 3] = [1, 2];
  console.log(a, b, c); //1 2 3
}

常见应用场景：

交换数值

{
  let a = 1;
  let b = 2;
  [a, b] = [b, a];
  console.log(a, b); //2 1
}

函数解构

接收函数返回值

{
  function f() {
    return [1, 2];
  }
  let a, b;
  [a, b] = f();
  console.log(a, b); // 1 2
}

选择接受某几个变量，不用的空下来

{
  function f() {
    return [1, 2, 3, 4, 5];
  }
  let a, b, c;
  [a, , , b] = f();
  console.log(a, b); // 1 4
}

不知道函数返回数组长度时，只取第一个元素

{
  function f() {
    return [1, 2, 3, 4, 5];
  }
  let a, b, c;
  [a, , ...b] = f();
  console.log(a, b); // 1 [3,4,5]
}

对象解构

{
  let a, b;
  ({ a, b } = {
    a: 1,
    b: 2
  });
  console.log(a, b); // 1 2
}
// 对象解构的另一种写法
{
  let o = { p: 42, q: true };
  let { p, q } = o;
  console.log(p, q); // 42 true
}

{
  let metaData = {
    title: "abc",
    test: [
      {
        title: "test",
        desc: "qwerty"
      }
    ]
  };
  let {
    title: esTitle,
    test: [{ title: cnTitle }]
  } = metaData;

  console.log(esTitle, cnTitle); // abc test
}

当存在默认值时，优先使用指定的值：

{
  let { a = 10, b = 5 } = { a: 3 };
  console.log(a, b); // 3 5
}

字符串解构

const [a, b, c, d, e] = ‘hello‘;
a // "h"
b // "e"
c // "l"
d // "l"
e // "o

 数值与布尔值解构

let { toString: s } = 123;
console.log(s === Number.prototype.toString); // true
let { toString: x } = true;
console.log(x === Boolean.prototype.toString);// true

网上基本都是这么说：解构赋值时，等号右边是数值和布尔值，会先转为对象，数值和布尔值的包装对象都有toString属性，所以变量可以取到值。

说清楚就是：

let {toString:s} = 123;
//1.先将123转为对象 new Number(123)
//2.Nummber对象有toString方法，解构成功
let {toAbc:h} = 123;
//1.先将123转为对象 new Number(123)
//2.Nummber对象没有toAbc方法，解构失败ndefined

s 是 toString 方法得到的结果 ，而 new Number(123) 有个 toString 方法，执行这个方法得到的结果就是 s 了。

同理，true 转为对象是 new Boolean() ，有 toString的方法 ，执行这方法得到的结果就是 x 了。

主要是看转换后的对象有没有这个方法。

let { toString: x } = undefined; // 报错
let { toString: y } = null; // 报错

undefined 和 null 无法转对象

3.正则扩展

es5 中正则写法：

{
  let regex = new RegExp("xyz", "i");
  let regex2 = new RegExp(/xyz/i);

  console.log(regex.test("xyz123"), regex2.test("xyz123"));
  // true true
}

es6中，允许第一个参数是正则表达式，第二个参数会覆盖第一个参数的修饰符：

{
  let regex3 = new RegExp(/xyz/gi, "i");
  console.log(regex3.flags); // i
}

新增 y 修饰符

相同点：都是全局匹配。

不同点：g 修饰符是从上次匹配的位置继续寻找，不一定是紧跟着的字符，y 修饰符必须是从下一个紧跟着的字符开始寻找。

{
  let s = "bbb_bb_b";
  let a1 = /b+/g;
  let a2 = /b+/y;
  console.log("one", a1.exec(s), a2.exec(s));
  console.log("two", a1.exec(s), a2.exec(s));
  console.log("three", a1.exec(s), a2.exec(s));
  // one ["bbb", index: 0, input: "bbb_bb_b"] ["bbb", index: 0, input: "bbb_bb_b"]
  // two ["bb", index: 4, input: "bbb_bb_b"] null
  // three ["b", index: 7, input: "bbb_bb_b"] ["bbb", index: 0, input: "bbb_bb_b"]

  // 判断是否开启y修饰符匹配
  console.log(a1.sticky, a2.sticky); //false true
}

新增 u 修饰符

正则处理unicode 字符的特征值

{
  // 没加 u 的会当成两个字符, 加 u 的会当成一个字符
  console.log("u-1", /^\uD83D/.test("\uD83D\uDC2A")); // true
  console.log("u-2", /^\uD83D/u.test("\uD83D\uDC2A")); //false
}

{
  // 如果大括号内是 unicode 编码一定要加 u 修饰符
  console.log(/\u{61}/.test("a")); // false
  console.log(/\u{61}/u.test("a")); // true
}

{
  // 大于两个字节(0xffff)的一定要加 u 才能正确识别
  console.log("\u{20BB7}"); //??
  let s = "??";
  console.log("u-1", /^.$/.test(s)); //false
  console.log("u-2", /^.$/u.test(s)); //true
  console.log("test-1", /??{2}/.test("????")); // false
  console.log("test-2", /??{2}/u.test("????")); // true
}

4.字符串扩展

unicode 表示法

{
  let s = "??";
  // es5中 处理不到位
  console.log(s.length); // 2 大于两个字节按四个字节处理
  console.log(s.charAt(0)); // 乱码
  console.log(s.charAt(1)); // 乱码
  console.log(s.charCodeAt(0)); // 55362
  console.log(s.charCodeAt(1)); // 57271
}

{
  let s1 = "??a";
  console.log(s1.length);
  //ES6 中
  console.log(s1.codePointAt(0)); //134071
  console.log(s1.codePointAt(0).toString(16)); //20bb7
  console.log(s1.codePointAt(1)); //57271
  console.log(s1.codePointAt(2)); //97
}

{
  console.log(String.fromCharCode("0x20bb7")); //? 乱码了
  console.log(String.fromCodePoint("0x20bb7")); //??
}

遍历器接口

能正确处理字符串编码大于0xffff这种情况

{
  let str = "\u{20bb7}abc"; //‘??abc‘
  //es5
  for (let a = 0; a < str.length; a++) {
    console.log("es5", str[a]); // ? ? a b c
  }
  //es6
  for (const code of str) {
    console.log("es6", code); // ?? a b c
  }
}

一些应用

{
  let str = "string";
  // 判断字符串是否被包含
  console.log("includes", str.includes("r")); //true
  // 判断字符串起始 与 结束
  console.log("start", str.startsWith("str")); //true
  console.log("end", str.endsWith("ng")); //true
}

{
  // 字符串复制功能
  let str = "abc";
  console.log(str.repeat(2)); //abcabc
}

模板字符串

把数据和模板拼成一个带结果的字符串

{
  let name = "list";
  let info = "hello world";
  let m = `i am ${name},${info}`;
  console.log(m); //i am list,hello world
}

两个重要的API

padStart() 向前补白

padEnd() 向后补白

{
  /*
    补白
    参数：长度，补充内容
  */
  console.log("1".padStart(2, "0")); // 01
  console.log("1".padEnd(2, "0")); // 10
}

raw() 返回解析后的原始值

{
  // raw() 返回原始未加工的值，自带转义
  console.log(String.raw`H1\n${1 + 2}`); // H1\n3
  console.log(`H1\n${1 + 2}`);
  /*
  H1
  3
  */
}

注： ES7语法，需要安装 babel-polyfill 兼容包

标签模板

1.过滤html字符串时，防止XSS攻击

2.处理多语言时，不同的返回不同的结果

{
  let user = {
    name: "list",
    info: "hello world"
  };
  console.log(abc`i am ${user.name},${user.info}`); // i am ,,,listhello world
  function abc(s, v1, v2) {
    console.log(s, v1, v2);
    return s + v1 + v2;
  }
}

原文地址：https://www.cnblogs.com/anqwjoe/p/11104222.html