ES6基础笔记

ES6 的开发环境搭建

初始化：

npm init -y

-y表示直接安装好，不需要每个手动通过

使用安装,基本转换，ES5打包代码的命令行：

1.npm install -g babel-cli

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

3.新建一个 .babelrc 文件

{

"ressets":[

"es2015"

],

"plugins":[]

}

4.babel转换成ES5的命令行：

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

babel ES6的js文件路径 -o 转化成ES5的文件路径

5.输入启动命令行的命令在package.json 文件里的"scripts"

不需要每次都输入babel src/index.js -o dist/index.js

"scripts":{

//这里相当于输入的命令行代码：npm run build

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

}

ES6 声明的方式

var 是全局声明，污染外部的区块

let 是局部声明

const是常量声明，不可变

变量的结构赋值（json的数据）

数组是按顺序解构的

对象是按照对象名进行解

数组：

例子：

let a =0;

let b = 1;

let c = 2;

解构：

let [a,b,c]=[0,1,2];

左右两边的结构要一致

let[foot="false"]=[]; //false 这里是直接变成默认值

//undefined null的区别

let[a,b="技术胖"]=["JSPang",undefined];//技术胖JSpang

let[a,b="技术胖"]=["JSPang",null];//JSPangbull

对象

let{foo,bar}={foo:"jspang",bar:"技术胖"}；

解构的坑：()圆括号的用法

let foo;

({foo} = {foo:"JSPang"});

console.log(foo);

注意：在程序开发中尽量使用'',比使用"" 要快运行一些，压缩运行会快很多

字符串的解构

const [a,b,c,d,e,f] = 'jspang'；

console.log(a);

console.log(b);

console.log(c);

console.log(d);

console.log(e);

console.log(f);

结果：

j

s

p

a

n

g

用处：权限的时候：解构后进行权限解构

数组（默认值的解构）、对象、字符串的解构

ES6 第四节 对象扩展运算符 ...

不明确传递参数的个数时可以使用

function jspang(...arg){

}

jspang(1,2,3)

例子：

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

let arr2 =[...arr1];

console.log(arr2);

arr2.push('hezitao');

console.log(arr2);

console.log(arr1);

rest ...运算符(剩余的参数个数不确定的时候使用)

function jspang(first,...arg){

console.log(arg.length);

for(let val of arg){

console.log(val);

}

}

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

ES6 字符串的模板 `` 

对html代码和运算符也可以解析

let wowo = "随时随地发现新鲜事!微博带你欣赏世界上每一个精彩瞬间,了解每一个幕后故事";

let oo =`新浪微博${wowo}呀呀呀`;

console.log(oo);

查找字符串：

以前使用indexOf

可以使用includes

开头查找startsWith

结尾查找endsWith

复制  .repeat()

ES6 新增的数组的知识

1.Array.from 方法

json数组格式的转化

let json3 ={

"0" : '我',

"1" : '是',

"2" : '你',

length:3

}

let arr2 = Array.from(json3);

console.log(arr2);

结果：

["我", "是", "你"]

2.Array.of 方法：一堆字符串或者是数字转化成数组

后台只传'3,4,5,6',你要数组格式

let arr = Array.of(3,4,5,6);

console.log(arr);

结果：[3,4,5,6]

3.find()实例方法;先声明实例对象，才有的方法

let arr =[1,2,3,4,5,6,7,8,9];

console.log(arr.find(function(value,index,arr){

return value>5;

}))

结果：5

4.fill 填充(替换)方法

let arr =['hezi','js','jq'];

arr.fill('web',1,2);

console.log(arr);

结果：

['hezi','web','jq']