在进行react native开发中,官方建议使用es6语法作为前端开发的支撑,此文档是以es6为基础,因为es6到es8的这几个版本中,由es5发展到es6,语法上增加的相关知识点是最多了,后续几个版本都是在es6的基础上增加少部分的内容,主要包含有以下几个知识点,更详情的api就不做总结了,可以去看看官方文档。
声明语句:
ES5只有两种声明变量的方法:var命令和function命令,ES6除了添加let和const命令,另外两种声明变量的方法:import命令和class命令,ES6一共有6种声明变量的方法
let命令:let命令声明的对象只在它所属的代码块中有效,不是全局属性的。
let命令不存在《变量提升》的现象,所以使用先必须先声明 。
代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称TDZ)。
块级作用域:
上面的函数有两个代码块,都声明了变量n,运行后输出5。这表示外层代码块不受内层代码块的影响。如果使用var定义变量n,最后输出的值就是10
外层作用域无法读取内层作用域的变量,内层作用域可以定义外层作用域的同名变量。
解构赋值:
解构赋值的规则是,只要等号右边的值不是对象,就先将其转为对象。由于undefined和null无法转为对象,所以对它们进行解构赋值,都会报错。
解构赋值模式中的圆括号问题:
变量声明语句中,不能带有圆括号
var [(a)] = [1];
函数参数中,模式不能带有圆括号
function f([(z)]) { return z; }
赋值语句中,不能将整个模式,或嵌套模式中的一层,放在圆括号之中
([a]) = [5];
某种数据结构具有Iterator接口,都可以采用数组形式的解构赋值。
var [a, b, c] = [1, 2, 3];
这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值
var [foo] = [];
如果解构不成功,变量的值就等于undefined
解构不仅可以用于数组,还可以用于对象。
var { foo, bar } = { foo: "aaa", bar: "bbb" };
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值
字符串也可以解构赋值。这是因为此时,字符串被转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';
a // "h"
String字符的相关方法
codePointAt() 返回字符的码点
var s = ''"a';
s.codePointAt(0) // 134071
String.fromCodePoint() 从码点返回字符 跟上面的方法对应的
repeat方法返回一个新字符串,表示将原字符串重复n次。'x'.repeat(3) // "xxx"
padStart(),padEnd() 字符串补全长度的功能 padStart用于头部补全,padEnd用于尾部补全
includes():返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padEnd(5, 'ab') // 'xabab'
String.raw() ,返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串
String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"
数值计算的使用
二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。
将0b和0o前缀的字符串数值转为十进制,要使用Number方法。
Number('0b111') // 7
Number('0o10') // 8
Number.isFinite(), Number.isNaN()
Number.isFinite()用来检查一个数值是否为有限的(finite)
Number.isNaN()用来检查一个值是否为NaN
它们与传统的全局方法isFinite()和isNaN()的区别在于,传统方法先调用Number()将非数值的值转为数值,再进行判断,而这两个新方法只对数值有效,非数值一律返回false。
ES6在Number对象上面,新增一个极小的常量Number.EPSILON。计算浮点数的误差能够小于Number.EPSILON,我们就可以认为得到了正确结果
5.551115123125783e-17 < Number.EPSILON
// true
Math.trunc方法 用于去除一个数的小数部分,返回整数部分
Math.sign方法 用来判断一个数到底是正数、负数、还是零。
Math.cbrt方法 用于计算一个数的立方根
Math.clz32方法 返回一个数的32位无符号整数形式有多少个前导0
Math.imul方法 返回两个数以32位带符号整数形式相乘的结果,返回的也是一个32位的带符号整数。
Math.fround方法 返回一个数的单精度浮点数形式
Math.hypot方法 返回所有参数的平方和的平方根
数组的使用
Array.from方法
用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)例如常见的类似数组的对象是DOM操作返回的NodeList集合,以及函数内部的arguments对象,只要是部署了Iterator接口的数据结构,Array.from都能将其转为数组,这样才能使用例如 forEach 方法。
Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
Array.of方法
用于将一组值,转换为数组
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
上面代码中,Array方法没有参数、一个参数、三个参数时,返回结果都不一样。只有当参数个数不少于2个时,Array()才会返回由参数组成的新数组。参数个数只有一个时,实际上是指定数组的长度。
Array.of基本上可以用来替代Array()或new Array(),并且不存在由于参数不同而导致的重载。它的行为非常统一。
copyWithin()
在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组
target(必需):从该位置开始替换数据。
start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
这三个参数都应该是数值,如果不是,会自动转为数值。
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
上面代码表示将从3号位直到数组结束的成员(4和5),复制到从0号位开始的位置,结果覆盖了原来的1和2。
find()和findIndex()
用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数
[1, 5, 10, 15].find(function(value, index, arr) { return value > 9;}) // 10 ,find方法的回调函数可以接受三个参数,依次为当前的值、当前的位置和原数组
[1, 5, 10, 15].findIndex(function(value, index, arr) { return value > 9})findIndex方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
fill()
使用给定值,填充一个数组。
['a', 'b', 'c'].fill(7)// [7, 7, 7]
new Array(3).fill(7)// [7, 7, 7]
fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']