ES6总结

224 阅读8分钟

ES6语言特性总结

基本用法 ES6中为了让变量的生命周期更加可控，引入了块级声明。即，让所声明的变量在指定块的作用域外无法被访问。ES6主要引入了两个新的关键字，let和const

1.let

ES6新增了let命令，用来声明变量。 它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
    let a = 1;
}
console.log(a) // not defined

上面的代码中用到了let声明的变量，然后在代码块之外调用结果报错了。说明了let声明的变量只能在它的代码块生效。

2.const

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const a = 1;
a = 2 //报错

说明了这个关键字也是限制了变量提升以及重复声明，而且变量值是不可更改的。 但是可以改变对象的属性值 如下:

const obj = {"name" : "xiaoqiang"}
obj.name = "zhangsan"
console.log(obj.name)

3.箭头函数

ES6自从有了箭头函数，在遇到回调函数写法的时候，就特别方便。当然当然它的功能不止于此。函数箭头的语法如下：

(参数1,参数2,...,参数N) => {函数声明}
(numl,num2) =>{num1*num2}
(参数1,参数2,...,参数N) => 表达式(单一)
(num1,num2) => {return num1 + num2}
//相当于:(参数1,参数2,...,参数N)=>{return 表达式;}

(单一参数) => {函数声明}
num1 => num1 + 1;//单参数函数时候，可以略写

使用注意点

(1)函数体内的this对象,就是定义时所在的对象，而不是使用时所在的对象。 (2)不可以当做构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。 (3)不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest代替。 (4)不可以使用yield命令，因此箭头函数不能用Generator函数

4.扩展运算符

...这三个点运算符用在函数声明的时候，就是不具名参数，但是它同时也能用在结构对象上，因此，在函数调用中，可以使用该运算符，进行多个参数传递。如下：

var arr = [1,2,3]
console.log(Math.max(...arr))

数组

ES6中对于数据做了进一步的增强，以便能够更加方便地创建数组以及操作数组。

(1)Array.of()

方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of(1) //[1]
Array.of(1,2,3) //[1,2,3]
Array.of(undefinde)

(2)Array.from()

方法从一个类似数组或可迭代对象中创建一个新的数组实例。

console.log(Array.from('foo')); //["f","o","o"]
console.log(Array.from([1,2,3],x => x*x)) //[1,4,9]

(3)findIndex()/find()

该方法的参数是一个回调函数，用于查找数组中满足回调函数测试的第一个值或者第一个索引（index）。

var arr = [1,6,9,10,8,]
console.log(arr.find(m => m > 6 )); //9
console.log(arr.findIndex(a => a > 9));//3

(4)fill()

方法能使用特定值填充数组中的一个或多个元素。

[1,2,3].fill(1); //用1填充数组所有项[1,1,1]
[1,2,3].fill(3,2); //从索引2开始用5填充数组[1,2,5]
[1,2,3,4].fill(0,2,3); //从索引2到3之间开始用0填充数组[1,2,0,4]

严格模式

使用严格模式的目的:规则，提高编译效率。

开启严格模式："use strict"

严格模式和非严格模式有什么区别:

1.在严格模式下不能使用没有var的变量，

2.在严格模式下不能使用8进制的数字，

3.在严格模式下不能把函数定义在if语句中，

4.在严格模式下函数不能有重名的形参，

5.在严格模式下不能arguments就不能是用了，

6.在严格模式下不能function中的this就在是window

Set与Map

ES6中增加了两个新的数据结构，Set和Map，补充了原本数组的一些不足之处。Set是不包含重复值的列表，而Map则是键与相对应的值的集合。

Set

Set是一种无重复的有序列表。 创建一个Set很简单，只要使用new关键字就可以了。Set的构造器实际上可以接受任何可迭代对象做为参数。在构造器内部，会使用迭代器来提取参数中的值。

let set1 = new Set(); //创健一个空的集合 set{}
let set2 = new set([1,2,3]); //创建一个包含三个元素的集合,set{1,2,3}
let set3 = new set([1,2,3,4,4]);//创建一个去重合的集合,set{1,2,3}

针对Set,主要提供了以下几个方法: 1.add:能向Set中添加项目 2.has:测试某个值是否存在于Set中 3.delete:来移除单个值 4.clear:来将来所有值从Set中移除 还提供了一个size属性用于判断集合长度

let set = new Set([1,2,3,4,5,6]);
set.add(3); //由于3已经在集合里了,不会添加
set.add('name');//set {1,2,3,4,5,6,'name'}
set.has(3);//true
set.delete(3);set { 1,2,3,4,5,6,'name'}
set.clear();//set{}

注意的是，当一个属性被添加到set对象时，它的值也被设为true。而在Set内部的比较使用了Object.is()方法，来判断两个值是否相等。

Set的遍历

同数组一样，作为可迭代的数据结构，ES6提供了forEach的方法对其进行遍历。你也可以使用，for...of的语法进行。

let set = new Set(['a','b','c']);
set.forEach((value,key) => console.log('value: '+value + 'key:' + key));
//value: a key:a
//value: b key:b
//value: c key:c

转换成数组

要将Set转换成数组，可以像下面这样：

let set = new Set([1,2,3,4,5]);
Array.from(set);//[1,2,3,4,5]
[...set];//[1,2,3,4,5]

使用扩展运算符可以更简单地将 Set 转换回数组。

Map

Map与Set相似，数据结构中存储着键值对。实例方法与Set相同的部分是has,delete,clear。你可以调用 set() 方法并给它传递一个键与一个关联的值，来给 Map 添加项；此后使用键名来调用 get() 方法便能提取对应的值。

let map = new Map();
map.set('key1','name1');//map {"key1" => "name1"}
map.set('key2','name2');//map {"key1" => "name1" , "key2" => "name2"}
map.get('key1');//name1
map.has('key2');//true
mapdelete('key1');//删除成功会返回true
map.has('key1');false
map.clear();清空所有

而对于map的遍历可以使用forEach语法,其中的回调函数同样是接收三个参数： value,key,context。当然context是可选的。

let map = new Map();
map.set('key1','value1');
map.set('key2','value2');
map.forEach((value,key) => console.log(value))

字符串扩展

(1)模板字符串

模板字变量是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串差值功能。如下:

`string text`
`string text line 1
 string text line 2`
`string text ${expression} string text`
tag `string text ${expression} string text`

(2)trim

除去字符串空格的。 1.trim 左右空格都去掉 2.trimLeft 左空格去掉 3.trimRight 右空格去掉

var oring = ' abc '
console.log(oring.trim());//'abc'
var oring = ' abc '
console.log(oring.trimLeft());//'abc '
var oring = ' abc '
console.log(oring.trimRight());//' abc'

(3)repeat()

构造并返回一个新字符串，该字符串包含被连接在一起的制定数量的字符串的副本。

var oring = "123";
console.log(oring.repeat(4))
//123123123123123123

####(4)includes() 方法用来判定一个数组是否包含一个制定的值，根据情况，如果包含则返回true，否则返回false。

var arr = [1,2,3]
console.log(arr.includes(4));//false
var arr = [1,2,3]
console.log(arr.includes(4));//true

startsWith()

方法用来判断当前字符串是否是以另外一个给定的子字符串“开头”的，根据判断结果返回 true 或 false。

var oring = "abcd name,"
console.log(oring.startsWith("abcd"))//true
console.log(oring.startsWith("name"))//false

(6)endsWidth()

方法用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的，根据判断结果返回 true 或 false。

var oring = "name,a ab abc.";
console.log(oring.endsWith("abc."));//true
console.log(oring.endsWith("a ab"));//false

(7)padStart()

方法用另一个字符串填充当前字符串(重复，如果需要的话)，一遍产生的字符串达到给定的长度。填充从当前字符串的开始(左侧)应用的。

'abc'.padStart(10);         //"       abc"
'abc'.padStart(10,"cba");   //"cbacbacabc"
'abc'.padStart(6,"123456"); //"123abc"
'abc'.padStart(1);          //"abc"

(8)padEnd()

方法会用一个字符串填充当前字符串(如果需要的话则重复填充)，返回填充到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。

'abc'.padEnd(10);         //"abc       "
'abc'.padEnd(10,"cba");   //"abccbacbac"
'abc'.padEnd(6,"123456"); //"abc123"
'abc'.padEnd(1);          //"abc"

class

声明创建一个基于原型继承的具有给定名称的新类。 注意: 1.class是关键字，后面紧跟类名，类名首字母大写，采取大驼峰命名法则。类名之后{}。 2.在{}中，不能直接写方法，方法不需要用关键字 3.方法和方法之间没有逗号。不是键值对

class NBAPlayer{
    constructor(name,age,height){
        this.name = name;
        this.age = age;
        this.height = height
    }
    say(){
        console.log(`我是${this.name}, 是NBA球员`)
    }
}
var p1 = new NBAPlayer("库里","30","191");
console.log(p1.say())
avatar
文章
阅读
粉丝