您的当前位置:首页>全部文章>文章详情

ES6新特性总结

发表于:2022-01-23 09:50:30浏览:850次TAG: #ES6 #javascript #前端框架

1.const 与 let 变量

let 表示申明变量。const 表示申明常量。

常量定义了就不能改了。对象除外,因为对象指向的地址没变。

const在申明是必须被赋值。

两者都为块级作用域。

块级作用域与函数作用域。任何一对花括号({和})中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的,我们称之为块级作用域。函数作用域就好理解了,定义在函数中的参数和变量在函数外部是不可见的。

const a = 1
a = 0 //报错

关于使用let与const规则:

使用let声明的变量可以重新赋值,但是不能在同一作用域内重新声明

使用const声明的变量必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值


2. 模块字符串``

可以使用反引号``来进行字符拼接。${}

模板字面量本质上是包含嵌入式表达式的字符串字面量。
模板字面量用倒引号 ( `` )(而不是单引号 ( '' ) 或双引号( "" ))表示,可以包含用 ${expression} 表示的占位符。

let message = `${student.name} please see ${teacher.name} in ${teacher.room} to pick up your report card.`;


3. 解构

可以使用{}来对数组和对象进行解构。

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。

在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。

a、数组解构

数组解构使用中括号[]

let [a, b, c] = [1, 2, 3];
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 [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
剩余项...tail,剩余项必须是最后一项。
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []var  [...cc] = [1,2,3,4]         
cc//[1,2,3,4]
克隆数组默认值
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a'];// x='a', y='b'
let [x, y = 'b'] = ['a', undefined];// x='a', y='b' undefined比较特殊


4. 函数的参数默认值

函数传参可以有默认值

// ES6;
function printText(text = 'default') {
    console.log(text);
}


5. Spread / Rest 操作符...

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

当被用于迭代器中时,它是一个 Spread 操作符:迭代器 (Iterator)是按照一定的顺序对一个或多个容 器 中的元素行进遍历的一种机制

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]


6. 箭头函数

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

省略 return 关键字

this始终指向函数申明时所在作用域下的this值


//es5
var fun = function() {

}
//es6
var fn = () => {

}


7. for of

for of遍历的是键值对中的值

for in遍历的是键值对中的键


8. class类

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

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."


9. 导入导出

导入improt

导出export default


10. promise

Promise 用于更优雅地处理异步请求。

  <script>
    new Promise((resolve,reject) => {
      setTimeout(function() {
        resolve('成功了!')
      },1000)
      // reject("失败了,wuwu")
    }).then(data => {
      console.log(data)
    }).catch(err => {
      console.log(err)
    })
  </script>


11. async/await

比promise更好的解决了回调地狱。

async function() {
  awiat fn()
}


12. Symbol

ES6 引入了一种新的原始数据类型 Symbol ,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。

ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ,还新增了 Symbol 。

Symbol 函数栈不能用 new 命令,因为 Symbol 是原始数据类型,不是对象。可以接受一个字符串作为参数,为新创建的 Symbol 提供描述,用来显示在控制台或者作为字符串的时候使用,便于区分。

let sy = Symbol("KK");
console.log(sy);   // Symbol(KK)
typeof(sy);        // "symbol"
 // 相同参数 Symbol() 返回的值不相等let sy1 = Symbol("kk"); 
sy === sy1;       // false


13. Set集合

存储任何类型的唯一值,即集合中所保存的元素是不重复的。类数组结构。

arr = [1,2,3,1]
let arrNew = new Set(arr)
arrNew = [1,2,3]

类数组不是数组,要转化为数组Array.form(arrNew)这样arrNew才是数组了