ES6常用的特性总结

272 阅读4分钟

1、变量声明

ES6之后,JavaScript中声明变量的方法有:var、function、import、class、const、let 其中最常用的便是const和let了。

const:

  • 声明常量:const声明常量,声明在之后,就不可以更改。
  • 声明变量:const声明变量,必须立即初始化。

ps:若这个变量是数组或者对象的话,它里面持有的内容是可以被更新的。因为使用const声明一个复合类型的数据(主要是对象和数组),变量名不指向数据,而是指向数据的地址。

let:

  • 作用域:let声明的变量只有所在的代码块有效,可以理解为let声明有作用域。
  • 不存在变量的提升:使用let声明的变量要在声明后使用,否则会报错。
  • 暂时性死区:使用let命令声明变量之前,该变量都是不可用的。

let类似于var,但是不同于var

  1. var定义的变量,存在变量的提升。
  2. var和function声明的全局变量,顶层对象可访问

ps:顶层对象,浏览器中指的是window对象,在Node中指的是global对象。

以浏览器为例:

 //使用var定义的变量,存在变量的提升。
 console.log(a);   //undefined
 var a = 10; 

 //使用let定义的变量,不存在变量的提升,所以下面的代码会报错
 console.log(b);  // ReferenceError: b is not defined
 let b = 20;

//var和function声明的全局变量,顶层对象可访问。如下:
 var a = 1;
 window.a  //1
 function b(){}
 window.b  //ƒ b(){}

//let声明变量为,顶层对象不可访问
let c=2;
window.c  //undefined

2、模板字符串

 //使用反引号包裹内容,可以使用${},插入变量
 //字符串中嵌入变量
 let name = 'Bob',time = 'today';
 let str = `Hello ${name},how are you ${time}`

3、字符串扩展方法

  1. includes
  2. startWith
  3. endsWith

4、箭头函数

  • 写法简化

  • 箭头函数不改变this指向

    const name = 'tony'
    const people = {
      name: 'tom',
      getName: () => console.log(this.name),
      peopleName: function () {
        console.log(this.name)
      }
    }
    people.getName()  //tony
    person.peopleName() //tom
    

5、函数参数增强:参数默认值

  const fn = function (x=1, y) {
      console.log("x:",x)
      console.log("y:",y)
    }
  fn()// x:1  y:undefined

6、...操作符

 const arr = [1,2,3,4]
 console.log(...arr) //1 2 3 4

7、使用export和import实现模块化

//app.js
let person = {
    age:'10',
    name:'jack'
};
module.exports = person;  //所暴露出的对象

//index.js
let person = require('./app');   //加载app模块
console.log('姓名'+person.name);  //姓名jack

8、新方法

Object.assign()
//合并多个对象,第一个参数就是最终的返回值,如果对象的属性名相同,后面的覆盖前面的
let A = {
   a: 'a',
   b: 'b'
}
let B = {
   b: 'bbb',
   c: 'c'
   d: 'd'
}
let result = Object.assign({}, A, B)
console.log(objA, result) 
//{a: "a", b: "b"} {a: "a", b: "bbb", c: "c",d:"d"}Object.is()
//es5中,对于0的判断不区分正负值,-0 == +0返回true,NaN == NaN返回 返回false;
//Object.is()规避了这些问题
Object.is(+0, -0)//false
Object.is(NaN, NaN) //true

Object.keys() 
Object.keys({a:1,b:2})   //["a", "b"]

Object.values()
Object.values({a:1,b:2}) //[1, 2]

Object.entries() 
Object.entries({a:1,b:2}) // [["a",1],["b",2]]

9、数据结构

set 是一种类数组,是只存储key的集合,key不能重复,
Set去重  -0 与+0  NaN与NaN  是相等的,对象始终是不相等的,
Array.from方法可以将 Set 结构转为数组。
常用方法:
add(value):添加某个值,返回Set结构本身。
delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
has(value):返回一个布尔值,表示该值是否为Set的成员。
clear():清除所有成员,没有返回值。//用于数组去重

const arr = [1,2,3,2,4]
console.log([... new Set(arr)]) //[1,2,3,4]

//Set去重  -0 与+0  NaN与NaN 是相等的,对象始终是不相等的
console.log(...new Set([NaN, NaN, +0, -0]));//NaN 0
console.log(...new Set([{1:1},{1:1}]));//{ '1': 1 } { '1': 1 }
//Array.from方法可以将 Set 结构转为数组。
const items = new Set([1, 2, 3, 4, 5]); //items {1, 2, 3, 4, 5}
const array = Array.from(items);  //array [1, 2, 3, 4, 5]

Set 结构的实例有四个遍历方法,可以用于遍历成员。
常用方法:
keys():返回键名的遍历器
values():返回键值的遍历器
entries():返回键值对的遍历器
forEach():使用回调函数遍历每个成员
map
// 创建 let m = new Map([[1,'a'], [2,'b']]);
 console.log(m) // {1 => "a", 2 => "b"} 
// 取值 
m.get(1) // 'a' 
// 赋值 
m.set(3, 'c')
// 删除 
m.delete(3) // true or false 
// 验证 Key 是否存在 
m.has(3) // true or false 
// 长度 
m.size // 2 
// 获取 Key | 返回一个可迭代对象,具体查看迭代相关章节
m.keys() // MapIterator {1, 2} 
// 获取 Value 
m.values() // MapIterator {'a', 'b'}