一、ES6项目构建
二、ES6 基本语法
2.1 let 和 const（块作用域）
-
使用 let 定义变量，不能重复定义
let a = 1
let a = 2 //报错，不能重复定义 -
const ：常量，声明的时候同时必须赋值，之后不能修改
2.2 解构赋值
- 解构赋值：简单理解就是等号的左边和右边相等。
- 解构赋值的分类
-
数组解构赋值(★)
let a,b
[a,b,…c] = [1,2,3,4]
// a =1, b = 2, c = [3,4] -
字符串解构赋值(★)
-
对象解构赋值:
let metaData = {
title:‘haha’,
test:[{
name:‘zs’,
age:17
}]
}
let {title:esTitle,test:[name:cnName]} = metaData
console.log(esTitle,cnName) // ‘haha’ ‘zs’ -
布尔值解构赋值
-
函数参数解构赋值
-
数值解构赋值
-
2.3 正则扩展
正则新增特性
- 构造函数的变化
flags 此属性可以返回当前正则表达式显示设置的修饰符
let regex = new RegExp('xys','i')
console.log(regex.flags) // i
-
正则方法的扩展
-
u 修饰符
-
y 修饰符：y 修饰符的作用与 g 修饰符类似，也是全局匹配，后一次匹配都从上一次匹配成功的下一个位置开始。不同之处在于，g 修饰符只要剩余位置中存在匹配就可，而 y 修饰符确保匹配必须从剩余的第一个位置开始 ，如果找不到，就终止
var s = ‘anta’;
var r1 = /a+/g;
console.log(r1.exec(s))
console.log(r1.exec(s))
分析：
（1）.默认，lastIndex初始值为0。
（2）.第一次执行exec方法匹配成功后，lastIndex属性值变为1。
（3）.那么再一次执行exec方法的开始匹配位置就是1。
（4）.从位置1处开始进行检索，直到位置3处匹配成功。
var s = 'anta';
var r2 = /a+/y;
console.log(r2.exec(s))
console.log(r2.exec(s))
代码分析如下：
（1）.默认，lastIndex初始值为0。
（2）.第一次执行exec方法匹配成功后，lastIndex属性值变为1。
（3）.注意了，y修饰符的作用马上体现出来，正则必须在位置1处匹配成功，然而位置1处的字符是"n"，匹配失败，那么整个匹配就终止了
- s 修饰符
- 正则表达式 sticky属性：此属性用来检测正则表达式是否使用y修饰符。
如果使用，则返回true，否则返回false。
正则表达式修饰符 i、g、m、s、U、x、a、D、e
2.4 字符串扩展
- 遍历接口
- Unicode 表示法
- 模板字符串
- 新增方法
- includes：用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false
- startsWith：方法用于检测字符串是否以指定的子字符串开始
- endsWith：方法用于检测字符串是否以指定的子字符串结尾
- repeat：用于复制
- padStart：向前补位，如 ‘1’.padStart(2,‘0’) 输出 01
- padEnd：向后补位，如 ‘1’.padStart(2,‘0’) 输出 10
2.5 数值扩展
- Number.isFinite()： 判断数值是否是有尽
- Number.isFinite(1) true
- Number.isFinite(NaN) false
- Number.isNaN()
- Number.isInteger()：判断是否是整数，接收的参数必须是一个数值，不能是字符串
- Math.trunc()：取一个小数的整数部分
- Math.sign()：判断一个数是正数，负数，0。正数返回1，负数返回1.0返回0
- Math.cbrt()：计算一个数的立方根
2.6 数组扩展
-
Array.from()：将伪数组变成数组，只要有length 即可
let str = ‘12345’
console.log(Array.from(str)) //[“1”, “2”, “3”, “4”, “5”]let obj ={
0:‘a’,
1:‘b’,
length:2
}
console.log(Array.from(obj)) //[“a”, “b”] -
Array.of()：将一组值转换为数组，类似于声明数组
let str = ‘11’
console.log(Array.of(str)) //[‘11’]
=>
console.log(new Array(‘11’)) //[‘11’] -
Array.fill()：使用给定的值，将数组原来的值替换，ps: 填充完之后会改变原来的数组。有三个参数
-
target ：待填充的元素。必填
-
start：开始填充位置的索引。可选，如果没有，就是将元素全部替换
-
end：终止填充位置的索引。可选。如果只有前两个参数，默认从开始索引到结束全部填充
{
let arr = [1,2,3,4,5]
let arr1 = arr.fill(5)
console.log(arr1) // [5, 5, 5, 5, 5]
console.log(arr) // [5, 5, 5, 5, 5] 填充完会改变原来数组的值
}
{
let arr = [1,2,3,4,5]
let arr2 = arr.fill(5,2) // [1, 2, 5, 5, 5]
console.log(arr) // [1, 2, 5, 5, 5] 填充完会改变原来数组的值let arr3 = arr.fill(5,1,3) // [1, 5, 5, 5, 5] console.log(arr) // [1, 5, 5, 5, 5] 填充完会改变原来数组的值}
-
-
Array.keys()：遍历数组的键名
let arr = [1,2,3,4]
let arr1 = arr.keys()
for (let key of arr1) {
console.log(key); // 0,1,2,3
} -
Array.values()：遍历数组的值
let arr = [1,2,3,4]
let arr1 = arr.values()
for (let val of arr1) {
console.log(val); // 1,2,3,4
} -
Array.entries()：遍历数组的键和值
let arr = [1,2,3,4]
let arr1 = arr.entries()
for (let e of arr1) {
console.log(e); // [0,1] [1,2] [2,3] [3,4]
} -
Array.copyWithin()：用的很少，不理解
-
Array.find()：找到数组中第一个符合条件的，并返回该值
let arr = [1,2,3,4]
let arr1 = arr.find( value => value>2 )
console.log(arr1); // 3 -
Array.findIndex()：找到数组中第一个符合条件的值并返回该索引
let arr = [1,2,3,4]
let arr1 = arr.findIndex( value => value>2 )
console.log(arr1); // 2 -
Array.includes()：遍历数组，寻找是否包含给定的某个值，包含返回 true，不包含，返回 false
let arr = [1,2,3,4,5]
let arr1 = arr.includes(2)
let arr2 = arr.includes(8)
console.log(arr1) // ture
console.log(arr2) // false
数组的所有方法
2.7 对象扩展
-
Object.assign()：用来将源对象（source）的所有可枚举属性，复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象
let targetObj1 = { a: 1 };
let sourceObj1 = { b: 1 };
let sourceObj11 = { c: 3 };
Object.assign(targetObj1, sourceObj1, sourceObj11);
console.log(targetObj1) //{a:1,b:1,c:3} -
Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。
- 为对象添加属性
- 为对象添加方法
- 克隆对象
2.8 Symbol
- Symbol 的概念：用 Symbol 声明的变量永不相等，保证唯一性。
- Symbol 的使用场景：
-
使用Symbol来作为对象属性名(key)
const name = Symbol()
const age = Symbol()let obj = {
[name]:‘王二麻子’,
[age]:13,
color:‘yellow’
}console.log(obj[name]) // 王二麻子
-
当使用了Symbol作为对象的属性key后，在对该对象进行key的枚举时 ,使用普通的 object.keys(obj) 只能都得到 非 Symbol 的值。使用JSON.stringify()将对象转换成JSON字符串的时候，Symbol属性也会被排除在输出内容之外
Object.getOwnPropertySymbols(obj) // [Symbol(name)]Object.getOwnPropertySymbols(obj).forEach(item =>{ console.log(obj[item]); // 王二麻子 13 }) // 使用新增的反射API Reflect.ownKeys(obj) Reflect.ownKeys(obj).forEach(item =>{ console.log(item,obj[item]) }) // color yellow // Symbol() "王二麻子" // Symbol() 13
-
2.9 set-map 数据结构
- set()
-
基本用法：它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成Set数据结构。
let arr = new Set()
arr.add(1)
arr.add(2)console.log(arr); //Set(2) {1, 2} console.log(arr.size); //2 -
Set 函数可以接受一个数组作为参数，来初始化一个 Set 结构
let set = new Set([1,2,3,4,5])
console.log(set); //Set(5) {1, 2, 3, 4, 5} -
Set 用于数组去重（扩展运算符和 Set结构结合，实现去重）
console.log([… new Set([1,2,3,4,5,6,5,4,3,3,2,1])]); //[1,2,3,4,5,6] -
向Set加入值的时候，不会发生类型转换，所以5和“5”是两个不同的值
-
在Set中两个对象总是不相等的,原因是对象是引用值，存储地址不同.
let set = new Set();
set.add({});
console.log(set.size); //1
set.add({});
console.log(set.size); //2 -
Set实例的属性和方法
- 操作方法：
- add(value)：添加某个值，返回 Set 结构本身
- delete(value)：删除某个值，返回一个布尔值，表示删除成功与否
- has(value)：查询某个值，返回一个布尔值
- clear()：清除所有成员，没有返回值
- 遍历方法：
- keys()：返回键名的遍历器
- values()：返回键值的遍历器
- entries()：返回键值对的遍历器
- forEach()：使用回调函数遍历每个成员
- keys方法，values方法，entries方法返回的都是遍历器对象。由于Set结构没有键名，所以keys方法可values方法的行为完全一致。
- 操作方法：
-
使用Set可以很容易的实现并集、交集、差集。
let a = new Set([1,2,3,4])
let b = new Set([2,3,4,5,6])const union = new Set([...a,...b]) console.log(union); // {1,2,3,4,5,6} //交集 const intersect = new Set([...a].filter(x => b.has(x))); console.log(intersect); //{2,3,4} // 差集 const difference = new Set([...a].filter(x => !b.has(x))); console.log(difference); //{1}
-
- weakSet()：WeakSet结构与Set类似，也是不重复的集合。但是，它与Set有两个区别 :
- 只支持对象，不能是数值，boolaen或者是 string；
- 是弱引用，只引用地址，不会去检测地址是否已经被垃圾回收。
- 没有 size 属性，不能遍历成员
- WeakSet的一个用处，是储存Dom节点，而不用担心这些节点从文档移除时，会引发内存泄漏。
JavaScriptES6的Set与WeakSet
- Map()：
- weanMap()：
JavaScriptES6Map与WeakMap
2.10 Proxy 和 Reflect
- 概念：
- Proxy
- Reflect
2.11 类
静态方法只能被构造函数所调用，不能被构造函数的实例调用。
class Parent{
constructor(name){
this.name = name
}
static test(){
console.log('test');
}
}
Parent.test()
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
