React native 入门之es6语法小结

        在进行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)。  

块级作用域:

1

        上面的函数有两个代码块,都声明了变量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']

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,406评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,732评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,711评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,380评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,432评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,301评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,145评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,008评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,443评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,501评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,119评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2 354