ES6 基本用法

2020-01-08 本文已影响0人石菖蒲_xl

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"