ES6笔记

1.声明方式

let // 块级作用域 解决for循环变量污染全局的问题
const // 常量 不能改变 
const SERVER = 'baidu.com' // 常量命名规范 大写 _隔开

2.变量的解构与赋值

// 1.字符串的结构与赋值
const [a,b,c,d]="1234";
// 等价于 常用做权限
var a = 1,
      b = 2,
      c = 3,
      d = 4;

// 2.数组的解构与赋值
// (1)
let [a, [b, c], d] = [1, [2, 3], 4];
// 等价于
var a = 1,
      b = 2,
      c = 3,
      d = 4;

let [foo = true] = []; // 默认值  foo = true

// (2)
let arr = ['aa', 'bb', 'cc'];
function fun (a, b, c) {
  console.log(a, b, c);
}
fun(...arr); // aa bb cc

// 3.对象的结构与赋值
let {foo, bar} = {foo: '11', bar: '22'};
// 等价于 优点在于数组解构赋值针对顺序，而对象是无序的key值对应就可以
var foo = 11,
      bar = 22

// 4. 对象的函数解构
let json = {
  a: 'AA',
  b: 'BB'
}
function fun ({a, b = 'web'}) {
  console.log(a, b);
}
fun(json);

3.扩展运算符和rest运算符

// 1.扩展运算符 ... （可以解决，对象数组赋值实际是映射的问题）
let arr1 = [1, 2, 3];
let arr2 = arr1; // 映射 栈内存地址映射 是同一个堆内存的地址
let arr2 = [...arr1];  // 相当于把每一个值添加到数组当中
console.log(arr2);
arr2.push(4);
console.log(arr2);
console.log(arr1);


// 2. rest运算符 也是... 函数不确定参数传参
function foo (first, ...arg) {
  // console.log(arg.length); // 5而不是6 因为0传给了 first
  for (let val of arg) {
    console.log(val); // 1 2 3 4 5
  }
}
foo(0, 1, 2, 3, 4, 5);

4.字符串模板

tab按键上面的符号 `` (可以解析变量、HTML标签和运算符)

let abc = 'ABCDE';
let text = `<b>我是</b>,${abc}你好!`;

document.write(text);

5.数组方法

// 1.Array.form(); 把字符串转换成数组 配合new set轻松实现数组去重
let json = {
  "0": "000",
  "1": "111",
  "2": "222",
  length: 3
}

let arr = Array.from(json);
console.log(arr);  // ["000", "111", "222"]

// 2.Array.of方法 可以把一堆文本或者变量转换成数组
let arr = Array.of(3, 4, 5, 6);
console.log(arr);

// 3.find() 实例方法 查找
/**
 * value 当前查找的值
 * index 下标
 * arr 当前数组
 */
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr.find(function (value, index, arr) {
  return value > 5;
}))

// 4.fill 实例方法 填充
let arr = ["111", "222", "333"];
arr.fill("我要替换后两个", 1, 3);
console.log(arr);

// 5 数组循环遍历 for..of
let arr = ["111", "222", "333"];

for (let item of arr){
  console.log(item);
} // 打印出值

for (let index of arr.keys()){
  console.log(index);
} // 打印出索引

for (let [index, val] of arr.entries()){
  console.log(index + ':' + val);
} // 打印出索引和值

// 6. entries() 实例方法
// 生成的是Iterator形式的数组，需要时用next()手动跳转到下一个值。
let arr = ["111", "222", "333"];
let list=arr.entries();
console.log(list.next().value);

// 遍历数组 不常用
// 1.forEach
let arr = ['aa', 'bb', 'cc'];
arr.forEach((val, key) => {
  console.log(key + ':' + val);
});

// 2.filter 可以过滤 可以遍历
arr.filter(val => console.log(val));

// 3.some
arr.some(val => console.log(val));

6.箭头函数

// 特点： 1.不能当 构造函数  2.this 指向所处的对象
var add = (a, b) => {
  return  a + b;
};
console.log(add(1, 2));

7. in

// in 的用法 判断有没有某个值
// 对象
let obj = {
  a: 'aa',
  b: 'bb'
}
console.log('a' in obj); // true
console.log('c' in obj); // false

// 数组
let arr = [,,,];
console.log(arr.length); // 3
console.log(0 in arr); // false

8.对象

// 1.对象的赋值
let name = 'Tom';
let skill = 'web';
//es5
let obj = {
  name: name,
  skill: skill
}
// es6
let obj = {
  name,
  skill
}

// 2.key 值的构建 在key值不清楚的时候使用
let key = 'skill'; // 假设是后台取得
let obj = {
  [key]: 'web' 
}
console.log(obj);


// 3.is()方法
let obj1 = {name: 'Tom'};
let obj2 = {name: 'Tom'};

// es5 === 值相等
console.log(obj1.name === obj2.name); // true
console.log(+0 === -0); // true
console.log(NaN === NaN); // fasle
// es6 is 严格相等
console.log(Object.is(obj1.name, obj2.name)); // true
console.log(Object.is(+0, -0)); // false
console.log(Object.is(NaN, NaN)); // true

// 4.assign 对象合并
let a = {a: 'aa'};
let b = {b: 'bb'};
let c = {c: 'cc'};

let d = Object.assign(a, b, c);
console.log(d);

9.Symbol在对象中的作用(新增加的数据类型)

let a = Symbol();
let obj = {
  [a]: 'aa'
}
// Symbol 用[]访问
console.log(obj[a]);
// Symbol对象元素的保护作用
let obj = {name: 'Tom', skill: 'web'}
let age = Symbol();
obj[age] = 18;
// age 不会被遍历出来
for (let item in obj) {
  console.log(item);
}

10.Set和WeakSet数据结构

//1
// Set的声明 不允许重复
let setArr = new Set(['aa', 'bb', 'cc']);
// 添加 add
setArr.add('dd');
// 查找 has 返回 true 和 false
console.log(setArr.has('aa'));
// 删除 指定值delete 返回 true 和 false
// 全部删除clear 
console.log(setArr.delete('aa'));
console.log(setArr.clear());

// 2
// weakSet的声明 不能再括号里直接添加，必须用add添加
let weakObj = new WeakSet();
let obj = {a: 'aa', b: 'bb'};
let obj1= {a: 'aa', b: 'bb'};
weakObj.add(obj);
weakObj.add(obj1);
// 可以添加栈内存不同 let obj1 = obj 这样不可以添加
console.log(weakObj);

11.map(数据结构)

// map
// 1.json
let json = {
  name: 'Tom',
  skill: 'web'
};
console.log(json.name);

// 2.map => 非常灵活 key可以是对象字符串对象 value 同样
let map = new Map();

// 3.map 的增删查
// 增加 set();
map.set(json, 'iam');
map.set('tom', json);
console.log(map); // Map(2) {{…} => "iam", "tom" => {…}}
// 取值 get()
console.log(map.get('tom'));
// 查找 has() 返回 true 和 false
console.log(map.has(json));
// 个数 size
console.log(map.size); // 2
// 删除指定的值 delete 返回true 和 false
console.log(map.delete(json));
// 全部删除 clear()
map.clear();

12.用Proxy进行预处理

// proxy 代理 ES6 增强 对象函数（方法） 预处理
/**
 * 第一个{} 放对象体
 * 第二个{} 预处理机制
 */
let pro = new Proxy(
  {
    add: function(val) {
      return (val += 100);
    },
    name: "I am Tom"
  },
  {
    /**
     * get 获取对象值时的预处理
     * set 改变对象值时的预处理
     * apply
     */
    // target 目标 也就是对象体  key 对象的下标
    get: function (target, key, property) {
      console.log("进入了get");
      return target[key];
    },
    // target 目标对象体 key 下标 value 要改变的值 receiver 原始值
    set: function (target, key, value, receiver) {
      console.log(receiver);
      console.log(`setting ${key} = ${value}`);
      // 把结果返回给对应的属性
      return target[key] = value;
    }
  }
);

console.log(pro.name);
pro.name = '汤姆';
console.log(pro.name);


// apply 方法执行时的预处理
let target = function () {
  return 'Tom';
}
let handler = {
  apply(target, ctx, ares) {
    console.log('开始apply');
    return Reflect.apply(...arguments)
  }
}

let pro = new Proxy(target, handler)
console.log(pro());

13.Promise

// promise 解决es5回调地狱的问题
let state = 1;

/**
 * @param {*} resolve 解决  将状态从未完成变为成功
 * @param {*} reject 拒绝   将状态从未成变成失败
 */
function step1(resolve, reject) {
  console.log("1.第一步开始");
  if (state === 1) {
    resolve("第一步完成");
  } else {
    reject("第一步出错");
  }
}

function step2(resolve, reject) {
  console.log("2.第二步开始");
  if (state === 1) {
    resolve("第二步完成");
  } else {
    reject("第二步出错");
  }
}

function step3(resolve, reject) {
  console.log("3.第三步开始");
  if (state === 1) {
    resolve("第三步完成");
  } else {
    reject("第三步出错");
  }
}

new Promise(step1)
  .then(function(val) {
    console.log(val);
    return new Promise(step2);
  })
  .then(function(val) {
    console.log(val);
    return new Promise(step3);
  })
  .then(function(val) {
    console.log(val);
    return val;
  });

17.class类

// class
class Coder {
  // val 类函数的参数
  name(val) {
    console.log(val);
    return val; // 在其他函数使用需要有返回值
  }
  skill(val) {
    console.log(this.name('Tom') + ':' + 'skill' + val);
  }

  // 类的参数
  constructor(a, b) {
    this.a = a;
    this.b = b;
  }

  add() {
    return this.a + this.b;
  }
}

// 传递类的参数
let Tom = new Coder(1, 2);
// Tom.name("我叫Tom");
Tom.skill('web');

console.log(Tom.add());

// 继承
class Htmler extends Coder {
  // 写其他的放法
}

let Jack = new Htmler;

Jack.name('jack');

14.模块化操作