Skip to main content

ES 6 语法知道哪些,分别怎么用?

作用域

var x = 1;
{
var x = 2;
}
console.log(x); // 输出 2

声明一个块级作用域的本地变量

function varTest() {
var x = 1;
{
var x = 2; // 同样的变量!
console.log(x); // 2
}
console.log(x); // 2
}

function letTest() {
let x = 1;
{
let x = 2; // 不同的变量
console.log(x); // 2
}
console.log(x); // 1
}
var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined

面试题:有如下代码,请写出控制台结果。

{
var a = 1;
let b = 2;
}
console.log(a)
console.log(b)
//1
//报错
console.log(a)
console.log(b)
{
var a = 1;
let b = 2;
}
//undefined
//报错

声明一个常量,其作用域可以是全局或本地声明的块。

const 非常类似用  let  语句定义的变量 但是常量的值是无法(通过重新赋值)改变的,也不能被重新声明。

  • #####箭头函数

    箭头函数表达式的语法比函数表达式更简洁

sum = (a, b) => a + b
nums.forEach( v => { console.log(v) })

词法 this:箭头函数不会创建自己的 this,它只会从自己的作用域链的上一层继承 this

参数处理

  • #####默认参数

    函数默认参数允许在没有值或 undefined 被传入时使用默认形参。

function multiply(a, b = 1) {
return a * b;
}

console.log(multiply(5, 2));
// expected output: 10

console.log(multiply(5));
// expected output: 5

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

function f(...[a, b, c]) {
return a + b + c;
}
f(1) // NaN (b and c are undefined)
f(1, 2, 3) // 6
f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)
function fun1(...theArgs) {
alert(theArgs.length);
}

fun1(); // 弹出 "0", 因为theArgs没有元素
fun1(5); // 弹出 "1", 因为theArgs只有一个元素
fun1(5, 6, 7); // 弹出 "3", 因为theArgs有三个元素
  • #####展开操作符 展开语法:当对象或数组中的所有元素都需要包含在某种列表中时,可以使用扩展语法。
function sum(x, y, z) {
return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6

console.log(sum.apply(null, numbers));//使用apply函数调用
// expected output: 6
let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]

解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

// Stage 4(已完成)提案中的特性
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

对象属性加强(对象初始化)

  • 属性定义支持短语法  obj = { x, y }
  • 属性名支持表达式  obj = {["baz" + quux() ]: 42}
  • 添加  __proto__  属性,但不建议使用

模块

  • 导入(import)

    静态的 import 语句用于导入由另一个模块导出的绑定

    • 导入接口(使用export语句)
    import {myExport} from '/modules/my-module.js';
    • 导入接口(使用export default语句)
    import myDefault from '/modules/my-module.js';
    • 导入整个模块
    import '/modules/my-module.js';
  • 导出(export)
    • 默认导出(export default)
    export default function cube(x) {}
    import cube from './my-module.js';
    • 命名导出(export)
    function cube(x) {
    return x;
    }
    export { cube}
    import { cube } from 'my-module.js'
  • Promise

  • async/await

字符串模版

字符串模版:是允许嵌入表达式的字符串字面量,可以使用多行字符串和字符串插值功能。

  • 多行字符串

    • 旧方式
    console.log('string text line 1\n' +
    'string text line 2');
    // "string text line 1
    // string text line 2"
    • 新方式:反引号
    console.log(`string text line 1
    string text line 2`);
    // "string text line 1
    // string text line 2"
  • 插入表达式

    • 旧方式
      var a = 5;
    var b = 10;
    console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
    // "Fifteen is 15 and
    // not 20."
    • 新方式:反引号
      var a = 5;
    var b = 10;
    console.log(`Fifteen is ${a + b} and
    not ${2 * a + b}.`);
    // "Fifteen is 15 and
    // not 20."
  • 带标签的模板字面量

const str = console.log`hello world`
// 打印结果
[ 'hello world' ]
const name = 'tom'
const gender = false

const result = console.log`hey, ${name} is a ${gender}.`
// 打印结果:
[ 'hey, ', ' is a ', '.' ] 'tom' false
const name = 'tom'
const gender = false

const result = console.log(`hey, ${name} is a ${gender?'男':'女'}.`)
// 打印结果:
hey, tom is a 女.
const name = 'tom'
const gender = false

function myTagFunc(strings, name, gender) {
// console.log(strings, name, gender)
// return '123'
const sex = gender ? 'man' : 'woman'
return strings[0] + name + strings[1] + sex + strings[2]
}

// result 的返回值是根据函数中定义的返回,如果上面定义的 1 result 打印的变是1
const result = myTagFunc`hey, ${name} is a ${gender}.`
// 打印结果:
hey, tom is a woman.
console.log(result)

在标签函数的第一个参数中,存在一个特殊的属性 raw[rɔː],我们可以通过它来访问模板字符串的原始字符串,而不经过特殊字符的替换。

function tag(strings) {
console.log(strings.raw[0]);
}

tag`string text line 1 \n string text line 2`;
// "string text line 1 \n string text line 2"

另外,使用String.raw()  方法创建原始字符串和使用默认模板函数和字符串连接创建是一样的。

var str = String.raw`Hi\n${2+3}!`;
// "Hi\n5!"

str.length;
// 6

str.split('').join(',');
// "H,i,\,n,5,!"

参考文章: