ES6入门

2017-12-19  本文已影响0人  相思雨gg

es6语法在新版本浏览器大部分都已经全部支持了,但是一些旧版本的浏览器还不能全部支持es6语法,所以想要放心的使用es6就必须使用插件把es6转换成es5使用。

配置环境

使用babel将es6转换成es5语法。
首先全局安装babel-cli:
npm install -g babel-cli

项目依赖下安装babel-cli 和babel-preset-es2015:
npm install --save-dev babel-cli babel-preset-es2015

项目根目录下创建 .babelrc文件:
{"presets":[ "es2015" ], "plugins":[] }
src目录下创建index.js:

let a=(b,c)=>b*c

打开终端执行:
babel src/index.js -o dist/index.js

这时dist目录下就会生成index.js文件:
var a = function a(b, c) { return b * c; };
此时babel 已经将es6语法转换成了es5语法。

定义变量

let局部定义变量

let a=12;
{
  let a=3;
}
console.log(a);  // 12
//控制台输出的是12,也就是说let定义的变量是局部的,它不会污染全局

继续看下一个例子:

for(let i=0; i<5; i++){
  
}
console.log(i);  //控制台会提示报错i未定义,这说明i是for循环局部变量

const定义常量:常量定义后不允许更改,否则提示报错

const URL='www.baidu.com';
var URL='ccc' ;  //控制台会提示报错,说URL应经被定义

变量的解构赋值

数组的解构赋值: 等号两边结构必须一样

let [a,b]=[1,2];
console.log(a);  //1
console.log(b); //2

对象的解构赋值:

let {a,b}={a:1,b:2};
console.log(a); //1
console.log(b);  //2

扩展运算符

对象扩展运算符(...):

let arr=[1,2];
let arr2=[...arr];
arr2.push(3);
console.log(arr);  //[1,2] 
console.log(arr2);  //[1,2,3]  //arr2并没有引用arr,只是单纯的继承了arr的内容

字符串模板

es6使用``+${}拼接字符串,并且支持换行和识别html标签:

 let a='yuan';
 let b=`大家好我是${a}`;
console.log(b);  //大家好我是yuan
let c=`大家
我是${a}
`

字符串操作:

let str='abcd';
console.log(str.includes('c'));  //true  字符串中是否包含'c' 返回true/false
console.log(str.startsWith('a'));  //true  字符串是否以'a'开头 返回true/false
console.log(str.endsWith('d'));  //true  字符串中是否以‘d’结尾 返回true /false
上一篇下一篇

猜你喜欢

热点阅读