目录
ECMAScript是一种由Ecma国际通过ECMA-262标准化脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,所以它可以理解为是javascript的一个标准。
es6新特性:
let和const
在es6前,都使用var声明变量,在es6层面 let用于声明变量,const用于声明常量
例: let name = "姓名"; const PI = 3.14;
字符串
第一种用途${}
基本的字符串格式化,将表达式嵌入字符串中进行拼接。使用${}
例:const name = "es6"; console.log(`hello ${name}`);
注:(字符串拼接符号为反引号`而不是'或")
第二种用途``
在es5使用\或者双引号搭配+号来实现跨行拼接,在es6层面新加入使用反引号`跨行拼接
例:var data = `<div><span>
testData</span>
</div>`;
es6字符串新特性方法
const str = 'haha';
//includes是否包含字符h
console.log(str.includes('h'));//true
//repeat重复字符串haha三遍
console.log(str.repeat(3));//hahahahahaha
//startsWith判断字符串是否以ha开头
console.log(str.startsWith('ha'));//true
//endsWith判断字符串是否以a结尾
console.log(str.endsWith('a'));//true
函数function
函数默认参数
在形参上可以直接定义默认的参数
格式:参数名=默认值
function testMethod(num=100){return num+50;} //第一种定义方法的方式
var testMethod2=function(num=100){return num+100;} //第二种定义方法的参数
console.log(testMethod()+" "+testMethod2());
//控制台结果:150 200;
函数不定参数
不定参数是在函数中不确定具体个数的参数
格式:...参数名
var testMethod3=function(...num){
for(let item of num){
console.log(item);
}
}
testMethod3(200,100,400,2000,400,700);
箭头参数
当函数有且仅有一个参数的时候,是可以省略function的
格式:=>
var testMethod4=(...num) => {
for(let item of num){
console.log(item);
}
}
testMethod4(200,100,400,2000,400,700);
扩展对象功能
在es5存储对象我们都是使用key-value存储。
例:var testMethod5 = (name,age) => {
return {
name: name,
age: age
};
}
console.log(testMethod5('es6',1));
如果键值对重名的情况下,es6提供了简写功能
例:var testMethod6 = (name,age) => {
return {
name,
age
};
}
console.log(testMethod6('es6',1));
方法赋值
在es5时:
let obj = {
name:'es6';
getName:function(){
console.log(obj.name);
}
};
obj.getName();
在es6新特性时:
let obj = {
name:'es6';
getName(){
console.log(obj.name);
}
};
obj.getName();
更便捷的数据访问--解构
es5方式获取访问数据
let obj = {name:"es6",age:1}
let name = obj.name; let age = obj.age;
console.log(name+":"+age);
es5新特性获取访问数据
let obj = {name:"es6",age:1}
let {name,age} = obj;
console.log(name+":"+age);
Spread Operator展开运算符
let students = ["s1","s2","s3"];
let people = ["y1","s4"];
现在要将students数组合并到people中
let people = [...students,"y1","s4"]; //其中...students叫展开运算符
for of值遍历
for遍历 for in和for of的区别
for in
for(let item in people){
console.log(item);//显示当前元素下标索引
console.log(people[item]);//显示当前元素
}
for of
for(let item of people){
console.log(item);//显示当前元素
}
类的引入
格式:
class People(){
constructor(name,age){
this.name = name;
this.age = age;
}
test(){
console.log("I'm a parent class");
}
}
class Student extends People{
//创建构造器
constructor(name,age){
super(name,age);
}
//创建方法
show(){
console.log(this.name);
console.log(this.age);
}
}
let student = new Student("es6",1);
student.show();//调用Student类中的show()方法
student.test();//调用People类中的test()方法
iterable类型
在es6标准引入了新的iterable类型,Array,Map,Set都属于iterable类型,具有iterable类型的集合可以支持for...of...循环来遍历。
var arrayTest = [1,2,3];
var setTest = new Set([1,2,3]);
var mapTest = new Map([[1,'x'],[2,'y'],[3,'z']]);
for(var a of arrayTest){ //遍历Array
console.log(a);
}
for(var s of setTest){ //遍历Set
console.log(s);
}
for(var m of mapTest){ //遍历Map
console.log(m[0] + ":" + m[1]);
}
以上是我整理的ECMAScript 6的新特性