码迷,mamicode.com
首页 > 其他好文 > 详细

ES6解析彩票项目学习记录(一)

时间:2019-07-01 17:20:49      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:exp   NPU   input   ber   无法   xss攻击   服务器   hello   学习   

一、构建项目目录

目录创建

  • 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;
  }
}

 

ES6解析彩票项目学习记录(一)

标签:exp   NPU   input   ber   无法   xss攻击   服务器   hello   学习   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!