ECMAScript 6,简称ES6 。是javascript语言下一代标准。它的目标是使得JavaScript语言能够用来编写复杂的大型应用程序,成为企业级开发语言
。它是一种语言标准,6表示版本号。javascript
ECMA(European Computer Manufacturers Association)的第39号技术专家委员会(Technical Committee 39,简称TC39)负责制订ECMAScript标准组织每一年都会发布ECMAScript的版本:html
ES2015:称为es6。前端
ES2018: www.ecma-international.org/ecma-262/8.…java
ES2019:www.ecma-international.org/ecma-262/9.…git
ES6与javascript的关系:ECMAScript是一种语言标准,javascript实现了这个标准(还有JScript和ActionScript也实现这个标准)。程序员
1996年11月,javascript的创造者-----netscape公司,决定将javascript提交给ECMA,以便使之成为国际标准。es6
1997年,ECMA发布ECMA-262号标准文件,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript,这个版本就是1.0版本。github
这个标准开始就是针对javascript语言制定的,但没有称其为javascript,主要缘由以下:面试
商标。javascript自己已经被Netscape公司注册为商标。ajax
ECMA比javascript更开放,更中立。
ES6与ECMAScript2015的关系
ECMAScript2015是具体到2015年6月发布的那一版。
ES6有两层含义
特指ECMAScript2015
泛指ES2015及以后的新增特性,虽然以后的版本应当称为ES2018,ES2019...es6。
es6新增了不少强大的语法,以下是比较常使用的:
let 和 const
解构赋值
函数扩展
字符串扩展
数组扩展
对象的简写
其它内容,自行补充学习。
各类环境中对es6的支持程度: kangax.github.io/compat-tabl…
ES6电子书: es6.ruanyifeng.com/#docs/intro
咱们以前定义变量的关键字是var
,它定义的变量有不少奇怪的特色,以下有两点比较突出:
变量先使用再定义------ 变量提高。
console.log(a);
var a = 1;
console.log(a)复制代码
缺乏块级做用域。
// 此处为了使用循环,定义一个循环变量i。
for(var i=1; i<10;i++){}
// i在循环体以外也能使用。
console.info(i);复制代码
这两个问题都容易让初学者混淆,也容易让从其它语言转过来的程序员混淆。为了解决这些问题,ES6中新增了let。
而ES6引入const的缘由是,由于ES5中并无提供常量
的功能。
做用:定义变量。(var也是用来定义变量)
格式: let 变量名 = 变量值;
它用来定义变量,基本使用格式与var关键字同样。在能够在使用var 的地方改为let。
不能重复定义
没有变量提高(var定义的变量是有变量提高的),必须先定义再使用
全局变量不会附加到window对象的属性中
具备块级做用域
// 1. let 定义变量,变量不能够再次定义
let name = 'zhangsan';
name = 'lisi';
console.log(name); // lisi
let name = 'wangwu'; // 再次定义,报错:Identifier 'name' has already been declared复制代码
做用域
全局做用域
局部做用域
块级做用域(ES6中提出的)
若是是经过let关键字来定义变量的,则js代码中就能够经过{}来切分做用域了。
// 具备块级做用域,块就是大括号
{
let age = 18;
console.log(age); // 18
}
console.log(age); // 报错,此做用域中没有age的定义
// 块级做用域的嵌套
{
let a = 1;
{
let a = 2;
console.log(a);
a = 3;
console.log(a);
}
console.log(a)
}
// 隐藏的块级做用域
for (let i = 0; i < 10; i++) {
// i 只能在此范围内使用,由于有块级做用域
}
console.log(i); // 报错,此做用域中没有age的定义复制代码
经过let定义的变量,再也不有没有变量提高,必须先定义再使用
console.log(gender); // 报错,此时尚未定义gender
let gender = '男';
console.log(1); // 不报错,输出undefined
var a = 1; 复制代码
let声明的全局变量不会以属性的形式附加在window对象中,全局变量与window对象再无关系。
let hobby = '吃饭';
var a = 1
console.log(window.hobby);
console.log(window.a); 复制代码
ES6中保留了对var的支持,你能够在代码中同时使用var和let。固然,建议使用let。
程序员在协同开发项目时,会遇到一种场景:有一些数据你们都须要用到,可是都不能修改,即数据是只读的
。举个例子:在开发公司的网站时,公司的基本信息:地址,公司名,电话等等信息能够在多个地方都须要使用,但不容许去修改。 显示,使用变量来保存这些信息是不适合的,由于变量不是只读的。这种状况下, 咱们就能够把这些数据保存在常量中。
做用:定义一个只读的常量。
格式: const 常量名 = 常量值;
示例:const COMPANY_NAME = "XXX公司"
注意:
区别于变量名,常量名通常采用全大写的方式,多个单词之间使用_划线分隔。
所谓常量,就是不能修改,即:
一旦定义就不能修改;
一旦声明,就必须当即初始化;
const a = 1;
a = 2; // 报错复制代码
其它与let类似的特色
具备块级做用域
没有变量提高,必须先定义再使用
常量也是独立的,定义后不会压入到window对象中,不是window对象的属性
const
实际上保证的,并非变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动
。
const obj = {a:1};
obj.a = 2;
console.log(obj); // 问题:obj对象的属性值a是否修改了。复制代码
对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,所以等同于常量值。
对于复合类型的数据(如对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const
只能保证这个指针是固定的(即老是指向另外一个固定的地址),至于它指向的数据结构是否是可变的,就不能控制了。所以,将一个对象声明为常量必须很是当心,它的属性是能够修改的
。
若是你真的但愿定义一个不能修改的对象(属性不能添加,修改,删除),你可使用Object.freeze()。下面是一段参考代码:它一个能够把一个对象所有冻结的函数:
function makeConst(obj){
Object.freeze(obj);
Object.keys(obj).forEach(function(key){
if(typeof obj[key] === 'object'){
makeConst(obj[key])
}
})
}
var obj = {a:1,b:2};
makeConst(obj);
obj.a = 200;
obj.c = 100;
console.log(obj); //值保持不变复制代码
关键字 | 变量提高 | 块级做用域 | 初始值 | 更改值 | 经过window调用 |
---|---|---|---|---|---|
let | × | √ | - | Yes | No |
const | × | √ | Yes | No | No |
var | √ | × | - | Yes | Yes |
咱们常常会遇到一个场景:从对象中取出它的属性值,并保存在一个变量中。
例如:
// 这里的item是一个对象{},其中包含属性name和age
let name = item.name;
let age = item.age;复制代码
另外,如ajax请求的回调函数
$.ajax({
// 省略其它参数
success:function(result){
// 这里的result是一个对象,其中有code属性和data属性
if(result.code === 200){
let data = result.data;
data.forEach(){
}
}
}
})复制代码
ES6提供了一个更加方便的方式从对象中取出属性值来,,这就解构赋值。
ES 6 容许按照必定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
它有两个动做:
- 解构:意思是把有结构的数据分解开成为一个一个的值
- 赋值:把解构以后的值保存到变量复制代码
基本示例
let arr = [1,2,3,4];
// 需求,快速地从数组中取出值来赋值给变量a,b,c,d
let a = arr[0];
let c = arr[1];
console.log(a,b,c,d)复制代码
它可以快速从数组中取出值保存到变量中。它的本质是给变量赋值。
内容:
语法格式及解构规则
常规使用:变量个数等于数组长值
很是规使用
变量个数大于数组长度
变量个数小于数组长度
高级使用
用空跳过不须要的值
剩余值
复杂嵌套场景
小面试题
格式
let [变量1=默认值1,变量2=默认值2,省略其它,变量n==默认值n ] = [数组元素1,数组元素2,省略其它,数组元素n]复制代码
默认值是可选的,能够设置,也能够不设置;
规则:
赋值符号左右两边都是数组,把右边的数组按下标从小到大取出来,放入左边的数组中。
若是左边的变量并无分配到某一个值:
有默认值,使用其默认值。
无默认值,其值是undefined
//最简单的场景: 变量个数和数组中元素的是相等的
let arr = [5, 9, 10];
let [a, b, c] = arr;
console.log(a, b, c); // 输出 5 9 10
// 等价于:
let a = arr[0];
let b = arr[1];
let c = arr[2];复制代码
注意:
“=”左右两边的格式要统一。
// 变量多,值少
let arr = [5, 9, 10];
let [a, b, c, d] = arr;
console.log(a, b, c, d);
// 5 9 10 undefined
// 默认值
let arr = [5, 9];
let [a, b, c, d=4] = arr;
console.log(a, b, c, d);
// 5 9 undefined 4,
// 变量少,值多
let arr = [5, 9, 10, 8, 3, 2];
let [a, b] = arr;
console.log(a, b);
// 5 9
// 用空跳过不须要的值
let arr = [5, 9, 10, 8, 3, 2];
let [, , a, , b] = arr;
console.log(a, b);
// 10 3
// 复杂的场景,只要符合模式,便可解构
let arr = ['zhangsan', 18, ['175cm', '65kg']];
let [, ,[a,b]]=arr
// 如何让a的值是175cm,b的值是65kg
console.log(a, b); // 175cm 65kg
复制代码
let arr = [5, 9, 10, 8, 3, 2];
let [a, b, ...c] = arr; // ...c 接收剩余的其余值,获得的c是一个数组
console.log(a, b, c);
// 结果:
// a = 5,
// b = 9,
// c = [10, 8, 3, 2]复制代码
注意:
... 只能用在最后一个变量上。这个变量是一个数组,在解构赋值的过程当中,若是有出现数组元素个数大于变量个数的状况,它将会把多余的参数起来,保存在这个数组。
交换两个变量的值?
var a = 1, b = 2;
// 写代码,实现互换a,b的值
// ????
let arr=[a,b]
复制代码
let[b,a]=arr
console.info(a,b); // 要求输出 2, 1复制代码
做用:快速从对象中获取值保存到变量中。它的本质是给变量赋值。
完整格式
let {"属性名1":变量名1=默认值1, "属性名2":变量名2=默认值2,... } = {"属性名1":属性值1,"属性名2":属性值2,...}复制代码
解析规则:
默认值是可选的。你能够指定默认值,也能够不指定。
右边的"属性名"与左边的“属性名” 一致,则把右边的属性值赋值给左边的变量名。
若是右边的匹配不成立,看看是否有使用默认值,有默认值就使用默认值,没有就是undefined。
精简格式
若是左侧对象中属性名与变量名相同,则可左侧合并:
let {变量名1=默认值1,变量名2=默认值2} = {"属性名1":属性值1,"属性名2":属性值2,...}复制代码
解析规则:
右边的"属性名"与左边的变量名 一致,则把右边的属性值赋值给左边的变量名。
场景1,变量名和属性名同样
// 场景1,默认要求变量名和属性名同样
let { name, age } = {age: 27, name: '阳明'};
console.log(name, age);
let {a, c} = {a: 'hello', b: 'world'};
console.log(a, c); // hello, undefined复制代码
注意:
“=” 左右两边的格式一致。
对象是属性的无序集合,因此不须要管顺序
场景2,变量更名
// 场景2,能够经过:为变量更名
let {b, name:a} = {name: '王阳明'};
console.log(b, a,name); 复制代码
// 把其它的属性全收集起来
let obj = {name:'zs', age:20, gender:'男'};
let {name, ...a} = obj;
console.log(name, a);
// 结果:
// name = zs
// a = {age: 20, gender: "男"};复制代码
js中函数是一等公民
es6对函数的功能进行了一些拓展,补充了不少功能。学习这个部分的内容咱们就能够更加灵活优雅地使用函数啦。
在定义一个函数时,咱们能够给形参设置默认值:当用户不填入这个值时,咱们有一个保底的值可使用。这个特性在不少其它的编程语言中一个基础的特性,而在ES6以前,是不支持的,咱们须要经过一些变通的方式来实现。
参数的默认值在以前的课程内容已经涉及,例如在xhr.open(type,url,是否异步)
方法中,第3个参数默认是true,即表示异步ajax。
默认值的意思是:
若是传入,就用你传的值
若是不传入,就使用某一个特殊的、事先定义好的值。这个值也就是默认值。
// ES5 中给参数设置默认值的变通作法
function open(type, url,isAsync) {
if(isAsync === undefined){
isAsync = true;
}
console.log(type, url, isAsync);
}
// 下面这两句是等价的
open("get","common/get");//
open("get","common/get",true);
open("get","common/get",false);复制代码
以上代码主要是利用形参的一个特色:没有赋值的话,其默认值是undefined。代码是能够工做的,可是显得很累赘,es6提供了更简单的实现。
function 函数名(参数名1='默认值1',参数名2='默认值2',参数名3='默认值3'){
}复制代码
function open(type, url,isAsync=true) {
console.log(type, url, isAsync);
}
// 下面这两句是等价的
open("get","common/get");//
open("get","common/get",true);
open("get","common/get",false);
复制代码
思考:可否跳过isAsync,url,而只给type设置默认值?
注意:
带默认值的形参放在形参列表的最右边。
rest (其它的,剩余的)参数 用于获取函数多余参数,把它们放在一个数组中。
在定义函数时,在最后一个参数前面加上...
, 则这个参数就是剩余参数;
let fn = function(参数1,参数2,...rest参数){}
let fn = (参数1,参数2,...rest参数)=>{ }复制代码
只是在定义函数时,在形参列表中区别一下,而在调用函数时并没有区别。
编写一个函数,求全部参数之和;
方法一:arguments
方法二:rest参数
function getSum (){
// 在这里写你的代码
var sum = 0 ;
for(var i = 0; i < arguments.length; i++){
console.info( arguemnts[i])
sum += arguments[i];
}
}复制代码
若是以箭头函数 的方式去定义这个函数,则内部不可使用arguments这个对象了。此时,咱们就可使用
rest 参数,它能够替代 arguments 的使用。 代码以下:
// 参数不少,不肯定多少个,可使用剩余参数
const getSum = (...values) => {
var sum = 0 ;
for(var i = 0; i < values.length; i++){
console.info( values[i])
sum += values[i];
}
}
// 调用
console.log(fn(6, 1, 100, 9, 10));复制代码
与arguments相比,它是一个真正的数组,可使用所有的数组的方法。
学习箭头函数能让代码更简洁,效率更高;能看懂别人写的代码 ;
let fn3 = x => x * 2;复制代码
ES6 中容许使用箭头函数的方式来定义一个函数。前面学习的定义一个函数有两种方式:
函数声明式
函数表达式
如今有了一个新的方式:
3. 箭头函数
let 函数名 = (形参1,...形参n)=>{
// 函数体
}复制代码
// 1. 函数声明式
function fu1(x){
return x * 2;
}
// 2. 函数表达式
let fn2 = function (x) {
return x * 2;
}
// 3. 箭头函数
let fn3 = (x) => {
return x * 2;
}复制代码
第一眼看到这个箭头函数时,会以为很奇怪。若是从函数表达式的格式出发, 通过以下2步演化
步骤就能够获得。
把function 关键字 后移动到 ()和 {} 中间
把function 改写成 =>
注意:
- `=>`是一个总体,不要加空格
- 箭头函数只在定义上有些区别,但在函数调用格式上,是没有区别的。复制代码
当形参有且只有一个,能够省略小括号
let f = (x) => {console.log(x)}
// 能够简化成:
let f = x => {console.log(x)}复制代码
当函数体只有一条语句,能够省略大括号;
let f = x => {console.log(x)}
// 能够简化成:
let f = x => console.log(x)复制代码
当函数体只有一条语句,而且就是return语句,则能够省略return和大括号。
let f = x => {return x*2 }
// 能够简化成:
let f = x => x*2复制代码
注意若是返回值是一个对象,要加()
let f = x => {return {a:1} }
// 能够简化成:
let f = x => {a:1} // 报错
let f = x =>({a:1})复制代码
内部没有arguments
内部没有this
不能做为构造器
let fn = (a,b) => {
console.log(arguments); // 报错,arguments is not defined
};
fn(1, 2);复制代码
var name = 'lisi'; // 测试时,这里必须用var,由于用let声明的变量不能使用window调用
let obj = {
name: 'zhangsan',
f1 : () => {
console.log(this); // window对象
console.log(this.name); // lisi
},
f2 : function(){
console.log(this); // window对象
console.log(this.name); // lisi
}
};
obj.f1();复制代码
let Person = () => {
};
let obj = new Person(); // 报错,Person is not a constructor
// 换个角度理解,箭头函数中都没有本身的this,怎么处理成员,因此不能当构造函数复制代码
在javascript中,函数是一等公民 ,它除了起到最基本的提炼代码以外,还能够当作构造器来使用,它能作的事件太多了。在ES6提出的箭头函数让给函数减负了。
数组对象是js中很是重要的对象,它自己提供了很是多的方法,例如:sort,push,pop,unshift, splice,concat,map,forEach,filter,some,.... 。因为前端的主要工做内容之一是与后端进行数据交互,而数据交互的载体大可能是数组,因此咱们对数组的操做要求也很是高。
曾经有一道面试题:写出10个你用过的与数组相关的方法。
这一小节的学习会让咱们多掌握几个数组的方法。
功能:它的做用是把数组中的元素一项项地展开:把一个总体的数组拆开成单个的元素。
格式:...数组
基本用法
console.info(...[1,2,3]);复制代码
应用1:数组拷贝
应用2: 数组合并
从把一个数组中的值全取出来,放在另外一个数组中的
var arr0 = ['a','b'];
var arr1 = [1,2,3];
var arr2 = [4, ...arr1];
var arr3 = [..arr0 ,...arr1];复制代码
应用3:Math.max()
Math.max(1,3,4,6);
var arr = [1,3,4,6];
Math.max(...arr);
// 或者 Math.max.apply(this,[1,2,3,566])复制代码
功能:把其它非数组的对象转成数组。
格式: 数组 = Array.from(非数组对象)
它的实参有三种状况:
自定义的,特殊格式的对象。
let fakeArr = {
0: 'a',
1: 'b',
2: 'c',
length: 3
};复制代码
就是为了演示,并没有实际应用价值。
arguments对象
DOM 操做返回的 NodeList 集合
在实际的开发中,咱们常常会遇到一种场景:从一个数组中找出符合条件的元素。咱们要的讨论的重点是如何从数组中找出符合条件的元素,固然,咱们能够经过手写循环的方式来实现这个功能,可是如今es6中提供了现成的功能。find/findIndex
做用:从数组中找出咱们符合条件的第一个元素(或者是下标)。
find和findIndex的格式是一致的。
let result = [].find(function(item,index,self){
//....
// 若是知足查找的条件
return true;
})复制代码
回调函数有三个参数,分别表示:数组元素的值、索引及整个数组
若是某次循环返回的是true,find和findIndex方法的返回值就是知足这个条件的第一个元素或索引
find和findIndex方法,会遍历传递进来的数组
若是在回调函数体内,某个时刻return true,则表示查找过程结果,返回值就是本轮循环中的元素(或者是下标);若是所有的循环结束,也没有return true,则表示没有找到,没有找到会返回undefined。
findIndex 找到数组中第一个知足条件的成员并返回该成员的索引,若是找不到返回 -1。
// 用法:找数组中第一个小于0的数字
let arr = [1, 2, 4, 0, -4, 3, -2, 9];
let result = arr.find(function (item) {
return item < 0; //遍历过程当中,根据这个条件去查找
});
console.log(result); // -4复制代码
注意经过箭头函数来简化代码。
findIndex 的使用和 find 相似,只不过它查找的不是数组中的元素,而是元素的下标。
功能:判断数组是否包含某个值,返回 true / false
格式:数组.includes(参数1,参数2)
参数1,必须,表示查找的内容
参数2,可选,表示开始查找的位置,0表示从第一个元素开始找。默认值是0。
示例:
let arr = [1, 4, 3, 9];
console.log(arr.includes(4)); // true
console.log(arr.includes(4, 2)); // false, 从2的位置开始查,因此没有找到4
console.log(arr.includes(5)); // false复制代码
字符串也有这个方法,功能也是类似的。
es6中对字符串提供了新的特性,咱们介绍其中几个方法:
模板字符串
includes
startsWith
endWith
repeat
在作字符串拼接时,使用+
来拼接复杂内容是很麻烦的,而模板字符串能够解决这个问题。
格式:`${变量}
${表达式}
`
语法:
模板字 符串使用反引号 ` 把内容括起来,相似于普通字符串的""。
${}充当界定符的做用,其中能够写变量名,表达式等。
容许字符串内部进行换行,代码更好读更好的体验
示例:
let name = 'zs';
let age = 18;
// 拼接多个变量,在模板字符串中使用占位的方式,更易懂
let str = `我是${name},今年${age}`;
// 内容过多能够直接换行
let obj = [{name: 'flex', age: 20},{name: 'james', age: 21}];
let arr = ['175cm', '60kg'];
let html = ` <div> <ul> <li>${obj.name}</li> <li>${obj.age}</li> <li>${arr[0]}</li> <li>${arr[1]}</li> </ul> </div>复制代码
格式:str.includes(searchString, [position])
功能:返回布尔值,表示是否找到了参数字符串
position: 从当前字符串的哪一个索引位置开始搜寻子字符串,默认值为0。
格式:str.startsWidth(searchString, [position])
功能:返回布尔值,表示参数字符串是否在原字符串的头部或指定位置
position: 在 str
中搜索 searchString
的开始位置,默认值为 0,也就是真正的字符串开头处。
格式:str.endsWith(searchString, [len])
功能:返回布尔值,表示参数字符串是否在原字符串的尾部或指定位置.
len:可选。做为 str
的长度。默认值为 str.length
。
repeat
方法返回一个新字符串,表示将原字符串重复n
次。
语法:str.repeat(n)
let html = '<li>itheima</li>';
html = html.repeat(10);复制代码
Set是集合的意思。是ES6 中新增的内置对象,它相似于数组,可是成员的值都是惟一的,即没有重复的值
。使用它能够方便地实现用它就能够实现数组去重的操做。
建立空set;
根据已有数组建立set
// 1. 基本使用
let set = new Set();
// 获得一个空的Set对象
let set = new Set([1,2,3])复制代码
size
:属性,获取 set
中成员的个数,至关于数组中的 length
add(value)
:添加某个值,返回 Set 结构自己。
delete(value)
:删除某个值,返回一个布尔值,表示删除是否成功。
has(value)
:返回一个布尔值,表示该值是否为Set
的成员。
clear()
:清除全部成员,没有返回值。
forEach
:遍历
let arr = [1,1,2,3,3];
console.info([...new Set(arr)])复制代码
对属性名的简化
对方法的简化
let name = 'zhangsan', age = 20, gender = '女';
let obj = {
name: name, // 原来的写法
age, // 对象属性和变量名相同,能够省略后面的 “:age”,下面的gender同理
gender,
fn1:function(){ // 常规写法
console.log(123);
},
fn2 () { // 能够省略
console.log(456);
}
};
console.log(obj.age); // 20
obj.fn2(); // 456复制代码
ES6 (2015年10月)虽好,可是有兼容性问题,IE7-IE11 基本不支持 ES6
在最新的现代浏览器、移动端、Node.js 中都支持 ES6
后续咱们会讲解如何处理 ES6 的兼容性
由于 ES 6 有浏览器兼容性问题,可使用一些工具进行降级(把ES6的代码转成ES5的代码),例如:babel
babel官网](www.babeljs.cn/)
实时转码:babeljs.io/repl