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']
网友评论