ES6解析彩票项目学习记录

Posted 2022-03-05 anqwjoe

一、构建项目目录

目录创建

• 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(/\u61/.test("a")); // false
  console.log(/\u61/u.test("a")); // true

  // 大于两个字节(0xffff)的一定要加 u 才能正确识别
  console.log("\u20BB7"); //??
  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 = "\u20bb7abc"; //‘??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;