ES6、ES7语法

作者: 小袋鼠cf | 来源:发表于2018-09-27 20:22 被阅读0次

webpack的ES6支持与Babel
谈谈webpack与babel（一）
webpack 常用loader、Plugins和Mode配置及
ES6、ES7语法以及Vue模板语法
async和await的使用小结
Vue.js篇<4>-webpack
Babel解析原理剖析
ES7特性
[js异步编程]封装Generator的co函数
【转载】JS语法 ES6、ES7、ES8、ES9、ES10、ES

一、字符串的扩展

includes(str) : 判断是否包含指定的字符串
startsWith(str) : 判断是否以指定字符串开头
endsWith(str) : 判断是否以指定字符串结尾
repeat(count) : 重复指定次数

例：
<script type="text/javascript">
let str = 'asdfohsvckxnlck';
// console.log(str.includes('t'));
// console.log(str.includes('a'));
// console.log(str.startsWith('a'));
// console.log(str.endsWith('k'));
console.log(str.repeat(5));
</script>
二、数值扩展

二进制与八进制数值表示法: 二进制用0b, 八进制用0o
Number.isFinite(i) : 判断是否是有限大的数
Number.isNaN(i) : 判断是否是NaN
Number.isInteger(i) : 判断是否是整数
Number.parseInt(str) : 将字符串转换为对应的数值
Math.trunc(i) : 直接去除小数部分

例：
<script type="text/javascript">
console.log(0b1010);//10
console.log(0o56);//46
console.log(Number.isFinite(123));//true
console.log(Number.isFinite(Infinity));//flase
console.log(Number.isNaN(NaN));//true
console.log(Number.isInteger(123));//true
console.log(Number.isInteger(123.456));//false
console.log(Number.isInteger(123.0));//true
console.log(Number.parseInt('123abc456'));//123
console.log(Number.parseInt('a123abc456'));//NaN
console.log(Math.trunc('123.123'));//123
</script>
三、数组扩展

Array.from(v) : 将伪数组对象或可遍历对象转换为真数组

<body>
<button>测试1</button>

<button>测试2</button>

<button>测试3</button>

<script type="text/javascript">
let btns = document.getElementsByTagName('button');
Array.from(btns).forEach(function(item, index){
console.log(item);
})
</script>
</body>

Array.of(v1, v2, v3) : 将一系列值转换成数组
<script type="text/javascript">
let arr = Array.of(1, 4, 'abc', true);
console.log(arr);
</script>
[1, 4, "abc", true]
find(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素
<script type="text/javascript">
let arr2 = [2,3,4,2,5,7,3,6,5];
let result = arr2.find(function(item, index){
return item > 4;
});
console.log(result);//5
</script>
findIndex(function(value, index, arr){return true}) : 找出第一个满足条件返回true的元素下标

<script type="text/javascript">

result = arr2.findIndex(function(item, index){
return item > 4;
});
console.log(result);//4
</script>
四、对象扩展
1、 Object.is(v1, v2)

判断2个数据是否完全相等
console.log(0 == -0);//true
console.log(NaN == NaN);//false
console.log(Object.is(0, -0));//false
console.log(Object.is(NaN, NaN));//true

Object.assign(target, source1, source2..)

将源对象的属性复制到目标对象上
例：
let obj = {};
let obj1 = {username:'iverson', age:43};
let obj2 = {sex: '男'};
Object.assign(obj, obj1, obj2);
console.log(obj);
{username: "iverson", age: 43, sex: "男"}

直接操作 proto 属性
let obj2 = {};
obj2.proto = obj1;
```
 let obj3 = {};
```
let obj4 = {money: 5000000};
obj3.proto = obj4;
console.log(obj3);//{}
console.log(obj3.money);//5000000
五、对象的深度克隆
1、数据类型：
- 数据分为基本的数据类型(String, Number, boolean, Null,Undefined)和对象数据类型
- 基本数据类型：
  特点：存储的是该对象的实际数据
- 对象数据类型：
  特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里
  2、复制数据
- 基本数据类型存放的就是实际的数据，可直接复制
  let number2 = 2;
  let number1 = number2;
- 克隆数据：对象/数组
  1、区别：浅拷贝/深度拷贝
  判断：拷贝是否产生了新的数据还是拷贝的是数据的引用
  知识点：对象数据存放的是对象在栈内存的引用，直接复制的是对象的引用
  let obj = {username: 'kobe'}
  let obj1 = obj; // obj1 复制了obj在栈内存的引用
  2、常用的拷贝技术
  1). arr.concat(): 数组浅拷贝
  2). arr.slice(): 数组浅拷贝
  3). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据
  4). 浅拷贝包含函数数据的对象/数组
  5). 深拷贝包含函数数据的对象/数组
  拷贝数据：
  基本数据类型：
  拷贝后会生成一份新的数据，修改拷贝以后的数据不会影响原数据
  对象/数组：
  拷贝后不会生成新的数据，而是拷贝了引用。修改拷贝以后的数据会影响原数据
  拷贝数据的方法：
  1、直接赋值给一个变量 //浅拷贝
  2、Object.assign() //浅拷贝
  3、Array.prototype.concat() //浅拷贝
  4、Array.prototype.slice() //浅拷贝
  5、JSON.parse(JSON.stringify()) //深拷贝（深度克隆），拷贝的数据里不能有函数，因为它处理不了
  浅拷贝（对象/数组）：
  特点：拷贝的引用，修改拷贝以后的数据会影响原数据，使得原数据不安全
  深拷贝（深度克隆）
  特点：拷贝的时候生成新数据，修改拷贝以后的数据不会影响原数据
  思考：
  如何实现深度克隆
  拷贝的数据里有对象/数组会发生浅拷贝
  深拷贝的数据里不能有对象/数组，即使有，还可以继续遍历对象/数组，拿到每一项的值，直到拿到的都是基本数据类型，然后再赋值，就是深度克隆
  知识点储备
  如何判断数据类型： arr-->Array null-->Null
  1、typeof返回的数据类型： String、Number、Boolean、Undefined、Object、Function
  2、Object.prototype.toString.call(obj)
  for in循环对象（属性名）、数组（下标）
  六、Set和Map数据结构
Set容器 : 无序不可重复的多个value的集合体