【ES6】常用语法与特性

最新推荐文章于 2023-03-19 12:53:48 发布

及时行乐、

最新推荐文章于 2023-03-19 12:53:48 发布

阅读量194

点赞数

分类专栏： JS 文章标签： es6

本文链接：https://blog.csdn.net/qq_24884131/article/details/101267589

版权

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

let和const 解构赋值字符串扩展

1、新增unicode编码表示方法
2、字符串能被for in 遍历

for (let codePoint of 'foo') {
  	console.log(codePoint)
    }
	// "f"
	// "o"
	// "o"

3、新增at()，可识别编号大于0xFFFF的字符，返回正确字符

'abc'.charAt(0) // "a"
    '?'.charAt(0) // "\uD842"

'abc'.at(0) // "a"
    '?'.at(0) // "?"

4、includes(), startsWith(), endsWith()，都返回布尔值，表示字符串是否存在、是否在开头，是否在结尾，可支持第二参数，表示搜索起始位置
5、repeat(n)将字符串重复n次，n为小数被取整，n为负数和Infinity报错，n为0或0~-1之间的小数字符串被清空，NaN等同于0；n为字符串会自动转成数字。
6、模板字符串

正则拓展
1、ES5中RegExp构造函数有两种

var regex = new RegExp('xyz', 'i');
    // 等价于
var regex = /xyz/i;

var regex = new RegExp(/xyz/i);
     // 等价于
    var regex = /xyz/i;

但是不能写成 var regex = new RegExp(/xyz/ig,‘i’)
ES6现在可以写成这样，第二个参数i会覆盖前面的/ig
2、ES6对正则表达式添加了u修饰符，含义为“Unicode模式”，用来正确处理大于\uFFFF的Unicode字符

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

3、y修饰符的作用与g修饰符类似，也是全局匹配，后一次匹配都从上一次匹配成功的下一个位置开始。不同之处在于，g修饰符只要剩余位置中存在匹配就可，而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

y修饰符头部匹配不成功则null，g头部匹配不成功但是剩余匹配成功则返回

数值拓展

1、新增二进制与八进制写法0b和0o表示
2、Number.isFinite()检查数值是否有限，返回布尔值
NaN、Infinity、非数值类型表示false，与传统的全局方法isFinite()和isNaN()的区别在于，传统方法先调用Number()将非数值的值转为数值，再进行判断，而这两个新方法只对数值有效，非数值一律返回false。

Number.isFinite(15); // true
    Number.isFinite(0.8); // true
    Number.isFinite(NaN); // false
    Number.isFinite(Infinity); // false
    Number.isFinite(-Infinity); // false
    Number.isFinite('foo'); // false
    Number.isFinite('15'); // false
    Number.isFinite(true); // false

3、ES6将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。这样做的目的，是逐步减少全局性方法，使得语言逐步模块化。
4、Number.isInteger()判断整数
5.新增一个极小的常量Number.EPSILON。引入一个这么小的量的目的，在于为浮点数计算，设置一个误差范围。

Number.EPSILON
    // 2.220446049250313e-16
    Number.EPSILON.toFixed(20)
    // '0.00000000000000022204'

但是如果这个误差能够小于Number.EPSILON，我们就可以认为得到了正确结果。

5.551115123125783e-17 < Number.EPSILON
// true

6、超出2的53次方之后，一个数就不精确了。ES6引入Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER这两个常量，用来表示这个范围的上下限。

Math对象

7、Math.trunc()去除小数部分，对于空值和无法截取整数的值，返回NaN。
8、Math.sign()
Math.sign方法用来判断一个数到底是正数、负数、还是零。
它会返回五种值。

参数为正数，返回+1；
参数为负数，返回-1；
参数为0，返回0；
参数为-0，返回-0;
其他值，返回NaN。

函数拓展

1、参数的默认值，设置默认值时不能省略该参数，想省略该参数只能显示输入undefined才能调用默认参数；输入null不行，null为空对象，是一个对象赋值。函数的length属性，返回没有默认参数的参数个数，将会失真。
2、函数的rest参数，必须在末尾function fn(a,b,…c){}中，C为rest参数，类似解构赋值let [head, …tail] = [1, 2, 3, 4]，必须在末尾。否则报错。
3、扩展运算符(…),主要用于函数调用，把数组变为参数序列。

 function push(array, ...items) {
 	 array.push(...items);
}
function add(x, y) {
  return x + y;
}

var numbers = [4, 38];
add(...numbers) // 42

应用场景：
①、合并数组

var arr1 = ['a', 'b'];
	var arr2 = ['c'];
	var arr3 = ['d', 'e'];

// ES5的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

②、与解构赋值结合

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

③、将字符串转成数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]

4、箭头函数
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作Generator函数。
5、尾调用、尾递归*

对象扩展

1、对象属性名与属性值相同可简写，如 foo :foo => foo
2、Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。相等运算符（==）和严格相等运算符（===）。它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0

Object.is('foo', 'foo')
    // true
    Object.is({}, {})
    // false

不同之处只有两个：一是+0不等于-0，二是NaN等于自身。

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

3、Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。
注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

var target = { a: 1, b: 1 };
    var source1 = { b: 2, c: 2 };
    var source2 = { c: 3 };
    Object.assign(target, source1, source2);
    target // {a:1, b:2, c:3}

Set和Map

Set结构没有键名，只有键值（或者说键名和键值是同一个值）
Set结构的实例有以下属性。
Set.prototype.constructor：构造函数，默认就是Set函数。
Set.prototype.size：返回Set实例的成员总数。
Set实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。
add(value)：添加某个值，返回Set结构本身。
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
has(value)：返回一个布尔值，表示该值是否为Set的成员。
clear()：清除所有成员，没有返回值。
Set结构的实例有四个遍历方法，可以用于遍历成员。
keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
forEach()：使用回调函数遍历每个成员

Map它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。
（1）size属性，size属性返回Map结构的成员总数。
（2）set(key, value)，set方法设置key所对应的键值，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就新生成该键。
（3）get(key)，读取key对应的键值，如果找不到key，返回undefined。
（4）has(key)，has方法返回一个布尔值，表示某个键是否在Map数据结构中。
（5）delete(key)，delete方法删除某个键，返回true。如果删除失败，返回false。
（6）clear()，clear方法清除所有成员，没有返回值。
Map原生提供三个遍历器生成函数和一个遍历方法。
keys()：返回键名的遍历器。
values()：返回键值的遍历器。
entries()：返回所有成员的遍历器。
forEach()：遍历Map的所有成员。

Proxy和Reflect

var proxy = new Proxy({}, {
  get: function(target, property) {
    return 35;
  }
});

proxy.time // 35
proxy.name // 35
proxy.title // 35

（1）get(target, propKey, receiver)
拦截对象属性的读取，比如proxy.foo和proxy[‘foo’]。
最后一个参数receiver是一个对象，可选，参见下面Reflect.get的部分。
（2）set(target, propKey, value, receiver)
拦截对象属性的设置，比如proxy.foo = v或proxy[‘foo’] = v，返回一个布尔值。
（3）has(target, propKey)
拦截propKey in proxy的操作，以及对象的hasOwnProperty方法，返回一个布尔值。
（4）deleteProperty(target, propKey)
拦截delete proxy[propKey]的操作，返回一个布尔值。
（5）ownKeys(target)
拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)，返回一个数组。该方法返回对象所有自身的属性，而Object.keys()仅返回对象可遍历的属性。
（6）getOwnPropertyDescriptor(target, propKey)
拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
（7）defineProperty(target, propKey, propDesc)
拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
（8）preventExtensions(target)
拦截Object.preventExtensions(proxy)，返回一个布尔值。
（9）getPrototypeOf(target)
拦截Object.getPrototypeOf(proxy)，返回一个对象。
（10）isExtensible(target)
拦截Object.isExtensible(proxy)，返回一个布尔值。
（11）setPrototypeOf(target, proto)
拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。
如果目标对象是函数，那么还有两种额外操作可以拦截。
（12）apply(target, object, args)
拦截 Proxy 实例作为函数调用的操作，比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)。
（13）construct(target, args)
拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(…args)。

Iterator和for…of循环

Iterator的遍历过程是这样的，如果数据结构有Symbol.iterator属性，执行这个函数就会返回遍历器，否则要自己写接口，在ES6中，有三类数据结构原生具备Iterator接口：数组、某些类似数组的对象（包括字符串、DOM NodeList对象、arguments对象等）、Set和Map结构，其他数据结构（主要是对象）的Iterator接口，都需要自己在Symbol.iterator属性上面部署，这样才会被for…of循环遍历。
（1）创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。
（2）第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
（3）第二次调用指针对象的next方法，指针就指向数据结构的第二个成员。
（4）不断调用指针对象的next方法，直到它指向数据结构的结束位置。
调用场景：
（1）解构赋值
（2）扩展运算符
（3）yield*
yield*后面跟的是一个可遍历的结构，它会调用该结构的遍历器接口。

let generator = function* () {
  	yield 1;
  	yield* [2,3,4];
  	yield 5;
	};

	var iterator = generator();

	iterator.next() // { value: 1, done: false }
	iterator.next() // { value: 2, done: false }
	iterator.next() // { value: 3, done: false }
	iterator.next() // { value: 4, done: false }
	iterator.next() // { value: 5, done: false }
	iterator.next() // { value: undefined, done: true }

（4）其他场合
for…of
Array.from()
Map(), Set(), WeakMap(), WeakSet()（比如new Map([[‘a’,1],[‘b’,2]])）
Promise.all()
Promise.race()

Generator 函数

让Generator函数返回一个正常的对象实例，既可以用next方法，又可以获得正常的this？
下面是一个变通方法。首先，生成一个空对象，使用call方法绑定Generator函数内部的this。这样，构造函数调用以后，这个空对象就是Generator函数的实例对象了。

function* F() {
  this.a = 1;
  yield this.b = 2;
  yield this.c = 3;
}
var obj = {};
var f = F.call(obj);

f.next();  // Object {value: 2, done: false}
f.next();  // Object {value: 3, done: false}
f.next();  // Object {value: undefined, done: true}

obj.a // 1
obj.b // 2
obj.c // 3

应用
（1）异步操作的同步化表达

function* loadUI() {
  	showLoadingScreen();
  	yield loadUIDataAsynchronously();
 	 hideLoadingScreen();
	}
	var loader = loadUI();
	// 加载UI
	loader.next()

	// 卸载UI
	loader.next()

上面代码表示，第一次调用loadUI函数时，该函数不会执行，仅返回一个遍历器。下一次对该遍历器调用next方法，则会显示Loading界面，并且异步加载数据。等到数据加载完成，再一次使用next方法，则会隐藏Loading界面。可以看到，这种写法的好处是所有Loading界面的逻辑，都被封装在一个函数，按部就班非常清晰。
（2）控制流管理
（3）部署Iterator接口
（4）作为数据结构

异步用法
在这里插入图片描述

ES6 promise对象

Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
看网站详细http://caibaojian.com/es6/promise.html

async函数

在这里插入图片描述

及时行乐、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【ES6】常用语法与特性

let和const 解构赋值字符串扩展1、新增unicode编码表示方法2、字符串能被for in 遍历for (let codePoint of 'foo') { console.log(codePoint) } // "f" // "o" // "o"3、新增at()，可识别编号大于0xFFFF的字符，返回正确字符'abc'.charAt(0) // "a"...
复制链接

扫一扫