es6语法最全深入浅出(一)

简介: es6语法最全深入浅出

变量

es6新增了块作用域,以及let和const命令,完善变量定义规范,为数组和对象增加了解构赋值。

let命令

ECMAScript 6新增了let命令,用来声明变量。用法与var类似,但是所声明的变量,只能在let命令所在的代码块内有效。

下面代码在代码块中分别用let和var声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。

{
  let a = 10;
  var b = l;
}
a //抛出引用错误:a 未定义b //1

let不会发生“变量提升”现象,仅能够在声明之后使用。例如:

function do_something() {
  console.log(foo)//抛出引用错误let foo = 2;
  let foo = 2;
}; 

上面代码在声明foo之前,就使用这个变量,结果会抛出一个错误

tips: let不允许在相同作用域内,重复声明同一个变量。下面写法是错误的

const命令

const也用来声明变量,但声明的是常量。一旦声明,常量的值就不能改变。

下面代码表明改变常量的值是不起作用的。但对常量重新赋值不会报错,只会失效。

const PI=3.1415
PI //3.1415
PI=3 ;
PI //3.1415
const PI=3.1:
PI //3.1415

const的作用域与let命令相同: 只在声明所在的块级作用域内有效,不可重复声明

数组解构赋值

es6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 (Destructuring)

ECMAScript 5为变量赋值,只能直接指定值

var a=l.
var b=2.
var c=3:

ECMAScript 6允许按如下方式进行赋值

var [a, b, c]=[1, 2, 3];

上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。

本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。

对象解构赋值

解构不仅可以用于数组,还可以用于对象。对象的解构与数组的不同之处:数组的元素是按次序排列的,变量的取值由它的位置决定,而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

在下面代码中,等号左边的两个变量的次序,与等号右边两个同名属性的次序不一致,但是对取值完全没有影响。如果变量没有对应的同名属性,导致取不到值最后等于undefined.

bar, foo l= foo:"aaa",bar:"bbb] .var
foo //返回值“aaa
bar //返回值"bbb"
baz ]=[ foo:"aaa",bar:"bbb”];var
baz //返回值undefined

如果变量名与属性名不一致,必须写成下面这样

foo: baz ]=[ foo:"aaa", bar:"bbb" ] ;var
baz //"aaa'

字符和字符串

ECMAScript 6加强了对Unicode的支持,并且扩展了字符串对象。

字符

codePointAt()

JavaScript字符以UTF-16格式存储,每个字符为两个字节。对于那些需要4个字节存储的字符 (Unicode编号大于0xFFFF的字符),JavaScript会认为它们是两个字符.

在下面代码中,汉字“6q”的Unicode编号是0x20BB7,UTF-16编码为0xD842 0xDFB7 (十进制为55362 57271),需要4个字节存储。对于这种4个字节的字符,JavaScript不能正确处理,字符串长度会误判为2,而目charAt()方法无法读取字符,charCodeAt()方法只能分别返回前两个字节和后两个字节的值。

var s = "?";
s.length //2
s.charAt(0) // ""
s.charAt(1) // ""
s.charCodeAt(0) //55362
s.charCodeAt(1) //57271

字符串

u修饰符

ECMAScript 6为正则表达式添加了u修饰符,用来正确处理大于luFFFF的Unicode字符。

使用u修饰符

var s ="?";
/^.$/. test(s) //false
/^.$/u.test(s) //true

上面代码表示,如果不添加u修饰符,正则表达式就会认为字符串为两个字符,从而匹配失败。

利用这一点,可以写出一个正确返回字符串长度的函数

function codePointLength(text) {
var result = text.match(/[sS]/gu);
return result ? result.length : 0;
}
var s="吉吉"
s.length //4
codePointLength(s)//2
包含检测

传统上,JavaScript只有indexOf()方法,可以用来确定一个字符串是否包含在另一个字符串中。ECMAScript 6又提供了3种新方法。

contains(): 表示是否找到了参数字符串。

startsWith(): 表示参数字符串是否在源字符串的头部。

endsWith(): 表示参数字符串是否在源字符串的尾部。

使用包含检测方法

var s = "Hello world!";
s.startsWith("Hello") //true
s.endsWith("!") //true
s.contains("0") //true
定义重复字符串

repeat()返回一个新字符串,表示将原字符串重复n次

"x".repeat(3) //"xxx"
"hello".repeat(2) //"hellohello"
y修饰符

除了u修饰符,ECMAScript 6还为正则表达式添加了y修饰符,叫做“粘连”(sticky)修饰符。它的作用与g修饰符类似,也是全局匹配,后一次匹配都从上一次匹配成功的下个位置开始,不同之处在于,g修饰符只确保剩余位置中存在匹配,而y修饰符确保匹配必须从剩余的第一个位置开始,这也就是“粘连”的含义。

使用y修饰符

var s = "aaa_aa_a";
var r1 = /a+/g;
var r2 = /a+/y;
r1.exec(s) //["aaa"]
r2.exec(s) //["aaa"]
r1.exec(s) //["aa"]
r2.exec(s) //null

上面代码有两个正则表达式,一个使用g修饰符,另一个使用y修饰符。这两个正则表达式各执行了两次,第一次执行时,两者行为相同,剩余字符串都是“ aa a”。因为g修饰没有位置要求,所以第二次执行会返回结果,而y修饰符要求匹配必须从头部开始,所以返回null。

模板字符串

模板字符串 (template string) 是增强版的字符串,用反引号 ()标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

使用模板字符串。

//普通字符串
`In JavaScript '\n' is a line-feed.  `
//多行字符串
`In JavaScript this is not legal.`
//字符串中嵌入变量
var name = "Bob",time = "today";
`Hello ${name},bow are you ${time}?`
var x = 1;
var y = 2;
console.log(`${x}+${y}=${x+y}`)
//"1+2=3"

上面代码表示,在模板字符串中嵌入变量,需要将变量名写在${}中。

数值

es6对数值的进制表示进行修订,新增了Number和Math方法,扩展数学计算能力。

进制表示

ECMAScript 6提供了二进制和八进制数值的新的写法,分别用前缀0b和0o表示,

0b111110111===503 //true
0o767==-503 //true

八进制用0o前缀表示的方法,将要取代已经在ECMAScript 5中被逐步淘汰的加前缀0的写法。

Number方法

NumberisFinite()、Number.isNaN()

ECMAScript 6在Number对象上,新提供了Number.isFinite()和Number.isNaN()两个方法,用来检查Infinite和NaN这两个特殊值。

与传统的isFinite()和isNaN(的区别在于,传统方法先调用Number()将非数值的值转为数值,再进行判断,而这两个新方法只对数值有效,非数值一律返回false。

isFinite(25) //true
isFinite("25") //true
Number.isFinite(25) //true
Number.isFinite("25) //false
isNaN(NaN) //true
isNaN("NaN) //true
Number.isNaN(NaN) //true
Number.isNaN("NaN") //false
Number.parselnt()、 Number.parseFloat()

ECMAScript 6将全局方法parselnt()和parseFloat(),移植到Number对象上面,行为完全保持不变。这样做的目的,是逐步减少全局性方法,使得语言逐步模块化。

Numberislnteger()和安全整数

Number.isInteger()用来判断一个值是否为整数。需要注意的是,在JavaScript内部整数和浮点数是同样的存储方法,所以3和3.0被视为同一个值。

Number.isInteger(25) //true
Number.isInteger(25.0) //true
Number.isInteger(25.1) //false

JavaScript能够准确表示的整数范围在-2~53 ~253之间。ECMAScript 6引入了Number.MAX SAFE INTEGER和Number.MIN SAFE INTEGER这两个常量,用来表示这人范围的上下限。NumberisSafelnteger()则是用来判断一个整数是否落在这人范围内。

var inside=Number.MAX_SAFE_INTEGER;
var outside=inside+l:
Number.isInteger(inside) //true
Number.isSafeInteger(inside) //true
Number.isInteger (outside) //true
Number.isSafeInteger (outside) //false

Math方法

Math.trunc()

Math.trunc方法用于去除一个数的小数部分,返回整数部分。

Math.trunc(4.1) //4
Math.trunc(4.9) //4
Math.trunc(-4.1) //-4
Math.trunc(-4.9) //-4

新数学方法

es6在Math对象上新增了很多新的数学方法。简单说明如下。

Math.acosh(x): //返回x的反双曲余弦
Math.asinh(x): //返回x的反双曲正弦
SMath.atanh(x): //返回x的反双曲正切。
Math.cbrt(x): //返回x的立方根S
Math.clz32(x): //返回x的32位二进制整数表示形式的前导0的个数
Math.cosh(x): //返回x的双曲余弦
Math.expm1(x): //返回e~x-1。S
Math.fround(x): //返回x的单精度浮点数形式
Math.hypot(...values): //返回所有参数的平方和的平方根
Math.imul(x,y): //返回两个参数以32位整数形式相乘的结果S
Math.log1p(x): //返回1+x的自然对数S
Math.log10(x): //返回以10为底的x的对数
Math.log2(x): //返回以2为底的x的对数S
Math.sign(x): //如果x为负返回-1,x为0返回0,x为正返回1。
Math.tanh(x): //返回x的双曲正切

数组

es6在es5基础上扩展了JavaScript数组功能,新增转换方法,引入数组推导和监听概念。

转换

Array.from()

Array.from()用于将两类对象转为真正的数组: 类似数组的对象和可遍历 (iterable) 的对象,其中包括ECMAScript 6新增的Set和Map结构。

在下面代码中,querySelectorAll()方法返回的是一个类似数组的对象,只有将这个对象转为真正的数组,才能使用forEach()方法。

let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function(p) {
  console.log(p);
})

Array.from()还可以接收第二个参数,作用类似于数组的map()方法,用来对每个元素进行处理。

Array.from(arrayLike, x => x * x):

等同于

Array.from(arrayLike).map(x => x * x):
Array.of()

Array.of()方法用于将一组值转换为数组。这个函数的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。例如:

Array(3) //[undefined, undefined, undefined]
Array.of(3).length //1
Array(3,11,8) //[3,11, 8]
Array.of(3,11,8) //[3,11,8]

上面代码说明,只有当参数个数不少于两个,Array()才会返回由参数组成的新数组。

相关文章
|
4月前
|
前端开发
【面试题】如何使用ES6 ... 让代码优雅一点?
【面试题】如何使用ES6 ... 让代码优雅一点?
|
6月前
|
Web App开发 JavaScript 前端开发
|
6月前
|
JavaScript 前端开发 Java
|
6月前
|
前端开发 JavaScript 编译器
|
6月前
|
JavaScript
ES6的基础用法
对js es6的用法进行简单介绍
|
9月前
|
网络架构
es6 语法简单使用1
es6 语法简单使用
51 0
|
9月前
|
前端开发
es6 语法简单使用2
es6 语法简单使用
40 0
|
11月前
|
JavaScript 前端开发
|
11月前
ES6 —— 函数进阶
ES6 —— 函数进阶
|
Web App开发 前端开发 JavaScript
ES9语法知识点回顾
ES9语法知识点回顾
229 31