ES6总结
扩大运算符
该文章是首次浏览ES6做的笔记,刚最先简朴的东西我就pass掉
代码运转环境(运转脚手架只需要在src/index.js写完代码输入npm run build就能够运转)
关于 …的用法
let a=[1,2,3]
b=[...a]
b.push(6)
console(b) ==>1,2,3,6关于rest运算符
function a(a,…arg)==>a(1,2,3),arg=[2,3]
字符串模板
字符串套变量
let a="china"
let b=`i am from ${a},<br>and you?`推断是不是包括字符串
let searchWorld="am"
let a="i am you"
//是不是包括,开首是不是包括,末端是不是包括
a.include(searchWorld)
a.startsWith(searchWorld)
a.endsWith(searchWorld)
//字符串自身复制,参数是次数,小数就取整
console.log(a.repeat(3))数字推断与扩大
进制(牢记不是字符串)
//0B开首是二进制标志
let a = 0B0011
//打印3
console.log(a)
//0o开首是八进制标志
let a = 0o0011
console.log(a)Number对象要领
let a = 10/3
//推断是不是是数字
console.log(Number.isFinite(a))//true
//推断是不是是NaN
console.log(Number.isNaN(NaN))//true
//转换整数小数
console.log(Number.parseInt(a))//取整
console.log(Number.parseFloat(a))
//推断是不是为整数
console.log(Number.isInteger(a))//false
//es6的最大平安值
console.log(Math.pow(2,53)-1)
//最大,最小常量数,相当于const定义变量
console.log(Number.MIN_SAFE_INTEGER)
console.log(Number.MAX_SAFE_INTEGER)
//推断是不是平安数字
console.log(Number.isSafeInteger(a))//trueMath对象
trunc模块
//将字符串转为数字
console.log(Math.trunc("123"))//123
console.log(Math.trunc("12abc"))//NaN
console.log(Math.trunc("abc"))//NaNsign模块
//推断正负数
console.log(Math.sign(-123))//-1
console.log(Math.sign(123))//1
console.log(Math.sign(0))//0cbrt模块
//盘算立方根
console.log(Math.cbrt(8))clz32模块
//盘算32位二进制
console.log(Math.clz32(8))imul模块
//盘算乘法
console.log(Math.imul(8))//0
console.log(Math.imul(8,2))//16hydop
//盘算乘法
console.log(Math.hypot(1,1,1,1))//return (1^2+1^2+1^2+1^2)的平方根==>2在github传了官方pdf,更多要领就在那边查阅
数组实例与运用
from模块=>json转数组
let jsonData={
"0":0,
"1":1,
"2":2,
"length":3
}
let arr=Array.from(jsonData)
console.log(arr)//[0,1,2]of模块=>文本转数组
let txt="1,2,3,4,5"
let data=Array.of(txt)
console.log(data)copyWithin模块=>第一个是准备要替换位置,第二个是最先截取替换位置,第三个是末了停止位置,函数执即将截取的数据从肇端位置最先掩盖
let arr=[0,1,2,3,4,5,6,7,8]
console.log(arr.copyWithin(1,3,8))//[0,3,4,5,6,7,6,7,8]find模块=>顺次遍历,碰到前提为true则返回
let arrDemo=[0,1,2,3,4,5,6,1,8]
console.log(arrDemo.find((value,index,arr)=>{
return value >5
}))//6fill模块=>遍历替换,第一个参数示意要替换的值,第二个是替换最先位置,第三个是替换停止位置
let arrDemo=[0,1,2,3,4,5,6,1,8]
console.log(arrDemo.fill("x",2,5))
//[0, 1, "x", "x", "x", 5, 6, 1, 8]of模块=>遍历每一个元素
let arrDemo=[0,1,2,3,4,5,6,1,8]
for (let i of arrDemo) {
console.log(i)//顺次打印每一个元素
}in模块与of一样
let arrDemo=[0,1,2,3,4,5,6,1,8]
for (let i in arrDemo) {
console.log(i)
}<span style=”color:red;font-weight:bold”>在有些场景in不好用,比方</span>
let arrDemo=["1","2","3"]
for (let [index,val] of arrDemo.entries()) {
console.log(index,val)
}//能输出key和valuelet arrDemo=["1","2","3"]
for (let [index,val] in arrDemo.entries()) {
console.log(index,val)
}//不能输出entries
let arrDemo=["a","b","c"]
let flag=arrDemo.entries()
console.log(flag.next().value)
console.log(flag.next().value)
console.log(flag.next().value)
console.log(flag.next().value)
//输出[0,"a"],[1,"b"],[2,"c"]function模块
参数预设值 ==>不能够运用严谨形式
function addDemoOne(a,b){
return a+b
}
function addDemoTwo(a,b=3){
return a+b
}
console.log(addDemoOne(2,3))//5
console.log(addDemoTwo(2))//5参数掩盖
function addDemoTwo(a,b=3){
return a+b
}
console.log(addDemoTwo(1,2))//3预设函数违法值
function addDemoTwo(a,b=3){
if(a === 1){
throw new Error("值毛病")
}
return a+b
}
console.log(addDemoTwo(1))//Uncaught Error: 值毛病盘算函数几个参数
在这里有个坑,请看demo2,3
function addDemoOne(a,b,c){
return a+b
}
console.log(addDemoOne.length)//3
function addDemoTwo(a,b,c=2){
return a+b
}
console.log(addDemoTwo.length)//2
function addDemoThree(a,b=2,c){
return a+b
}
console.log(addDemoThree.length)//1function的name模块
function addDemoOne(a,b,c){
return a+b
}
console.log(addDemoOne.name)//addDemoOne
let addDemoTwo = function addDemoThree(){}
console.log(addDemoTwo.name)//addDemoThree箭头函数
let demo = (a,b) => a+b//省略 return,假如加return则必需加{}
console.log(demo(2,3))//5解构对象
let jsonData={
a:100,
b:200
}
function addDemoTwo({a,b=3}){
return a+b
}
console.log(addDemoTwo(jsonData))//300推断json存在某属性
let jsonData={
a:1,
b:2
}
console.log("a" in jsonData)//true
console.log("c" in jsonData)//false推断数组是不是为空
let arrOne=[,,,,]
let arrTwo=[1,2,3]
console.log(0 in arrOne)//false
console.log(0 in arrTwo)//true将对象兼并
var a={a:1}
var b={b:2}
var c=Object.assign(a,b)//能够兼并多个
console.log(c)//{a: 1, b: 2}解构数组
let arr =[1,2,3,4]
function addDemoTwo(a,b,c,d){
console.log(a,b,c,d)
}
addDemoTwo(...arr)//1,2,3,4Symbol范例=>举世无双的范例
let testData=Symbol('hello')
console.log(testData)//Symbol(hello)
console.log(typeof testData)//symbolsymbol的运用
let demoOne=Symbol('hello')
let demoTwo=Symbol('word')
let jsonData={
a:'aaa',
b:'bbb'
}
jsonData[demoOne]='ccc'
jsonData[demoTwo]='ddd'
for(let i in jsonData){
console.log(jsonData[i])//遍历不出symbol属性
}
console.log(jsonData);//能够遍历出Set与WeakSet=>数据鸠合
let demoData=new Set([1,2,3,4,5,5])//不允许反复元素
console.log(demoData);
demoData.add(6)
console.log(demoData);
demoData.delete(1)
console.log(demoData);
console.log(demoData.has(1));
console.log(demoData.has(2));
for (let i of demoData){
console.log(i);
}
demoData.clear()
console.log(demoData);去除数组中反复的元素能够如许
let arr=[1,2,3,3,4]
let setOne=new Set(arr)
console.log(setOne);Weakset
let demo={a:1,b:2}
let setData=new WeakSet()
setData.add(demo)
console.log(setData);Map
let json={name:"fan",age:18}
let m = new Map()
m.set(json,'me')
m.set('name','fan')
console.log(m.get('name'));//fan
console.log(m.get(json));//me,依据对象搜刮Proxy
Proxy实质是一个对象,当对对象的属性举行操纵能够触发一系列操纵
let data2=new Proxy({
add:function(val){
return val+1
},
name:'tom'
},{
get:function(target,key,property){
console.log('get key--->',key)//name
console.log('get target--->',target);//obj
console.log('get property--->',property);//proxy obj
return target[key]
},
set:function(target,key,value,receiver){
console.log('set key--->',key);//name
console.log('set value--->',value);//3333
console.log('set target--->',target);//obj
console.log('set reeiver--->',receiver);//proxy obj
return target[key]=value
}
})
data2.name=3333//实行set
console.log(data2.name);//实行getapply—>实行的时刻必需挪用
let target = ()=>{
return 'hello world'
}
let handler = {
apply(target,ctx,args){
//不要加钩子
console.log('6666');
return Reflect.apply(...arguments)//Reflect代码demo自身
}
}
let demo=new Proxy(target,handler)
demo()//6666Promise
promise就是前一步完成了行动就实行下一步操纵
let flag=200
function one(resolve,reject){
console.log("one");
if(flag==200){
resolve("step1 finish")
}else{
reject("step1 erro")
}
}
function two(resolve,reject){
console.log("two");
if(flag==200){
resolve("step2 finish")
}else{
reject("step2 erro")
}
}
function three(resolve,reject){
console.log("three");
if(flag==200){
resolve("step3 finish")
}else{
reject("step3 erro")
}
}
new Promise(one).then(function(val){
console.log(val);
return new Promise(two)
}).then(function(val){
console.log(val);
return new Promise(three)
}).then(function(val){
console.log(val);
return val
})Class语法糖
class people{
name(val){
// console.log(val);
return val
}
fullname(val){
console.log('Mr'+this.name(val))
}
add(){
return this.x+this.y
}
constructor(x,y){
this.x = x
this.y = y
}
}
let p = new people(1,2)
console.log(p.add());
class student extends people{
hello(){
console.log("hello");
}
}
let s= new student(10,20)
console.log(s.add());