ES6

①const和let

var 只有 全局作用域 和 函数作用域 没有块级作用域 { }

let    、 const 都是 块级作用域    声明常量的同时必须赋值

②字符串的扩展

A.  'hello world'.includes('hello')      输出  true

B.  'hello world'.startsWith('h')  //  'hello world'.startsWith('hello')  输出true

C.  'hello world'.endsWith('d')  //  'hello world'.endsWith('world')  输出true

D.  'hello world'.repeat(2)    输出  ‘hello worldhello world’

③模板字符串(支持换行,变量拼接很方便)

var  user = { name: '张三', age: 18  }; 

var  greeting = '我叫${user.name},今年已经${user.age}岁了' ;

④解构赋值

数组:var arr = [ 'html' , 'Css' ] ;      var [ a, b ] = arr;

对象:var obj = {name: '张三' , age : 18 };  var { name , age} = obj;  也可以起别名  var { name:mingzi, age} = obj

函数:function ajax ( { url }){ console.log(url) }    ajax( { url : 'http://www.baidu.com'}) ;  相当于 var {url} =  { url : 'http://www.baidu.com'}

⑤箭头函数

A. 箭头函数不能当作构造函数 箭头函数记住一句话:自动bind(this)

B. 箭头函数的this等于外部环境的this,本身没有this  , 其他函数的this谁调用就指向谁 ,

对于数组的遍历方法:forEach、map、find、findIndex,如果是使用的普通函数的方式,其中的this始终指向window

⑥ES6模板规范

export default function(){ console.log("我是Foo"); } foo.js中 默认成员只能有一个,否则报错

        import a from("./foo")    main.js中    a导出的是默认成员

非default按需导入指定的多个成员          export const a = 123 ;

                        export const b = 456 ;

                      import  {a,b} from("./foo") 

一次性拿到所以 export xxx 导出的成员    import * as foo from './foo'      foo拿到了default,a,b都有

还可以这样写                  const s1='s1';const s2='s2';

                                        export {

s1,

s2,

        }

      export function a( ){ console.log("11"); }

注意这不是对象的简写方式,这是导出的特殊语法,导出s1,s2,a()

⑦ES6转换成ES5(配合webpack使用)

A. 安装依赖 npm install --save-dev babel-loader babel-core babel-preset-env

B. 在webpack.config.js配置    http://webpack.js.org/loaders/babel-loader    最后面的改成presets:['env']

你可能感兴趣的:(ES6)