es6 个人笔记

       1.package.json==>npm init

2. node_modules==>npm install webpack -D
3. webpack.config.js==>创建配置文件
4. 新建public
5. 新建src
6. src里新建index.html,index.js
7. src里新建js文件夹，js文件夹下简历01.js

如图：

函数-默认值-箭头函数

 

js  ...test参数

 

{

function fn(...test) {

console.log(test)

}

fn(1, 2, 3, 4, 5, 6, 7)

}

结果： (7) [1, 2, 3, 4, 5, 6, 7]

 

//箭头函数

（参数，参数）=>{

  }

• 不能new
• this指向
• 没有arguments

 

{

// 第一种箭头函数

let fn = v => v;

console.log(fn(10));

 

//等同于第二种声明函数

let fn1 = function(v) {

return v;

}

console.log(fn1(20))

}

 

数组的扩展

• 运算符 （...test）
• 方法

1. Array.from();   把一个看起来类似于数组的对象，转成真正的数组

         例子：

{

let span = document.getElementsByTagName("span");

console.log(typeof(span)); //类似于数组的对象

 

let arr = Array.from(span); //Array.from()把类似于数组的对象转成数组

console.log(arr);

}

     2.Array.of();    把一组值，转换为数组

     3.copyWithin()  ;  把指定位置的成员复制到其他位置 （会覆盖原有成员）

         参数1：target  从该位置开始替换 ，如果为负值，表示倒数

         参数2：start    从该位置开始读取数据，默认为0 。如果为负值，表示从末尾开始计算。

         参数3：end      到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算。

4.find()

用于找出第一个符合条件的数组成员，如果没有符合条件的，返回undefined;

[1, 5, 10, 15].find(function(value, index, arr) {

return value > 9;}) // 10

 

上面代码中，find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。

5.findIndex()

用于找回第一个符合条件的数组成员的索引位置，如果都不符合条件，则返回-1

6.fill()  填充数组

参数1：填充的内容

参数2：起始位置

参数3：结束位置；

{

let arr = ['a', 'b', 'c'];

arr.fill('o', 1, 2);

console.log(arr); //['a','o','c'];

}

 

7.entries(),keys(),values()

• entries()  是对键值对的遍历
• keys()是对键名的遍历
• values()是对键值对的遍历

 

{

let arr = ['a', 'b', 'c'];

 

for (let [k, v] of arr.entries()) {

console.log(k, v);

}

}

 

 

8.includes();  查看数组是否包含某个值，返回的是布尔值

  包含返回true,否则返回false

 

 

对象的扩展

• 1.属性的简介表示法

let a = "简单写法";

{

 

let obj = {

a //属性名和变量名字一样，简单化

}

console.log(obj.a);

}

• 2.属性名表达式
• 3.方法的name属性

let obj = {

run() {

return '我是谁'

}

}

console.log(obj.run.name) //获取函数名称是什么,

也就是run

• 4.Object.is()

ES5 比较两个值是否相等，只有两个运算符：相等运算符（`==`）和严格相等运算符（`===`）。它们都有缺点，前者会自动转换数据类型，后者的`NaN`不等于自身，以及`+0`等于`-0`。JavaScript 缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等。

 

ES6 提出“Same-value equality”（同值相等）算法，用来解决这个问题。`Object.is`就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。

• 5. `Object.assign`方法  特别常用

用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

例子：

const target = { a: 1 };

const source1 = { b: 2 };

const source2 = { c: 3 };

Object.assign(target, source1, source2);

console.log(target);

• 6.属性的可枚举性和遍历

      Object.getOwnPropertyDescriptor  方法可以获取该属性的描述对象。

 

7.Object.entries(),Object.keys(),Object.values()

 

class类

基本语法：

demo:

class aa {

constructor(name, age) {

this.name = name;

this.age = age;

}

run() {

return '你会class类了吗';

}

init() {

return '初始化';

}

}

let bb = new aa(name = '小仙女', age = 15);

console.log(bb);

console.log(bb.run());

console.log(bb.init());

class  继承性

 

// 继承属性extends

class Child extends Parent {

constructor() {

super(); //继承属性必须用super,放置在构造函数的最前面

this.age = 17;

}

}

// let aa = new Parent();

let bb = new Child();

// console.log(aa.name);

console.log(bb.age);

 

 

Symbol

作用：解决命名冲突

概述：

• 新的数据类型，
• 表示独一无二的值

使用：

•   Symbol
•   Symbol.for()  

方法：

      取值

•       Object.getOwnPropertySymbols()  返回的是数组  
• Reflect  可以拿到Symbol,也可以拿到其他值

            Reflect.ownKeys(obj)  返回的是个数组

Set,WeakSet

  Set 

     是什么？

• 新的数据结构，类似于数组
• 值都是唯一

     使用方法：

• new Set();
• add:增
• size:lengtg
• clear:全删
• delete :删除某一个
• has:查  

       例子：

 var set2 = new Set(); //先new一个Set

 set2.add('1'); //Set(1) {"1"}

 set2.add(10);

//set2.size 1

//set2.clear(); //删除所有内容

//set2.delete(10) //删除10

console.log(set2.has(10)); //包含10，返回true

 

     功能：

      强大的去重功能，要看数据类型的

     

let arr = [1, 2, 3, 12, 2, 3, 4];

let set1 = new Set(arr);

console.log(set1);

 

 

 

3.遍历

4.WeakSet

     与Set区别 

•        new Set()
•        new WeakSet({})

1.                值必须是对象
2.                方法：只有add,delete,has 
3.                不可遍历 

    

Map

•     数据结构
•     map的作用

1.        key可是是数组，字符串

•     方法：

1. size:长度
2. delete 删除   clear 全部清除
3. set  增加
4. get  查询
5. has  表示某个键是否在当前Map对象之中

•  遍历      

1. Map.prototype.keys()：返回键名的遍历器。
2. Map.prototype.values()：返回键值的遍历器。
3. Map.prototype.entries()：返回所有成员的遍历器。
4. Map.prototype.forEach()：遍历 Map 的所有成员。

WeakMap()

      Map和WeakMap区别

1. 没有遍历操作
2. 无法清空，不支持clear,因此只有四个方法可用：get(),set(),has(),delete()
3. 垃圾回收机制

 

proxy (代理)

      理解：

1. 源对象  类似于供应商
2. 代理      类似于代理商
3. 操作     类似于用户

      使用（拦截）：

1. get():拦截对象属性的读取
2. set():拦截对象属性的设置
3. deleteProperty()：拦截删除对象key操作的操作

 

Reflect(反射)：

对象的设计目的：

1. 以后方法都只会在Reflect对象上
2. 修改某些object方法的返回结果
3. 让object 操作都变成函数行为
4. Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。

方法（使用）：

1. Reflect.apply(target, thisArg, args)
2. Reflect.construct(target, args)
3. Reflect.get(target, name, receiver)
4. Reflect.set(target, name, value, receiver)
5. Reflect.defineProperty(target, name, desc)
6. Reflect.deleteProperty(target, name)
7. Reflect.has(target, name)
8. Reflect.ownKeys(target)
9. Reflect.isExtensible(target)
10. Reflect.preventExtensions(target)
11. Reflect.getOwnPropertyDescriptor(target, name)
12. Reflect.getPrototypeOf(target)
13. Reflect.setPrototypeOf(target, prototype)

 

Promise

理解：解决异步编程的一种方案，让异步编程写法感觉像是同步感觉