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"))
//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 ... 扩展符.
//默认值
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]
6.箭头函数
let foo=(a,b)=>{
console.log(a+b)
};
foo(10,20)
//以上写法就相当于
function foo(a,b){
return console.log(a+b)
};
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, 并且无法被传递任何参数 |
ES6新增内容总结的更多相关文章
- es6新增功能
声明命令 1. let命令 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效.下面代码在代码块之中,分别用let和var声明了两个变量.然 ...
- ES6新增的 Set 和 WeakSet 是什么玩意?在此揭晓
现在的章节内容会更加的紧密,如果大家看不懂可以先去看以前的文章,当然看了的忘了,也可以去看一下,这样学习后面的内容才会更加容易. 什么是Set结构 Set是ES6给开发者带来的一种新的数据结构,你可以 ...
- 面向对象编程-终结篇 es6新增语法
各位,各位,终于把js完成了一个段落了,这次的章节一过我还没确定下面要学的内容可能是vue也可能是前后端交互,但无论是哪个都挺兴奋的,因为面临着终于可以做点看得过去的大点的案例项目了,先憋住激动地情绪 ...
- AppleWatch开发教程之Watch应用对象新增内容介绍以及编写运行代码
AppleWatch开发教程之Watch应用对象新增内容介绍以及编写运行代码 添加Watch应用对象时新增内容介绍 Watch应用对象添加到创建的项目中后,会包含两个部分:Watch App 和 Wa ...
- ES6核心内容精讲--快速实践ES6(一)
前言 本文大量参考了阮一峰老师的开源教程ECMAScript6入门,适合新手入门或者对ES6常用知识点进行全面回顾,目标是以较少的篇幅涵盖ES6及部分ES7在实践中的绝大多数使用场景.更全面.更深入的 ...
- es6新增
首先要说let,他是只在代码块中执行的变量,例如: { let a = 10; var b = 1;}console.log(a);//definedconsole.log(b);//1 ...
- ECMAScript简介以及es6新增语法
ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...
- ES6新增的常用数组方法(forEach,map,filter,every,some)
ES6新增的常用数组方法 let arr = [1, 2, 3, 2, 1]; 一 forEach => 遍历数组 arr.forEach((v, i) => { console.log( ...
- ES6新增对象方法的访问描述符:get(只读)、set(只写)
Es6新增对象方法的访问描述符:get(只读).set(只写),可以直接使用,一般用于数据监听,用途类似于vue.$watch. var obj = { a:1, get bar() { return ...
随机推荐
- 9Patch图
NinePatch是一种很有用的PNG图片格式,它可以在特定区域随文字大小进行缩放. - 上边线控制水平拉伸- 左边线控制竖直拉伸- 右边线和下边线控制内容区域 如下: 背景图片的中间区域会随着文字的 ...
- 用SQL语句操作Sqlite数据库的示例代码
import android.content.Context; import android.database.sqlite.SQLiteDatabase; import android.databa ...
- Selenium 2自动化测试实战38(整合自动发邮件功能)
整合自动发邮件功能 解决了前面的问题后,现在就可以将自动发邮件功能集成到自动化测试项目中了.下面重新编辑runtest.py文件 #runtest.py #coding:utf-8 from HTML ...
- Elasticsearch 在CentOs7 环境中开机启动
由于园区的电源不是很稳定,经常会断电,断电之后几十台服务器,启动服务都要人肉启动,真是非常蠢的行为: 开机自启动服务就很有必要,之前设置过,后来没有成功就不管了,断电好几次之后,意识到这个问题就很严重 ...
- 树莓派-为Ubuntu Mate更换国内源 [转]
更换步骤以root身份打开 /etc/apt/sources.list 将 http://ports.ubuntu.com/ 全部替换为中科大的源 http://mirrors.ustc.edu ...
- 数组中存放model去重
在这个项目中出现"添加model数据"数组重复的情况,这就涉及到数组去重的问题了...... 1. 一开始使用的最笨的方法: 依次循环两个数组(原有的数组,选择的数组),双重for ...
- 学校或公司转ISP -boardband (上网公司)注意事项记录
如果学校或公司轉boardband , 1. 要更新 domain IP (亦可以轉移domain 去新ISP公司, 要HKDNR 登入名稱和密碼,可問舊ISP即boardband 公司或域名管理方要 ...
- iscsi-文件类型
iSCSI简介(Internet SCSI): iSCSI 小型计算机系统接口,IBM公司研发,用于在IP网络上运行SCSI协议:解决了 SCSI需要直连存储设备的局限性:可以不停机扩展存储容量,iS ...
- IntelliJ IDEA 2019.2.1 破解教程, 最新激活码(激活到2089年8月,亲测有效,持续更新中...)
当前最新版本 IDEA 2019.2.1 本来笔者这边是有个正版激活码可以使用的,但是,2019.9月3号的时候,一些小伙伴反映这个注册码已经失效了,于是拿着自己的 IDEA, 赶快测试了一下,果不其 ...
- C# Excel 中设置文字对齐方式、方向和换行
在Excel表格中输入文字时,我们常常需要调整文字对齐方式或者对文字进行换行.本文将介绍如何通过编程的方式设置文字对齐方式,改变文字方向以及对文字进行换行. //创建Workbook对象 Workbo ...