一、基本
1.目前用的版本是ESMAScript3.0,后来改名为ECMAScript5.01。
2.ECMA-262 是 JavaScript 标准的官方名称
javascript组成
ESCAScript描述了该语言的语法和基本对象。
文档对象模型(DOM),描述处理网页内容的方法和接口。
浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。
3.ECMAScript6的特点ES6增添了许多必要的特性,例如模块和类(class),块级作用域,常量与变量
4.浏览器的支持程度(不支持IE6)
http://kangax.github.io/compat-table/es6/
5.可以通过Babel转码器把ES6写的代码转成ES5的,就不用担心运行环境是否支持。
二、语法
let 是es新增的命命,用来声明变量的关键字 类似于var(let的运用不影响var)
注意:1、let声明的变量只在let所在的作用域下有效,
2、用let声明变量时在相同作用域下不能重复声明,
3、用let声明的变量不存在预解析
4、暂时性死区:在代码块内,使用let声明变量之前,该变量是不可用的
5、{}就是一个作用域块
eg:let n = 0;
console.log(n);//0
{
let m = 12;
}
{
console.log(n);//0
console.log(m);//m is not defined
}
代码出错那么它之后的代码都不会执行
let声明的变量在该作用域或者该作用域的父级下有效
var a = 1;
var a = 3;
console.log(a);
let a = 4;
console.log(a);//'a' has already been declared
let在相同作用域下不能重复声明。
var str='12345';
console.log(str);//12345
function fn(){
console.log(str);//undefined
if(false){
var str=true;
}
}
fn();//不是一个方法。
预处理:js中的预处理是一层一层的处理,先找的最外层的var和function并且赋值underfined,之后从上往下顺序执行,之后逐级按照这种方式预处理.
for(var i=0;i<10;i++){}
计数器功能时,用var声明变量,会泄露为全局变量
for(let i=0;i<10;i++){}
querySelector('选择器') 找到满足选择器的第一个元素
querySelectorAll(‘选择器’) 找到满足选择器的所有元素
ie8以下不支持
const 声明一个常量:
1,常量声明后就不能修改,
2, 声明必须赋值,如不赋值就会报错
3,必须先声明后使用(不能预解析)
4, 不能重复声明
eg:
用const声明的对象,可以对它的属性进行更改
const obj={name:'lisa',age:18};
console.log(obj);
obj.name="刘";
obj.sex="女";
console.log(obj);
解构:es6允许按照一定模式,从数组或者对象中提取值,对变量进行赋值,这就被称为解构赋值。
数组解构赋值:等号左边和右边必须是数组,数组的解构赋值要一一对应,如果对应不上它的值就是undefined
eg:
var a=1,b=2,c=3;
// var arr=[1,2,3]
// a=arr[0];
// b=arr[1];
// c=arr[2]
// let [a,b,c]=[1,2,3];
// console.log(a,b,c);//1,2,3
//
// let [x,,y,z]=[1,2,3];
// console.log(x,y,z)//1,3,undefined
//
// let [m,n,q]=[1,2];
// console.log(m,n,q);
//
// {
// let [a,[b,c]]=[1,[2,3]];
// console.log(a,b,c)//1,2,3
// let [m,q,str]=[1,[2,3],'a'];
// console.log(m,q,str);
// }
//
let [head,...tail]=[1,3,4,5];
console.log(head,tail)
var arr=[1,2,3,4];
let {0:first,[arr.length-1]:end}=arr;
console.log(first,end);
// {
// let [m,...t]=[1,3,4,5]
// console.log(m,t);
// }
// {//解构允许给默认值
//// let [foo=true]=[];
// let [foo=true]=[8];
// console.log(foo);//true,8
// }
// {
// let[x=8,y='b']=['a'];
// console.log(x,y);//a,b
// }
// {
// let [x,y='b']=['a',undefined];
// console.log(x,y)
// }
//
// //默认值可以引用解构值的其它变量,但变量必须是已经声明的
// {
// let [x=1,y=x]=[];
// console.log(x,y);
// }
// {
// let [x=1,y=x]=[2];
// console.log(x,y)
// }
// {
// let [x=1,y=x]=[1,2]
// console.log(x,y);//1,2
// }
{
let [x=y]=[1,2];
console.log(x)
}
// 数组解构的应用
n=10;
n2=20;
// 交换n和n2的值
t=n;
n=n2;
n2=t;
{
let n1=10;
let n2=20;
[n1,n2]=[n2,n1];
console.log(n1,n2)
}
function fn(){
return ['a','b','c']
}
let [d,e,f]=fn();
console.log(d,e,f);
解构:es6允许按照一定模式,从数组或者对象中提取值,对变量进行赋值,这就被称为解构赋值。数组解构赋值:等号左边和右边必须是数组,数组的解构赋值要一一对应,如果对应不上它的值就是undefined对象解构赋值:等号左边和右边必须是对象,对象的解构赋值要key要一一对应,顺序不需要对应,如果对应不上它的值就是undefined var obj={
name:'lisa',
age:18,
lang:['en','ja','html'],
say:function(){console.log('解构')}
};
let {name,say,age,lang,sex}=obj;
console.log(name);
console.log(say);
console.log(lang);
console.log(sex);
function fn(){
return {
color1:'red',
color2:'blue',
color3:'yellow'
}
}
let {color1,color2,color3}=fn();
console.log(color1);
字符串也可以解构,这是因为此时字符串被转换成了一个类数组对象,类数组有个length属性因此也可以对它进行解构 const [a,b,c,d,e]='hello';
console.log(a,e);
let {length:n}='hello';
console.log(n);