ES6语法
Posted 长不大的大灰狼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6语法相关的知识，希望对你有一定的参考价值。
ES6语法
〇、let 和 const 命令
1、let命令
（1）基本用法
let所声明的变量，只在let命令所在的代码块内有效。
let a = 10;
var b = 1;
a // ReferenceError: a is not defined.
b // 1
for循环很合适使用let命令，计数器i只在for循环体内有效，在循环体外引用就会报错。
for (let i = 0; i < 10; i++)
// ...
console.log(i);
// ReferenceError: i is not defined
变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。 函数内部的console.log(i)，里面的i就指向全局变量i。
var a = [];
for (var i = 0; i < 10; i++)
a[i] = function ()
console.log(i);
;
a[6](); // 10
a[5](); // 10
声明的变量let仅在块级作用域内有效。当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量。
var a = [];
for (let i = 0; i < 10; i++)
a[i] = function ()
console.log(i);
;
a[6](); // 6
for循环设置循环变量的部分是一个父作用域，循环体内是一个单独的子作用域。函数内部的变量i与循环变量i不在同一个作用域。
for (let i = 0; i < 3; i++)
let i = 'abc';
console.log(i);
// abc
// abc
// abc
（2）let不允许变量提升
变量提升：变量可以在声明之前使用，值为undefined。
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
（3）暂时性死区
暂时性死区：在代码块内，使用let命令声明变量之前，该变量都是不可用的。（变量一定要在声明之后使用）
var tmp = 123;
if (true)
tmp = 'abc'; // 报错 ReferenceError
let tmp;
在变量x的声明语句还没有执行完成前，就去取x的值，导致报错”x 未定义“。
let x = x;
// 报错 ReferenceError: x is not defined
（4）不允许重复声明
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() // 不报错
2、块级作用域
ES5 只有全局作用域和函数作用域。ES6的let为 javascript 新增了块级作用域。
function f1()
let n = 5;
if (true)
let n = 10;
console.log(n); // 5
ES6 的块级作用域必须有大括号。
// 第一种写法，报错
if (true) let x = 1;
// 第二种写法，不报错
if (true)
let x = 1;
3、const命令
const声明一个只读的常量。一旦声明，常量的值就不能改变。只声明不赋值，也会报错。
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.
const foo;
// SyntaxError: Missing initializer in const declaration
const的作用域与let命令相同： 只在声明所在的块级作用域内有效。声明的常量不提升，存在暂时性死区，只能在声明的位置后面使用。
const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。
const a = [];
a.push('Hello'); // 可执行
a.length = 0; // 可执行
a = ['Dave']; // 报错
如果真的想将对象冻结，应该使用Object.freeze方法，常量foo指向一个冻结的对象，所以添加新属性不起作用，严格模式时还会报错。
const foo = Object.freeze();
// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错
foo.prop = 123;
4、顶层对象的属性
顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。
ES6规定： var命令和function命令声明的全局变量，是顶层对象的属性；let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。
顶层对象可以拿到全局变量的值。
var a = 1;
// 如果在 Node 的 REPL 环境，可以写成 global.a
// 或者采用通用方法，写成 this.a
window.a // 1
let b = 1;
window.b // undefined
一、数值
JavaScript 数值始终以双精度浮点数来存储。
1、进制转换
var myNumber = 128;
myNumber.toString(16); // 返回 80
myNumber.toString(8); // 返回 200
myNumber.toString(2); // 返回 10000000
2、方法
toPrecision() 返回字符串值，它包含了指定长度的数字：
toFixed() 返回字符串值，它包含了指定位数小数的数字：
Number() 可用于把 JavaScript 变量转换为数值；
x = true;
Number(x); // 返回 1
x = false;
Number(x); // 返回 0
x = new Date();
Number(x); // 返回 1404568027739
x = "10"
Number(x); // 返回 10
x = "10 20"
Number(x); // 返回 NaN
MAX_VALUE 返回 JavaScript 中可能的最大数字
MIN_VALUE 返回 JavaScript 中可能的最小数字
var x = Number.MAX_VALUE;
var x = Number.MIN_VALUE;
二、变量
1、数组
（1）基本用法
let [a, b, c] = [1, 2, 3];
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
（2）默认值
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
下面报错，是因为x用y做默认值时，y还没有声明。
let [x = y, y = 1] = []; // ReferenceError: y is not defined
2、对象的解构赋值
（1）基本用法
对象的属性没有次序，变量属性同名，就能取到正确的值。
let bar, foo = foo: 'aaa', bar: 'bbb' ;
foo // "aaa"
bar // "bbb"
let baz = foo: 'aaa', bar: 'bbb' ;
baz // undefined
foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。
let foo: baz = foo: 'aaa', bar: 'bbb' ;
baz // "aaa"
foo // error: foo is not defined
（2）默认值
var x = 3 = ;
x // 3
var x, y = 5 = x: 1;
x // 1
y // 5
var x: y = 3 = ;
y // 3
var x: y = 3 = x: 5;
y // 5
var message: msg = 'Something went wrong' = ;
msg // "Something went wrong"
（3）字符串的解构赋值
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
let length : len = 'hello';
len // 5
（4）函数参数的解构赋值
function add([x, y])
return x + y;
add([1, 2]); // 3
（5）变量解构赋值的用途
1）交换变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];
2）从函数返回多个值
// 返回一个数组
function example()
return [1, 2, 3];
let [a, b, c] = example();
// 返回一个对象
function example()
return
foo: 1,
bar: 2
;
let foo, bar = example();
3）函数参数的定义
// 参数是一组有次序的值
function f([x, y, z]) ...
f([1, 2, 3]);
// 参数是一组无次序的值
function f(x, y, z) ...
f(z: 3, y: 2, x: 1);
4）提取 JSON 数据
let jsonData =
id: 42,
status: "OK",
data: [867, 5309]
;
let id, status, data: number = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]
5）遍历 Map 结构
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map)
console.log(key + " is " + value);
// first is hello
// second is world
三、字符串
1、字符串的遍历器接口
ES6 为字符串添加了遍历器接口
for (let codePoint of 'foo')
console.log(codePoint)
// "f"
// "o"
// "o"
2、字符串JSON转换
JSON转字符串：
JSON.stringify(object)
字符串转JSON:
JSON.parse(jsonString);
3、模板字符串
模板字符串（template string）是增强版的字符串，用 反引号（`） 标识。
$('#result').append(`
There are <b>$basket.count</b> items
in your basket, <em>$basket.onSale</em>
are on sale!
`);
模板字符串之中能调用函数。
function fn()
return "Hello World";
`foo $fn() bar`
// foo Hello World bar
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
// 普通字符串
`In JavaScript '\\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello $name, how are you $time?`
4、字符串方法
split() 将字符串转换为数组。
var txt = "Hello"; // 字符串
txt.split(""); // 分隔为字符
var txt = "a,b,c,d,e"; // 字符串
txt.split(","); // 用逗号分隔
includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
repeat：返回一个新字符串，表示将原字符串重复n次
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
padStart()：如果某个字符串不够指定长度，会在头部补全。
padEnd()：如果某个字符串不够指定长度，会在尾部补全。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba
trim() 方法删除字符串两端的空白符。
trimStart()：消除字符串头部的空格。
trimEnd()：消除尾部的空格。
matchAll()：法返回一个正则表达式在当前字符串的所有匹配
replaceAll()：替换所有匹配，返回一个新字符串
'aabbcc'.replaceAll('b', '_')
// 'aa__cc'
at()：接受一个整数作为参数，返回参数指定位置的字符
const str = 'hello';
str.at(1) // "e"
str.at(-1) // "o"
slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
substring() 类似于 slice()，但 无法接受负的索引。
var str = "Apple, Banana, Mango";
var res = str.slice(-13,-7);
var str = "Apple, Banana, Mango";
var res = str.substring(7,13);
substr() 类似于 slice()，在第二个参数规定被提取部分的长度。
var str = "Apple, Banana, Mango";
var res = str.substr(7,6);
toUpperCase() 把字符串转换为大写
toLowerCase() 把字符串转换为小写
concat() 方法，连接两个或多个字符串
5、转义字符
在字符串中换行，通过一个反斜杠即可：
document.getElementById("demo").innerhtml = "Hello \\
Kitty!";
四、函数 function
1、函数参数的默认值
ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。默认值的参数，一般为尾参数，不然没法做参数的省略。
function log(x, y = 'World')
console.log(x, y);
log('Hello') // Hello World
log('Hello', 'China') ES6基本语法