zoukankan      html  css  js  c++  java
  • ES6

    记下一些知识。。。。。

    var 和 let 关键字之间的差异

    var定义的同名变量,最后一次变量定义会覆盖前面的值,且不会报错。与var不同的是,当使用let的时候,同一名字的变量只能被声明一次。

    请注意"use strict"。这代表着开启了严格模式,用于检测常见的代码错误以及"不安全"的行为,例如:

    "use strict";
    x = 3.14; // x 没有声明导致了报错

    用 const 关键字声明只读变量

    通过const声明的变量是只读的。这意味着通过const声明的变量只能被赋值一次,而不能被再次赋值。

    使用了const关键字,你不能使用赋值操作符将数组标识(如s)指向另外一个数组。可以理解为s的值不能被修改,这个值即是数组的内存地址。因此修改数组里的值是可以的:是s[2]=5;

    const s = [5, 7, 2];
    function editInPlace() {
      "use strict";
        s[0]=2;
      // s = [2, 5, 7]; <- this is invalid
        s[1]=5;
        s[2]=7;
    
    }

    防止对象改变

    通过之前的挑战可以看出,const声明并不会真的保护你的数据不被改变。为了确保数据不被改变,JavaScript 提供了一个函数Object.freeze来防止数据改变。

    当一个对象被冻结的时候,你不能再对它的属性再进行增、删、改的操作。任何试图改变对象的操作都会被忽略,却不会报错。

    let obj = {
      name:"FreeCodeCamp",
      review:"Awesome"
    };
    Object.freeze(obj);
    obj.review = "bad"; // obj 对象被冻结了,这个操作会被忽略
    obj.newProp = "Test"; // 也会被忽略,不允许数据改变
    console.log(obj);
    // { name: "FreeCodeCamp", review:"Awesome"}

    箭头函数

    ES6 提供了其他写匿名函数的方式的语法糖。你可以使用箭头函数:

    const myFunc = () => {
      const myVar = "value";
      return myVar;
    }

    当不需要函数体,只返回一个值的时候,箭头函数允许你省略return关键字和外面的大括号。这样就可以将一个简单的函数简化成一个单行语句。

    const myFunc= () => "value"

    这段代码仍然会返回value

    // 给传入的数值乘以 2 并返回结果
    const doubler = (item) => item * 2;
    // 使用箭头函数的语法来计算squaredIntegers数组里正整数的平方(分数不是整数)。
    const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
    const squareList = (arr) => {
      "use strict";
      // 在这行以下修改代码
      arr=arr.filter(item=>{
        if(item>=0 && item%1==0)return true;
        return false;
        });
      const squaredIntegers=arr.map(num=>num*num);
      // 在这行以上修改代码
      return squaredIntegers;
    };
    // 测试你的代码
    const squaredIntegers = squareList(realNumberArray);
    console.log(squaredIntegers);

    展开操作符--多参数

    function howMany(...args){}

    使用 spread 运算符展开数组项

    const arr = [6, 89, 3, 45];
    const maximus = Math.max(...arr); // 返回 89

    ...arr返回了一个“打开”的数组。或者说它 展开 了数组。

    数组赋值

    arr2 = [...arr1];

    然而,展开操作符只能够在函数的参数中,或者数组之中使用

    使用解构赋值从对象中分配变量

    如果你想将voxel.x,voxel.y,voxel.z的值分别赋给a,b,c,可以用以下这种很棒的方式:

    const { x : a, y : b, z : c } = voxel; // a = 3.6, b = 7.4, c = 6.54

    可以这样理解:“将x地址中的值拷贝到a当中去

    用解构赋值从嵌套对象中分配变量

    同样,我们可以将 嵌套的对象解构到变量中。

    请看以下代码:

    const a = {
      start: { x: 5, y: 6},
      end: { x: 6, y: -9 }
    };
    const { start : { x: startX, y: startY }} = a;
    console.log(startX, startY); // 5, 6

    使用解构赋值从数组中分配变量

    const [a, b] = [1, 2, 3, 4, 5, 6];
    console.log(a, b); // 1, 2
    
    能在数组解构中使用逗号分隔符,来获取任意一个想要的值:
    const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
    console.log(a, b, c); // 1, 2, 5
    交换a,b的值
      [a,b]=[b,a];

     使用解构赋值配合 rest 操作符来重新分配数组元素

    以下代码的结果与使用Array.prototype.slice()相同:

    const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
    console.log(a, b); // 1, 2
    console.log(arr); // [3, 4, 5, 7]

    变量ab分别获取了数组的前两个元素的值。之后,因为rest操作符的存在,arr获取了原数组剩余的元素的值,并构成了一个新的数组

    使用解构赋值将对象作为函数的参数传递

    在某些情况下,你可以在函数的参数里直接解构对象。

    const profileUpdate = ({ name, age, nationality, location }) => {
      /* 对这些参数执行某些操作 */
    }

    使用模板字面量创建字符串

     请使用简单属性对象的语法来创建并返回一个Person对象。

    const createPerson = (name, age, gender) => {
      "use strict";
      // 在这行以下修改代码
      ({name,age,gender});
      // 在这行以上修改代码
    };
    console.log(createPerson("Zodiac Hasbro", 56, "male")); // 返回正确的对象
    

     编写简洁的函数声明

    sayHello() {
        return `Hello! My name is ${this.name}.`;
      }
    

     class关键字

    class Vegetable{
        constructor(name){
          this.name=name;
        }
      }

    getteer setter

    class Book {
      constructor(author) {
        this._author = author;
      }
      // getter
      get writer(){
        return this._author;
      }
      // setter
      set writer(updatedAuthor){
        this._author = updatedAuthor;
      }
    }
    const lol = new Book('anonymous');
    console.log(lol.writer);  // anonymous
    lol.writer = 'wut';
    console.log(lol.writer);  // wut

    默认导出

    export default function add(x,y) {
      return x + y;
    }

    默认导入

    import add from "math_functions";
    add(5,4); //将会返回 9

     array

    Array.find()和Array.findIndex()是ES6为数组新增的两个方法。

    • Array.find():找到满足条件的第一个元素返回,如果未找到,则返回undefined。
    • Array.findIndex():找到满足条件的第一个元素,返回其位置,如果未找到,则返回-1。
    var ret1 = arr1.find((value, index, arr) => {
      return value > 4
    })
    var ret4 = arr1.findIndex((value, index, arr) => {
      return value > 14
    })
    由于无法解释的神圣旨意,我们徒然地到处找你;你就是孤独,你就是神秘,比恒河或者日落还要遥远。。。。。。
  • 相关阅读:
    PHP实现http与https转化
    HTTP和HTTPS详解
    如何防止SWF文件被反编译
    Swf Decrypt详解
    PCIE体系结构
    windows设备驱动安装指南
    [转]RegOpenKeyEx函数失败的问题
    用Setup系列函数完成驱动卸载安装[驱动安装卸载程序]
    Skipped Rebuild All: Project with VS2008
    LINK : fatal error LNK1000: Internal error during IncrBuildImage
  • 原文地址:https://www.cnblogs.com/momoli/p/13815293.html
Copyright © 2011-2022 走看看