-----书接上文,前文中我们总结了关于JS的组成部分以及如何快速开展学习JS,相信已经有很多朋友掌握到这些方法。接下来就从更深的ECMAScript开始说起。
1.什么是ES6?
ECMAScript(European Computer Manufacturers Association) 6: 是JavaScript语言的下一代标准,已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。
简单来说ES6在JS中的作用就是语言的标准。它里面定义了如何去定义变量,如何写函数,如何写数组....
相对于ES5来讲ES6中多出来几点新特性,而且普及速度相对于ES5来讲要快很多,现在主流版本的浏览器如Chrome 和 Firefox 浏览器可以支持ES6中绝大多数特性。
接下来围绕ES6的新特性开始说起。
2.ES6特性---量的声明(let and const)
(1)使用Let声明变量
前面说到,JS中声明变量是通过 var 来声明 var 是variable的简写。 variabel是变化的意思。
而在ES6中推荐使用let声明局部变量,相比于之前的var声明的全局变量,
使用Let声明变量不会使变量提升:
console.log(b);
let b = 666; // b is not defined
复制代码
使用Let不能重复声明:
let a =1;
let a =1; //Identifier 'a' has already been declared
复制代码
Let可以形成一个块级作用域:
if (true){var a = 100;
}
console.log(a);// a = 100
复制代码
if (true){let a = 100;
}
console.log(a);// a is not defined
复制代码
(2)使用Const声明常量
使用Const声明常量不会使常量提升:
console.log(PI);
const PI = 3.14;// PI is not defined
复制代码
使用Const不能重复声明:
const PI = 3.14;
PI = 666;//Assignment to constant variable
复制代码
Const可以形成一个块级作用域:
{const PI = 3.14;
}
console.log(PI);//PI is not defined
复制代码
总结一下:
相同点:Let与Const不会使量提升,不能重复声明,都能形成块级作用域。
不同点:Let声明变量,Const声明常量。
3.ES6特性---箭头函数(Arrow Functions)
箭头函数是函数的简写,是ES6中非常强大的简写形式。不需要 function 关键字来创建函数。省略 return 关键字。继承当前上下文的 this 关键字(没有自己的this)。
var f = function(a){console.log(a);
}
//?
var f = (a)=>{console.log(a);
}
//?
var f = a =>{console.log(a);
}// 当参数只有一个的时候,()是可以省略的
复制代码
箭头函数没有自己的this,所以使用的时候要格外小心。
var obj = {name: 'wsq',getName() {console.log(this.name);}}obj.getName(); // wsqvar obj = {name: 'wsq',getName: () => {console.log(this.name);}}obj.getName(); // undefined复制代码
4.ES6特性---模板字符串(Template Literals)
允许嵌入表达式的字符串字面量,可以使用多行字符串和字符串插值功能。
1.用${}来将表达式嵌入字符串中进行拼接。
2.使用(``)进行包裹。
var name = 'wsq';
var aa = `test ${name} `;
console.log(aa); // test wsq
复制代码
5.ES6特性---函数的参数默认值
在ES6中,函数的参数默认值定义要更加简单:
function print(key = 'hello') {console.log(key);
}print('f'); // f
print();// hello
复制代码
这说明了,在ES6中,JS的形参是可以有默认值的。
6.ES6特性---For...of
新的循环方式,代替之前的 for...in 和 forEach 方法。 可在可迭代对象(包括 Array,Map,Set,String,arguments 对象等等)进行迭代循环
for...of 遍历数组:
let root = ['a', 'b', 'c'];
for (let x of root) {console.log(x);
} //a,b,c复制代码
7.ES6特性---ES6中的类
前面我们都是创建构造器,然后去new构造器,构造器就相当于一个类,在ES6中,就可以使用Class来创建对象了。
不使用Class,去创建一个类,如下:
function man (name,age,height){this.name = name;this.age = age;this.height = height;
}
man.prototype.say = function(){console.log(`我是${this.name}`)
}
var p = new man("wsq","22","180");console.log(p);
复制代码
使用Class,去创建一个类,如下:
class Man{constructor(name,age,height){this.name = name;this.age = age;this.height = height;}say(){console.log(`我是${this.name}`)}
}var p1 = new Man("wsq","22","180");
console.log(p1.say());
复制代码
8.ES6特性---对象超类与继承
ES6 允许在对象中使用 super 方法并使用Extends来实现继承:
class Man{constructor(name,age,height){this.name = name;this.age = age;this.height = height;}say(){console.log(`我是${this.name}`)}
}class MVP extends Man{constructor(name,age,height,year){super(name,age,height)this.year = year;}showMVP(){console.log(`我是${this.name},我是${this.year}年的MVP`)}
}
var mvp1 = new MVP("wsq","22","180",2016);
mvp1.say();
mvp1.showMVP();
复制代码
9.ES6特性---对象扩展
(1)Obect.getOwnProertyDescriptor();
获取一个对象中某个属性的详细信息。
var a =1;
console.log(Object.getOwnPropertyDescriptor(window,"a"));//{value: 1, writable: true, enumerable: true, configurable: false}
复制代码
(2)Object.defineProperty();
精细化设置一个对象的属性。
(3)Object.defineProperties() ;
直接在一个对象上定义新的属性或修改现有属性,并返回该对象。
var obj = {}
Object.defineProperties(obj,{"name":{configurable:false,Writable:false,enumerable:false,value:"wsq"},"age":{configurable:false,Writable:false,enumerable:false,value:"66"}
});
console.log(obj.name,obj.age);//wsq 66
复制代码
(4)getOwnPropertyNames();
获取自的属性,以数组的格式返回。
var obj = {name : "wsq",age : 88
};
console.log(Object.getOwnPropertyNames(obj));//["name", "age"]
复制代码
(5)Object.keys();
使用Object.getOwnPropertyNames()和Object.keys()都可以得到一个对象的属性名,属性名是放在一个数组中的。
var obj = {name : "wsq",age : 88
};
console.log(Object.keys(obj));//["name", "age"]
复制代码
(6)Object.values();
获取对象的值,放到数组中。
var obj = {name : "wsq",age : 88
};
console.log(Object.values(obj));//["wsq", 88]
复制代码
10.ES6特性---其他补充
(1)Set与Map
set和数据差不多,也是一种集合,区别在于:它里面的值都是唯一的,没有重复的。
const s = new Set();
arrSet.add(1); // Set(1) {1}
arrSet.add(2); // Set(2) {1, 2}
arrSet.add(2); // Set(2) {1, 2}
复制代码
map类似于对象,里面存放也是键值对,区别在于:对象中的键名只能是字符串,如果使用map,它里面的键可以是任意值。
var m = new Map([["a","hello"],[1,"123"]]);m.set(false,"abc")m.set([1,2,3]),{name:"wsq"}console.log(m);//Map(4){"a" => "hello", 1 => "123", false => "abc", Array(3) => undefined}
复制代码
(2)Trim
除去字符串空格的。
trim 左右空格去掉
trimLeft 左空格去掉
trimRight 右空格去掉
var str = " a abn abc "
str.trim();
/* "a abn abc"
str.trimLeft();
"a abn abc "
str.trimRight();
" a abn abc" */
复制代码
(3)Repeat
构造并返回一个新字符串,该字符串包含被连接在一起的指定数量的字符串的副本。
var str = "12345"
console.log(str.repeat(5));//1234512345123451234512345
复制代码
(4)Includes
用来判断一个字符串是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。
/* var str = "abc dde";str.includes("a")truestr.includes("z")falsestr.includes("c d")true
*/
复制代码
(5)StrartsWith
用来判断一个字符串是否是以指定内容开头,根据情况,如果包含则返回 true,否则返回false。
/*var str = "abc dde";str.strartsWith("abc")truestr.strartsWith("abdc")false
*/
复制代码
(6)EndsWidth
用来判断一个字符串是否是以指定内容结尾,根据情况,如果包含则返回 true,否则返回false。
/*var str = "abc dde";str.endsWith("dde")truestr.endsWith("abdc")false
*/
复制代码
(7)PadStart
如果这个字符串不够指定长度,会在头部补全。
/*var str = "abc def"str.padStart(15,"*")"********abc def"
*/
复制代码
(8)PadEnd
如果这个字符串不够指定长度,会在尾部补全。
/*var str = "abc def"str.padStart(15,"*")"abc def********"
*/
复制代码
关于ES6中的特性还有很多,本文仅仅是列举出较为有特点的一部分来说,有不足之处欢迎大家在评论里留言讨论,仅 此以为谢。