ES6学习笔记（持续更新中）
生活还要继续代码撸起来
一、关于定义变量 let和const
//一、let
//1. let 只在let命令所在的代码块内有效
for (let i = 0;i < 5;i++){
var a = i;
let b = i;
}
console.log(a);
//console.log(b);
// 抛出错误 b is not defined
//for 循环中的计数器，很适合使用let
var arr = [];
for(var i = 0; i < 10; i++){
arr[i] = function(){
console.log(i);
}
}
arr[5](); // 输出 10
let arr1 = [];
for(let i = 0; i < 10; i++){
arr1[i] = function(){
console.log(i);
}
}
arr1[5](); // 输出5
// 2、不存在变量提升
function test(){
console.log(t1); // undefined
//console.log(t2); // 抛出错误 b is not defined
var t1 = 0;
let t2 = 1;
}
test();
// 3、暂时性死区
/*
* es6明确规定，如果区域块中存在let和const命令，这个区块对这些命令声明的变量，
* 从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
* 称为“暂时性死区”
* */
var tmp = 123;
if(true){
// tmp = 'abc' //tmp is not defined
let tmp
}
// 4、不允许重复声明变量
/*
* let不允许在相同作用域内，重复声明同一个变量
* */
//二、块级作用域
/*
* 为什么需要块级作用域
* 1、内层变量可能会覆盖外层变量
* 2、用来计数的循环变量泄露为全局变量
* */
for(var k =0; k < 5; k++){}
console.log(k);
// 块级作用域的出现，实际上使得广泛应用的立即执行函数表达式（IIFE）不再必要了
console.log(this)
// 三、const 常量
// const声明一个只读的常量。一旦声明，常量的值就不能改变。
// const实际上保证的，并不是变量的值不得变动，而是变量指向
// 的那个内存地址所保存的数据不得变动。对于简单类型的数据
// （数值、字符串、布尔值），值就保存在变量指向的那个内存地址，
// 因此等同于常量。但对于复合类型的数据（主要是对象和数组）
// ，变量指向的内存地址，保存的只是一个指向实际数据的指针，
// const只能保证这个指针是固定（即总是指向另一个固定的地址）
// ，至于它指向的数据节后是不是可变的，就完全不可能控制了
// 。因此，将一个对象声明为常量必须非常小心。
let 和const注意：
（1） 不存在变量提升，变量在声明之前使用报错；
（2）同一个作用域里，不能重复定义变量；
（3）let 只在let命令所在的代码块（块作用域）内有效；es6明确规定，如果区域块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。称为“暂时性死区”；
二、解构赋值
// 一、数组的解构赋值
//基本用法
/*
* 从数组和对象中提取值，对变量进行赋值，这被称为解构
* 可以从数组中提取值，按照对应位置，对变量赋值
* 如果解构不成功，变量的值就等于undefined
* */
let [a,b,c] = [1,2,3];
// a = 1 b = 2 c = 3
let [i, k] = [1];
// i = 1 k undefined
let [x, y, ...z] = [1,2,3,4];
// x = 1 y = 2 z = [3,4];
let [q,...w] = [1];
// q = 1 w = []
/*
* 默认值
* 解构赋值允许指定默认值 ==> 例1
* 只有当以个数组成员严格等于undefined，默认值才会生效 ==> 例2
* 如果默认值是一个表达式，那么这个表达式是惰性求值的，即使只有在用到手的时候，才会求值。 ==> 例3
* 默认值可以引用解构赋值的其他变量，但该变量必须已经声明。==> 例4
* */
// 例1
let [name , age = 18 ]= ['zsh'];
//name = zsh age = 18
// 例2
let [name1 ,age1 = 18] = ['zsh',null];
//name1 = zsh age = null
// 例3
function f(){
console.log(1)
}
let [o = f()] = [1]; //这种情况下f()不运行
let [t = f()] = []; // 这种情况下f()才会运行
// 例4
let [xx = 1,yy = xx] = [];
// xx = 1 yy= 1
// let [x1 = y1,y1 = 1] = [];
//抛出错误：ReferenceError：y is not defined
// 因为x1用y1做默认值时，y1还没有声明
// 二、对象的解构赋值
/*
* 对象的解构与数组的解构有一个重要的不同。
* 数组的元素是按次序排列的，变量的取值由它的位置决定；
* 而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
* 如果解构失败，变量的值等于undefined
* 嵌套赋值
* 默认值 (同数组)
* */
let { foo,bar } = {foo:'aaa',bar:'bbb'};
// foo = 'aaa' bar = 'bbb'
// 以上写法，是下面形式的简写
// let { foo:foo,bar:bar } = { foo:'aaa',bar:'bbb' };
let {foo1} = {foo:'aaa'};
// fool undefined
// 如果变量名与属性名不一致，必须写成下面之这样
let {foo2:baz} = {foo2 :'bbb'};
// baz = 'bbb' foo2 undefined
// 嵌套赋值例子
let obj = {};
let arr = [];
({foo:obj.prop,bar:arr[0]} = { foo:123,bar:2 });
// obj = {prop: 123} arr = [2]
// 如果要将一个已经声明的变量用于解构赋值，必须要小心
/*
* 错误写法
* let x ;
* { x } = { x : 1 };
* syntaxError:syntax error
* 因为javascript引擎会将{x}理解成一个代码块，从而发生语法错误。
* 只有不将大括号写在行首，避免JavaScript将其解释为代码块，才能解决这个问题。
* 正确写法：
* let x;
* ({x} = {x:1})
* */
// 三、字符串的解构赋值
let [aa,bb,cc,dd,ee] = 'hello';
// aa = h bb = e cc = l dd = l ee = o
// 四、数值和布尔值的解构赋值
/*
* 解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。
* undefined和null无法转为对象
* */
// 五、函数参数的解构赋值
/*
* 通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值
* undefined就会触发函数参数的默认值。
* */
function move({x = 0,y = 0} = {}){
return [x,y]
}
// move({x:3,y:8}) [3,8]
// move({x:3}) [3,0]
// move({}) [0,0]
// move() [0,0]
// 圆括号问题
// 解构赋值虽然很方便，但是解析起来并不容易。对于编译器来说，
// 一个式子到底是模式，还是表达式，没有办法从一开始就知道，必须解析到（或解析不到）等号才能知道。
//
// 由此带来的问题是，如果模式中出现圆括号怎么处理。ES6 的规则是，只要有可能导致解构的歧义，就不得使用圆括号。
//
// 但是，这条规则实际上不那么容易辨别，处理起来相当麻烦。因此，建议只要有可能，就不要在模式中放置圆括号。
/*
* 以下三种解构赋值不得使用圆括号
*
* （1）、变量声明语句，模式不能使用圆括号
* （2）、函数参数，函数参数也属于变量声明，因此不能带有圆括号
* （3）、赋值语句的模式
* */
/*
* 可以使用圆括号的情况
* 赋值语句的非模式部分，可以使用圆括号
* */
三、字符串扩展
//1、字符的unicode表示法
// 只限于码点在\u0000~\uFFFF之间的字符
// 2、codePointAt()
// 返回一个字符的码点
// 3、String.formCodePoint()
//从码点返回对应字符，但是这个方法不能识别32位的UTF-16字符
// 4、字符串的遍历器接口 for...of
//5、normalize()
/*
* 6、includes() startsWith() endsWith()
* includes() 返回布尔值，表示是否找到了参数字符串
* startsWith() 返回布尔值，表示参数字符串是否在原字符串的头部
* endsWith() 返回布尔值，表示参数字符串是否在原字符串的尾部
* 三个方法都支持第二个参数，表示开始搜索的位置：
* endsWith的行为与其他两个方法有所不同。他针对前n个字符，
* 而其他两个方法针对从第n个位置知道字符串结束
* */
let str1 = 'Hello world!';
console.log(str1.startsWith('Hello'));
// true
console.log(str1.endsWith('!'));
// true
console.log(str1.includes('o'));
// true
console.log(str1.startsWith('world', 6));
// true
console.log(str1.endsWith('Hello',5));
// true
console.log(str1.includes('Hello',6));
//false
/*
* 7、repeat()
* 返回一个新字符串，表示将原字符串重复n次
* （1）、参数如果是小数会被取整
* （2）、如果参数是负数或者Infinity，会报错
* （3）、0 到 -1之间视为0
* （4）、NAN等同于0
* （5）、参数是字符串，则会先转换成数字
* */
console.log('x'.repeat(5));
// xxxxx
console.log('x'.repeat(2.9));
// xx
/*
* 8、padStart()、padEnd()
* 字符串补全长度，如果某个字符串不够指定长度，会在头部或尾部补全。
* 如果原字符串的长度，等于或大于最大长度，则字符串不全不生效，返回原字符串。
* 如果用来不全的字符串与原字符串，两者的长度之和超过了最大长度，则会截取超出位数的补全字符串。
* 如果省略第二个参数，默认使用空格补全长度。
* 一共接受两个参数，
* 第一个参数是字符串不全时生效的最大长度，
* 第二个参数是用来补全的字符串
* */
// 9、matchAll()方法返回一个正则表达式在当前字符串的所有匹配
/*
* 10、模板字符串 用反引号 ` 标识。
* 模板字符串中嵌入变量，需要将变量名写在${}之中。
* 还可以调用函数${f()}
* ${}里面的变量如果没有声明，会报错
* ${}里面是字符串将会原样输出
* 模板字符串中需要使用反引号，则前面要用反斜杠转义
* 所有的空格和缩进都会被保留在输出之中
* 如果不想要换行可以使用trim()方法消除
*/
let greeting = `\`Yo\` World!`;
console.log(greeting);
//`Yo` World!
let name = 'zsh',time = 'today';
console.log(`Hello ${name},how are you ${time}`)
// Hello zsh,how are you today
let list = `
<ul>
<li>first</li>
<li>second</li>
</ul>
`.trim();
console.log(list);
let oBox = document.getElementsByClassName('box')[0];
oBox.innerHTML = `<ul>
<li>Hello ${name},</li>
<li>how are you ${time}</li>
</ul>`;
// 调用函数
function f(){
return 'f() 函数调用了'
}
console.log(`函数f()返回：${f()}`)
// 嵌套
const tmpl = addrs => `
<table>
${addrs.map(addr => `
<tr><td>${addr.first}</td></tr>
<tr><td>${addr.last}</td></tr>
`).join('')}
</table>
`;
const data = [
{ first: '<Jane>', last: 'Bond' },
{ first: 'Lars', last: '<Croft>' },
];
console.log(tmpl(data));
let a = 5;
let b = 10;
tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);
function tag(stringArr, value1, value2){
console.log(arguments)
}
/*
* 11. string.raw()
* 往往用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，
* 对应于替换变量后的模板字符串。String.raw`Hi\n${2+3}!`;
* */
String.raw`Hi\n${2+3}!`;
// 返回 "Hi\\n5!"
String.raw`Hi\u000A!`;
// 返回 "Hi\\u000A!"
