es6 学习笔记

#解构：从数组和对象中提取值，对变量进行赋值，这被称为解构
    1 数组解构  let [a,[b,c],d]=[1,[2,3],4];    形式要统一按次序排列的
        let [a,b="JSPang"]=['技术胖']
        console.log(a+b); //控制台显示“技术胖JSPang”
    2 对象的解构赋值  let {foo,bar} = {foo:'JSPang',bar:'技术胖'}; 对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
    3 字符串解构    
        const [a,b,c,d,e,f]="JSPang";
        console.log(a);
        console.log(b);
        console.log(c);
        console.log(d);
        console.log(e);
        console.log(f);
#function jspang(first,...arg){}    ...表示传入的参数不确定  第一个参数我知道，后面的不清楚。arg.length 返回的是你不知道的长度。
```
    function jspang(first,...ss){
        // for(let i=0 ,i<ss.length,i++){ console.log(ss[i]);}
        for(let val of ss){
            console.log(val);
        }
    }
    jspang(0,1,2,3,4,5,6,7);  // 1 2 3 4 5 6 7

```
#扩展运算符的用处：这样改变arr2的值，arr1的值不会改变了
```
    let arr1=['www','jspang','com'];
    //let arr2=arr1;
    let arr2=[...arr1];
    console.log(arr2);
    arr2.push('shengHongYu');
    console.log(arr2);
    console.log(arr1);

```
#字符串模版  以前 '+jspang+' 现在 ${jspang}
    let jspang='技术胖';
    //let blog = '非常高兴你能看到这篇文章，我是你的老朋友'+jspang+'。这节课我们学习字符串模版。';
    let blog = `<b>非常高兴你能看到这篇文章</b>，我是你的老朋友${jspang}。<br/>这节课我们学习字符串模版。`;                       //这里要注意用的符号  `   `  不是单引号   里面支持标签

#字符串查找
let jspang='技术胖';
let blog = '非常高兴你能看到这篇文章，我是你的老朋友技术胖。这节课我们学习字符串模版。';
document.write(blog.indexOf(jspang));            // 返回的是索引位置
document.write(blog.includes(jspang));           // 返回的是true
 + 判断开头是否存在：blog.startsWith(jspang);    // 返回的是true false
 + 判断结尾是否存在：blog.endsWith(jspang);

# 复制字符串
document.write('jspang|'.repeat(3));  //打印3遍 jspang|jspang|jspang|

#判断是否为数字Number.isFinite(a)   判断是否为整数Number.isInteger(a) 取整Number.parseInt(xxx)和浮点型转换Number.parseFloat(xxx)
let a= 11/4;
console.log(Number.isFinite(a));//true

# Array.from(xxx)方法：                   JSON数组格式转换——JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式
let  json = {
    '0': 'jspang',
    '1': '技术胖',
    '2': '大胖逼逼叨',
    length:3
}
let arr=Array.from(json);
console.log(arr)                 //   [ 'jspang', '技术胖', '大胖逼逼叨' ]

# Array.of(xxx)方法：                      它负责把一堆文本或者变量转换成数组
let arr =Array.of(3,4,5,6);
console.log(arr);              //    [3,4,5,6]
let arr =Array.of('技术胖','jspang','大胖逼逼叨');
console.log(arr);             //   [ '技术胖', 'jspang', '大胖逼逼叨' ]

#数组转换字符串     join()方法就是在数组元素中间，加了一些间隔，开发中很有用处。toString()方法，转换时只是是用逗号隔开了。
let arr=['jspang','技术胖','前端教程'];
console.log(arr.join('|'));   //  jspang|技术胖|前端教程

let arr=['jspang','技术胖','前端教程'];
console.log(arr.toString());  //   jspang,技术胖,前端教程




# find( )实例方法:                             如果找到符合条件的数组元素就回该元素，找不到返回undefined。
# findIndex()                                    函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。
+ 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;
}))
//  6
console.log(arr.findIndex(function(value,index,arr){
    return value > 5;
}))
//  5
# fill( )实例方法：                            把数组进行填充,第二个是开始填充的位置，第三个是填充到的位置。
let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('jspang',2,5);                          //第二位到第五位
console.log(arr);
// [ 0, 1, 'jspang', 'jspang', 'jspang', 5, 6, 7, 8, 9 ]

# for…of 循环：
let arr=['jspang','技术胖','大胖逼逼叨']
for (let item of arr){
    console.log(item);
}
 # for…of 数组索引:                       有时候开发中是需要数组的索引的，那我们可以使用下面的代码输出数组索引。
    let arr=['jspang','技术胖','大胖逼逼叨']
    for (let index of arr.keys()){
        console.log(index);
    }

# 对象的函数解构                           直接把这个JSON格式数据当作参数，传递到函数内部进行处理
let json = {
    a:'jspang',
    b:'技术胖'
}
function fun({a,b='jspang'}){
    console.log(a,b);
}
fun(json);        //     jspang 技术胖


# 数组的遍历方法

# 1.forEach                               forEach循环的特点是会自动省略为空的数组元素，相当于直接给我们筛空了。当是有时候也会给我们帮倒忙。
let arr=['jspang','技术胖','前端教程'];
arr.forEach((item,i)=>console.log(i,item));
//0 'jspang'
//1 '技术胖'
//2 '前端教程'
# 2.filter                                   他其实也有循环的功能          过滤、遍历
var arr = [1, 2, 3];
arr.filter(item => { // item为数组当前的元素
    return item > 1; // [2, 3]
})
# 3.some                                  some() 方法会依次执行数组的每个元素：如果有一个元素满足条件，则返回true , 剩余的元素不会再执行检测。
var arr = [1, 2, 3];
arr.some(item => { 
    return item ==2;    // true
})
var arr = [1, 2, 3];
arr.some((item, index, arr) => { // item为数组中的元素，index为下标，arr为目标数组
    console.log(item); // 1, 2, 3
    console.log(index); // 0, 1, 2
    console.log(arr); // [1, 2, 3]  
})
# 4.map                                 map在这里起到一个替换的作用
let arr=['jspang','技术胖','前端教程'];
console.log(arr.map(x=>'web')); //  [ 'web', 'web', 'web' ]
# 5. every()                           every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
var arr = [1, 2, 3];
arr.every((item, index, arr) => { // item为数组中的元素，index为下标，arr为目标数组
    return item > 0; // true
    return index == 0; // false
})


# ES6中对象                          声明了一个obj对象，增加了一个对象方法add和一个对象属性name，然后在控制台进行了打印。
var obj={
    add:function(val){
        return val+10;
    },
    name:'I am Jspang'
    
};
console.log(obj.add(100));
console.log(obj.name);

# 对象赋值
var obj = {}; //或者 var obj=new Object();
var key = "name";
var value = "张三丰"
obj[key] = value;
console.info(obj);  // { name: '张三丰' }
# 对象Key值构建 
//有时候我们会在后台取出key值，而不是我们前台定义好的，这时候我们如何构建我们的key值那。比如我们在后台取了一个key值，然后可以用[ ] 的形式，进行对象的构建。
let key='skill';
var obj={
    [key]:'web'
}
console.log(obj.skill);
# 自定义对象方法
let key='skill';
var obj={
    [key]:'web'
}
console.log(obj.skill);

# Object.assign(  )合并对象
var a={a:'jspang'};
var b={b:'技术胖'};
var c={c:'web'};

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


# Set的声明  只能放数组                         Set和Array 的区别是Set不允许内部有重复的值，如果有只显示一个，相当于去重。
let setArr = new Set(['jspang','技术胖','web','jspang']);
console.log(setArr);  //Set {"jspang", "技术胖", "web"}
# Set值的     增    删    查
+ setArr.add('前端职场');
+ setArr.delete('前端职场');
+ console.log(setArr.has('jspang'));//true
+ setArr.clear();//清空

# size属性可以获得Set值的数量。
+ console.log(setArr.size);

# set的循环
let setArr = new Set(['jspang','技术胖','web','jspang']);
for (let item of setArr){
    console.log(item);
}

let setArr = new Set(['jspang','技术胖','web','jspang']);
setArr.forEach((value)=>console.log(value));


# WeakSet的声明   放对象                 这里需要注意的是，如果你直接在new 的时候就放入值，将报错。里边的值也是不允许重复的

let weakObj=new WeakSet();
let obj={a:'jspang',b:'技术胖'}
weakObj.add(obj);                              // 必须用add方法
console.log(weakObj);

# 总结：在实际开发中Set用的比较多，WeakSet用的并不多，但是他对传入值必须是对象作了很好的判断，我们灵活应用还是有一定的用处的。

# map数据结构                                   取值get   删除delete   size属性   查找是否存在has   清楚所有元素clear
let json = {
    name:'jspang',
    skill:'web'
}
var map=new Map();
map.set(json,'iam');                          // set    赋值
console.log(map);                            // Map { { name: 'jspang', skill: 'web' } => 'iam' }               key => value
console.log(map.get(json));             // iam    ( get  取值 )
map.delete(json);                            // 删
console.log(map)                            // Map {}
console.log(map.has('jspang'))       // 查

#总结：map在现在开发中已经经常使用，它的灵活性和高效性是我们喜欢的。开发中试着去使用map吧，你一定会喜欢上它的。


# 用Proxy进行预处理                          newn  Proxy（{},{}）;

var pro = new Proxy({
    add: function (val) {
        return val + 10;
    },
    name: 'I am Jspang'
}, {
        get:function(target,key){           //get是在你得到某对象属性值时预处理的方法，三个参数 target：得到的目标值,key：目标的key值，相当于                                                      对象的属性
            console.log('come in Get');
            return target[key];
        },
        set:function(target,key,value,receiver){   //set属性是值你要改变Proxy属性值时，进行的预先处理 target:目标值。key：目标的Key值。                                                                       value：要改变的值。
            console.log(`    setting ${key} = ${value}`);
            return target[key] = value;
        }

    });

console.log(pro.name);
pro.name='技术胖';
console.log(pro.name);
  
输出：
            come in Get                                         // 先输出了come in Get。相当于在方法调用前的钩子函数。
            I am Jspang
                setting name = 技术胖                   // set属性是值你要改变Proxy属性值时，进行的预先处理。
            come in Get
            技术胖


let target = function () {
    return 'I am JSPang';
};
var handler = {
    apply(target, ctx, args) {
        console.log('do apply');
        return Reflect.apply(...arguments);
    }
}

var pro = new Proxy(target, handler);             //apply的作用是调用内部的方法，它使用在方法体是一个匿名函数时。

console.log(pro());                                          // do apply  // I am JSPang


# class类的使用
class Coder{
    name(val){                                                 // 类的里面都是函数
        console.log(val);
        return val;                                             // 要注意return 的用法
    }                                                                // 注意f这里没有逗号 ，
    skill(val){
        console.log(this.name('jspang')+':'+'Skill:'+val);        // 这里的 this 指类本身
    }

    constructor(a,b){                                      // constructor( )进行传参
        this.a=a;
        this.b=b;
    }

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

let jspang=new Coder(1,2);                      // 实例化一个类
console.log(jspang.add());
# class的继承
class htmler extends Coder{
}
let pang=new htmler;
pang.name('技术胖');


# 模块化操作
+ 1.export
export var a ='jspang';
export function add(a,b){
    return a+b;
}
对应的导入方式
import {a,add} form './temp';//也可以分开写

+ 2.export defalut
export default var a='jspang';
对应的引入方式
import str from './temp';     // 导入的时候没有花括号，然后系统允许你为它取任意名字