es6

一、基本

1.目前用的版本是ESMAScript3.0,后来改名为ECMAScript5.01。

2.ECMA-262 是 JavaScript 标准的官方名称

    javascript组成

es6_第1张图片

    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);

你可能感兴趣的:(es6)