Javascript——ES6( ECMAScript 6.0)语法

简介: Javascript——ES6( ECMAScript 6.0)语法

一、let/const与var的区别


var 会进行预解析,let/const不会

var可以声明两个重名的变量,let/const不能

var没有块级作用域,let/const有块级作用域


二、箭头函数


1.普通函数

//xxx.onclick=function(a=10,b=20){ }  可以为函数设置默认值,没传参数就用默认值
xxx.onclick=function(){ }
var xxx={fn:function(){} }
xxx.forEach(function(){})
setTimeout(function(){})
var xxx=function(){}


2.箭头函数

格式:把普通函数的function去掉,再在小括号后面加上j箭头符号(=>)

xxx.onclick=()=>{ }
var xxx={fn:()=>{} }
xxx.forEach(()=>{})
setTimeout(()=>{})
var xxx=()=>{}


三、结构赋值


1.以前数组

let arr=['hello','world']
let a=arr[0]
let b=arr[1]


2.解构赋值

let [a,b]=['hello','world']
console.log(a)
console.log(b)


四、解构赋值-解构对象(键值对)


1.以前获取对象

let obj={
name:"小明"
age:20
}
let name=obj.nam
let age=obj.nam


2.解构赋值

let obj={
name:"小明"
age:20
}
//定义两个变量name和age,并获取obj里的name和age的值
let{name,age}=obj //如同 let name=obj.nam ,let age=obj.nam
console.log(name,age)
//定义一变量a(为name取个别名a)
let{name:a}=obj


五、E6_模板字符串反引号使用


作用:

给变量赋值时可以换行

可以配合${ 变量 }来解析变量


//给变量赋值时可以换行
var a=`hello
world`
//输出也保持换行
console.log(a)
//可以配合${ 变量 }来解析变量
 var name="小明"
 var s=`他的名字是${name}`
 console.log(s)
//输出为:他的名字是小明


六、E6_展开运算符


格式: . . . 数组或 . . . 对象(键值对)

作用:把数组或键值对展开(把中括号和大括号去掉)


用途1:合并数组或键值对


//数组合并
var s1=[10,20]
var s2=[30,40]
var s3=[50,60,70]
var s=[...s1,...s2,...s3]
console.log(s)
//输出结果:[10,20,30,40,50,60,70]
//键值对合并
  var s1={name:"小明",age:12}
  var s2={sex:"男",hight:170}
  var s={...s1,...s2}
  console.log(s)
//结果:{name: '小明', age: 12, sex: '男', hight: 170}


用途2:给函数传值


//求数组里的最大值
var s=[2,4,5,7,20,4]
var max=Math.max(...s)//如同:max=Math.max(2,4,5,7,20,4)
//结果为:20


七、E6_类语法


格式:

class 类名{
constructor( 形参列表 ){
this.属性名=形参1
this.属性名=形参2
}
//直接写方法就行
方法名( ){ 方法体 }
//静态属性和方法,加一个static
static a=100
static hi( ){ 方法体 }
}


//E6的类
class  Person{
constructor(name,age){
this.name=name
this.age=age
  }   
    //方法
     sayHi(){ console.log("你好,世界!") }
    //静态属性和方法,加一个 static
    static a=100
    static to()function{ console.log("大家好") }
 }
//创建对象
var p1=new Person("小明",20)
 //执行方法
  p1.sayHi()
//执行静态属性和方法
Person.a
Person.to()
相关文章
|
3天前
|
JavaScript
详细讲解JS的解构赋值(Es6)
详细讲解JS的解构赋值(Es6)
|
6天前
|
JavaScript 前端开发
JavaScript语法关键点:变量用`var`、`let`、`const`声明
【6月更文挑战第22天】JavaScript语法关键点:变量用`var`、`let`、`const`声明;七种数据类型包括`Number`、`String`、`Boolean`、`Null`、`Undefined`、`Symbol`和`Object`;运算符如算术、比较、逻辑和赋值;流程控制有`if...else`、`switch`和各种循环。了解这些是JS编程的基础。
22 3
|
9天前
|
JavaScript 前端开发
JavaScript进阶-ES6新特性概览:let, const, arrow functions
【6月更文挑战第19天】ES6的`let`和`const`带来了变量声明的变革,解决了`var`的提升和作用域问题。`let`有块级作用域,避免了循环中的变量共享;`const`声明常量,值不可变但内容可变(如数组和对象)。箭头函数简化了函数定义,其`this`绑定遵循上下文,不具自己的`arguments`。这些特性提升了代码质量和可读性。
|
10天前
|
JavaScript 前端开发 API
ECMAScript vs JavaScript: 理解两者间的联系与区别
ECMAScript vs JavaScript: 理解两者间的联系与区别
|
11天前
|
JavaScript 前端开发 Java
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
16 2
|
11天前
|
SQL 自然语言处理 前端开发
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
12 2
|
1天前
|
JavaScript 前端开发
《编程之光:解密ECMAScript与JavaScript的微妙关系》
《编程之光:解密ECMAScript与JavaScript的微妙关系》
6 0
|
3天前
|
前端开发 JavaScript 安全
解锁 JavaScript ES6:函数与对象的高级扩展功能
解锁 JavaScript ES6:函数与对象的高级扩展功能
|
3天前
|
JavaScript 索引
JS数组常用方法总结,含ES6新方法,附示例代码
JS数组常用方法总结,含ES6新方法,附示例代码
|
29天前
|
JavaScript
细讲Node.js模块化,以及 CommonJS 标准语法导出和导入,详细简单易懂!
细讲Node.js模块化,以及 CommonJS 标准语法导出和导入,详细简单易懂!