关于ES6

summer and lemon

已于 2022-04-07 19:06:20 修改

阅读量946

点赞数

文章标签： es6

于 2022-04-06 14:21:37 首次发布

本文链接：https://blog.csdn.net/halfSummer_ff/article/details/123988864

版权

注：摘自阮一峰老师的ECMAScript 6 入门

let & const

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

let 定义变量，const定义常量（以及引用类型的变量,const实际记录的是引用数据类型的内存地址，只要不改变指向就不会报错）
let ， const不会引变量提升，引入暂时性死区概念（temporal dead zone，简称 TDZ）。声明了const或者let的区域严格执行先声明后调用原则
具有块级作用域。定义的变量或者常量只在作用域内有效，且同一作用域内不允许重复定义(let&var,const&var,let&const)。作用域可以多层嵌套，外层变量不会影响内层变量。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

关于暂时性死区问题：

var a=1;
var b=2;
{
    console.log(a);
    console.log(b);
    let b=3;
}
//1
//Uncaught ReferenceError: Cannot access 'b' before initialization
//TDZ 区域内，let或const类型 调用前必须先声明

关于多层作用域嵌套问题

{{{{
  let out = "外层";
  let aa="外层独有值";
    console.log(bb);  //ReferenceError: bb is not defined
  {
      let out ="内层";
      let bb="内层独有值"; 
       console.log(aa);  //外层独有值
  }
}}}};//不同作用域可以声明相同同名称变量，作用域链从内到外。

解构赋值

数组解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

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 // []

如果解构不成功，变量的值就等于undefined。如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错。

解构赋值允许指定默认值。

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。如果有值为null，则默认值不会生效。（null=== undefind输出false,设置null默认值不会生效）。

对象解构赋值

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined
如果变量名与属性名不一致，必须写成下面这样。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

let greeting = `\`Yo\` World!`;//如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。
//`Yo` World!

模板字符串中嵌入变量，需要将变量名写在${}之中，{ }内也可以调用函数。

模板编译

let template = `
<ul>
  <% for(let i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;

上面代码在模板字符串之中，放置了一个常规模板。该模板使用<%…%>放置 JavaScript 代码，使用<%= … %>输出 JavaScript 表达式。

字符串新增方法

传统上，JavaScript 只有indexOf方法(数组中也有indexof方法，结果不存在返回-1),可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
```
 这三个方法都支持第二个参数，表示开始搜索的位置。
```

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.endsWith('H',1).  //true
s.includes('Hello', 6) // false

上面代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符(不包含n)，而其他两个方法针对从第n个位置直到字符串结束( 包含n )。

repeat()方法返回一个新的字符串，将原字符串重复n次。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

//参数如果是小数，会被取整。
'na'.repeat(2.9) // "nana"

//如果repeat的参数是负数或者Infinity，会报错。
'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

//如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0。
'na'.repeat(-0.9) // ""

//参数NaN等同于 0
'na'.repeat(NaN) // ""

//如果repeat的参数是字符串，则会先转换成数字。
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

trimStart&trimEnd

ES2019 对字符串实例新增了trimStart()和trimEnd()这两个方法。它们的行为与trim()一致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。

const s = '  abc  ';
s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"

除了空格键，这两个方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效。

replaceAll()方法，可以一次性替换所有匹配。

原本的replace只能替换匹配到的第一个字符

String.prototype.replaceAll(searchValue, replacement)
//上面代码中，searchValue是搜索模式，可以是一个字符串，也可以是一个全局的正则表达式（带有g修饰符）。

//如果searchValue是一个不带有g修饰符的正则表达式，replaceAll()会报错。这一点跟replace()不同。
'aabbcc'.replace(/b/, '_') // 不报错
'aabbcc'.replaceAll(/b/, '_')// 报错

at()

at()方法接受一个整数作为参数，返回参数指定位置的字符，支持负索引（即倒数的位置）。

const str = 'hello';
str.at(1) // "e"
str.at(-1) // "o"
str.at(-5) // "h"

如果参数位置超出了字符串范围，at()返回undefined。

数值新增方法

Number.isFinite(), Number.isNaN()
ES6 在Number对象上，新提供了Number.isFinite()和Number.isNaN()两个方法。

Number.isFinite()用来检查一个数值是否为有限的（finite），即不是Infinity。

Number.isFinite(15); // true
Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isFinite(-Infinity); // false
Number.isFinite('foo'); // false
Number.isFinite('15'); // false
Number.isFinite(true); // false
Number.isFinite(-0.333,3);//true
Number.isFinite(-0.,333,3);//true
Number.isFinite(-0.,33_,3);//Uncaught SyntaxError: Numeric separators are not allowed at the end of numeric literals

注意，如果参数类型不是数值，Number.isFinite一律返回false。

它们与传统的全局方法isFinite()和isNaN()的区别在于，传统方法先调用Number()将非数值的值转为数值，再进行判断，而这两个新方法只对数值有效，Number.isFinite()对于非数值一律返回false, Number.isNaN()只有对于NaN才返回true，非NaN一律返回false。

isFinite(25) // true
isFinite("25") // true
Number.isFinite(25) // true
Number.isFinite("25") // false

isNaN(NaN) // true
isNaN("NaN") // true
Number.isNaN(NaN) // true
Number.isNaN("NaN") // false
Number.isNaN(1) // false

函数扩展

函数设置参数默认值

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello


//参数的变量是默认声明的，在函数体内部不能使用let、const重新定义参数

与解构赋值默认值结合使用

function fetch(url, { body = '', method = 'GET', headers = {} }) {
  console.log(method);
}

fetch('http://example.com', {})   // "GET"

fetch('http://example.com')  // 报错

上面代码中，如果函数fetch的第二个参数是一个对象，就可以为它的三个属性设置默认值。这种写法不能省略第二个参数，如果结合函数参数的默认值，就可以省略第二个参数。这时，就出现了双重默认值。

function fetch(url, { body = '', method = 'GET', headers = {} } = {}) {
  console.log(method);
}

fetch('http://example.com')
// "GET"

通常情况下，定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。如果非尾部的参数设置默认值，实际上这个参数是没法省略的。

// 例一
function f(x = 1, y) {
  return [x, y];
}

f() // [1, undefined]
f(2) // [2, undefined]
f(, 1) // 报错
f(undefined, 1) // [1, 1]

// 例二
function f(x, y = 5, z) {
  return [x, y, z];
}

f() // [undefined, 5, undefined]
f(1) // [1, 5, undefined]
f(1, ,2) // 报错
f(1, undefined, 2) // [1, 5, 2]

指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真—length不计算设置默认值的参数。

这是因为length属性的含义是，该函数预期传入的参数个数。某个参数指定默认值以后，预期传入的参数个数就不包括这个参数了。同理，后文的 rest 参数也不会计入length属性。

如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了。

// length不记录有默认值的参数
(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2
//length不记录有默认值的参数以及其后的参数
(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1
箭头函数
使用方法：

箭头函数

ES6 允许使用“箭头”（=>）定义函数。如果箭头函数不需要参数或者需要多个参数，可以使用（）包裹起来

var f = v =>v;
//等同于
var f = function(v){
    return v;
} 
// 无参数
var f = ()=>5;
//多个参数
var f =(index,item)=>index+item;

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }
由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

有几个使用注意点。

（1）箭头函数没有自己的this对象（详见下文）。

（2）不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

数组扩展

扩展与运算符 …

一般用于函数声明或者传递参数（声明的参数要放置于最后，替代apply）

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

上面代码中，array.push(…items)和add(…numbers)这两行，都是函数的调用，它们都使用了扩展运算符。该运算符将一个数组，变为参数序列。

任何定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组。

let nodeList = document.querySelectorAll('div');
let array = [...nodeList];