计算机教程

vue.js必赢娱乐棋牌 中使用(…)运算符报错的解决方法

20 7月 , 2019  

今天在起别人项目的时候, 发现报错。

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

必赢娱乐棋牌 1

配置环境

使用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语法。

这个错误是,项目中不识别es6的扩展运算符, 解决方式很简单。

定义变量

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应经被定义
// 第一步
cnpm install babel-plugin-transform-object-rest-spread

变量的解构赋值

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

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

// 第二步 看一下你的 .babelrc 里面是否有识别es6语法的配置

扩展运算符

对象扩展运算符(…):

let arr=[1,2];
let arr2=[...arr];
arr2.push(3);
console.log(arr);  //[1,2] 
console.log(arr2);  //[1,2,3]  //arr2并没有引用arr,只是单纯的继承了arr的内容
{
 "presets": [
  ["env", {
   "modules": false,
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2"
 ],
 "presets": [
  ["es2015", { "modules": false }]
 ],
 "plugins": ["transform-object-rest-spread"]
}

字符串模板

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

这两都做完,我发现又报错了。原因是你只配置了。但是没有下载es6的依赖项


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图