首页 > > 网页制作 > Javascript >

ES6新增内容总结

2019-08-14 10:23:40来源：博客园阅读 ()

ES6新增内容有：1，模块化思想。2，关于变量let和const。3，解构赋值。4，字符串的扩展。5，函数的扩展。6，箭头函数。7，继承apply的用法

以下就是详解：

1：模块化思想

　　非模块化有命名的冲突，文件依赖的缺点，而模块化思想解决了这样的问题，一个文件即一个模块模块的导出，通过exports 和module.exports。

export：

在一个模块文件里可以有多个export用于暴露模块的接口，但只能有一个export default用于暴露模块的默认接口，例如：

export const myStr = 'hello world'
export const myNum = 1000
export const myBoole = false
export default {
id: 1,
title: 'this is title',
}

import：

引入模块的时候通过export暴露的接口需要用{}包起来，通过export暴露的接口则不用，例如：

// 引入默认输出对象
import defaultObj from './test.js'
// 引入多个输出变量
import {myStr, myNum, myBoole} from './test.js'
// 同时引入默认输出对象和多个输出变量
import defaultObj {myStr, myNum, myBoole} from './test.js'

var module=require('filePath');

模块文件的后缀： .js .json .node

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

2.关于变量let和const总结

　　let声明的变量不存在预解析，在块级作用域内不允许重复声明，在块级作用域外不可访问let和const声明的变量。const是用来声明常亮，不允许重新赋值，声明时必须初始化

3.解构赋值

/*变量的结构赋值*/
//数组的结构赋值
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);

4.字符串的扩展
　　includes()//判断字符串是否包含字符串，第一个参数要判断的字符串，第二个参数从索引为多少开始。举个简单的例子

var arr = "abcdefghi";
console.log(arr.includes("j"))
//false
console.log(arr.includes("d"))
//true
console.log(arr.includes("d",5))
//false
console.log(arr.includes("d",3))
//true

　　第二个参数可以不写，默认为0
　　还有就是模板字符串
　　　　假如说现在有一个列表，列表内容是循环得出的，这个时候我们就要在循环内部写结构标签

var arr = ['11','22','33'];
    var str = "";
    for(var i = 0;i<arr.length;i++){
        str +=`
            <li>${arr[i]}</li>
        `
    };
    console.log(str)
/*
*<li>11</li>
*<li>22</li>
*<li>33</li>
*/

这时，我们就可以把 str，放在我们想要的地方了

5.函数的扩展
1.默认值. 2.参数解构赋值，3.rest参数 4  ... 扩展符.

 1 //默认值
 2 function print(a=10,b=2,c=1){
 3     let result=a+b+c;
 4     console.log(result);
 5 }
 6 print();
 7 //解构赋值
 8 function foo({name='小明',age=18}={}){
 9     console.log(name,age);
10 }
11 foo();
12 foo({name:'小红',age:20});
13 //rest参数
14 function restParam(a,b,...param){
15     console.log(a);
16     console.log(b);
17     console.log(param);
18 ?
19 }
20 restParam(1,2,3,56,6,9,45,12);
21 1
22 2
23 [ 3, 56, 6, 9, 45, 12 ]
24 //...扩展符 在函数调用时将数组转换为单个参数。
25 function restParam(a,b,c,d,e){
26     console.log(a+b+c+d+e);
27 ?
28 }
29 let arr=[20,30,45,56,30]
30 restParam(...arr);
31 //合并数组
32 let arr1=[12,5];
33 let arr2=[45,89];
34 let arr3=[...arr1,...arr2]
35 ?

6.箭头函数

1     let foo=(a,b)=>{
2         console.log(a+b)
3     };
4     foo(10,20)
5     //以上写法就相当于
6     function foo(a,b){
7         return console.log(a+b)
8     };
9     foo(10,20)

箭头函数注意事项

1.this取决于函数的定义，而不是调用。
2.箭头函数不用new关键字
3.箭头函数不可以使用arguments获得参数列表，可以使用rest参数代替


7.apply

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