ES6-初学

var 声明变量

 * let  声明的变量是在当前的作用于内有效    const  声明的是只读变量  （常量）
 *	let  const  声明的变量不存在变量的声明提前
 * 声明变量不能重复声明
 * 代码块   按块区分代码   就是一个一组大括号  {}

{
     var a = 10;
     let b = 20;

     let b=30;  error
     const c = 9.8;
     c=100;   error   c变量是常量     只读
     console.log(c);
     }
	    console.log(a);
	    console.log(b);
	    console.log(c);

    举例
    for (var i = 0; i < 10; i++) {
     (function (a) {
     setTimeout(function () {
     console.log(a);
     }, 1);
     })(i);
     }
    for (let i = 0; i < 10; i++) {
     setTimeout(function () {
     console.log(i);
     }, 1);
     }

变量的解构赋值 ----按照对应的结构进行赋值

{
      es6  声明多个变量
         let [a,b,c,d]=[1, 2, 3, ["a", "b"]];
         console.log(a, b, c, d);
      下面这种情况也是对应取值
        let [a,b]=[1, 2, 3, 4, 5];
         console.log(a, b);

       结构统一   按照位置取值
        let [a,[b],[[c]]]=[1, [2], [[3]]];
         console.log(a, b, c);

       解构赋值 也可以设置默认值
         let [a=10,b]=[,2];
         console.log(a,b);

       对象解构赋值
        let {name,sex}={name: "张三", sex: "男"};
         console.log(name, sex);

       举例对象的解构赋值  Math
        let {abs,floor,random}=Math;
         console.log(random());
         console.log(abs(-1));

         let {log}=console;
         log("abc");


       字符串的解构赋值
        let [a,b,c,d]="save";
         console.log(a,b,c,d);
       字符串    String  对象
        let {length : len}="save";
         console.log(len);

       **扩展符   es6  ...**
        扩展符 在解构赋值里面 放在最后一位
         let [a,b,...c]=[1, 2, 3, 4, 5];
         let {log}=console;
         log(a, b, c);


        
       es6  里面的字符串遍历器
        for  of   类似es5 里面的for  for in
        {
            let [a,...b] =["hello",1,2,3,4,5] ;
             for (let char of a) {
             console.log(char);
             }
             for(let str of b)
             {
             console.log(str);
             }

        模板字符串  ${}  字符串拼接的
        将字符串 修改为  反引号（`）里面写模板字符串
        
             let [a,b,obj]=["abcd", "efgh", {name: "毛豆"}];
             let c = `我是第一个字符串：${a}，我是第二个字符串：${b}，我的名字叫：${obj.name}。`;
             let { log }=console;

             log(c);

        模板字符串里面放置  javascript表达式   <%.....%>
            let obj = [
             {"name": "张三"},
             {"name": "李四"},
             {"name": "王伟"},
             {"name": "马六"}
             ];
            下面的这种格式在ejs 模板语法中在  node 中编译
             let complete = `
             <ul class="namelist">
             <% for(let i=0;i<${obj.length};i++){%>
             <li><%= ${obj[i].name}%></li>
             <%}%>
             </ul>
             `;
             console.log(complete);
        }


        
      函数的扩展
        
        {
            1.函数默认值的问题
            function method(a, b) {
             console.log(a, b);
             }

             method(1, 2);
        es6  给函数的形参带入了默认值的问题
            function method(a="a", b=2) {
             console.log(a, b);
             }

             method();

            函数传参合解构赋值连用
            function method({a,b=2}) {
                console.log(a, b);
            }

            method({});
            method({a: 1, b: 3});

         扩展符合函数的使用
            function method([a,...b]){
                console.log(a,b);
            }
            method([1,2,3,4,5,6]);

           /es6  里面的箭头函数 =>

            es5 的函数
            var method=function (val){
                return val;
            }
         es6  箭头函数
            let method=(val)=>val;
            console.log(method(1));*/

            如果箭头函数返回对象 返回值上添加（）
            let fun=()=>({name:1,age:20});
            console.log(fun());

            let fun1=()=>[1,2,3];
            console.log(fun1());

            let a=["a","b","c","d"];
            
         map 映射
         
            let b=a.map((val,index)=>{
                return val+index
            });
            let b=a.map((val,index)=>val+index);
            console.log(b);

         在实用性箭头函数的时候一定要注意内部的this 指针问题
         因为箭头函数  保持上下文this一致  内部this  和  外部this一致

            console.log(this);

            let a=["a","b","c","d"];
            
            map 映射
            
            let b=a.map((val,index)=>{
                console.log(this);
                if(index%2==0)
                {
                    return val+index;
                }
                else {
                        return val;
                }
            });
            console.log(b);
            let fun=function (){
            }
            let fun=()=>{
            }
        }
    }

数组的扩展

**扩展运算符   ...**
    扩展运算符  拆开数组
    console.log(...[1,2,3,4,5]);

扩展运算符和函数的使用

function fun(array,...item){
         array.push(...item);
         }
         let array=[];

         fun(array,...[1,2,3,4,5]);
         console.log(array)

扩展运算符

	替换apply   args  数组型

 function f1(a,b,c){
         console.log(a,b,c);
         }
         let m=[1,2,3];
         //f1.apply(null,m);
         f1(...m);

扩展运算符 复制数组

let a=[1,2,3];
         let b=a;
         b[0]="a";
         console.log(b,a);
         //修改其中一个数组  另一个数组也会发生变化
         //扩展运算符  复制数组  修改其中一个  另一个不会发生变化
let a=[1,2,3];
         let b= [...a];
         b[0]="a";
         console.log(a, b);

扩展运算符合并数组

let a=[1,2];
         let b=[3,4];
         let c= [...a,...b];
         console.log(c)

数组的扩展方法 Array.from(); 将类数组对象 转化为正真的数组

let a={
         0:"a",
         1:"b",
         length:2
         }
         console.log(Array.from(a))

数组的扩展方法 Array.of() 将一组值转化为数组

console.log(Array.of(1, 2, 3, 4, 5));

find() 找出数组里面满足条件的第一个成员直接返回 findIndex 找出符合条件的第一个值的索引 如果没有则返回-1 扩展的数组方法

let a=[1,2,3,4,5];
         console.log(a.find((n)=>{
         return n%2==0;
         }));

         console.log(a.findIndex((value,index,arr)=>{
         return value%6==0;
         }));

对象的扩展
* es6 允许直接在对象内部声明属性和方法 方法简写

let obj={
         name:"",
         sleep(){
         console.log("我在睡觉");
         }
         };
         obj.sleep();

允许 通过字面量定义对象的属性

let _sex="Sex";
         let a="age";
         let b="Now";
         let obj={
         name:"毛豆",
         [_sex]:"男",
         [a+b]:20
         };
         console.log(obj);
         console.log(obj['name']);
         console.log(obj[_sex]);
         console.log(obj[a+b]);

let obj = {
         name: "张三",
         sex: "男"
         }
         console.log(Object.getOwnPropertyDescriptor(obj, "name"));

configurable: true	可配置
enumerable: true	可枚举
value: “张三”	数据值
writable: true	可读写性

修改上面对象的配置

Object.defineProperty(obj, "sex", {
         configurable: true,
         enumerable: false,
         value: "张三",
         writable: true
         });

Object.keys() 返回当前对象里面的键

	在获取键的时候  如果键的enumerable  可枚举设置false  则会忽略该属性
     console.log(Object.keys(obj))

扩展的super 指向当前对象的原型对象 this 指向当前对象

super 指向当前对象的原型对象
super 只能写在对象的方法内部 不能直接写在属相上 和 方法 的返回值上

let proto={
         sleep(){
         console.log("睡觉");
         }
         }
         let person={
         name:"张三",
         logproto(){
         super.sleep();
         }
         }

person.prototype=proto;设置原型对象

Object.setPrototypeOf(person,proto);
         person.logproto()

对象的扩展方法

Object.assign() 合并对象    一定是可枚举属性

{
         let ob1={
         name:"张三"
         };
         let ob2={
         name:"李四",
         age:20
         };
         console.log(Object.assign({}, ob1, ob2));
         }

Object.assign 可以复制对象

let obj={a:1,b:2,c:{m:2}};
         let b=Object.assign({},obj);
         obj.a=10;
         obj.c.m=30;
         console.log(b,obj);

下面的方法获取取决于对象属性的可枚举性   true   false该属性会被忽略
        Object.keys  获取对象的所有的键
        Object.values 获取的对象的所有键值
        Object.entries  获取对象的键值   返回是一个数组
        let obj = {
            name: "1",
            sex: "2"
        };
        let ob = {
            eat()
        {
            console.log("吃饭");
        }
    }
    console.log(Object.keys(obj));
    console.log(Object.values(obj));
    console.log(Object.entries(obj));

    __proto__ 获取当前对象的原型对象
    console.log(obj.__proto__);
 设置对象的原型对象
    Object.setPrototypeOf(obj, ob);
    console.log(obj.__proto__);
  获取对象的原型对象的
    console.log(Object.getPrototypeOf(obj));


  Object.is()  严格判断两个对象相等   类似===
    let a = {};
    let b = {};
    let c = a;
    console.log(Object.is(1, 1));//true
    console.log(Object.is(null, null)); //true
    console.log(Object.is("1", 1));//false
    console.log(Object.is([], []));//false
    console.log(Object.is({}, {}));//false
    console.log(Object.is(a, c));//true