ES6语法标准学习笔记

学习笔记：【小马技术】ES6 / ES2015 入门讲解_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

01 let命令

下述操作中使用ES5的var可行，但ES6的let不可行。

1.超出作用域不可行

if (true) {
	let i = 1;
}
console.log(i);  // 变量i未找到

2.重复定义不可行

var i = 0;
switch(i) {
	case 0:
		let value = "hello";
		break;
	case 1:
		let value = "world";  // 重复定义错误
		break;
}

---

02 const常量定义

1.常量本身不可再赋值。

const data = 10;
console.log(data);

data = 100;  //错误：常量不可改变

2.常量本身不可再赋值，但常量内的元素可以再赋值。

const list = [1,2,3];
console.log(list);

// list = [2,3,4];  // 错误

list[0] = 100;  // 数组的值可以改变。
console.log(list);

可以push、pop

list.push(99);
console.log(list);
list.pop()
console.log(list);

---

03 进制转换

1. 可以直接定义一个x进制数

console.log(0b10); // 10的二进制：2（0b表示2进制）
console.log(0o10); // 10的八进制：8（0o表示8进制）
console.log(0x10); // 10的16进制：16（0x表示16进制）

console.log(0b11 === 3); //true
console.log(0o10 === 8); //true
console.log(0x10 === 16);//true

2. 进制转换

10的2进制是1010
10的8进制 ：10先转为2进制1010，再转为8进制 -> 12
10的16进制 ：1010转为16进制 -> a
10的5进制：10/5=2余0 -> 20

let num = 10;
console.log(num.toString(2)); //2进制转换
console.log(num.toString(8)); //8进制转换
console.log(num.toString(16));//16进制转换
console.log(num.toString(5)); //5进制…

---

04 嵌入字符串

1. 反单引号`用来定义字符串模版

let name = "Koma"
let mystr1 = "你好，${name}!"  // 不起作用
let mystr2 = `你好，${name}！再见。`  // 起作用

console.log(mystr1)
console.log(mystr2)

2. 解析字符串模版

标签模板(tagged templates)允许你用一个方法去解析模板字符串。

• 该方法的名字是自定义的。
• 该方法形参的第一个参数是一个字符串数组，后面的几个参数是你传入的用${}表示的其他变量。
• 该方法可以返回经过你处理过的字符串或者另外一个方法。

例1：

let name = "Koma"
//strings是一个字符串数组
// ...args为剩余参数(展开运算符)
function tagged(strings, ...args){
    console.log(strings)  // ["你好，", "！再见。"]
    console.log(args)  // ['Koma']
}
tagged`你好，${name}！再见。`

写法2:
let name = "Koma"
// 函数名tagged是随便起的
// 在确定只有一个参数时，直接用一个参数person即可
function tagged(strings, person){
    console.log(strings);  // ["你好，", "！再见。"]
    console.log(strings[0]);  // 你好，
    console.log(strings[1]);  // ！再见。
    console.log(person)  // Koma
}
let output = tagged`你好，${name}！再见。`;
console.log(output)

例2：

var person = 'Mike';
var age = 28;

function myTag(strings, personExp, ageExp) {
  
  var str0 = strings[0]; // "That "
  var str1 = strings[1]; // " is a "

  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }
  
  //经过处理后的字符串
  return `${str0}${personExp}${str1}${ageStr}`;
}

// 直接调用标签模板
myTag`That ${ person } is a ${ age }`;

---

05 模版的延长线

1. 活用字符串模版

反单引号内可换行

let name = "Koma"
let address = "网吧"
let mystr = `你好，${name}！
晚上一起去${address}玩吗？
等你的回信。`
console.log(mystr)

2. 扩展文字模版（如扩展为Markdown）

渲染成markdown：把全部的变量两边加星号以实现markdown加粗：

let name = "Koma"
let address = "网吧"
let str = markdown`你好，${name}！
晚上一起去${address}玩吗？
等你的回信。`
console.log(str)

function markdown(strings, ...args){
  console.log(strings)
  console.log(args)
  var result = "# 信息标题\n";
  for(var i = 0; i < strings.length; i++)
    result += strings[i] + "**" + (args[i] || '') + "**";
  return result;
}

输出：

# 信息标题
你好，**Koma**！
晚上一起去**网吧**玩吗？
等你的回信。****

---

06 Symbol新类型

待补