ES6常用语法总结

ES6常用语法有哪些？极悦小编来为大家总结一下。

1. let 和 const

在 JavaScript 中，我们主要使用键 var 来定义变量。在 ES6 之后，增加了两个定义变量的关键字，分别是 let 和 const。对于Java变量，ES5 中 var 定义的变量会被提升到作用域内所有函数和语句的前面，而 ​​ES6 中 let 定义的变量则不会。let 声明的变量将在其对应的代码块中创建。声明变量之前的临时死区。let 和 const 都可以声明块级范围。用法类似于var。let 的特点是不提升变量，而是锁定在当前块中。

一个非常简单的例子：

function test(){ if(true){ console.log(a)//TDZ

俗称临时死区，用来描述变量没有提升的现象，let a =1 } } test()//a 是not defined function test (){ if(true){ let a =1 } console.log(a) } test()//a is not defined 唯一正确的使用方法：先声明，再访问。

function test(){ if(true){ let a =1 console.log(a) } } test()//1 const 声明一个常量。一旦声明，它就不能改变，并且

必须初始化和分配常量。虽然 const 是常量，不允许修改默认赋值，但是如果定义了对象，则可以修改对象内部的属性值。

const type ={ a:1 } type.a =2//不直接修改type的值，而是修改type.a的属性值，允许。console.log(type)//{a: 2} const和let的异同是一样的：const和let在当前block中都是有效的，在block外执行会被销毁，没有可变促销(TDZ)。该声明不能重复。区别：const不能再赋值，let声明的变量可以重复赋值。const实际上保证的不是变量的值不能改变，而是变量指向的内存地址中存储的数据不能改变。对于简单类型的数据(numeric、string、boolean)，值存储在变量指向的内存地址，所以相当于一个常量。但是对于复合数据(主要是对象和数组)来说，变量指向的内存地址只是一个指向实际数据的指针。const 只能保证指针是固定的(即它总是指向另一个固定地址)，至于它所指向的数据结构是否可变，则完全不可控。因此，在将对象声明为常量时必须非常小心。

除了上面提到的常用声明方法外，块级作用域的使用场景也可以在循环中使用。最著名的面试题：循环中的定时器关闭测试题使用了for循环中var声明的循环变量。会跳出循环，污染当前函数。

for(var i =0; i <5; i++){ setTimeout(()=>{ console.log(i)//5, 5, 5, 5, 5 },0) } console.log(i)/ /5 i

跳出循环污染外部函数//将var改成let for(let i =0; i <5; i++) { setTimeout(()=>{ console.log(i)//0 ,1, 2,3,4 },0) } console.log(i)//i 没有定义我不能污染外部函数。在实际开发中，我们选择使用var、let还是const，取决于我们的变量是否需要更新，通常我们希望变量不被恶意修改，大量使用const。使用 const 声明。声明对象时，也推荐使用 const。当需要修改声明变量的值时，使用let。在可以使用 var 的所有场景中，您都可以使用 let 。

在symbolES6之前，我们知道了Undefined、Null、Boolean、Number和String这五种基本数据类型，然后添加了一个引用类型Object，形成了JavaScript中的所有数据类型，但是在ES6出来之后，一种新的数据类型出现了添加了类型，命名符号，顾名思义，意思是唯一的，意思是每个符号类型都是唯一的，不重复其他符号。您可以通过调用 Symbol() 方法来创建新的 Symbol 类型值。此值是唯一的，不等于任何值。

var mySymbol=符号（）；console.log(typeof mySymbol)//"symbol"

2. 字符串

ES6 字符串的新方法

UTF-16 代码点：ES6 强制使用 UTF-16 字符串编码。UTF-16的解释请看百度。

codePointAt()：该方法支持UTF-16，接受代码单元的位置而不是字符串位置作为参数，返回字符串中给定位置对应的代码点，即整数值。

String.fromCodePoiont()：函数与codePointAt相反。它检索字符串中一个字符的代码点，也可以根据指定的代码点生成一个字符。

normalize()：提供Unicode的标准形式，接受一个可选的字符串参数，表示应用某种Unicode标准形式。

在 ES6 中，添加了 3 个新方法。每个方法接收 2 个参数，要检测的子字符串和开始匹配的索引位置。

模板字符串 String 是 JavaScript 中的基本类型之一。它应该被认为是除了对象之外最常用的类型。字符串包含很多方法，如 substr、replace、indexOf、slice 等。ES6 引入了模板字符字符串的特性，用反引号表示，可以表示多行字符串并进行文本插值(使用模板占位符)。

//前面我们写的多行字符串：console.log("hello world 1n/
hello cala");
//"hello world
//hello cala"
//有了模板字符串
console.log(`hello world
string text line 2`);
//"hello world
//hello cala"

可以使用${}来表示模板占位符，可以传入括号中已经定义好的变量，例如：

变种名称=“卡拉”；变量年龄=22；
控制台日志（
你好，我是 ${name}，我的年龄是 ${age}
) //你好，我是cala，我的年龄是22
includes(str, index)：

如果在字符串中检测到指定的文本，则返回true，否则返回false。

let t ='abcdefg' if(t.includes('cde')){ console.log(2) }//true startsWith(str, index): 如果在字符串开头检测到指定文本，则返回true , 否则返回false。

let t ='abcdefg' if(t.startsWith('ab')){ console.log(2) }//true endsWith(str, index): 如果在字符串末尾检测到指定文本，则返回true , 否则返回false。

let t ='abcdefg' if(t.endsWith('fg')){ console.log(2) }//true 如果只需要匹配字符串是否包含某个子串，那么推荐使用new方法 如果需要查找匹配字符串的位置，请使用 indexOf()。

3.功能

函数的默认参数在ES5中，我们将参数传递给函数，然后在函数体中设置默认值。

function a(num, callback){ num = num ||6 callback = callback ||function(data){console.log('ES5:', data)} callback(num * num) } a()//ES5: 36、不传参数输出默认值//也可以在ES6中使用回调a(10,function(data){ console.log(data *10)//1000,传参数输出新值}) ，我们用新的默认值写法。

function a(num =6, callback =function(data){console.log('ES6:', data)}){ callback(num * num) } a()//ES6: 36，不传参数输出默认值a(10,function(data){ console.log(data *10)//1000, 传参输出新值}) 

4. 箭头函数(=>)

const arr =[5,10] const s = arr.reduce((sum, item)=> sum + item)
console.log(s)//15

在箭头函数中 this 的使用与普通函数不同，在 JavaScript 中普通函数中会有一个 this 值，主要分为：

普通函数：

(1)当函数作为全局函数调用时， this 指向全局对象

(2)当函数作为对象中的方法调用时，this 指向对象

(3)当函数用作构造函数时，this 指向构造函数的新对象。

(4)也可以通过call、apply、bind来改变this的指向

箭头函数：

(1)箭头函数没有this，函数内部的this来自父级。最近的非箭头函数，并且不能改变 this 的方向。

(2)箭头函数没有 super

(3)箭头函数没有参数

(4)箭头函数没有 new.target 绑定。

(5)新的不能用。

(6)没有原型。

(7)不支持重复命名参数。

ES6箭头函数的简单理解

(1)箭头函数左边代表输入参数，右边代表输出结果。

const s = a => a console.log(s(2))//2

(2)箭头函数中，this属于词法作用域，直接由上下文决定。对于普通函数中不定的this，在箭头函数中处理这无疑更简单，如下：

//ES5 普通函数functionMan(){ this.age=22; returnfunction(){ this.age+1; } } var cala=newMan(); console.log(cala())//undefined//ES6箭头函数functionMan(){ this.age=22; 返回()=>this.age+1; } var cala=newMan(); console.log(cala())//23 

(3)箭头函数中没有参数(我们可以使用rest参数代替)，没有原型，不能使用new关键字，例如：

//没有参数var foo=(a,b)=>{return arguments[0]*arguments[1]}
console.log(foo(3,5))
//没有定义参数
//没有原型
varObj=( )=>{};
console.log(Obj.prototype);
//undefined
//新关键字不能使用
varObj=()=>{"hello world"};
var o =newObj();
//TypeError: Obj is not a constructor

(4)箭头函数对数组进行排序

const arr =[10,50,30,40,20] const s = arr.sort((a, b)=> ab)
console.log(s)//[10,20,30,40,50 ]

尾调用优化尾调用是指在函数返回时调用一个新函数。由于尾调用的实现需要存储在内存中，在循环体中，如果有函数的尾调用，你的内存可能已满或溢出。

在 ES6 中，引擎会帮你优化尾调用。不需要自己优化，但需要满足以下三个要求：

(1)函数不是闭包

(2)尾调用是函数的最后一条语句

(3)尾调用结果作为Function返回

尾调用的实际使用——递归函数优化在ES5时代，我们不推荐使用递归，因为递归会影响性能。但是通过尾调用优化，递归函数的性能得到了提升。

//新的尾部优化类型“use strict”；
function a(n, p =1){ if(n <=1){ return1* p } let s = n * p return a(n -1, s) }//求1 x 2 x 3的阶乘 let sum = a(3) console.log(sum)//6

5.ES6对象的新方法

Object.assign() Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。Object.assign 方法只会将源对象的可枚举属性复制到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]]，所以会调用相关的getter和setter。因此，它分配属性，而不仅仅是复制或定义新属性。如果合并源包含 getter，则可能不适合将新属性合并到原型中。为了将属性定义(包括其可枚举性)复制到原型，应该使用 Object.getOwnPropertyDescriptor() 和 Object.defineProperty()。字符串类型和符号类型属性都将被复制。合并对象。

var o1 ={ a:1}; var o2 ={ b:2};
var o3 ={ c:3};
var obj =Object.assign(o1, o2, o3);
console.log(obj);//{a: 1, b: 2, c: 3}
console.log(o1);//{a: 1, b: 2, c: 3 }，

注意目标对象本身也会改变。

合并具有相同属性的对象

var o1 ={ a:1, b:1, c:1}; var o2 ={ b:2, c:2};
var o3 ={ c:3};
var obj =Object.assign({}, o1 , o2, o3);
console.log(obj);//{a: 1, b: 2, c: 3}

6. 映射和设置

Map 和 Set 都称为集合，但它们也不同。Set 常用于检查对象中是否存在键名，Map 集合常用于获取存储的信息。Set 是一个包含相互独立的非重复值的有序列表。Array 和 Set 都是存储多个值的容器。两者可以相互转换，但使用场景有差异。如下： Array 的 indexOf 方法效率低于 Set 的 has 方法。Set不包含重复值(可以使用该特性实现数组的去重)Set使用delete方法删除一个值，而Array只能使用splice。两者使用起来更方便。前者更好。Array、map、filter、some、every等的许多新方法，Set中没有(但可以相互转换使用) Object和Map是string-valued，Map是value-value Object key是string类型，Map key是任意类型。对象的大小可以手动计算。Map.size 可以获取大小。Map的顺序就是插入顺序。对象有一个原型，所以地图中有一些默认键。可以理解为 Map=Object.create(null)

设置操作集合

letset=newSet() //Set 转换为数组
let arr =Array.from(set)
let arr =[...set]
//实例属性（继承自Set）
set.constructor ===Set
set.size
//操作方法
set.add(1)//添加一个值
set.delete(1)//删除一个值
set.has(1)//判断是否有这个值（数组中的indexOf）
set.clear() //清除所有值
//获取成员方法进行遍历（Set的遍历顺序就是插入顺序）
set.keys()//返回键名
的迭代器 set.values()//返回键的迭代器value
set.entries( )//返回键值对的迭代器
set.forEach()//循环遍历每个值（方法与Array相同）
for(let key of set.keys()){}
for(let val of set.values()){}
for(let entry of set .entries()){}
//使用数组方法处理set值
set=newSet(arr)
set=newSet([...set].map((x)= > x = x *2))
set=newSet ([...set].filter((x)=> x >2))

Map 方法集合

let map =newMap() //实例属性（继承自Map）
map.constructor ===Map
map.size
//操作方法
map.set(1,2)
map.get(1)
map.delete(1)
map .has(1)
map.clear()
//遍历方法
map.keys()
map.values()
map.entries()
map.forEach()
//映射和数组转换
map =newMap([['key' , 'val'],[2,1]])//需要一个二元数组
let arr =[...map]
//值得注意的是Map的key是内存绑定的
map.set([ 1] ,'s')
map.get([1])
让 arr =[1]
让 arr1 =[1]
map.set(arr,'s')
map.get(arr)
map.set(arr1,'s')
map.get(arr1)

以上就是关于“ES6常用语法总结”的介绍，大家如果想了解更多相关知识，不妨来关注一下极悦的Java极悦在线学习，里面的课程内容从入门到精通，细致全面，很适合没有基础的小伙伴学习，相信对大家一定会有所帮助的。