ES6新增内容总结
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"))//falseconsole.log(arr.includes("d"))//trueconsole.log(arr.includes("d",5))//falseconsole.log(arr.includes("d",3))//true
第二个参数可以不写,默认为0
还有就是模板字符串
假如说现在有一个列表,列表内容是循环得出的,这个时候我们就要在循环内部写结构标签
var arr = ['11','22','33']; var str = ""; for(var i = 0;i<arr.length;i++){
str +=` ${arr[i]} `
};
console.log(str)/**11*22*33*/
这时,我们就可以把 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 122 223 [ 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, 并且无法被传递任何参数 |