ES6新增特性
ECMAScript 6(ES6) 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中绝大多数的特性。
1.let 和 const
在ES6新特性中,增加的两个声明变量和常量的方法,let用于声明变量,const用于声明常量。
①在JS中是没有块级作用域的,而使用let就可以形成块级作用域:
{ var a = 1; let b = 2; } console.log(a); //1 console.log(b); //not defined
②let不会像var那样发生变量提升:
console.log(a); // not defined let a = 1;
③let不允许在相同块级作用域内,重复声明同一个变量:
//报错 { var a = 1; let a = 2; } // 报错 { let a = 1; let a = 2; }
①const与let相同,只在所声明的块级作用域内有效。
②const与let相同,也不能在同一个块级作用域声明同一个变量。
③const用于声明常量,一旦声明 ,常量的值就不能改变。
2.箭头函数
在ES6新增的操作符 => ,用于简化函数的书写。
let f = function(){ console.log("Hello Word!") } f( ); // 上述代码段可简写为: let g = ()=>{ console.log("Hello Word!") } g(); // 另外,若参数只有一个,()也可省略,若函数内只有一行语句,{}也可省略: let a = 1; let h = a => console.log(a); h( );
需要注意的是:箭头函数没有绑定 this。
3.字符串模板
ES6中允许使用反引号 `` 来创建字符串,它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中使用${}嵌入变量。
最基础的用法:
let a = 18; console.log(`我今年${a}岁了`) // 我今年18岁了
模板字符串还可以拼接和插入表达式:
let a = 18; let b = 2; console.log(`我今年${a + b}岁了`+`,`+`明年就会多一岁`+`。`); // 我今年20岁了,明年就会多一岁。
4.扩展运算符
扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值。
let arr = [1, 2, 3]; let arr2 = [...arr,4,5,6] console.log(arr2); // 1,2,3,4,5,6
更深层次的用法:
let arr = [1, 2, 3]; //数组深拷贝 let arr2 = arr; let arr3 = [...arr]; console.log(arr === arr2); //true, 说明arr和arr2指向同一个数组 console.log(arr === arr3); //false, 说明arr3和arr指向不同数组 //字符串转数组 let str = 'love'; let arr5 = [...str]; console.log(arr5); //[ 'l', 'o', 'v', 'e' ]
5.默认参数
ES6可以在定义函数的时候设置参数的默认值了。
function sayHello(name = "xiaoer") { //如果没有传这个参数,才会有默认值, console.log(`Hello ${name}`); } sayHello(); //输出:Hello xiaoer sayHello("wangcai"); //输出:Hello wangcai
6.解构赋值
若一个函数要返回多个值,常规的做法是返回一个对象,将每个值做为这个对象的属性返回。在ES6中,利用解构这一特性,可以直接返回一个数组,数组中的值会自动被解析到对应接收该值的变量中。
function f() { return [1, 2]; } var [x, y] = f(); console.log('x:' + x + ', y:' + y); // x:1,y:2
不止函数的返回值可以使用解构赋值,数组、对象的赋值也可以使用解构赋值。
let arr = [10, 20, 30, 40]; // 数组解构 let [one, two] = arr; console.log(one, two); //10 ,20 let obj = { name: 'xiaoer', age: 18 } let {name,age,sex} = obj; // 解构出来的属性,如果不存在,默认值为undefined console.log( name, age, sex ); //xiaoer 18 undefined
7.数组方法的扩展
伪静态方法
①Array.from()
Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object arguments)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。
let arrLike = { 0: 10, 1: 20, 2: 30, length: 3 } let arr = Array.from(arrLike); console.log(arr); //[10, 20, 30]
②Array.of()
Array.of方法用于将一组值,转换为数组。
它弥补了使用new Array()构造数组的奇怪行为 。
let arr = new Array(3); // 原始方法,构建了一个有三个内容的空数组 let arr1 = Array.of(3); let arr2 = Array.of(1, 2, 3); let arr3 = Array.of(); console.log(arr1); //[3] console.log(arr2); //[1, 2, 3] console.log(arr3); //[]
数组操作
①内部拷贝copyWithin()
数组实例的copyWithin方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。
let arr = [1, 2, 3, 4, 5, 6, 7, 8]; arr.copyWithin(1, 5, 8); console.log(arr); //[1, 6, 7, 8, 5, 6, 7, 8]
第一个参数代表从这个位置开始替换,后两个参数代表要拷贝的起始位置和结束位置,不包含结束元素,左闭右开。可以使用负值代表倒数。
②查找find()与findIndex()
这两个原型方法都有一个回调函数作为参数,(回调函数的参数依次为元素、索引、数组引用),find()会返回第一个满足条件的元素,findIndex()会返回第一个满足条件的索引。
let arr = [10, 20, 30, 40, 50]; console.log(arr.find(function(value, index, arr){ return value > 25; }));// 30 console.log(arr.findIndex(function(value, index, arr){ return value > 25; }));// 2
③填充fill()
这个方法用于填充数组,会修改调用它的数组。
let arr = [1, 2, 3]; console.log(arr.fill(100)); //[100, 100, 100]
此外还可以指定填充的起始位置和终止位置,同样也是左开右闭。
let arr = [1, 2, 3, 4, 5]; console.log(arr.fill(100, 1, 4)); //[1, 100, 100, 100, 5]
④包含includes()
这个方法用于检测数组是否含有某个特定值,返回布尔值。
let arr = [1, 'a', true, null, NaN]; console.log(arr.includes(1)); //true console.log(arr.includes('a')); //true console.log(arr.includes(true)); //true console.log(arr.includes(null)); //true console.log(arr.includes(NaN)); //true console.log(arr.includes(undefined)); //false console.log(arr.includes()); //false
8.创建类
我们知道,javascript不像java是面向对象编程的语言,而只可以说是基于对象编程的语言。所以在js中,我们通常都是用function和prototype来模拟类这个概念。
但是现在有了es6,我们可以像java那样创建一个类了。
class NBAPlayer{ constructor(name,age,height){ this.name= name; this.age= age; this.height= height; } say(){ console.log(`我是${this.name},我今年${this.age}岁,我身高${this.height}`) } } var p1 = new NBAPlayer("库里",30,191); p1.say( ); // 我是库里,我今年30岁,我身高191
9.两种新的数据结构
ES6提供了新的数据结构Set。类似于数组,只不过其成员值都是唯一的,没有重复的值。
var s = new Set(); // 通过add方法向Set结构中加入成员 [2, 3, 5, 4, 5, 2, 2].map(x => s.add(x)) for (i of s) { console.log(i) } // 2 3 4 5 (表明set结构不会添加重复的值) console.log(Array.isArray(s)); // false 表明 set 并不是真正的数组,而是一个伪数组
而Map类似于对象,也是键值对集合,但是”键”的范围不限于字符串,对象也可以当作键。
var m = new Map(); obj = {p: "hello world"}; m.set(obj, "content"); console.log( m.get(obj) ); // content
在上面的代码中,将对象obj当作m的一个键。
var map = new Map([["name", "小明"], ["title", "Author"]]); map.size //2 map.has("name"); //true map.get("name"); //小明 map.has("title"); //true map.get("title"); //Author
Map还可以接收一个数组进行初始化。
10.字符串扩展
repeat
ES6为字符串添加了一个 repeat() 方法,它接受一个参数作为字符串的重复次数,返回一个将初始字符串重复指定次数的新字符串。
console.log("x".repeat(3)); // "xxx" console.log("hello".repeat(2)); // "hellohello" console.log("abc".repeat(4)); // "abcabcabcabc"
trim
用于除去字符串中的空格。trim把左右的空格都除去,trimLeft除去左空格,trimRight除去右空格。
let str = " ab cd "; str.trim(); // "ab cd" str.trimLeft(); // "ab cd " str.trimRight(); // " ab cd"
includes
该方法用于检测在字符串中是否存在所找的字符串,存在返回 true ,否则返回false
let str = "abcd"; str.includes("a"); // true str.includes("z"); // false
strartsWith
判断指定的子字符串是否出现在目标字符串的开头位置。第二个参数选填,表示开始搜索的位置。
let str = "abcd"; str.startsWith("a"); // true str.startsWith("b"); // false str.startsWith("b",2); // true,从第二个字符开始
endsWidth
判断子字符串是否出现在目标字符串的尾部位置。第二个参数选填,表示针对前N个字符。
let str = "abcd"; str.endsWith("d"); // true str.endsWith("c"); // false str.endsWith("c",3); // true,针对前三个字符
padStart
ES6 引入的字符串补全长度的功能。如果某个字符串不够指定长度,会在头部补全。
一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全字符串。
'x'.padStart(5, 'ab') // 'ababx' 'x'.padStart(4, 'ab') // 'abax'
padEnd
ES6 引入的字符串补全长度的功能。如果某个字符串不够指定长度,会在尾部补全。
一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全字符串。
'x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba'
padStart和padEnd如果省略第二个参数,默认使用空格补全长度。