es6新增特性总结系列一

随风飞翔的胖子
266 阅读6分钟

前言

最近公司项目不是很忙，所以再次阅读阮一峰老师的# ES6 入门教程，并对其中的es6特性做了一个持续的学习更新和总结。以方便查看和加深学习印象。

一、let和const命令

  • let
    1. 声明的变量仅在块级作用域内有效
           let arr = []
   }
    console.log(arr); //ReferenceError: arr is not defined
    1. 暂时性死区：在代码块内，使用let命令声明变量之前，该变量都是不可用的，所以let声明变量不会变量提升，声明之前使用会报错
    console.log(arr); //ReferenceError: Cannot access 'arr' before initialization
let arr = [];
    1. let在相同作用域中不允许重复声明变量
    {
    let arr = [1,3,2,3];
    let arr = new Array();
    console.log(arr); //SyntaxError: Identifier 'arr' has already been declared
 }
  • const
    1. 声明一个只读的常量。一旦声明，常量的值就不能改变。
    const PI = 3.1415926
PI;
PI = 3  //TypeError: Assignment to constant variable.
    1. 变量声明以后，必须赋一个初始值，否则会报错
    const PI;
PI = 3  //SyntaxError: Missing initializer in const declaration
    1. 只在声明所在的块级作用域内有效
    {
    const PI = 3.1415;
}
console.log(PI);  //ReferenceError: PI is not defined
    1. 不会变量提升，也会有暂时性死区，未声明前使用会报错
    console.log(PI);  //ReferenceError: Cannot access 'PI' before initialization
const PI = 3.1415;
    1. const不允许重复声明常量
    const PI = 3.1415;
const PI = 3.14   // SyntaxError: Identifier 'PI' has already been declared
console.log(PI);
  • var
    1. 会有变量提升，未声明变量之前使用该变量不会报错，输出undefined
    console.log(num)  //undefined
var num = 10;
    1. 一个变量可多次声明，后面的声明会覆盖前面的声明
    var num = 10;
var num = 20;
console.log(num) //20
  • 总结
    • let和const声明不能重复声明，var可以多次声明，后面的声明会覆盖前面的声明
    • var不存在块级作用域，let和const存在块级作用域，只有在相同作用域下声明的值才有效
    • var存在变量提升，未声明之前可以使用，let和const未声明之前不能使用，所以不存在变量提升
    • var和let声明的值可以修改，const声明的值不允许修改

二、变量的解构赋值

  • 数组的解构赋值
    • 从数组中提取值，按照对应位置，对变量赋值，解构不成功，变量的值就等于undefined
        let [a, b, c] = [1, 2, 3];
    console.log(a); //1
    console.log(b); //2
    console.log(c); //3
    let [foo, [[bar], baz]] = [1, [[2], 3]];
    foo // 1
    bar // 2
    baz // 3
    let [foo] = [];
    console.log(foo) //undefined
    • 解构赋值允许指定默认值
        let [x = 1] = [undefined];
    x // 1
  • 对象的解构赋值 
    let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
let {x = 3} = {};
x // 3
    • 对象和数组解构赋值的区别： 数组的元素是按次序排列的，变量的取值由它的位置决定；对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
  • 字符串的解构赋值
    const [a, b, c, d, e] = 'hello';
    a // "h"
    b // "e"
    c // "l"
    d // "l"
    e // "o"
  • 数值和布尔值的解构赋值
    let {toString: s} = 123;
    s === Number.prototype.toString // true

    let {toString: s} = true;
    s === Boolean.prototype.toString // true
  • 函数的解构赋值
    function add([x, y]){
      return x + y;
    }
    add([1, 2]); // 3
  • 函数的解构赋值也可以使用默认值：
    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]

三、字符串的扩展

  • 字符的 Unicode 表示法：超出\u0000~\uFFFF范围的字符，放在大括号内，可以正确解析该字符
    "\u20BB7"  //输出：'₻7'
    "\u{20BB7}"  //输出: '𠮷'
    // 现在JavaScript 共有 6 种方法可以表示一个字符
    '\z' === 'z'  // true
    '\172' === 'z' // true
    '\x7A' === 'z' // true
    '\u007A' === 'z' // true
    '\u{7A}' === 'z' // true
  • 字符串可以通过for...of实现循环遍历
    for(let item of 'hello'){ 
        console.log(item)
    }
    // h, e, l, l, o
  • 模板字符串，用反引号（``）标识，模板字符串中嵌入变量，需要将变量名写在${}之中。
  • 字符串新增方法
    • String.fromCodePoint(): 用于从 Unicode 码点返回对应字符,可以识别大于0xFFFF的字符，弥补了String.fromCharCode()方法的不足。
        String.fromCharCode(0x20BB7)   //'ஷ'
    String.fromCodePoint(0x20BB7)  //'𠮷'
    String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'   //true
    • String.raw()：返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串
        String.raw`Hi\n${2+3}!`  // 'Hi\\n5!'
    • codePointAt()：正确处理 4 个字节储存的字符，返回一个字符的码点。
        let str = '𠮷a';
    
    str.codePointAt(0) // 134071
    str.codePointAt(1) // 57271
    str.codePointAt(2) // 97
    • normalize(): 将字符的不同表示方法统一为同样的形式，这称为 Unicode 正规化。
    • includes(): 返回布尔值，表示是否找到了参数字符串。
    • startsWith(): 返回布尔值，表示参数字符串是否在原字符串的头部。
    • endsWith(): 返回布尔值，表示参数字符串是否在原字符串的尾部。 这三个方法都支持第二个参数，表示开始搜索的位置
        let str = "Hello World"
    str.includes('l')   //true
    str.startsWith('Hello')   //true
    str.endsWith('World')     //true
    str.startsWith('World',6)   //true
    str.includes('l',6)   //true
    str.endsWith('Hello',5)   //true
    • repeat(): 表示将原字符串重复n次，并返回一个新字符串
    • padStart()：补全字符串长度，用于头部补全，并返回一个新字符串
    • padEnd()：补全字符串长度，用于尾部补全，并返回一个新字符串
    • trimStart()：消除字符串头部的空格，并返回一个新字符串
    • trimEnd()：消除字符串尾部的空格，并返回一个新字符串
    let str = "xxx"
str.repeat(2)  //'xxxxxx'
str.padStart(5,'ab')  //'abxxx'
str.padEnd(5,'ab')  //'xxxab'

str = "   xxx   "
str.trim()  //'xxx'
str.trimStart()   //'xxx   '
str.trimEnd()   //'   xxx'
str.trimLeft()   //'xxx   '
str.trimRight()   //'   xxx'
    • matchAll()：返回一个正则表达式在当前字符串的所有匹配
    • replaceAll()：一次性替换所有匹配的字符串

四、数值的扩展

  • 二进制和八进制表示法：用前缀0b（或0B）和0o（或0O）表示，二进制和八进制
  • 数值字符串：允许 JavaScript 的数值使用下划线（_）作为分隔符
    0b111110111 === 503 // true
    0o767 === 503 // true
    1_000_000_000_000 === 10**12   //true
  • Number.isFinite()用来检查一个数值是否为有限的（finite），即不是Infinity
  • Number.isNaN()用来检查一个值是否为NaN
    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.isNaN(NaN) // true
    Number.isNaN(15) // false
    Number.isNaN('15') // false
    Number.isNaN(true) // false
    Number.isNaN(9/NaN) // true
    Number.isNaN('true' / 0) // true
    Number.isNaN('true' / 'true') // true
  • Number.parseInt() 返回转换值的整数部分
  • Number.parseFloat() 返回转换值的浮点数部分
  • Number.isInteger() 用来判断一个数值是否为整数
Number.parseInt === parseInt // true
Number.parseFloat === parseFloat // true
Number.parseFloat('12.45')  //12.45
Number.parseInt('12.45')  //12

Number.isInteger(25)   // true
Number.isInteger(25.55)   // false
Number.isInteger(25.00)   //true

JavaScript 能够准确表示的整数范围在-2^53到2^53之间（不含两个端点），超过这个范围，无法精确表示这个值,ES6 引入了Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量，用来表示这个范围的上下限

  • Number.MAX_SAFE_INTEGER 最大安全数值Math.pow(2, 53) - 1
  • Number.MIN_SAFE_INTEGER 最小安全数值-(Math.pow(2, 53) - 1)
  • Number.isSafeInteger() 用来判断一个整数是否落在安全范围之内
Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1   // true
Number.MAX_SAFE_INTEGER === 9007199254740991   // true
Number.MIN_SAFE_INTEGER === -Number.MAX_SAFE_INTEGER   // true
Number.MIN_SAFE_INTEGER === -9007199254740991   // true


Number.isSafeInteger(Number.MIN_SAFE_INTEGER - 1) // false
Number.isSafeInteger(Number.MIN_SAFE_INTEGER) // true
Number.isSafeInteger(Number.MAX_SAFE_INTEGER) // true
Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1) // false

Number.isSafeInteger('a') // false
Number.isSafeInteger(null) // false
Number.isSafeInteger(NaN) // false
Number.isSafeInteger(Infinity) // false
Number.isSafeInteger(-Infinity) // false

Number.isSafeInteger(3) // true
Number.isSafeInteger(1.2) // false
Number.isSafeInteger(9007199254740990) // true
Number.isSafeInteger(9007199254740992) // false
  • Number.EPSILONJS能够表示的最小精度
  • Math.trunc()：返回数值整数部分
  • Math.sign()：返回数值类型(正数1、负数-1、零0)
  • Math.cbrt()：返回数值立方根
  • Math.clz32()：返回数值的32位无符号整数形式
  • Math.imul()：返回两个数值相乘
  • Math.fround()：返回数值的32位单精度浮点数形式
  • Math.hypot()：返回所有数值平方和的平方根
  • Math.expm1()：返回e^n - 1
  • Math.log1p()：返回1 + n的自然对数(Math.log(1 + n))
  • Math.log10()：返回以10为底的n的对数
  • Math.log2()：返回以2为底的n的对数
  • Math.sinh(n)：返回n的双曲正弦
  • Math.cosh(n)：返回n的双曲余弦
  • Math.tanh(n)：返回n的双曲正切
  • Math.asinh(n)：返回n的反双曲正弦
  • Math.acosh(n)：返回n的反双曲余弦
  • Math.atanh(n)：返回n的反双曲正切 今天就到这里了，总结这些东西主要是加深印象，帮助自己更好的学习和理解，同时也希望对你们有所帮助。谢谢！ 参考：ES6 入门教程
avatar
文章
阅读
粉丝