es6 语法:
文章目录
兼容性 ie10+ chrome firefox 移动端 NodeJS
编译、转换
1.在线转换
2.提前编译
babel == browser.js
ES6
3.主要内容
1.变量
var 作用域是函数
1.可以重复声明
2.无法限制修改
3.没有块级作用域 {}
let 不能重复声明 变量 有块级作用域
const 不能重复声明 常量 不可修改 有块级作用域
let 声明的变量可以重新赋值,const不可以,所以const声明的不是变量是常量
for循环是使用let声明下标变量
2.函数
回调函数的理解:,一般情况下,应用程序(application program)会时常通过API调用库里所预先备好的函数。但是有些库函数(library function)却要求应用先传给它一个函数,好在合适的时候调用,以完成目标任务。这个被传入的、后又被调用的函数就称为回调函数(callback function)。
把回调函数传入库函数的动作,称为登记回调函数(to register a callback function)
回调函数通常和应用处于同一抽象层(因为传入什么样的回调函数是在应用级别决定的)
回调就成了一个高层调用底层,底层再回过头来调用高层的过程。
//作者:no.body链接:https://www.zhihu.com/question/19801131/answer/27459821 看到大佬的文章讲解回调函数,讲的还不错
好处:1.简明的语法、2.隐式返回、3.不绑定this
简明语法:
箭头函数 ()=>{}
如果只用一个参数()可省略,只用一个return,{}省略,就像Lambda表达式
多个参数需要使用括号,并且参数间使用逗号间隔
隐式返回:
简单返回时,可以不写return 如: (x,y) => x + y;
命名函数在递归和解除事件绑定时非常有用,但是箭头函数时匿名函数,需要递归和解除事件绑定时需要复制个一个变量或常量,多数是常量。
this:
一般来说在对象中的方法中直接引用this值是当前对象,如果使用在对象中的method(function)中引用函数(如:回调函数那样的独立函数),函数中的this值是window ,因为在js当中this值在运行时才被绑定的,**可以在方法中定义一个变量指向当前对象或者使用箭头函数(因为箭头函数没有自己的this值,是继承父类的,也就是在定义时解释时就已经被绑定了,不会随着函数的调用而改变)
函数参数的默认值:
a = a || 5;旧写法
ES6写法 defaultarg(a = 2,b = 3)如果第二参数使用默认值则defaultarg(3),此时3是a的传值;若第一个 参数使用默认值则defaultarg(undefined,5),此时5是b的传值,注意一点,非最后一个参数使用默认值都需要传入undefined不能传入null,传入null不会引用默认值
箭头函数不能用于构造函数,不可以用在对象添加原型的方法当中。
不使用箭头函数的情况:
1.想沿用之前的默认绑定的时候定对象。如原型方法
2.使用更多地绑定的时候,如绑定交互事件时,this绑定更多地元素。
3.想要在函数中使用arguments对象。
3.数组
数组解构
变量值交换
let a = 10;
let b = 5;
[a,b] = [b,a]
console.lof(a)
console.lof(b)
数组遍历
传统for循环
forEach(arr => {})方法,但是不能中途终止循环
for(let index in arrs) 这种遍历会把一些额外属性也遍历出来,还有在原型函数也会打印出来
为了解决第三种方法的小问题,ES6 给出了for 0f loof 就是将方式三的in改为for,还可以中途终止循环或跳出本次循环。
for of 可以用在数组中,用在字符串(遍历字符串),用在list当中
Array.from() 将一些类数组特性的数据结构转换成数组
Array.of() 弥补new Array()返回必须指定大小的不足,也就可变长。
find(element,index,array)方法
findIndex()
some()当至少有一个元素满足条件时,返回true,然后终止执行后续操作
every() 所有元素都满足条件时,才返回true否则返回false
concact()将两个数组拼接成一个新的数组
4.字符串
1.模板字符串:
``使用反引号来包括字符和变量,变量可以使用${var_name},例子如下:
<script>
const template=`<div>
<p>${var_name}</p>
</div>`.trim()
</script>
模板字符串是可以嵌套的,复杂的模板字符串还可以抽离出来,写成一个function()在进行嵌套。
2.标签模板字符串
3.字符串的方法
.startsWith()是否以指定的字符或字符串开头
.endsWith()是否以指定的字符或字符串结尾
.includes() 是否包含特殊的字符或字符串
.repeat() 重复次数
5.面向对象
1.对象解构
读取对象属性值更加方便。
const Tomson = {
name:'Tomson'
age:'25'
famliy:{
mother:'mom',
father:'dad',
brother:'bro'
}
//使用这种方式声明变量,需要在大括号中添加括号括起来,否则会把变量
//当作局部变量。
//let name
//({name,age}) = Tomson
const {name,age } = Tomson
//只有当变量为undefined而非默认值(null,0,'')时才会使用参数默认值
const {father:f,mothter,brother,sister = "sis"} = Tomson.family
}
6.Promise
-
定义:Promise 是一个对象,它代表了一个异步操作的最终完成或者失败。因为大多数人仅仅是使用已创建的 Promise 实例对象
-
本质:本质上,Promise 是一个被某些函数传出的对象,我们附加回调函数(callback)使用它,而不是将回调函数传入那些函数内部。
-
所谓
Promise
,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。 引用了阮一峰的ECMAScript 6 入门里面的话 -
promise对象特点
-
对象状态不受外界影响
-
一旦状态改变,就不会在变
-
缺点:
首先,无法取消
Promise
,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise
内部抛出的错误,不会反应到外部。第三,当处于pending
状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
-
-
约定:
-
不同于“老式”的传入回调,在使用 Promise 时,会有以下约定:
- 在 本轮 Javascript event loop(事件循环)运行完成 之前,回调函数是不会被调用的。
- 通过
then()
添加的回调函数总会被调用,即便它是在异步操作完成之后才被添加的函数。 - 通过多次调用
then()
,可以添加多个回调函数,它们会按照插入顺序一个接一个独立执行。
因此,Promise 最直接的好处就是链式调用(chaining)。
-
-
基本用法
-
const promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value); } else { reject(error); } }); //第一个参数时成功时调用的函数,第二个是失败时调用的函数,往外面传递错误消息,第二个参数可选 promise.then(function(value) { // success }, function(error) { // failure });
-
Promise
实例生成以后,可以用then
方法分别指定resolved
状态和rejected
状态的回调函数。
-
7.generator
8.模块化
9.剩余参数(可变参数 )
function funName(…numbers)
function funName(arg1,…dealargs)
还可以在数组的元素中使用剩余参数 const[name,id,…ss] = [name,id,s1,s2,s3,s4]
10.拓展运算符 […element]
将一个可遍历对象(字符串,数组,arraylist,部署了iterator接口的数据结构)扩展为一个新的参数序列
11 对象字面量的拓展
如果变量名和对象的属性名一致,对象里不需写成 name:name,直接写name即可
对函数也进行了简化,只要写成 function_name(){}即可