ES6语法大杂烩

ES6语法大杂烩

1 块级作用域{}

2 let 与var的区别

let 定义块级作用域{} 在一个块级作用域当中不能重复声明

let arr=[];
for(var i=0;i<10;i++){
 arr[i]=function(){
     console.log(i); //10
 }
}
arr[3]()

let arr=[];
for(let i=0;i<10;i++){
 arr[i]=function(){
     console.log(i);//3
 }
}
arr[3]()

3箭头函数

// 箭头函数
// ()={} 在箭头函数当中this的指向是 指向定义它的函数的this

// 定时器当中定义的this指向window

4对象字面量的简写

ES5的写法

 ES5： 定义对象字面量
         let obj = {
             age : age,
            name: name,
           say: function(){
                 console.log(1);
           }
         } 

ES6的写法

 let obj = {
            age,
            name,
            say(){
                console.log(1);
            }
        } 

5类与继承
ES5写法
// :使用构造函数实现原型的继承

案例:

// :使用构造函数实现原型的继承
// 原型是写在外部定义的
// es5写法
function parent(name,age){
    this.name=name;
    this.age=age;
}
parent.prototype.run=function(){
    console.log("run");
}
// 声明一个儿子的变量 实现父亲的参数与变量
// 使用call方法 1是调用父级所定义的变量 2更改this指向
// 使子级的this指向父级
function child(name,age,grade){
    parent.call(this,name,age)
    this.grade=grade; //这里的this指向的是c1
}

child.prototype=new parent();//子类的原型继承父类

child.prototype.study=function(){
    console.log('study');//给子类的原型定义了一个方法
}

let c1=new child('lili',20,'111111');

let c2 =new child('ywy',18,'2222');
console.log(c1);

输出的结果是子类里面的方法 因为子类调用了父类声明的参数 this指向了c1声明的值 所以把父类的参数拿过来 调用了c1的值 结果输出的是子类调用后的参数与值

用ES6语法写

// :使用构造函数实现原型的继承

案例:

// es6写法
// 用es6来实现继承

class parent{
    // constructor 属性返回对创建此对象的数组函数的引用
    // es6常用语法 固搭
    constructor(name,age){
    this.name=name;
    this.age=age;
    }
    //等同于es5向原型中添加对象
    run(){
        console.log('run')
    }
}

class child extends parent{
  constructor(name,age,grade){
    //super固定搭配 调用父类的方法必须用这个
   super(name,age)
   this.grade=grade;
  }
  // 相当于es5给子类定义一个原型方法
study(){
    console.log('study')
}
}
let c1=new child('lili',20,'111111111');
console.log(c1)

6模板字符串
渲染数据ES5与es6的区别

 // ES5
        data.forEach(item=>{
            htmlStr += "<li>"+ item +"</li>"
        })

        //ES6
        data.forEach(item=>{
            htmlStr += `
             <li>${item}</li>
            `
        })

7结构赋值
这是es5的结构赋值

// 结构赋值
// es5 这是ES5引入父的那个啥
let obj={
    title:'1111',
    price:200,
    discount:300
}

let title,price;
title=obj.title;//1111
price=obj.price;//200
console.log(title,price)

这是es6的结果赋值

// es6 

let obj={
    title:'1111',
    price:200,
    discount:300
}
let {title,price}=obj;
console.log(title,price)

 //7.1 数组解构赋值
        // ES5
        // let arr = [4,7,9,3];
        // let num1 = arr[1]; //4
        // let num2 = arr[2]; //7

        // ES6
        let arr = [4,7,9,3];
        // let [num1,num2] = arr;
        // let [,num1,num2] = arr;
        // let [num1,num2,...num3] = arr;
        let [num1,,,num2] = arr;
        console.log(num1,num2);//4 3

8展开运算符

把数组当中的值一个一个拿出来 显示{
es5写法

  // 展开运算符
    // 实现数组的深拷贝(只有一层结构类型)
    // 得到的是arr1的值
    // es5
    // let arr1=[1,2,3];
    // let arr2=[];
    //    arr2[0]=arr1[0];//1
    //    arr2[1]=arr1[1];//2
    //    arr2[2]=arr1[2];//3

es6写法

  // es6 
    let arr1 = [1, 2, 3];
    //这个arr1中的元素一个一个拿出来，放在新的数组内
    let arr2 = [...arr1];
    console.log(arr2)

}

把每个div都过滤出来

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>


let divList = document.querySelectorAll("div");
            let targetDom = [...divList].filter(item=>{
                console.log(item);
            })
            
打印结果是 {<div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>}

9 用es6写查找最小值
Math.min

 let arr=[12,22,33,44,55,66,88]
 consolt.log(Math.min(...arr))

把数组的值全部累加上去，得到最后结果

 //让数组当中的所有值 累加出最后结果
        let arr=[20,30,40];
        function total(ch,en,math){
           return ch+en+math;
        }
        //  let result=total(arr[0],arr[1],arr[2])//es5
         let result=total(...arr);//es6
         console.log(result)

10合并数组

  // 合并数组
     var arr1=[4,5]
     var arr2=[7,8]
     let arr3=arr1.concat(arr2);//es5合并
    //  let arr3=[...arr1,...arr2];//es6合并
     console.log(arr3);
</script>

11Symbol
获取唯一的不会重复的变量，是ES6新增的数据类型

  let obj = {
        name: '23',
        count() {
            console.log('count');
        }
    }
    // 为了避免与封装的相互冲突 可以使用Symbol定义
    let a = Symbol();
    let b = Symbol();
    // console.log(a===b);
    // console.log(typeof a) // symbol

    obj[a] = () => {
        console.log('数量');
    }

12数组遍历

  // 遍历语句： 
        // for: （1）需要明确遍历次数  (2)不能遍历对象，可以遍历对象以外的集合 （3）可以使用break和continue
        // forEach: (1) 可以遍历对象以外的集合 （数组，Set）  （2）不能使用break和continue
        // for...in  (1)遍历对象  (2)不能直接访问对象的属性值
        // for...of: (1)可以使用部署了Symbol.iterator的对象（自定义的对象不能使用for...of,但大部分原生的数据集合都可以使用） （２）可以使用break和continue

        let obj = {
            name: 'Peter',
            age: 67
        }

        let set = new Set([6,8,'a'])

        // for (let key of set){
        //     console.log(key)
        // }
        // for (let val of set.values()){
        //     console.log(val)
        // }

        for (let key of obj){
            console.log(key)
        }

13数组去重
用set方法数组去重

// let arr = [1,2,3,2,1,5]
        // let result = [...new Set(arr)]
        console.log( result)

• set的API属性

     // add()
    // delect()
    // has
    has() 方法返回一个布尔值来指示对应的值value是否存在Set对象中
    // clear
    let set=new set([1,2,3]);
      set.add(7);//往set里面增加一个7    
      set.delect(2);//删除2的值
    // set.has(11);
    set.clear()//清空全部

14 默认参数与剩余参数

这个是如果radius = radius调用radius 里面的参数 
然后不成立执行 100 直接输出100  后面执行

默认参数
    function draw(radius){
            radius = radius || 100;
            console.log(radius);
        }
        draw(30)//30

 // 默认(default)参数必须设置在最后
        // function draw(y,x=2,z=20){
        //     console.log(x,y,z);
        // }

// 如何用for each遍历出里面所定义的东西

let obj = {
        name: '23',
        count(){
            console.log('count');
        }
    }
    let count = Symbol();
    let b = Symbol();

    // obj[count] = ()=>{
    //     console.log('数量');
    // }
    // 返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串
    Reflect.ownKeys(obj).forEach(key=>{
        console.log(key,obj[key]);
    })