JavaScript——ES6新特性

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

拒丨绝

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

阅读量115

点赞数

分类专栏：笔记文章标签： javascript es6 前端

本文链接：https://blog.csdn.net/nangongwenxuan/article/details/130190811

版权

笔记专栏收录该内容

58 篇文章 0 订阅

订阅专栏

本文介绍了ES6中的重要特性，包括数组和对象的解构赋值，扩展运算符在字符串、数组和对象中的应用，模板字符串的使用，以及箭头函数、对象简洁表示法、参数默认值、rest参数、类和继承的概念。此外，还讨论了ES6的模块化机制，包括export和import的使用方式。

摘要由CSDN通过智能技术生成

1.解构

//1.数组解构
let arr = ['小明', 30, '男'];
let [name, age, gender] = arr

//2.对象解构
const user = {name: '大明', age: 20, gender: '女'}
const {name, age, gender} = user

2.扩展运算符

//1.字符串
...str
场景: 将字符串转为数组 [...str]

//2.数组
...arr
场景:
	浅拷贝数组: [...arr]
	合并数组: [...arr1, ...arr2, ...arr3]
	伪数组转为真数组: [...arguments]  [...divElements]

//3.对象
...obj
场景: 
	浅拷贝: {...obj}
	合并对象: {...user1, ...user2}

3. 模板字符串

//1.语法
let a = '悲伤'
`这是一个${ a }的故事`

//2.注意
${ 表达式  }
表达式: 具有一个结果就叫表达式

4. 对象简洁表示法

const user = {
  name,
  age,
  show,
  eat(){}
}

5. 箭头函数

//es5
const foo = function (num){
  return num + 20
}

//es6
const foo = num => num + 20;

//es5
setTimeout(function (){}, 300)

//es6
setTimeout(() => {}, 300)

6.es6参数默认值

//es5
const foo = function (a){
  a = a || '默认值'
}
foo()

//es6
const foo = (a='默认值') => {
  
}
foo()

7. rest参数

const foo = (a, b, ...c) => {
  	
}
foo(1,2,3,4,5,6,7)

8.ES6类

//父类
class Person{
  sex = '男'
  fav = '跳'
  //实例属性
  constructor(name, age){
    	this.name = name;
    	this.age = age;	
  }

  //原型方法
  show(){

  }
  eat(){

  }
  //静态方法 == 只能类调用
  static foo(){

  }
}

9.ES6类的继承

//子类
class Stu extends Person {
  constructor(name, age ,skill){
    super(name, age) //继承属性
    this.skill = skill
  }
  //原型方法
  showName(){
    
  }
}

10. es6模块化

//1.es6官方自定义的模块化
规定: 1. 一个js文件就是一个模块 2.模块之间存在相互依赖关系
使用1: export可以导出多次
	导出: 	
        export 数据	
        export 函数
        export 对象

        export{数据, 函数, 对象}
      
    导入: 
	  	import {} from '模块路径'


使用2: export default 一个模块中只能用一次
	导出
    	export default {数据, 函数, 对象}

	导入: 
		import 自定义对象名 from '模块路径'