天津市建设工程合同备案网站,网页版微信登录入口官网,网站建设sz886,家具家居网站建设概述
ECMAScript 6#xff0c;简称ES6#xff0c;是JavaScript语言的一次重大更新。它于2015年发布#xff0c;是原来的ECMAScript标准的第六个版本。ES6带来了大量的新特性#xff0c;包括箭头函数、模板字符串、let和const关键字、解构、默认参数值、模块系统等等#…概述
ECMAScript 6简称ES6是JavaScript语言的一次重大更新。它于2015年发布是原来的ECMAScript标准的第六个版本。ES6带来了大量的新特性包括箭头函数、模板字符串、let和const关键字、解构、默认参数值、模块系统等等大大提升了JavaScript的开发体验。
let和const
let 1、let 不能重复声明 2、let有块级作用域非函数的花括号即{ }括号遇见let会有块级作用域也就是只能在花括号里面访问。 3、let不会预解析进行变量提升要访问必须要在声明let变量代码后 4、let 定义的全局变量不会作为window的属性 5、let在es6中推荐优先使用 const 1、新增const和let类似只是const定义的变量不能修改即const为不可更改的let 2、并不是变量的值不得改动而是变量指向的那个内存地址所保存的数据不得改动。 3、const用来定义不可更改的常量 模板字符串 模板字符串template string是增强版的字符串用反引号标识 1、字符串中可以出现换行符 2、模板字符串内输出变量和拼接变量使用 ${xxx} 形式 例
let num 8let str aaaa${num}abbbccc
console.log(str)控制台的输出结果为
aaa
a8a
bbb
ccc
解构表达式
解构赋值是一种方便的语法可以快速将数组或对象中的值拆分并赋值给变量。解构赋值的语法使用花括号 {} 表示对象方括号 [] 表示数组。
通过数组解构将数组中的值赋值给变量
let [a, b, c] [1, 2, 3]; //新增变量名任意合法即可本质是按照顺序进行初始化变量的值
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3数组 [1, 2, 3] 中的第一个值赋值给 a 变量第二个值赋值给 b 变量第三个值赋值给 c 变量。 可以使用默认值为变量提供备选值在数组中缺失对应位置的值时使用该默认值。例如
let [a, b, c, d 4] [1, 2, 3];
console.log(d); // 4对象解构赋值给变量
可以通过对象解构将对象中的值赋值给变量
let {a, b} {a: 1, b: 2};
//新增变量名必须和属性名相同本质是初始化变量的值为对象中同名属性的值
//等价于 let a 对象.a let b 对象.bconsole.log(a); // 1
console.log(b); // 2该语句将对象 {a: 1, b: 2} 中的 a 属性值赋值给 a 变量b 属性值赋值给 b 变量。 可以为标识符分配不同的变量名称使用 : 操作符指定新的变量名。例如
let {a: x, b: y} {a: 1, b: 2};
console.log(x); // 1
console.log(y); // 2函数参数解构赋值
解构赋值也可以用于函数参数
function add([x, y]) {return x y;
}
add([1, 2]); // 3该函数接受一个数组作为参数将其中的第一个值赋给 x第二个值赋给 y然后返回它们的和。ES6 解构赋值让变量的初始化更加简单和便捷。通过解构赋值我们可以访问到对象中的属性并将其赋值给对应的变量从而提高代码的可读性和可维护性。
箭头函数
箭头函数类似于Java中的Lambda表达式 普通的函数声明 let fun1 function(){} //普通的函数声明箭头函数声明的格式 let fun2 (){} //箭头函数声明 lambda表达式
let fun3 (x){return x1}参数列表中有且仅有一个参数()括号可以省略不写 let fun4 x{return x1}如果函数体中只有一行代码{}可以省略不写 let fun5 xconsole.log(x)如果函数体中只有一行代码而且只有一个return语句{}和return都可以不写 let fun6 xx1注
在箭头函数中调用this时this指的不是本函数的调用者而是更外层的this
rest和spread
rest参数,在形参上使用 和JAVA中的可变参数几乎一样格式为…args
script// 1 参数列表中多个普通参数 普通函数和箭头函数中都支持let fun1 function (a,b,c,d10){console.log(a,b,c,d)}let fun2 (a,b,c,d10) {console.log(a,b,c,d)}fun1(1,2,3)fun2(1,2,3,4)// 2 ...作为参数列表,称之为rest参数 普通函数和箭头函数中都支持 ,因为箭头函数中无法使用arguments,rest是一种解决方案let fun3 function (...args){console.log(args)}let fun4 (...args) {console.log(args)}fun3(1,2,3)fun4(1,2,3,4)// rest参数在一个参数列表中的最后一个只,这也就无形之中要求一个参数列表中只能有一个rest参数//let fun5 (...args,...args2) {} // 这里报错
/scriptspread参数,在实参上使用rest格式为…数组名 或 …对象名
scriptlet arr [1,2,3]//let arrSpread ...arr;// 这样不可以,...arr必须在调用方法时作为实参使用let fun1 (a,b,c) {console.log(a,b,c)}// 调用方法时,对arr进行转换 转换为1,2,3fun1(...arr)//应用场景1 合并数组let arr2[4,5,6]let arr3[...arr,...arr2]console.log(arr3)//应用场景2 合并对象属性let p1{name:张三}let p2{age:10}let p3{gender:boy}let person {...p1,...p2,...p3}console.log(person)/script注 rest作为参数列表只能有一个且只能在参数列表的最后一个spread相当于将数组或对象其中的每个元素或属性一一罗列且用逗号隔开但是只能用于实参处 对象创建的语法糖
ES6中新增了对象创建的语法糖,支持了class extends constructor等关键字,让ES6的语法和面向对象的语法更加接近
具体的知识点见代码例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescriptclass Person{//属性,这些属性的类型省略默认为let,属性前加上#就相当于加private加上#后在类中调用时也要加上#name //名字#age //年龄//getter和setter函数get getname(){return this.name}set setname(name){this.namename}get getage(){return this.age}set setage(age){this.age age}//Person类中的函数也不需要声明函数返回值静态函数在其函数名前加上static即可eat(food){console.log(food)}static sleep(){console.log(sleep)}//构造器用constructor表示constructor(name,age){this.namenamethis.#ageage}}/script
/head
body/body
/html注
属性的类型省略默认为let属性前加上#就相当于加private加上#后在类中调用时也要加上#Person类中的函数也不需要声明函数返回值静态函数在其函数名前加上static即可调用构造函数时使用 new 类名(参数) 即可
对象的深拷贝和浅拷贝
对象的拷贝是快速获得和已有对象相同的对象的方式
浅拷贝
scriptlet arr [java,c,python]let person {name:张三,language:arr}// 浅拷贝,person2和person指向相同的内存let person2 person;person2.name小黑console.log(person.name)
/script深拷贝
scriptlet arr [java,c,python]let person {name:张三,language:arr}// 深拷贝,通过JSON和字符串的转换形成一个新的对象let person2 JSON.parse(JSON.stringify(person))person2.name小黑console.log(person.name)console.log(person2.name)
/script模块化处理
概述
模块化是一种组织和管理前端代码的方式将代码拆分成小的模块单元使得代码更易于维护、扩展和复用。它包括了定义、导出、导入以及管理模块的方法和规范。
优势 提高代码可维护性通过将代码拆分为小的模块单元使得代码结构更为清晰可读性更高便于开发者阅读和维护。提高代码可复用性通过将重复使用的代码变成可复用的模块减少代码重复率降低开发成本。提高代码可扩展性通过模块化来实现代码的松耦合便于更改和替换模块从而方便地扩展功能。 ES6的几种暴露和导入方式 分别导出分别导入统一导出统一导入默认导出默认导入 分别导出
向外暴露成员在相应的变量、函数、类前加上export即可例
//1.分别暴露
// 模块想对外导出,添加export关键字即可!
// 导出一个变量
export const PI 3.14
// 导出一个函数
export function sum(a, b) {return a b;
}
// 导出一个类
export class Person {constructor(name, age) {this.name name;this.age age;}sayHello() {console.log(Hello, my name is ${this.name}, Im ${this.age} years old.);}
}分别导入 {}中导入要使用的来自于module.js中的成员{}中导入的名称要和module.js中导出的一致,也可以在此处起别名使用as关键字{}中如果定义了别名,那么在当前模块中就只能使用别名{}中导入成员的顺序可以不是暴露的顺序一个模块中可以同时有多个import多个import可以导入多个不同的模块,也可以是同一个模块 //import {PI ,Person ,sum } from ./module.js
//import {PI as pi,Person as People,sum as add} from ./module.js
import {PI ,Person ,sum,PI as pi,Person as People,sum as add} from ./module.js
// 使用暴露的属性
console.log(PI)
console.log(pi)
// 调用暴露的方法
let result1 sum(10,20)
console.log(result1)
let result2 add(10,20)
console.log(result2)
// 使用暴露的Person类
let person1 new Person(张三,10)
person1.sayHello()
let person2 new People(李四,11)
person2.sayHello()统一导出
使用export{成员名成员名……}的方式就可以将{}中的对象统一导出
// 定义一个常量
const PI 3.14
// 定义一个函数
function sum(a, b) {return a b;
}
// 定义一个类
class Person {constructor(name, age) {this.name name;this.age age;}sayHello() {console.log(Hello, my name is ${this.name}, Im ${this.age} years old.);}
}
// 统一对外导出(暴露)
export {PI,sum,Person
}统一导入
导入其他文件的成员使用import关键字即可如下代码所示*代表所有成员as后面的m1是对象名是一个封装了./module.js中的所有暴露成员的对象
/**代表module.js中的所有成员m1代表所有成员所属的对象
*/
import * as m1 from ./module.js
// 使用暴露的属性
console.log(m1.PI)
// 调用暴露的方法
let result m1.sum(10,20)
console.log(result)
// 使用暴露的Person类
let person new m1.Person(张三,10)
person.sayHello()默认导出
默认导出会在暴露成员中增加一个名为default的成员
// 默认导出
export default sum默认导入
import {default as add} from ./module.js // 用的少
