js Es6新增内容总结

1.模块化

/*关于模块化的了解 非模块化有以下缺点: 1.命名冲突 2.文件依赖

前端流行的模块化:AMD requirejsCMD seajs服务器端的模块化 CommonJS-----Node.js

一个文件即一个模块模块的导出 通过exports 和module.exports*/

var addTwo=function(a,b){ return parseInt(a)+parseInt(b);}/通过exports//exports.addTwo=addTwo;//module.exports/module.exports=addTwo;


//引入模块
var module=require('filePath');
  • 模块文件的后缀: .js .json .node

    加载优先级(不写后缀的情况下).js->.json->.node

2.ES6

  • 关于声明变量let和const


     //1.let声明的变量不存在预解析
     //2.let声明的变量不允许重复(在一个块级作用域内)
     //3.ES6引入了块级作用域,在块级作用域中使用let 和const定义的变量,外部不可以访问
     //4.const 用来声明常量,不允许重新赋值,声明时必须初始化。
  • 解构赋值:


    /*变量的结构赋值*/
    //数组的结构赋值
    let [a,b,c,d]=[1,2,3,5];
    console.log(a,b,c,d);
    /*对象的结构赋值*/
    /*let {name,age}={name:'小明',age:20};
    console.log(name,age);*/
    // 对象属性别名
    let {name:firstName,age}={name:'小明',age:20};
    console.log(firstName,age);
    let {sin,cos}=Math;
    console.log(typeof sin);
     console.log(typeof cos);
     /*字符串的结构赋值*/
     let[h,g,j]='jefiwi';
     console.log(h,g,j);
  • 字符串的相关扩展:

    1.includes()//判断字符串是否包含字符串,第一个参数要判断的字符串,第二个参数从索引为多少开始。

    startsWith() endsWith()

    2.模板字符串:


    let person={
    name:'xiaoming',
    age:18,
    school:'hanzhong'
    }
    let div=`
    <div>
      <span>${person.name}</span>
      <span>${person.age}</span>
      <span>${person.school}</span>
      <span>${1+20}</span>
    </div>`
    console.log(div);
  • 函数扩展:

    1.默认值. 2.参数解构赋值,3.rest参数 4...扩展符.


    //默认值
    function print(a=10,b=2,c=1){
    let result=a+b+c;
    console.log(result);
    }
    print();
    //解构赋值
    function foo({name='小明',age=18}={}){
    console.log(name,age);
    }
    foo();
    foo({name:'小红',age:20});
    //rest参数
    function restParam(a,b,...param){
    console.log(a);
    console.log(b);
    console.log(param);

    }
    restParam(1,2,3,56,6,9,45,12);
    1
    2
    [ 3, 56, 6, 9, 45, 12 ]
    //...扩展符 在函数调用时将数组转换为单个参数。
    function restParam(a,b,c,d,e){
    console.log(a+b+c+d+e);

    }
    let arr=[20,30,45,56,30]
    restParam(...arr);
    //合并数组
    let arr1=[12,5];
    let arr2=[45,89];
    let arr3=[...arr1,...arr2]
  • 箭头函数:

    let foo=()=>console.log('你好');
    foo();
    //多个参数需要使用()包裹。
    let foo=(a,b)=>{
    let c=10;
    console.log(a+b+c);
    }
    foo(20,30);
    /*作为匿名函数传递*/
    let arr=[20,30,45,56,30];

    arr.forEach((element,index)=>{
    console.log(element);
    })
    //箭头函数的注意事项:
    1.this取决于函数的定义,而不是调用。
    2.箭头函数不用new关键字
    3.箭头函数不可以使用arguments获得参数列表,可以使用rest参数代替
    let foo=(...param)=>{
      console.log(param);
      }
      foo(12,56);

     

  • js中apply的用法。

尽管js的apply方法在平常的使用中并不多见,但是在某些地方使用的还是很有帮助性的,这里就和大家说两个比较实用的例子: 1.数组最大最小值:var min = Math.min.apply(null, arr);

求数组中的最大最小值,js有相应的方法:Math.min(),Math.max(),但是这两个方法有个不方便的地方就是其参数不能是数组,而是单个元素值,即(para1,para2,para3....)。所以使用就没有那么方便了,但是我们可以使用这个方法:

 2.数组合并。数组的合并也和求最值一样,我们可以使用简单的push(para1);进行循环push.但我们也可以使用比较简单的方法:Array.prototype.push.apply(arrA, arrB); ``//将数组arrB push到数组 arrA中。

  • call和this的使用:

    ECMAScript规范为所有函数都包含两个方法(这两个方法非继承而来), callapply 。这两个函数都是在特定的作用域中调用函数,能改变函数的作用域,实际上是改变函数体内 this 的值 。

    call 和 apply
    语法定义说明
    call(thisObj,Object) 调用一个对象的一个方法,以另一个对象替换当前对象。 call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象.如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj
    apply(thisObj,[argArray]) 应用某一对象的一个方法,用另一个对象替换当前对象。 如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数
  • arguments返回的是一个参数列表对象,使用时类似与数组,但不同于数组。

posted @ 2018-10-18 17:36  黎明启程  阅读(4116)  评论(0编辑  收藏  举报