ES6总结(1)

这篇文章主要是记录ES6的基础知识，将长期更新。

ES6的开发环境搭建

初始化项目

在安转Babel之前，需要用npm init先初始化项目

npm init -y

注意，-y是默认的意思，当然也可以自己输入。命令执行结束后，会在项目根目录下生产package.json文件

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

全局安转Babel-cli

npm install  -g babel-cli

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

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

package.json文件，已经多了devDependencies选项

 "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }

新建.babelrc

在根目录下，新建.babelrc

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

新建好之后，可以在终端输入命令

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

简化转化命令

打开package.json文件，把文件修改成下面的样子。注意下面scriptsz中的代码。

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src/index.js -o dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }
}

新的声明

var
const
let

变量的解构赋值

数组的解构赋值

之前的代码：

let a=0;
let b=1;
let c=2;

现在：

let[a,b,c] = [1,2,3]

对象的解构赋值

let {firstName,lastName} = {firstName:'Gping',lastName:'Feng'}

字符串解构

字符串也可以解构，这个时候字符串被转换成为了类似数组的的对象

const [a,b,c,d] = "Gpin";
console.log(a);
console.log(b);
console.log(c);
console.log(d);

扩展运算符和reset运算符

对象扩展运算符

function simpleFun(...arg){
    console.log(arg[0]);
    console.log(arg[1]);
    console.log(arg[2]);
    console.log(arg[3]);
}
jspang(1,2,3);//1,2,3undefined

可以传入多个值，并且就算方法中引用多了也不会报错。
之前存在的问题：

let arr1=['www','jspang','com'];
let arr2=arr1;
console.log(arr2);
arr2.push('shengHongYu');
console.log(arr1);
//输出如下
["www", "jspang", "com"]
["www", "jspang", "com", "shengHongYu"]

修改：

let arr1=['www','jspang','com'];
//let arr2=arr1;
let arr2=[...arr1];
console.log(arr2);
arr2.push('shengHongYu');
console.log(arr2);
console.log(arr1);

这个时候arr 1并没有变化，sixsixsix

reset运算符

字符串模板

之前的ES5写法：

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

现在的写法：

let jspang='技术胖';
let blog = `非常高兴你能看到这篇文章，我是你的老朋友${jspang}。这节课我们学习字符串模版。`;
document.write(blog);

字符串查找

Es5

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

Es6

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

判断是否开头存在：

blog.startsWith(jspang);

判断结尾是否存在

blog.endsWith(jspang);

Es6的数字操作

二进制和八进制

let 0B010101;//开始是0，第二是B
let 0o5656;//开始也是0（零），第二是o

数字判断和转换

数字验证Number.isFinite(XX)

let a= 11/4;
console.log(Number.isFinite(a));//true
console.log(Number.isFinite('jspang'));//false
console.log(Number.isFinite(NaN));//false
console.log(Number.isFinite(undefined));//false

NaN验证

console.log(Number.isNaN(NaN));//true

判断是否是整数

let a = 234.4;
console.log(Number.isInteger(a));//false

parseInt()和parseFloat()

let a = 3.423;
console.log(Number.parseInt(a));
console.log(Number.parseFloat(a));

Es6中新增的数组知识

JSON格式的转换

将JSON转换成了Array

let  json = {
    '0': 'jspang',
    '1': '技术胖',
    '2': '大胖逼逼叨',
    length:3
}
 
let arr=Array.from(json);
console.log(arr)

Array.of()方法

let arr =Array.of(3,4,5,6);
console.log(arr);
let arr =Array.of('技术胖','jspang','大胖逼逼叨');
console.log(arr);

find()实例方法

let arr=[1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
    return value > 5;
}))

fill()方法实例

它接收三个参数，第一个参数是填充的变量，第二个是开始填充的位置，第三个是填充到的位置。

let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('jspang',2,5);
console.log(arr);

数组的遍历

for...of

let arr=['jspang','技术胖','大胖逼逼叨']
 
for (let item of arr){
    console.log(item);
}

数组索引：

let arr=['jspang','技术胖','大胖逼逼叨']
for (let index of arr.keys()){
    console.log(index);
}

数组索引以及内容：

let arr=['jspang','技术胖','大胖逼逼叨']
for (let [index,val] of arr.entries()){
    console.log(index+':'+val);
}

ES6箭头函数

ES5

function add(a,b){
    return a+b;
}
console.log(add(1,2));

ES6
默认值

function add(a,b=1){
    return a+b;
}
console.log(add(1));

箭头函数

var add =(a,b=1) => a+b;
console.log(add(1));

var add =(a,b=1) => {
    console.log('jspang')
    return a+b;
}
console.log(add(1));

ES6中的函数和数组补漏

数组转换成字符串

join()方法

let arr=['jspang','技术胖','前端教程'];
console.log(arr.join('|'));

toString()

let arr=['jspang','技术胖','前端教程'];
console.log(arr.toString());

数组中的遍历方法

1.forEach

let arr=['jspang','技术胖','前端教程']; 
arr.forEach((val,index)=>console.log(index,val));

2.filter

let arr=['jspang','技术胖','前端教程'];
arr.filter(x=>console.log(x));

3.some

let arr=['jspang','技术胖','前端教程'];
arr.some(x=>console.log(x));

4.map

let arr=['jspang','技术胖','前端教程'];
console.log(arr.map(x=>'web'));