es6 学习笔记

es6 基本语法
1，环境构建
Webpack 是一个前端资源加载/打包工具
这里本来是要写 webpack 的，先不学习了
2，变量定义
let 和 const 解决变量提升问题
3，结构语法
let {b}={b:55}; //不对应就是undefined
let [b]=[44]; //不对应就是undefined
let [a,b,c]=‘lkj’;//不对应就是undefined
//可以使用剩余运算符
let [a,…b]=[5,6,8];
4，扩展运算
let a=[4,5,6]
let b=a //这样是指针传递，非常不好
let b=[…a] //这样是值传递

function li(...can){
	for(let val of can){
		console.log(val)
	}
}
li(4,8,9,4)

5，字符串模版
添加了 字符串 查找功能
includes()：返回布尔值，判断是否找到参数字符串。
startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。
repeat()：返回新的字符串，表示将字符串重复指定次数返回
padStart：返回新的字符串，表示用参数字符串从头部补全原字符串。
padEnd：返回新的字符串，表示用参数字符串从头部补全原字符串。

使用 ` ` 里面放html标签可以解决字符串拼接问题
function fn(str ,...values){

}
let name= Mike
let age =27
fn `My Name is ${name},I am ${age+1} years old next year.` //上下等价
f(['My Name is',',I am ',' years old next year.'],'Mike',28);

6，数字操作
二进制 0b 0b=3
八进制 0o 0o11=9

Number.isFinite('pp') //判断是否为数字
Number.isNaN() //是不是是 nan
Number.isInteger(1); //是否为整数
0.1+0.2==0.3 //用Number.EPSILON 这个常量比较

Math.sign //判断是否为正，负， 零
Math.trunc //返回浮点型，整数部分
 //立方，根，对数，log 我就不写了

7，数组操作
Array.from([4,5,9])
Array.from(json) //json 转数组 //也可以把map 和set 类型转换成数组
Array.of(4,5,9) //参数变成数组 //都可以穿第二个参数，回调函数继续操作

let arr = Array.of(1, 2, 3, 4);
console.log(arr.find(item => item > 2)); // 查询数组元素
console.log(arr.findIndex(item => item = 1)); // 这个是查询数组下标

let arr = Array.of(1, 2, 3, 4);
console.log(arr.fill(0,1,2)); // 替换数组里面的元素
console.log([1, 2, 3, 4].copyWithin(0,2,4)); // 修改数组里面的元素

遍历
用 for of 可以 for(let [key, value] of ['a', 'b'].entries()){
	let entries = ['a', 'b'].entries();
	console.log(entries.next().value); // 也可以用 next 操作
for(let key of ['a', 'b'].keys()){ //只变量key
for(let value of ['a', 'b'].values()){ //只变量值

[1, 2, 3].includes(1); //数组是否包含，和php in_array 类似
console.log([1 ,[2, 3]].flat());  //多维数组转一维数组
console.log([1, 2, 3].flatMap(n => [n * 2])); // 转数组，回调函数
[...[1,3],...[4,8]] //合并数组

8，函数
默认参数
function fn(name,age=17){
console.log(name+","+age);
}
fn(“Amy”,18); // Amy,18
扩展参数
function f(…values){
console.log(values.length);
}
f(1,2);
function fun({a,b}){
//可以直接传入对象
}
fun(json)
箭头函数 var f = (a,b) => a+b; //一句话可以省去 return 和 花括号
//如果 返回对象，需要用括号包裹起来

console.log( a in obj)  //in 判断 对象和数组是否为 空 //特殊

9，对象操作
简写
const age = 12;
const name = “Amy”;
const person = {age, name};
person //{age: 12, name: “Amy”}
//方法简写
const person = {
sayHi(){
console.log(“Hi”);
}
}
generator 函数 可以多次返回// 本身拥有.next() 方法，进行操作
function* foo(x) {
yield x + 1;
yield x + 2;
return x + 3;
}
属性名可以用[]表示，可用用于json 数据操作
const obj = {
“he”+“llo”{
return “Hi”;
}
}
obj.hello(); //“Hi”
扩展运算
//基本用法
let person = {name: “Amy”, age: 15};
let someone = { …person };
someone; //{name: “Amy”, age: 15}
//可用于合并两个对象
let age = {age: 15};
let name = {name: “Amy”};
let person = {…age, …name};
person; //{age: 15, name: “Amy”}
对象拷贝
let target = {a: 1};
let object2 = {b: 2};
let object3 = {c: 3};
Object.assign(target,object2,object3);
target; // {a: 1, b: 2, c: 3
10，Symbol操作 是一个新型的数据结构 和 string 平级 （他是表示我是独一无二的）
let sy = Symbol(“KK”); //不需要new 关键字
//注意，定义的对象，是不可以被遍历到的
let sy = Symbol(“key1”); //最重要的用法就是，用于定义对象的属性名，用于不会重复
let syObject = {};
syObject[sy] = “kk”;
console.log(syObject); // {Symbol(key1): “kk”}

	//也可以用于 常量定义（不会重复），
	const COLOR_RED = Symbol("red");
	const COLOR_YELLOW = Symbol("yellow");
	const COLOR_BLUE = Symbol("blue");
	function getConstantName(color) {
		switch (color) {
			case COLOR_RED :
				return "COLOR_RED";
			case COLOR_YELLOW :
				return "COLOR_YELLOW ";
			case COLOR_BLUE:
				return "COLOR_BLUE";
			default:
				throw new Exception('Can't find this color');
		}
	}
	//其他操作
	Symbol.for() //单例操作，保证唯一性
	Symbol.keyFor() //查询key操作

11，set和weakset （数据唯一的，数组）（一种数据类型和json 平级） weakset 不常用（操作对象，弱引用）
let mySet = new Set();

mySet.add(1); // 增加数据，相同数据会覆盖
var o = {a: 1, b: 2}; 
mySet.add(o);
mySet.add({a: 1, b: 2}); //对象会把元素分别加上去
// Set(5) {1, 5, "some text", {…}, {…}} 
mySet.has()  
mySet.size
mySet.delete(keyString);
mySet.clear();


//主要用处，用于处理数组的 去重，交集，并集，差集等

12，map（类似数组和对象的集合，和php 数组类似）（一种数据类型和json 平级）weakmap 不常用（只能是非空对象，弱引用）
var myMap = new Map(); //下面是增删改查 //key可以是任意数据类型，包括函数和对象
myMap.set(keyString, “和键’a string’关联的值”);
myMap.get(keyString);
myMap.delete(keyString);
myMap.clear();
myMap.has()
myMap.size

//遍历用 for of 或 forEach()
//和数组之间的转换
var kvArray = [["key1", "value1"], ["key2", "value2"]];
// Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象
var myMap = new Map(kvArray);
// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
var outArray = Array.from(myMap);

//Map 的克隆
var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]);
var myMap2 = new Map(myMap1);

//Map 的合并
var first = new Map([[1, 'one'], [2, 'two'], [3, 'three'],]);
var second = new Map([[1, 'uno'], [2, 'dos']]);
 
// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的，对应值即 uno，dos， three
var merged = new Map([...first, ...second]);

13，Proxy 代理，预处理，钩子函数，生命周期，他就是设置先调用他在，运行对象的，属性和方法
//下面是获取值
let exam ={ //先定义对象
name: “Tom”,
age: 24
}
//定义代理，有两个参数，一个是，对象，第二个是，预处理
let proxy = new Proxy(exam, {
get(target, propKey, receiver) { //如果是获取他，进行这个操作，参数是，target（对象本身）, propKey（key）, receiver（这个应该是 对象的原型）
console.log('Getting ’ + propKey);
return target[propKey];
}
})
proxy.name
// Getting name
// “Tom”

//下面是设置值
let validator = { //设置预处理
	set: function(obj, prop, value,receiver) {//设置时候触发，obj:对象本身。prop：Key值。value：要改变的值。receiver： 原始对象
		if (prop === 'age') {
			if (!Number.isInteger(value)) {
				throw new TypeError('The age is not an integer');
			}
			if (value > 200) {
				throw new RangeError('The age seems invalid');
			}
		}
		// 对于满足条件的 age 属性以及其他属性，直接保存
		obj[prop] = value;
	}
};
let proxy= new Proxy({}, validator)
proxy.age = 100;
proxy.age           // 100
proxy.age = 'oppps' // 报错
proxy.age = 300     // 报错

//下面是拦截call 和 reply 操作（这个是太简单了，有很多方法，具体在学习）
function sub(a, b){
	return a - b;
}
let handler = {
	apply: function(target, ctx, args){  //target 表示目标对象，ctx 表示目标对象上下文，args 表示目标对象的参数数组。
		console.log('handle apply');
		return Reflect.apply(...arguments);
	}
}
let proxy = new Proxy(sub, handler)
proxy(2, 1) 
// handle apply
// 1

14，promise对象的使用 解决异步调用方法
const p = new Promise(function(resolve,reject){ //定义一个promise ， resolve 成功返回值，reject 失败返回值
resolve(1);
}).then(function(value){ // 第一个then // 1 如果成功，获取上一个放回值
console.log(value);
return value * 2;
}).then(function(value){ // 第二个then // 2 //这个是用return 返回
console.log(value);
}).then(function(value){ // 第三个then // undefined //这里是没有返回值
console.log(value);
return Promise.resolve(‘resolve’);
}).then(function(value){ // 第四个then // resolve //这个是强制返回
console.log(value);
return Promise.reject(‘reject’);
}).then(function(value){ // 第五个then //reject:reject //强制返回
console.log(‘resolve:’ + value);
}, function(err) { //最后错误怎么办，注意，这里不是then
console.log(‘reject:’ + err);
});
15，类操作
class Example {
constructor(a) { //这个是构造方法
this.a = a;
}
static a = 2; //静态方法，还没有全面应用
}
//还可以使用es5方法
Example.prototype={
//methods
}
//添加方法
Object.assign(Example.prototype,{
//methods
})
//get 和 set 用于 拦截 和php 魔法方法类似，这里可以理解为，代理，预处理，钩子函数，生命周期
class Father1 {
constructor(){}
// 或者都放在子类中
get a() {
return this._a;
}
set a(a) {
this._a = a;
}
}
class Child1 extends Father1 {
constructor(){
super();
}
}
let test1 = new Child1();
test1.a = 2;
console.log(test1.a); // 2

//调用父方法和继承
class Father {
	constructor() {}
}
class Child2 extends Father {
	constructor(){
		super();
		// 调用父类普通方法
		console.log(super.test()); // 0
	}
	static test3(){
		// 调用父类静态方法
		return super.test1+2;
	}
}
Child2.test3(); // 3

16，模块export 和 import
import {x,y,z} from ‘./temp.js’; //使用处调用

var a ='jspang'; //在文件内编写
var b ='技术胖';
var c = 'web';
export {
	x as a,
	y as b,
	z as c
}
//export defalut 只能文件暴露一个函数或者变量，引用处可以重命名，很多浏览器不支持，注意环境
export default var a='jspang';
对应的引入方式
import str from './temp';

17， Generator 函数 特点，多次返回，可以使用next（），操作，函数名字添加*
function* func(){
console.log(“one”);
yield ‘1’;
console.log(“two”);
yield ‘2’;
console.log(“three”);
return ‘3’;
}
18，ES6 迭代器
是通过for of 和 next 遍历
Array
String
Map
Set
Dom元素（正在进行中）
这个是指针的概念，和php 数组操作很像
19，async 函数 异步操作的方法，es7才有，注意环境
function testAwait(){
console.log(“testAwait”);
}
async function helloAsync(){
await testAwait(); //等待上面函数解决结果
console.log(“helloAsync”);
}
helloAsync();
// testAwait
// helloAsync