当前位置: 首页 > 工具软件 > es6tutorial > 使用案例 >

尚医通学习笔记 Day4---ES6语法部分了解

黄君博
2023-12-01

ES6( ECMAScript 6.0) ,

概念
ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。

ES6与js关系的关系:前者是后者的规范,后者是前者的一种实现

  1. Let和Const
    ES6 新增加了两个重要的 JavaScript 关键字: letconst

let 声明的变量只在 let 命令所在的代码块内有效。而js中var可以多次声明
const 声明一个只读的常量,一旦声明,常量的值就不能改变。

  1. 常用的对象解构
//对象解构
			let user ={name:'12312',age:12}
			
			//传统js
			let name1=user.name
			let age1=user.age
			console.log(name1,age1)
			
			//ES6语法
			let {name,age}=user
			console.log(name,age)

3.模板字符串
相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式。

let name = "Mike";
let age = 27;
let info = `My Name is ${name},I am ${age+1} years old next year.`
console.log(info);

4.ES6对象
ES6允许对象的属性直接写变量,这时候属性名是变量名,属性值是变量值。

const age = 12;
const name = "Amy";
//ES6
const person = {age, name};
person   //{age: 12, name: "Amy"}
//等同于
const person = {age: age, name: name}

5.对象的拓展运算符
拓展运算符(…)用于取出参数对象所有可遍历属性然后拷贝到当前对象。

对象的复制

let person = {name: "Amy", age: 15};
let someone = { ...person };
//someone{name: "Amy", age: 15}

对象的合并

let age = {age: 15};
let name = {name: "Amy"};
let person = {...age, ...name};

//person;  {age: 15, name: "Amy"}

6.箭头函数

*箭头函数提供了一种更加简洁的函数书写方式。多用于匿名函数的定义,基本语法是:*参数 => 函数体

//传统方式定义函数
var f1 =function(a){
	return a
}
console.log(f1(3))
//es6使用箭头函数定义
var f1=a =>a
console.log(f1(3))

当箭头函数没有参数或者有多个参数,要用 () 括起来。
var f = (a,b) => a+b;
f(6,2); //8

当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回

var f = (a,b) => {
 let result = a+b;
 return result;
}
f(6,2);  // 8

具体参考
https://www.runoob.com/w3cnote/es6-tutorial.html

 类似资料: