搭建es6环境
- 在src文件夹下面建立js文件，所有的es6代码都写在这个文件夹下面。
- dist：Babel编译成的ES5代码文件夹，在HTML页面引入的这里的js文件。
<script src="./dist/index.js"></script>
- 在src/index.js中编写es6的代码
- 初始化项目,输入命令
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
- 在根目录下新建.babelrc文件，(ios系统与windows有区别)，在文件中敲入以下代码
{
"presets":[
"es2015"
],
"plugins":[]
}
- 在终端输入命令，将es6转换成es5
babel src/index.js -o dist/index.js
- 简化转化命令，在package.json文件中找到下面代码：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
改成
"scripts": {
"build": "babel src/index.js -o dist/index.js"
},
然后在终端输入下面命令即可转化
npm run build
声明方式
var：es5全局声明变量。
let：es6局部声明变量。
const：es6中声明常量。
变量的解构赋值
按位置的对应关系为变量赋值，如果等号两边不一样返回undefined或者报错
以前
let a=0;
let b=1;
let c=2;
现在
let [a,b,c]=[1,2,3];
扩展运算符和rest运算符
传入参数的个数不确定时，可以使用扩展运算符
function jspang(...arg){
console.log(arg[0]);
console.log(arg[1]);
console.log(arg[2]);
console.log(arg[3]);
}
jspang(1,2,3);
还可以使用扩展运算符复制数组,正常情况下，数组的复制，是复制的指针，并不是对数据的复制，使用扩展运算符就可以对数组实现真正的复制
let arr2 = [...arr1]
console.log(arr2)
arr2.push('shengHongYu')
console.log(arr2)
console.log(arr1)
rest运算符
function myFunction(first, ...arg){
console.log(arg.length)
}
myFunction(0,1,2,3,4,5,6);//6
说明arg里面包含6个元素
字符串模板
1.字符串拼接方式，可以在字符串中添加html代码
let a = '白居易'
//es5写法
let b = '《琵琶行》作者是' + a + '唐朝人'
//es6写法,
let c = `《琵琶行》作者是${a}<br/>唐朝人`
console.log(b, c)//《琵琶行》作者是白居易唐朝人
2.对运算的支持
let a = 1
let b = 2
let c = `${a + b}`
console.log(c)//3
3.查找一个字符串在另一个字符串中是否存在
let a = '123'
let b = '1234567'
//es5写法，返回位置
console.log(b.indexOf(a))；//返回位置 0
//以下es6写法
console.log(b.includes(a))//返回true,不存在返回false
console.log(b.startsWith(a))//判断开头是否存在，true/false
console.log(b.endsWith(a))//判断结尾是否存在，true/false
es6数字操作
1.进制转换,二进制的英文单词是Binary,二进制的开始是0（零），然后第二个位置是b（注意这里大小写都可以实现），然后跟上二进制的值就可以了。八进制的英文单词是Octal，也是以0（零）开始的，然后第二个位置是O（欧），然后跟上八进制的值就可以了。
//es6写法
let binary = 0B010101
let b = 0o777
console.log(binary, b)//21 511
//es5写法
console.log(parseInt(666, 8))//八进制数字666，转换成十进制，输出结果438
2.其他数字方法
// 数字验证
console.log(Number.isFinite(123)) // true
// NaN验证
let a = NaN
console.log(Number.isNaN(a)) // true
// 判断整数
let c = 123
let d = 123.1
console.log(Number.isInteger(c), Number.isInteger(d)) // true false
// 整数转换
let e = '9.18'
console.log(Number.parseInt(e), Number.parseFloat(e))
// 最大整数,2的53次方
let f = Math.pow(2, 53) - 1
console.log(f) // 9007199254740991
// 最大安全整数和最小安全整数
console.log(Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER) // 9007199254740991 -9007199254740991
// 安全整数判断
let g1 = 9007199254740992
let g2 = 9007199254740990
console.log(Number.isSafeInteger(g1), Number.isSafeInteger(g2)) // false true
新增数组方法(1)
1.将json格式数据转换成数组,Array.from方法，注意json格式数据里面必须带length属性
// 将json转换成数组
let json = {
'0': '李白',
'1': '杜甫',
'2': '白居易',
length: 3
}
let arr = Array.from(json)
console.log(arr) // (5) [1, 2, 3, 4, 5]
2.将字符串转换成数组，Array.of()方法
// 将字符串转换成数组
let newArrStr1 = Array.of(1, 2, 3, 4, 5)
let newArrStr2 = Array.of('李白', '杜甫', '白居易')
console.log(newArrStr1, newArrStr2) // (5)[1, 2, 3, 4, 5] (3)["李白", "杜甫", "白居易"]
3.find实例方法，在数组中找到符合条件的数组元素，找到返回值，否则返回undefined,find只返回一个值,find有三个参数
value:当前查找的值
index:当前查找的值的索引号
arr:当前数组
let arrFind = ['lily', 'dog', 'liuyan']
console.log(arrFind.find((value, index, arrFind) => {
return value === 'dog'
}))
新增数组方法(2)
1.fill实例方法，接收三个参数
第一，填充的变量
第二，开始填充的位置
第三，填充到的位置，注意，填充的新变量不包括这个参数的位置
// fill实例方法
let arrFill = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
arrFill.fill('web', 2, 5)
console.log(arrFill) // (10) [0, 1, "web", "web", "web", 5, 6, 7, 8, 9]
2.for of循环
// for...of循环
// 打印元素
for (let item of arrFill) {
console.log(item)
}
// 打印索引
for (let index of arrFill.keys()) {
console.log(index)
}
// 同时打印索引和元素内容
for (let [index, val] of arrFill.entries()) {
console.log(index, val)
}
es6中箭头函数和扩展
1.参数可以设置默认值
// 参数可以设置默认值
function add (a, b = 1) {
return a + b
}
console.log(add(2)) // 3,这个参数2是a的值
2.可以主动抛出错误，例如在vue中v-for必须有key值，否则报错
// 可以主动抛出错误，例如vue中，v-for必须有key值，否则会把报错，使用throw new Error('出错啦')
function addNum (a, b = 1) {
if (a === 0) {
throw new Error('This is error')
}
return a + b
}
console.log(addNum(0))
3.严格模式，可以在代码的最上面写，相当于全局使用，es6中可以写在函数里面，'use strict'
注意，参数使用默认值，在严格模式下会报错，必须取消使用其中一个
// 严格模式
function addStrict (a, b) {
'use strict'
return a + b
}
console.log(addStrict(1, 8))
// 以上代码如果使用function addStrict (a, b=1)就会报错
4.获取参数的个数
// 获取参数个数
console.log(addStrict.length) // 2
5.箭头函数
注意，箭头函数不能当做构造函数使用，不可以new
es6中的函数和数组
1.对象的函数解构，将json格式的数据当作参数传到函数里面，在函数内部进行处理
// 对象的函数解构
let jsonObj = {
a: 'js',
b: 'web'
}
function fun ({a, b = 1}) {
console.log(a, b)
}
fun(jsonObj)
2.数组的函数解构
// 数组的函数解构
let arrFun = ['web', 'lily', 'js']
function funArr (a, b, c) {
console.log(a, b, c)
}
funArr(...arrFun)
3.in方法的使用
in方法用来判断对象或者数组中是否存在某个值
let inObj = {
a: 1,
b: 2
}
console.log('a' in inObj) // true
console.log('c' in inObj) // false
in方法可以判断某个索引位置是否有值，传统方法用length判断数组是否为空，但是当数组中各项都为空值时，也会返回长度。true 表示在数组索引为0的位置存在数据，如果false则不存在数据
let inArr = [1, 3]
console.log(0 in inArr) // true
4.数组的遍历方法
fllter(),forEach(),some(),map()
5.数组转换成字符串的方法
toString方法只能转换成以逗号形式隔开的字符串,
join方法可以以任何形式隔开
let arrString = [1, 23, 4, 6, 8, 9]
console.log(arrString.toString()) // 1,23,4,6,8,9
console.log(arrString.join('|')) // 1|23|4|6|8|9
es6中关于对象的一些方法
1.对象赋值
let name = 'lily'
let age = 27
var objNew = {name, age}
console.log(objNew)
2.对象key值构建
// 对key值的构建
let key = 'skill'
var obj = {
[key]: 'web'
}
console.log(obj.skill)
}
3.Object.is()对象的比较
'==='为同值相等，is()为严格相等
// 对象的比较
var obj1 = {name: 'jspang'}
var obj2 = {name: 'jspang'}
console.log(obj1.name === obj2.name) // true
console.log(Object.is(obj1.name, obj2.name)) // true
4.Object.assign()合并对象
// 合并对象
let a1 = {name: 'lily', age: 27}
let a2 = {hobby: 'eat'}
let a3 = {name: 'cx', hobby: 'sing', sexy: 'male'}
console.log(Object.assign(a1, a2, a3))
var b1 = {a: 'jspang'}
var b2 = {b: '技术胖'}
var b3 = {c: 'web'}
let d1 = Object.assign(b1, b2, b3)
console.log(d1)
symbol在对象中的使用，意思是全局标记
var newSymObj = {
skill: 'web',
name: 'lily'
}
var ageSym = Symbol('年龄')
newSymObj[ageSym] = 18
for (let item in newSymObj) {
console.log(newSymObj[item]) // web lily
}
console.log(newSymObj) // {skill: "web", name: "lily", Symbol(年龄): 18}
上面代码中的 ageSym属性被标记成了symbol，后面循环的时候就会对sageSym进行保护，输出不出来，如果想取这个值，可以单独打印newSymObj[ageSym]
set和weakSet数据结构
set，1.set是一种数据结构，不是数据类型，set数据结构是以数组形式进行构建的
2.set与array的区别是，set里面不允许重复的数据，如果有，只显示一个，相当于去重
1.set值的增加
// set值的增加
var setArr = new Set(['lily', '27', '女', 'sing'])
setArr.add('web')
console.log(setArr) // {"lily", "27", "女", "sing", "web"}
2.set值的删除
var setArr = new Set(['lily', '27', '女', 'sing'])
setArr.add('web')
console.log(setArr) // {"lily", "27", "女", "sing", "web"}
setArr.delete('27')
console.log(setArr) // {"lily", "女", "sing", "web"}
3.set查找
var setArr = new Set(['lily', '27', '女', 'sing'])
console.log(setArr.has('sing')) // true
4.set删除
setArr.clear()
console.log(setArr) // Set{_c: Set(0)}
5.获取set值的数量
var setArr = new Set(['lily', '27', '女', 'sing'])
console.log(setArr.size) // 4
6.set的forEach()循环
var setArr = new Set(['lily', '27', '女', 'sing'])
setArr.forEach((val) => {
console.log(val)
})
WeakSet数据结构的值也是不允许重复的，规定传入的值必须是对象
// weakSet传入值必须是对象
var weakObj = new WeakSet()
var person = {name: 'lily', age: '27', sexy: 'female'}
weakObj.add(person)
console.log(weakObj)
注意，两个对象相同时，如果先后同时传入对象，那么会显示两个一样的对象在weakObj中，如果要实现去重功能，就必须赋值
var weakObj = new WeakSet()
var person1 = {name: 'lily', age: '27', sexy: 'female'}
var person2 = {name: 'lily', age: '27', sexy: 'female'}
weakObj.add(person1)
weakObj.add(person2)
console.log(weakObj) // // {{name: 'lily', age: '27', sexy: 'female'}, {name: 'lily', age: '27', sexy: 'female'}}
去重之后
var weakObj = new WeakSet()
var person1 = {name: 'lily', age: '27', sexy: 'female'}
var person2 = {name: 'lily', age: '27', sexy: 'female'}
person1 = person2
console.log(person1)
weakObj.add(person1)
// weakObj.add(person2)
console.log(weakObj) //{name: 'lily', age: '27', sexy: 'female'}
map数据结构
map也是一种数据结构，已知的数据结构有Set和json。map是一种特殊的键值对，key可以设置成数组和字符串，值也可以，可以不规则的对应
map的增删改查方法
// map数据结构
var jsonMap = {name: 'lily', age: 27}
var mapObj = new Map()
// map增加值
mapObj.set(jsonMap, 'myInformation')
console.log(mapObj)
mapObj.set('own', json)
console.log(mapObj)
// map取值
console.log(mapObj.get('own'))
// map的数据长度
console.log(mapObj.size) // 2
// 查找是否存在某值
console.log(mapObj.has(jsonMap)) // true
console.log(mapObj.has('own')) // true
// 删除其中某一个
console.log(mapObj.delete('own'))
console.log(mapObj)
// 清空map里面的所有值
mapObj.clear()
console.log(mapObj)
用Proxy进行预处理
1.proxy是类似于vue的钩子函数，在执行一些方法前预处理的一些代码，可以理解为函数或者对象的生命周期
2.声明proxy的基本形式
new Proxy({},{}),第一个花括号，代表我们方法的主题，第二个就是proxy代理的区域，相当于我们写钩子函数的地方
3.get属性，是你得到某些对象属性时预处理的方法，接收三个参数
target:目标值，
key:目标的key值，相当于对象的属性
property:
4.set属性，是在你要改变属性值时进行的预处理，接收四个参数
target:目标值，
key:目标的key值，相当于对象的属性
value:要改变成的值
receiver:改变前的原始值
5.apply属性，是调用内部方法前的预处理，使用方法是一个匿名函数，接收三个参数
target:同上
ctx:目标对象的上下文对象
args:目标对象的参数数组
let funs = function () {
return 'I am dog'
}
var handlers = {
apply (target, ctx, args) {
console.log('do apply')
return Reflect.apply(...arguments)
}
}
let target = {
add: function (val) {
return val + 100
},
name: 'my hobby is sing'
}
let handler = {
get: function (target, key, property) {
console.log('预处理器--get')
if (typeof (target[key]) === 'function') {
return target[key]
}
return target[key] + '111'
},
set: function (target, key, value, receiver) {
console.log('预处理器---set')
return (target[key] = value)
}
}
let pro = new Proxy(target, handler)
console.log(pro.name)
pro.name = 'my name is beauty girl'
console.log(pro.name)
console.log(pro.add(100))
}
promise对象的使用
1.解决了es5回调地狱问题，es5有多层嵌套，写完代码层次过多，很难进行维护和二次开发，promise完全解决了这个问题，代码比较结构化，将异步操作以同步操作的流程表达出来
2.promise执行多步操作，这个过程是有顺序，成功执行resolve,失败执行reject
3.声明promise的基本形式
new Promise().then()
比如:表单验证
<template>
<div>
<h1>{{shuzi}}</h1>
<ul>
<li>手机号：<input type="text" v-model="phone"></li>
<li>邮箱：<input type="text" v-model="email"></li>
<li>密码：<input type="password" v-model="word"></li>
<li><button @click="checkClick">提交</button></li>
</ul>
</div>
</template>
import axios from 'axios'
export default {
name: 'test',
data () {
return {
shuzi: '',
phone: '',
email: '',
word: ''
}
},
methods: {
checkClick () {
var that = this
new Promise(that.checkPhon).then(function (val) {
console.log('手机号')
return new Promise(that.checkEmail)
}).then(function (val) {
console.log('邮箱')
return new Promise(that.checkWord)
}).then(function (val) {
console.log('密码')
})
},
checkPhon (resolve, reject) {
console.log(this.phone.length)
if (this.phone.length === 6) {
resolve(
axios.get('https://vueseller.uiyin.com/seller').then(this.getDate)
)
} else {
reject('手机号验证失败')
}
},
checkEmail (resolve, reject) {
console.log(this.email.indexOf('@'))
if (this.email.indexOf('@') !== -1) {
resolve('邮箱验证通过')
} else {
reject('邮箱验证失败')
}
},
checkWord (resolve, reject) {
if (this.word === '123456') {
resolve('密码验证通过')
} else {
reject('密码验证失败')
}
},
getDate (res) {
console.log(res)
}
},
mounted () {
this.jspang(1, 2, 3, 4, 5)
// this.shuzi = ''
}
}
</script>
class类的使用
1.类的声明方式
class Coder{}
2.类里面可以写方法，不需要写function,可以定义很多方法，方法之间不需要逗号隔开
3.类的传参用constructor
4.类的继承用extends
// class类
class Coder {
name (val) {
console.log(val)
return val
}
skill (val) {
console.log(this.name('beautyGirl') + '的skill：' + val)
}
constructor (a, b) {
this.a = a
this.b = b
}
add () {
return this.a + this.b
}
}
let code = new Coder(1, 2)
// code.name('girl')
code.skill('web')
console.log(code.add())
class Dog extends Coder {}
let puppy = new Dog()
puppy.name('毛毛')
5.静态方法 static
如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。注意，这种情况可以在类上调用这个方法，但是如果用类的实例则不能调用，
父类的静态方法可以被子类继承，注意这里是子类继承，不是子类的实例
静态方法也是可以从super对象上调用的。
class Person {
static myName () {
return 'hello beaityGirl'
}
}
let ren = new Person()
console.log(Person.myName()) //hello beaityGirl
console.log(ren.myName()) //这里会报错
class Ren extends Person {}
console.log(Ren.myName()) //hello beaityGirl
如果静态方法包含this关键字，这个this指的是类，而不是实例。
静态方法可以和非静态方法重名
网友评论