ES6 JS 随手记

let  // 1不能重复定义， 2函数 全局 现在有了块级 作用域
if(true){
 var aaa = 'bb';  
 var aaa = 'ccc'  //可以重复定义
 let bbb = 'aa';  //块级作用域
 let bbb = 'cc';  //在作用域内不能重复定义
}

定义一个块用括号就是作用域{ }  （）

console.log(aaa );  //能访问var aaa 变量穿透, 不能访问let bbb ，作用域锁死

//衡量 常量 指向内存地址
const aa = 'bb'; 
aa = 'cc';  //错误  不能改变常量
const bb[]; 
bb.push('1'); //可以操作

--解构数组

function temp(){

 return ['1','2','3']

}

let [temp1,temp2,temp3] = temp();
 console.log(temp1,temp2,temp3)

-----数组的MAP方法

  /**
   * map()：创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
   * 例子，当前新的是accessCount 返回的是accessCount.action赋予新的
   */
  const allowedActions = allowAccessCounts
    .map(accessCount => accessCount.action)
    .map(action => `'${action}'`)
    .join(',');

稍微复杂

const results = [一个数组]

  return allowAccessCounts.map(accessCount => {
    const result = results.find(result => result.action === accessCount.action);
    accessCount.value = result && result.value ? result.value : 0;
    return accessCount;
  });
---------------------

.filter() 去筛选符合条件的数据,和 map的区别就是MAP是形成的新数组是原数组结构的映射，不改变原数组结构，而filter形成的新数组会改变原来的结构

-------reduce 方法，制造新的数组，accumulator为初始值，

  const dataset = results.reduce(
    (accumulator, result) => {
      const [datetimeArray, valueArray] = accumulator;
      datetimeArray.push(result.datetime);
      valueArray.push(result.value);
      return accumulator;
    },
    [[], []],
  );

--------------------

--解构对象

  function temp(){

      return {temp1: 'aa',temp2:'bb',temp3:'cc'}

 }

let { temp1: aa, temp2:bb, temp3:cc } = temp();  // 注意变量的前后顺序  毛猴后的aa为自定义的（口诀：解构，构同音‘后’）
console.log(aa,bb,cc)

----删除对象里的一个属性----

aa是一个对象，

delete aa.name;
delete aa.color;

-----字符串 模板  ---

let my = 'sunyi',you = 'jiajia';

let home = `home is ${my} and ${you}`;  //反引号，波浪下的符号
console.log(home );

-----带标签的模板  ---

let my = 'sunyi',you = 'jiajia';

let home = sky`home is ${my} and ${you}`;  //反引号，波浪下的符号
function sky(strings,...values){

console.log(strings );  //字符串的值
console.log(values );   //变量的值  sunyi jiajia

//输出方法
let result = '';
for(let i = 0; i < values.length; i++){
    result +=strings[i];
    result +=values[i];
}
result +=strings[strings.length-1];
 console.log(result);

}

----判断字符串内是否包含其他字符串   ---

home.startsWith('home');  //是否开始true false
home.endsWith('home');  //true false
home.includes('home'); 是否包含

------默认参数-----

funtion home( boy = 'sunyi',girl = 'jiajia') {
    
return `${boy} ${girl}`;

}

console.log(home());  //会调用默认的值

------展开操作符...----

let aa = ['sunyi','jiajia'];
let bb = ['jack',...aa];

aa 会包含BB

--- 剩余操作符 rest 传参数

function food( rice , drink ,...fruits){  //前两个单独赋值，剩余的全部进第三个数组
    console.log(rice,drink,fruits);
}

food('aa','bb','cc','dd','ee');

----解构对象参数
function food(aa,bb,{cc,dd} = {}){

 console.log(aa,bb,cc,dd);
}

food('11','22',{ cc:'33',dd:'44'});

--- name 属性 函数的名字  三种方式

function aa (){
    console.log(aa.name);    //aa
}

let temp = function(){}

console.log(temp.name);  // temp

let temp = function sky(){}  

console.log(temp.name);  // sky  优先级更高

---箭头函数 --- 函数的简写

let temp = () =>  //没有参数使用空白括号
let temp = home => home;  //前的home为参数  后的home返回的值
相当于

left temp = function temp(home){
    return home;
}

或

let temp = （home,man) => {
return home+man ;
         
}

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 报错
let getTempItem = id => {id: id, name: "Temp"}
// 不报错
let getTempItem = id => ({id: id, name: "Temp"})

---筛选器 -----

数组用
.filter() 去筛选符合条件的数据

const data = [

 { title: 'aa', rating: 9.7 },
 { title: 'bb', rating: 9.9 },
{ title: 'cc', rating: 8.8 }

]

const res = data.filter( item => item.rating > 9 );
//定义一个筛选器 item可以随便取名

-----对象表达式 同名的情况下---

let boy = 'sunyi',girl = 'jiajia';
let home = {
    
    boy:boy,    //以前
    boy,    //现在 直接简写，
    girl

    eat:function(){}  //以前
    eat(){}  //现在
    
};

------对象属性名 直接添加---
let food = {};
let tempname = 'sunyi'

food.aa = '11';
food.bb tea = '2'   //报错
food['bb tea'] = '2'  //正确
food[tempname ] = '2'  //用变量做名字

----对比2个值是否相等---

除了==，和=== 还有
Object.is(NaN,NaN);   //特殊情况
 Object.is(+0,-0);   //特殊情况

-------直接一个对象的值复制到另一个对象

let temp = {};
Object.assign(     //assign方法
temp,  //复制到目标    
{food: 'apple'}  //来源
);

------设置对象的prototype  
Object.setPrototypeOf()
Object.creat();

let car = {    //1
    
getBody(){
    return 'car body';
}

}

let fly = {   //2
    
getBody(){
    return 'fly body';
}

}

let temp = Object.create(car);  //创建temp基于car
console.log(temp.getBody());
console.log(Object.getPrototypeOf(temp) === car);  //true

//再次设置
Object.setPrototypeOf(temp ,fly  //目标 );
console.log(Object.getPrototypeOf(temp) === fly);  //true

----直接修改 proto-----

let temp = {
    __proto__: car   //基于car
}

console.log(Object.getPrototypeOf(temp) === car);  //true
temp.__proto__= fly;  //再次设置
console.log(Object.getPrototypeOf(temp) === fly);  //true

-----super 集成父类的----

let temp = {
    __proto__: car,   //temp的__proto__ 基于car    
    getBody(){
        return super.getBody() + 'my home';  //得到父类的方法再改造一下
    }
    
}

--------for-of是最简单，最直接的遍历数组元素的语法
成功的避开了for-in循环的所有缺陷
与forEach不同的是，它可以正确的相应break，continue和return语句
for (var value of array) {
console.log(value);
}

for-of可以用来干什么呢？
首先，他可以用来遍历对象属性，也可以用来遍历数据（数组中的值），不仅如此！for-of循环还可以遍历其他的集合 for-of不仅支持数组遍历，还支持大多数类数组对象，例如DOM NodeList for-of循环也支持字符串遍历， 同样，也支持Map和Set对象遍历
    

---------迭代器  交换轮流交换  Iterators
{ value: xx, done: ture/false }  //value返回来的值，done 还有没有可以迭代的东西，如没有为true 完成了

next方法，返回对象，如没有，value为undefined ，done为true;

----Generators 生成器

function* abc(){

    yield 'aa';
    yield 'bb';   //一个简单的生成器

}
let temp = abc();   //创建一个迭代器
console.log(temp.next());  //  value: 'aa', done: false
console.log(temp.next());  //  value: 'bb', done: false
console.log(temp.next());  //  value: 'undefined', done: true

------- 类 class --- 
 class Temp {

    food;  //可以这样直接定义一个属性。

    constructor(food){   //自己的构造方法，一些属性，可以接受参数

        this.food = food;
        this.name = [];
    }
      
      get myname(){   //get 方法

        return this.name;
       }

       set myname(name){   //set 方法
          this.name.push(name);
       }

      cook(){   //自己的方法
          console.log(this.food);
      }

     static cut(food){   //静态的方法  不需要实例化类就直接用
          console.log(food);
      }
}

let abc = new temp('aaa');

abc.cook();    //aaa

abc.myname = 'sunyi';   //set 方法
console.log(abc.myname);  //get 方法

Temp.cut('banana'); //静态方法直接用

----类的继承 exdents ----

class Person {

    constructor( name , birthday )    {
              
        this.name = name;
                this.birthday = birthday;

         }

        info() {
                 retrun `${this.name},${this.birthday}`;

       }
}

class Chef exdents Person {  //厨师继承人类

    constructor( name , birthday )    {
               
                super( name ,birthday );   //调用父类里的属性
        

         }
   

 }

left sunyi = new Chef('sunyi','1983');
sunyi.info();   //sunyi 1983

----  Set --不能有重复的内容的数组

let temp = new Set('abc');
temp.add('d');
temp.add('d');   //不会新增一个D，依然还是1个D， 重复的不会有效

temp.size //长度
temp.has('d');   //是否包含 ，  TRUE 
temp.delete('d')  //删除一个

temp.forEach(   //循环遍历

aaa => {

console.log(temp);

} );

temp.clear();   //  清空

------键值对应的Map ----
let aa = new Map();

left bb = {}, cc = function(){} , dd = 'hello';

aa.set(bb,'red');   // Object{} => 'red'
aa.set(cc,'blue');  //function function =>'blue'
aa.set(dd,'yellow'); //  'dd'=>'hello'

aa.size  //长度
aa.get(bb);  //获得其中的值   //  red
aa.delete(cc);  //删除
aa.has(cc);   //是否包含
//循环输出
aa.forEach( (value,key) => { console.log( `${key} = ${value} ` ) }  );
aa.clear(dd); //清空

----定义模块  Module ----
 let aa = 'aa';
let bb='bb';
export{aa,bb };   //导出变量，函数，啥的

//导入
import { aa,bb} from './modules/aa';   //地址
console.log(aa,bb);  //输出
import * as sunyi from './modules/aa';   //sunyi是个对象
sunyi.aa,  sunyi.bb  //可以这样输出

---重命名导出与导入的东西  --
let aa = '11';
let bb = '22';

function temp(aa,bb){
    
    console.log(`today dinner is ${aa} and ${bb}`);

}

export { aa , bb ,temp as home };  //重命名

===导入其他文件的 方法和参数

import{ aa, bb, home as name  // 再次重命名 } from './modules/aa';

name(aa,bb);  //执行

----模块默认导出和导入的东西  ---

let aa = '11';
let bb = '22';

export default function temp(aa,bb){   //默认导出 default
    
    console.log(`today dinner is ${aa} and ${bb}`);

} 

或者

function temp(aa,bb){   //默认导出 default
    
    console.log(`today dinner is ${aa} and ${bb}`);

} 

export{ temp as default };  //作为默认导出的写法

----

import my //导默认的，随便取，不需要大括号   from './modules/aa';

my('aa','bb');  //使用

---throw --抛出异常，预判可能发生的异常

const drive = () =>{

    throw new Error('没油了');   //发生异常，应用停止运行
}

---try catch ---

例子
const getTemp = () =>{

    return false;
}

const drive = () =>{

    const temp = getTemp();
        
        if(!temp ){

          throw new Error('没油了');  //程序终止
        }

      console.log('正常行驶');

};

try {
     drive();
} catch(error) {
    console.log(error.message);    //error对象的message属性
}

----------

数组超实用的常见方法：find、findIndex、some、every

1、find：给定条件，返回数组中第一个满足该条件的值，之后的值不再进行检测，当没有找到满足该条件的值时，返回undefined

let arr = [
    {
      name: '小明',
      sex: '男',
      age: 23
    },
    {
      name: '小红',
      sex: '女',
      age: 18
    },
    {
      name: '小兰',
      sex: '女',
      age: 21
    },
    {
      name: '小黑',
      sex: '男',
      age: 23
    }
  ];
 

const findResult = arr.find((value, index, arr) => {
    console.log(value);
    
return (value.age === 23);

});
 

console.log(findResult); 

例子2
const result = results.find(result => result.action === bb.action);

// {name: "小明", sex: "男", age: 23}

以上代码给定条件，当数组当前的值的age属性等于23时，返回该值。从数据中我们可以看到，有2项值符合该条件，但是find会找到第一个符合该条件的值，最终返回了第一个符合该条件的所对应的数据 小明，且后面的值不再进行检测

=======findIndex：给定条件，返回数组中第一个满足该条件的值的下标，之后的值不再进行检测，当没有找到满足该条件的值时，返回 -1

--------some：给定条件，只要数组中有一个值满足该条件，就返回true，之后的值不再进行检测，如果没有满足条件的值，返回false

----------every：给定条件，只有当数组中所有值都满足该条件，才返回true，当有值不符合该条件时，返回false，之后的值不再进行检测

================

-----call()、 apply()、 bind() 都是用来重新定义this对象的指向---
难点，以后学