es6学习笔记(一)

es6 chrome兼容   其他浏览器不太兼容，需要es6=》es5   babel

安装babel  

npm init -y  初始化项目   -y代表全部默认同意  不用一次次按回车

全局安装Babel-cli  npm install  -g babel-cli

本地安装babel-preset-es2015 和 babel-cli

 npm install --save-dev babel-preset-es2015 babel-cli

在根目录下新建.babelrc文件，并打开录入下面的代码

 {

    "presets":[

        "es2015"

    ],

    "plugins":[]

}

es6转es5的语法 

babel src/index.js -o dist/index.js

webpack打包 npm run build，在package.json文件中配置

 "scripts": {

    "build": "babel src/index.js -o dist/index.js"

  },

然后就可以用npm run build进行转换了

第二章

3种声明方式：
var 声明全局变量  let 局部声明，防止数据污染全局空间   const声明变量  声明后不改变值

第三章

变量的解构赋值

let [a,[b,c],d]=[1,[2,3],4];

let [a,b="JSPang"]=['技术胖']
注意：对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

圆括号的使用：解构之前就定义了变量，再结构应该在解构语法外加个圆括号。

第四章 扩展运算符和rest运算符

对象扩展运算符 ... 

当编写一个方法时，我们允许它传入的参数是不确定的。这时候可以使用对象扩展运算符来作参数，看一个简单的列子：

function jspang(...arg){

    console.log(arg[0]);

    console.log(arg[1]);

    console.log(arg[2]);

    console.log(arg[3]);

 

}

jspang(1,2,3);

控制台输出   1,2,3，undefined，传值即使多了也不会报错

扩展运算符

let arr1=['www','jspang','com'];

let arr2=arr1;

console.log(arr2);

arr2.push('shengHongYu');

console.log(arr1);

控制台输出
["www", "jspang", "com"]

["www", "jspang", "com", "shengHongYu"]
声明两个数组arr1和arr2，然后我们把arr1赋值给arr2，然后我们改变arr2的值，你会发现arr1的值也改变了，因为我们这是对内存堆栈的引用，而不是真正的赋值。

 改造后：

let arr1=['www','jspang','com'];

//let arr2=arr1;

let arr2=[...arr1];

console.log(arr2);

arr2.push('shengHongYu');

console.log(arr2);

console.log(arr1);

 rest运算符

function jspang(...arg){

  for(let val of arg){

　 console.log(val);

  }

}

jspang(0,1,2,3,4,5,6,7);

for…of的循环可以避免我们开拓内存空间，增加代码运行效率，所以建议大家在以后的工作中使用for…of循环。

第五章  字符串模板

${变量}  ··（tab上的那个点） '非常高兴你能看到这篇文章，我是你的老朋友'+varible+'。这节课我们学习字符串模版。'
let blog = `<b>非常高兴你能看到这篇文章</b>，我是你的老朋友${jspang}。<br/>这节课我们学习字符串模版。`;

 let result=`${a+b}`;
字符串查找

let jspang='技术胖';

let blog = '非常高兴你能看到这篇文章，我是你的老朋友技术胖。这节课我们学习字符串模版。';

document.write(blog.includes(jspang));
开头是否存在：

blog.startsWith(jspang);
结尾是否存在
blog.endsWith(jspang);

复制字符串
document.write('jspang|'.repeat(3));

数值的扩展方法:

    ES6 在Number对象上，新提供了Number.isFinite()和Number.isNaN()两个方法。

    ES6 将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。

 Number.isInteger()用来判断一个数值是否为整数。

 Math.trunc方法用于去除一个数的小数部分，返回整数部分。

 Math.sign方法用来判断一个数到底是正数、负数、还是零。对于非数值，会先将其转换为数值。

   它会返回五种值。

• 参数为正数，返回+1；
• 参数为负数，返回-1；
• 参数为 0，返回0；
• 参数为-0，返回-0;
• 其他值，返回NaN。

Math.cbrt方法用于计算一个数的立方根。

函数可以给初始值
function(x,y='init'){}

 Object.entries()方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

Object.fromEntries()方法是Object.entries()的逆操作，用于将一个键值对数组转为对象。