let
- 用来声明变量，只在声明块内有效
- 不存在变量提升
function add(){
console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 1;
console.log(a); // => 1
if(a===1){
let b = 2;
console.log(b); // => 2
}
console.log(b); // ReferenceError: b is not defined
}
add()
- 暂时性死区（简称TDZ）
只要块级作用域内存在let命令，它所声明的变量就“绑定”这个区域，不再受外部影响。
在代码块内，使用let命令之前，该变量都是不可用的，这在语法上，称为“暂时性死区”
var tmp = 123;
if (true) {
console.log(tmp); // ReferenceError: Cannot access 'tmp' before initialization
let tmp;
}
ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域，凡是在声明之前就使用这些变量，就会报错。
- 比较隐蔽的“死区”
function bar(x = y, y = 2) {
return [x, y];
}
bar(); // 报错
参数x默认值等于另一个参数y，而此时y还没有声明，属于“死区”。
- 不允许重复声明
let不允许在相同作用域内，重复声明同一个变量
// 报错
function func() {
let a = 10;
var a = 1;
}
// 报错
function func() {
let a = 10;
let a = 1;
}
// 不能在函数内部重新声明参数。
function func(arg) {
let arg;
}
func() // 报错
function func(arg) {
{
let arg;
}
}
func() // 不报错
ES6 的块级作用域
如下代码如果使用var定义变量，会输出10，但是块级作用域外层代码块不受内存代码块影响
function f () {
let n = 5;
if ( true ) {
let n = 10;
}
console.log(n); // 5
}
const
-
const声明一个只读的常量，一旦声明，常量的值就不能改变。 -
const一旦声明变量，就必须立即初始化，不能留到以后赋值。 -
const只声明不赋值会报错。 -
const的作用域与let相同，只在声明所在的块级作用域内有效。 -
const声明不提升。 -
const存在暂时性死区，只能在声明的位置后面使用。 -
const不可重复声明。
顶层对象的属性
顶层对象在浏览器环境指的是window对象，在Node 指的是global对象。
-
ES5中，顶层对象的属性与全局变量是等价的。
window.a = 1;
a ; // => 1
a = 2;
window.a; // => 2
上边代码中，顶层对的属性赋值与全局变量的赋值，是同一件事。
-
ES6规定，let、const、class声明的全局变量，不属于顶层对象的属性。
let b = 1;
window.b; // undefined
数组的解构赋值
- ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
let a = 1;
let b = 2;
let c = 3;
// ES6 允许写成下面这样
let [a,b,c] = [1,2,3];
- 这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋对应的值。
let [x,,y] = [1,2,3];
x // => 1,
y // => 3
let [x,...y] = [1,2,3,4];
x; // => 1
y; // => [2,3,4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
- 如果解构不成功，变量的值就等于
undefined
let [a] = [];
let [b,a] = [1];
// a 的值都是undefined
-
如果等号右边不是数组，那么将会报错。
-
解构赋值允许指定默认值
let [a = 1] = [];
a; // => 1
- ES6内部使用严格相等运算符（
===），判断一个位置是否有值，所以只有当数组成员严格等于undefined，默认值才生效。
let [a = 1] = [undefined];
a; // => 1
let [b = 1] = [null];
b; // => null 因为null不严格等于undefined
- 如果默认值是一个表达式，那么这个表达式是惰性求值的，只有在用到的时候，才会求值
function f(){
console.log('aaaa');
}
let [a = f()] = [1];
a; // => 1 因为a能取到值，所以f根本不会执行
对象的解构赋值
对象的解构与数组不同，数组的元素是按次序排列的，变量的取值由它的位置决定，而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
let { b , a } = { a:1 , b:2 };
a; // => 1
b; // => 2
let { c } = { a:1 , b:2 };
c; // => undefined 解构失败，变量的值等于undefined
- 如果变量名与属性名不一致
let obj = {first:"hello",last:"world"};
let {first:h,last:w} = obj;
h; // => 'hello'
w: // => 'world'
- 对象的解构赋值可以取到继承的属性
let o1 = {
x: 1
};
let o2 = Object.create(o1);
o2.y = 2;
const { x , y } = o2;
x; // => 1
y; // => 2
- 对象的解构也可以指定默认值
let { x = 1 } = {};
x; // => 1
let { x: y = 2 } = {};
y; // => 2
- 默认值生效条件是，对象的属性值严格等于
undefined。
let { x:1 } = { x:undefined };
x; // => 1
let { y:2 } = { y:null };
y; // null
字符串的解构赋值
字符串也可以解构赋值，这是因为字符串会被转成一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
//类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值
let {length : len} = 'hello';
len // 5
模板字符串
const value = 'o';
let str = `hell${value} world`;
includes()、startsWith()、endsWith()
三个方法都是用来确定一个字符串是否包含在另一个字符串中
-
includes()返回布尔值，表示是否找到了参数字符串 -
startsWith()返回布尔值，表示参数字符串是否在原字符串的头部 -
endsWith()返回布尔值，表示参数字符串是否在原字符串的尾部
let str = 'hello world!';
str.includes('el'); // => true
str.startsWith('he');// => true
str.startsWith('e'); // => false
str.endsWith('d!'); // => true
str.endsWith('d'); // => false
- 第二个参数表示开始搜索的位置
-
endsWith使用第二个参数时，表示的是前n个字符。
str.includes('lo',4); // => false
str.startsWith('lo',3); // => true 相当于指定开始位置
str.endsWith('hel',3); // => true 表示前三个字符是存在的
实例方法：repeat()
-
repeat()方法返回一个新字符串，表示将原字符串重复n次。
'x'.repeat(3); // => 'xxx'
'x'.repeat(0); // => ''
- 参数如果是小数会向下取整
'x'.repeat(2.9); // => 'xx'
- 参数如果是负数或者
Infinity，会报错，但是0 ~ -1之间的小数等同于0, -
NaN等同于0
'x'.repeat(-1); // 报错
'x'.repeat(-0.2); // => '' 参数认为是0
'x'.repeat(NaN); // => ''
- 参数如果是字符串先转成数字
'x'.repeat('aaa'); // => ''
'x'.repeat('3'); => 'xxx'
如上：'aaa'转成数字是NaN，NaN等同于0，所以输出空字符串
实例方法：padStart()、padEnd()
字符串补全功能，如果某个字符串不够指定长度，会在头部或尾部补全。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padEnd(5, 'ab') // 'xabab'
'1'.padStart(4, 'lx') // 'lxl1'
- 如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串。
- 如果省略第二个参数，默认使用空格补全长度。
实例方法：trimStart()、trimEnd()
ES2019对字符串实例新增了trimStart()、trimEnd()这两方法。
-
trimStart()：消除字符串头部的空格 -
trimEnd()：消除字符串头部的空格 - 它们都返回新字符串，不会修改原始字符串
- 除了空格键，这两个方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效。
const a = ' ab ';
s.trim(); // => "ab"
s.trimStart(); // => "ab "
s.trimEnd(); // => " ab"
网友评论