zoukankan      html  css  js  c++  java
  • ES6知识点总结

    声明变量     

    let 

    不能重复声明

    块级作用域

    可修改let变量的值

     ,

    const 

    不能重复声明

    块级作用域

    不能修改const 变量的值  

    2. 箭头函数 

    而箭头函数的this指向函数定义时所在的对象 

    3. 解构赋值

    允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。比如: 

    let [a, b, c] = [1, 2, 3] // a=1, b=2, c=3
    let [d, [e], f] = [1, [2], 3] // 嵌套数组解构 d=1, e=2, f=3
    let [g, ...h] = [1, 2, 3] // 数组拆分 g=1, h=[2, 3]
    let [i,,j] = [1, 2, 3] // 不连续解构 i=1, j=3
    let [k,l] = [1, 2, 3] // 不完全解构 k=1, l=2

    对象解构 

    let {a, b} = {a: 'aaaa', b: 'bbbb'} // a='aaaa' b='bbbb'
    let obj = {d: 'aaaa', e: {f: 'bbbb'}}
    let {d, e:{f}} = obj // 嵌套解构 d='aaaa' f='bbbb'
    let g;
    (g = {g: 'aaaa'}) // 以声明变量解构 g='aaaa'
    let [h, i, j, k] = 'nice' // 字符串解构 h='n' i='i' j='c' k='e' 

    变量赋值

    const {userName11111, passwordqq} = {userName11111: 'aaaa', passwordqq: 123456}
    console.log(userName11111)
    console.log(passwordqq)
    const [userName1, password1] = ['aaaaxxx', 12345611]
    console.log(userName1)
    console.log(password1)

    5. 数组 

    s6对数组扩展了4个方法:map、reduce、filter、forEach。

    map:原来数组有多少个,map 处理之后还是那么多个。参数:item,index,array


            let arr = [12, 35, 56, 79, 56];
            let arr1 = arr.map(item => item % 2 === 0 ? '偶' : '奇');
            let arr2 = arr.map((item, index) => index + ':' + item);

            console.log(arr);  // [ 12,     35,      56,    79,     56     ]
            console.log(arr1); // [ '偶',   '奇',    '偶',   '奇',   '偶'    ]
            console.log(arr2); // [ '0:12', '1:35', '2:56', '3:79', '4:56' ]
    filter: 过滤掉不符合条件的。参数:item,index,array
      let arr = [12, 75, 56, 79, 56];
            let arr1 = arr.filter(item => item >= 60);
            console.log(arr);  // [ 12, 75, 56, 79, 56 ]
            console.log(arr1); // [ 75, 79 ]
    forEach: 遍历。仅仅只是循环用,无返回值,也不会改变原数组。 参数:item,index,array
    reduce: 汇总。下面代码中的 tmp 可以理解为前一个值
        let arr = [12, 35, 56, 79, 56];
            let avg = arr.reduce((tmp, item, index) => {
                tmp += item;
                if (index === arr.length - 1) tmp /= (index + 1);
                return tmp;
            })
            console.log(avg); // 47.6  也就是这五个数的平均值
    (...),它可以将一个数组拆分为参数序列,也可以收集剩下的所有的参数或者数组元素 
    扩展运算符(…)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中
            
    // 将一个数组拆分为参数序列
            let arr = [1, 2]
            function add(a, b) {
                return a + b
            }
            add(...arr)
            console.log(add(...arr)) //3   
    // 收集剩下的所有的参数
    function f(a, ...arr) {
        console.log(...arr) // 2 3
    }
    f(1,2,3)

    对象的扩展运算符 ...

    对象的扩展运算符(...)可以把对象可枚举的属性拆分为键值对序列

    用于对象拷贝 


            let obj1 = { a: 1, b: 2 }
            let obj2 = { ...obj1 }
            console.log(obj2)   // {a:1,b:2}
    用于合并对象
            let obj1 = { a: 1, b: 2 }
            let obj2 = { c: 3, d: 4 }
            let obj3 = { a: 100, ...obj1, ...obj2, e: 5, f: 6 }  // {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}
            let obj4 = { ...obj1, ...obj2, e: 5, f: 6, a: 100 } // {a: 100, b: 2, c: 3, d: 4, e: 5, f: 6}

    (2) Object.assign

    Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,拷贝(浅拷贝)到目标对象。

    如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。


            const target = { a: 1 };

    const source1 = {a: 100, b: 2 };
    const source2 = { c: 3 };

    Object.assign(target, source1, source2);
    target // {a:100, b:2, c:3}

    面向对象

    ES6出来之后,官方提供了面向对象的写法。看代码吧

           class Person {
                constructor(name, age, address) {
                    this.name = name;
                    this.age = age;
                    this.address = address;
                }

                introduce() {
                    console.log(`大家好,我叫${this.name},今年${this.age}岁,家在${this.address}`);
                }
            }

            class Student extends Person {
                constructor(name, age, address, major) {
                    super(name, age, address);
                    this.major = major;
                }

                introduce() {
                    console.log(`大家好,我叫${this.name},今年${this.age}岁,家在${this.address}, 专业是${this.major}`);
                }
            }

            let person = new Person('ethan', 24, '包邮区');
            person.introduce();  // 大家好,我叫ethan,今年24岁,家在包邮区

            let student = new Student('zyc', 18, '南京', '车辆工程');
            student.introduce(); // 大家好,我叫zyc,今年18岁,家在南京, 专业是车辆工程
     
      上面定义了一个 Person 类,又定义了一个继承 Person 类的 Student 类,很明显方便了很多。
     

    Promise      主要是用来解决异步操作。

    • 同步:串行 简单,方便
    • 异步:并行 性能高,体验好
     这是 promise 的基本用法  

            let p = new Promise((resolve, reject) => {
                $.ajax({
                    url: '1.txt',
                    dataType: 'json',
                    success(json) {
                        resolve(json);
                    },
                    error(err) {
                        reject(err);
                    }
                })
            });
            p.then(json => {
                console.log('成功', json);
            }, err => {
                console.log('获取失败');
            })
     
    不管前方的路有多苦,只要走的方向正确,不管多么崎岖不平,都比站在原地更接近幸福。 ——宫崎骏 《千与千寻》
  • 相关阅读:
    【Windows socket+IP+UDP+TCP】网络基础
    【我所认知的BIOS】—> uEFI AHCI Driver(8) — Pci.Read()
    Unity3D十款最火的的插件推荐
    静态路由解决双外卡,PC做路由器的实现
    00096_Properties类
    TensorFlow2_200729系列---4、手写数字识别理论
    损失函数基础知识总结
    为什么选择onehot编码(总结)
    TensorFlow2_200729系列---3、梯度下降求简单线性回归实例
    numpy生成随机数据实例
  • 原文地址:https://www.cnblogs.com/City-wall/p/11497971.html
Copyright © 2011-2022 走看看