ECMAScript6(ES6)基础语法

A尘埃

已于 2023-10-13 16:28:08 修改

阅读量320

点赞数

文章标签： es6 javascript 前端

于 2023-10-12 17:54:07 首次发布

本文链接：https://blog.csdn.net/usa_washington/article/details/133788175

版权

本文介绍了JavaScript中let、var、const的区别，以及ES6的新特性如解构赋值、模板字符串、对象扩展运算符、箭头函数和模块化。还提到了如何使用Babel将ES6代码转换为ES5以在Node.js中运行。

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

let声明变量

//var 声明的变量没有局部作用域，可以多次声明
//let 声明的变量，有局部作用域，只能声明一次
{
	var a = 0
	let b =1
}
console.log(a)
console.log(b) //报错

const声明常量

const PI = "3.14" //常量一旦定义不允许更改，而且必须初始化

解构赋值

//传统方式
let a = 1,b = 2,c = 3
console.log(a,b,c)

//ES6
let [x,y,z] = [1,2,3]
console.log(x,y,z)

//对象解构
let user = {name:'jordan',age:23}
//传统取值
let name1 = user.name
let age1 = user.age
//ES6
let{name,age} = user //结构的变量必须是user中的属性
console.log(name,age)

模板字符串

用反引号`
除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式

let name = 'jordan'
let age = 20

let info = `My name is ${name},
	I am ${age+1}`

console.log(info)

声明对象简写


const name = "jordan"
const age = 20

//传统方式定义对象
const user1 = {name:name,age:age}
console.log(user1)

//es6
const user2 = {name,age}
console.log(user2)

对象拓展运算符

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

let person1 = {name:"jordan",age:23}
let someone1 = {...person1} //将person1的内容复制到someone1

console.log(someone1)

let age = {age:15}
leg name = {name:jordan}
let person2 = {...age,...name} //合并对象
console.log(person2)

箭头函数

参数=>函数体多用于匿名函数的定义

//传统
var f1 = function(a){
	return a
}
console.log(f1(1));

//ES6
var f2 = a => a
console.log(f2(1));

模块化

①、创建一个目录文件夹moduledemo，并初始化npm init

②、创建一个src，并创建两个文件01.js，02.js
在这里插入图片描述
01.js 提供两个方法

export default{
	list(){
		console.log('list......')
	},
	save(){
		console.log('save......')
	}
}

02.js中进行对01.js中的方法调用

import user from './01.js'  //引入，然后取一个别名user

user.list()
user.save()

【此时程序无法运行：因为ES6的模块化无法在Node.js中执行，需要通过Babel编辑成ES6后再执行】

babel转码器

将ES6转化为ES5

①、安装babel工具

npm install -g babel-cli

查看是否安装成功 babel --version

②、在根目录下创建一个.babelrc文件，该文件用来设置转码规则和插件

{
	"presets":["es2015"],
	"plugins":[]
}

③、安装转码器

npm install -D babel-preset-es2015

④、使用命令将src目录下的js文件转化为ES5到指定目录dist中

babel src -d dist

⑤、在dist目录中执行node 02.js命令进行调用