ES6有哪些新特性？

最新推荐文章于 2024-09-10 09:15:02 发布

小小姜鸭

最新推荐文章于 2024-09-10 09:15:02 发布

阅读量868

点赞数 22

文章标签： es6 javascript 开发语言

本文链接：https://blog.csdn.net/qq_44791442/article/details/136722188

版权

简介
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

文章目录

1、 let和const命令
2、模版字符串
3、函数
4、symbol数据类型
5、set数据类型
6、Map数据类型
7、数组的扩展方法
- 7.1 数组的方法
8、Promise
9、class类的用法
- 9.1 基本用法
- 9.2 类的继承
10、es6的模块化

1、 let和const命令

let、const、var有什么区别？

let、const不具备变量提升，而var有变量提升效果

<script>
  console.log(a);
  var a = 'ok'

  console.log(b);
  let b = 'ok'
</script>

打印结果：
在这里插入图片描述
原因分析，var具有变量提升代码等同于

<script>
  var a
  console.log(a);
  a = 'ok'
</script>

补充函数声明提升：

  // 函数声明（具有变量提升）
  foo()
  function foo(){
   console.log('函数提升了');
  }
  // var,function同时赋值
  console.log(foo2);
  function foo2(){
    console.log('函数声明优先级更高');
  }
   var foo2 = 2
   // 函数表达式
   foo1()
  var foo1 = function(){
    console.log('yes');
  }

打印结果：
在这里插入图片描述

let、const有块级作用域（通常是由花括号{}包裹的代码段,一个块级的范围（也称为块）是由一对花括号{}定义的代码段。一个块可以包含一条或多条语句。通常，控制语句（如if、for、while等）和函数定义也会创建块级作用域。

 // 示例1：if语句中的块级作用域
if (true) {
 let x = 10;
 console.log(x); // 输出: 10
}
// console.log(x); // 这里会报错，因为x在if块之外不可见

// 示例2：for循环中的块级作用域
for (let i = 0; i < 3; i++) {
 console.log(i); // 输出: 0, 1, 2
}
// console.log(i); // 这里会报错，因为i在for循环块之外不可见

// 示例3：函数内部的块级作用域
function test() {
 let y = 20;
 console.log(y); // 输出: 20
}
test();
// console.log(y); // 这里会报错，因为y在函数块之外不可见

let、const不能重复声明

var a = 1
var a = 2
console.log(a) //2

let b = 1
let b = 2 //会报错
console.log(b)

const一旦被赋值，不允许修改

 const a = 3
a= 4

报错：
在这里插入图片描述

注意，但可以修改对象中的属性值

const c = {name:'姜姜'}
c.name = '鸭'
console.log(c); //{name:'鸭'}

结果：
在这里插入图片描述
经典示例：

var arr = []
var arr1 = []
for(var i=0;i<10;i++){
  arr[i] = function(){
    return i
  }
}
for(let j=0;j<10;j++){
  arr1[j] = function(){
    return j
  }
}
console.log(arr[5]()); //10
console.log(arr1[5]()); //5

结果：
在这里插入图片描述

2、模版字符串

模版字符串：使用tab键上面的反引号 ··，插入变量的时候用 ${变量名}

 var a = '姜姜鸭'
 var b = '我的名字是(' + a + ')'
 var c = `我的名字是(${a})`
 console.log(b);//我的名字是(姜姜鸭)
 console.log(c);//我的名字是(姜姜鸭)

打印结果：
在这里插入图片描述

3、函数

3.1 默认值

1）带参数默认值的函数

 // es5的写法
  function add(a,b){
    a = a||1
    b = b||2
    console.log(a+b);//3
  }
  // es6
  function add(a=1,b=2){
    console.log(a+b);
  }
  // add() //3
  // 传一个值
  function add(a=1,b){
    console.log(a,b); //2,undefined
  }
  function add(a,b=2){
    console.log(a,b); //2,2
  }
  add(2)

2)默认的值也可以是一个表达式

 function add(a,b=getVal(5)){
    return a+b 
  }
  function getVal(val){
    return val+5
  }
  console.log(add(10)); //20

3.2 剩余参数

剩余参数：由三个点…和一个紧跟着的具名参数指定…keys

function checkArgs(...args){
    console.log(args); //['a', 'b', 'c']
  }
 checkArgs('a','b','c')

3.3 扩展运算符…

剩余参数：把多个独立的参数合并到一个数组中
扩展运算符：将一个数组分割，并将各个项作为分割的参数传给函数

var arr=[10,20,30,40]
console.log(...arr); //10 20 30 40

3.4 箭头函数

使用=>来定义，function(){ }等同于（) => {}

 // es5
  let add = function(a,b){
    return a+b
  }
  //箭头函数
  let add1 = (a,b)=>{
    return a+b
  }
  // 只有一个参数，可以去掉括号
  let add2 = a=>{
    return a
  }
  //可以省略大括号和return
  let add3 = a=>(a+5) //7
  console.log(add3(2));

箭头函数：没有this绑定，通过查找作用域链来确定
注意事项：
①使用箭头函数，函数内部没有argumnets
②箭头函数不能使用new关键字实例化对象

3.4 解构赋值

优点：代码书写上更简单易读
相关代码练习：

// 解构赋值
let obj = {
  name:'姜',
  sex:'女',
  age:18
}
// let {name,sex} = obj
// console.log(name,sex); //姜 女

let {name,...res} = obj
console.log(res); //{sex;'女'，age:18}

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

// 数组解构
let arr =[1,2,3]
let [c,d] = arr
console.log(c,d); //1,2
let [e,f=5] = [4]
console.log(e,f); //4,5

3.5 扩展的对象功能

①属性名和属性值一样，可简写，函数也可以简写

// 属性名和属性值一样，可简写
let a = 1
let b = 2
let obj1 = {
  a,
  b,
  c(){
    console.log(obj1.a);
  }
}
console.log(obj1.a,obj1.b);//1,2
obj1.c() //1

② 对象的合并,Object.assign(target,obj1,obj2,…)

let newObj = Object.assign({},{a:1},{b:2})
console.log(newObj); //{a:1,b:2}

4、symbol数据类型

原始数据类型Symbol，它表示独一无二的值

// 获取symbol的属性名
let s = Object.getOwnPropertySymbols(obj)
console.log(s[0]); //Symbol(s1)
let m = Reflect.ownKeys(obj)
console.log(m); //

5、set数据类型

集合：表示无重复值的有序列表

let set = new Set()
// 增加元素
set.add(10)
set.add(20)
console.log(set); //Set(2){10,20}
// 删除元素
set.delete(10)
console.log(set); //Set(1){20}
// 添加重复元素
set.add(10)
set.add(20)
console.log(set); //Set(1){10}
// 校验某个值是否在Set中

// 将set装换为数组（去重）
let set2 = new Set([1,2,3,4,4,5])
// 扩展运算符
let arr = [...set2]
console.log(arr); //[1, 2, 3, 4, 5]

6、Map数据类型

map数据类型：键值对的有序列表，键值是任意的

let map = new Map()
map.set('name','姜')
map.set('age',18)
console.log(map);

结果：
在这里插入图片描述

let map = new Map()
map.set('name','姜')
map.set('age',18)
// console.log(map);
map.delete('name')
console.log(map);

结果：
在这里插入图片描述

let map = new Map()
map.set('name','姜')
map.set('age',18)
// console.log(map);
map.delete('name')
// console.log(map);
let a = map.has('age')
// console.log(a); //true
let age = map.get('age') 
// console.log(age);//18
map.clear()
// console.log(map);//Map(0) {size: 0}

map.set(['a',[1,2,3]],'hello')
console.log(map);

结果：
在这里插入图片描述

7、数组的扩展方法

7.1 数组的方法

1）from()：将伪数组转换为真正的数组，from()还可以接受第二个参数，用来对某个元素进行处理

function add(){
  return Array.from(arguments)
}
let arr = add(1,2,3) 
console.log(arr); //[1, 2, 3]
let arr1=[1,2,3]
let res = Array.from(arr1,ele=>ele+1)
console.log(res); //[2,3,4]

2）of()：将一组值，转换为数组

console.log(Array.of(11,12,'nice',[13,14],{age:18})); // [11, 12, 'nice', Array(2), {…}]

3)find() 、findIndex()
find():找出第一个符合条件的成员
findIndex():找出第一个符合条件的成员的索引值

let num = [1,2,-10,-20,9,2].find((n)=>{
  return n < -10
})
console.log(num);//-20
let num1 = [1,2,-10,-20,9,2].findIndex((n)=>{
  return n < -10
})
console.log(num1);//3

4)entries()、keys()、values()返回一个遍历器，可以使用for…of…进行遍历
keys:对键名遍历
values:对键值遍历
entries：键值对遍历

for(let index of arr2.keys()){
  // console.log(index); //0,1,2
}
for(let value of arr2.values()){
  // console.log(value);//1,2,3
}
for(let [index,value] of arr2.entries()){
  console.log(index,value);//0 1   1 2   2 3
}

5)includes()：返回一个布尔值，表示某个数组是否包含给定的值

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

8、Promise

在我的另一篇文章中有详细教程：
链接: promise教程

9、class类的用法

9.1 基本用法

用法：class 类名{}
constructor在实例化的时候立即被调用

class Person{
  constructor(name,age,sex){
    this.name = name,
    this.age = age
    this.sex = sex
  }
  sayName(){
    return this.name
  }
}
// 可通过Object.assign一次性向类中添加多个方法
Object.assign(Person.prototype,{
  sayAge(){
    return this.age
  },
  saySex(){
    return this.sex
  }
})
let p1 = new Person('姜姜鸭',18,'女')
console.log(p1.name,p1.age,p1.sex); //姜姜鸭 18 女

9.2 类的继承

// 父类
class Animal{
  constructor(name,age){
    this.name = name
    this.age = age
  }
  sayName(){
    return this.name
  }
  sayAge(){
    return this.age
  }
}
// 子类
class Dog extends Animal{
  constructor(name,age,color){
    // 通过super继承属性
    super(name,age)
    // 添加子类自己的属性
    this.color = color
  }
  // 
  // 子类自己的方法
  sayColor(){
    return this.color
  }
  // 重新修改了父类的方法
  sayAge(){
      return this.age+1
    }
}
let p2 = new Dog('辣条',18,'red')
// 继承了父类的方法
console.log(p2.sayName()); //辣条
console.log(p2.sayAge());//19

let p3 = new Animal('可乐',20)
console.log(p3.age);//20

10、es6的模块化

es6的模块功能主要有两个命令构成：export和import，一个模块就是一个独立的文件
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>module</title>
</head>
<body>
  
</body>
<script type='module'>
  // 引入es文件
  // （与导出的法一法二无对应关系）引入法一：
  // import obj,{name,age,add} from './module.js'
  // console.log(name); //姜姜鸭
  // console.log(obj); //{color:'red'}
  // 引入法二：
  import * as f from './module.js'
  console.log(f);
</script>
</html>

module.js

// 法一：直接导出
// export let name = '姜姜鸭'
// export let age =18
// export function add(a,b){
//   return a + b
// }
// 法二：通过对象抛出
 let name = '姜姜鸭'
 let age =18
 function add(a,b){
  return a + b
}
export {name,age,add}

let obj = {
  color:'red'
}
// export default只能使用一次
export default obj

打印结果：
在这里插入图片描述

参考文献：
ES6阮一峰教程: https://es6.ruanyifeng.com/#docs/intro

小小姜鸭

关注

22
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
ES6有哪些新特性？

简介ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
复制链接

扫一扫