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