【js】ES6最常用的7个新特性

1.变量:const和let

ES6推荐使用let声明局部变量,相比之前的var(无论声明在何处,都会被视为声明在函数的最顶部) let和var声明的区别:

var x = '全局变量';

{

  let x = '局部变量';

  console.log(x); // 局部变量

}

console.log(x); // 全局变量

let表示声明变量,而const表示声明常量,两者都为块级作用域;const 声明的变量都会被认为是常量,意思就是它的值被设置完成后就不能再修改了:

const a = 1

a = 0 //报错

如果const的是一个对象,对象所包含的值是可以被修改的。抽象一点儿说,就是对象所指向的地址没有变就行:

const student = { name: 'cc' }

student.name = 'yy';// 不报错

student  = { name: 'yy' };// 报错,相当于给了一个新的对象

有几个点需要注意:

  • let 关键词声明的变量不具备变量提升(hoisting)特性

  • let 和 const 声明只在最靠近的一个块中(花括号内)有效

  • 当使用常量 const 声明时,请使用大写变量,如:CAPITAL_CASING

  • const 在声明时必须被赋值

2.模板字符串

在ES6之前,我们往往这么处理模板字符串: 通过“\”和“+”来构建模板

$("body").html("This demonstrates the output of HTML \

content to the page, including student's\

" + name + ", " + seatNumber + ", " + sex + " and so on.");

而对ES6来说

  1. 基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定;

  2. ES6反引号(``)直接搞定;

$("body").html(`This demonstrates the output of HTML content to the page,

including student's ${name}, ${seatNumber}, ${sex} and so on.`);

//ES6之后模版字符串,还可以使用反引号和 ${} 插值输出内容,还他喵的支持换行666

console.log(`

---${Date.now()}---

---${ctx.request.method}---

---${ctx.request.url}---

`)

输出:


     ---1570948497280---
     ---GET---
     ---/---

3.箭头函数(Arrow Functions)

ES6 中,箭头函数就是函数的一种简写形式,使用括号包裹参数,跟随一个 =>,紧接着是函数体;

箭头函数最直观的三个特点。

  • 不需要 function 关键字来创建函数

  • 省略 return 关键字

  • 继承当前上下文的 this 关键字

// ES5

var add = function (a, b) {

    return a + b;

};

// ES6 使用箭头函数

var add = (a, b) => a + b;

// ES5

[1,2,3].map((function(x){

    return x + 1;

}).bind(this));

    

// ES6 使用箭头函数

[1,2,3].map(x => x + 1);

细节:当你的函数有且仅有一个参数的时候,是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return;

4.Spread / Rest 操作符

Spread / Rest 操作符指的是 ...,具体是 Spread 还是 Rest 需要看上下文语境。

当被用于迭代器中时,它是一个 Spread 操作符:

function foo(x,y,z) {

  console.log(x,y,z);

}

let arr = [1,2,3];

//作为实实在在的变量,经常用到的,还是遍历

foo(...arr); // 1 2 3

当被用于函数传参时,是一个 Rest 操作符:当被用于函数传参时,是一个 Rest 操作符:

function foo(...args) {//定义了一个数组,直接传元素就可以了

  console.log(args);

}

foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

5.for...of 和 for...in

for...of 用于遍历一个迭代器,如数组:

let letter = ['a', 'b', 'c'];

letter.size = 3;

for (let letter of letters) {

  console.log(letter);

}

// 结果: a, b, c

for...in 用来遍历对象中的属性:

let stu = ['Sam', '22', '男'];

stu.size = 3;

for (let stu in stus) {

  console.log(stu);

}

// 结果: Sam, 22, 男

6.类

ES6 中支持 class 语法,不过,ES6的class不是新的对象继承模型,它只是原型链的语法糖表现形式。

函数中使用 static 关键词定义构造函数的的方法和属性

class Student {

  constructor() {

    console.log("I'm a student.");

  }

  study() {

    console.log('study!');

  }

  static read() {

    console.log("Reading Now.");

  }

}

console.log(typeof Student); // function

let stu = new Student(); // "I'm a student."

stu.study(); // "study!"

stu.read(); // "Reading Now."

类中的继承和超集:

class Phone {

  constructor() {

    console.log("I'm a phone.");

  }

}

class MI extends Phone {

  constructor() {

    super();

    console.log("I'm a phone designed by xiaomi");

  }

}

let mi8 = new MI();

extends 允许一个子类继承父类,需要注意的是,子类的constructor 函数中需要执行 super() 函数。 当然,你也可以在子类方法中调用父类的方法,如super.parentMethodName()。 在 这里 阅读更多关于类的介绍。

有几点值得注意的是:

  • 类的声明不会提升(hoisting),如果你要使用某个 Class,那你必须在使用之前定义它,否则会抛出一个 ReferenceError 的错误

  • 在类中定义函数不需要使用 function 关键词

7.数组includes

Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。ES2016 引入了该方法。

[1, 2, 3].includes(2)     // true

[1, 2, 3].includes(4)     // false

[1, 2, NaN].includes(NaN) // true,解决indexOf的缺陷

//第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置

[1, 2, 3].includes(3, 3);  // false

[1, 2, 3].includes(3, -1); // true

另外,Map 和 Set 数据结构有一个has方法,需要注意与includes区分。

  • Map 结构的has方法,是用来查找键名的,比如Map.prototype.has(key)WeakMap.prototype.has(key)Reflect.has(target, propertyKey)

  • Set 结构的has方法,是用来查找值的,比如Set.prototype.has(value)WeakSet.prototype.has(value)

发布了283 篇原创文章 · 获赞 21 · 访问量 20万+

猜你喜欢

转载自blog.csdn.net/dangbai01_/article/details/102516837