欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6入门

程序员文章站 2022-07-05 14:03:10
...

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