资讯专栏INFORMATION COLUMN

ES6的demo代码

oysun / 3459人阅读

摘要:总结扩展运算符该文章是初次涉猎做的笔记刚开始简单的东西我就掉代码运行环境运行脚手架只需要在写完代码输入就可以运行关于的用法关于运算符字符串模板字符串套变量判断是否包含字符串是否包含开头是否包含结尾是否包含字符串自身复制参数是次数小数就取整数

ES6总结 扩展运算符

</>复制代码

  1. 该文章是初次涉猎ES6做的笔记,刚开始简单的东西我就pass

</>复制代码

  1. 代码运行环境(运行脚手架只需要在src/index.js写完代码输入npm run build就可以运行)
关于 ...的用法

</>复制代码

  1. let a=[1,2,3]
  2. b=[...a]
  3. b.push(6)
  4. console(b) ==>1,2,3,6
关于rest运算符

</>复制代码

  1. function a(a,...arg)==>a(1,2,3),arg=[2,3]
字符串模板 字符串套变量

</>复制代码

  1. let a="china"
  2. let b=`i am from ${a},
    and you?`
判断是否包含字符串

</>复制代码

  1. let searchWorld="am"
  2. let a="i am you"
  3. //是否包含,开头是否包含,结尾是否包含
  4. a.include(searchWorld)
  5. a.startsWith(searchWorld)
  6. a.endsWith(searchWorld)
  7. //字符串自身复制,参数是次数,小数就取整
  8. console.log(a.repeat(3))
数字判断与扩展 进制(切记不是字符串)

</>复制代码

  1. //0B开头是二进制标志
  2. let a = 0B0011
  3. //打印3
  4. console.log(a)
  5. //0o开头是八进制标志
  6. let a = 0o0011
  7. console.log(a)
Number对象方法

</>复制代码

  1. let a = 10/3
  2. //判断是不是数字
  3. console.log(Number.isFinite(a))//true
  4. //判断是不是NaN
  5. console.log(Number.isNaN(NaN))//true
  6. //转换整数小数
  7. console.log(Number.parseInt(a))//取整
  8. console.log(Number.parseFloat(a))
  9. //判断是否为整数
  10. console.log(Number.isInteger(a))//false
  11. //es6的最大安全值
  12. console.log(Math.pow(2,53)-1)
  13. //最大,最小常量数,相当于const定义变量
  14. console.log(Number.MIN_SAFE_INTEGER)
  15. console.log(Number.MAX_SAFE_INTEGER)
  16. //判断是否安全数字
  17. console.log(Number.isSafeInteger(a))//true
Math对象 trunc模块

</>复制代码

  1. //将字符串转为数字
  2. console.log(Math.trunc("123"))//123
  3. console.log(Math.trunc("12abc"))//NaN
  4. console.log(Math.trunc("abc"))//NaN
sign模块

</>复制代码

  1. //判断正负数
  2. console.log(Math.sign(-123))//-1
  3. console.log(Math.sign(123))//1
  4. console.log(Math.sign(0))//0
cbrt模块

</>复制代码

  1. //计算立方根
  2. console.log(Math.cbrt(8))
clz32模块

</>复制代码

  1. //计算32位二进制
  2. console.log(Math.clz32(8))
imul模块

</>复制代码

  1. //计算乘法
  2. console.log(Math.imul(8))//0
  3. console.log(Math.imul(8,2))//16
hydop

</>复制代码

  1. //计算乘法
  2. console.log(Math.hypot(1,1,1,1))//return (1^2+1^2+1^2+1^2)的平方根==>2

</>复制代码

  1. 在github传了官方pdf,更多方法就在那里查阅
数组实例与应用 from模块=>json转数组

</>复制代码

  1. let jsonData={
  2. "0":0,
  3. "1":1,
  4. "2":2,
  5. "length":3
  6. }
  7. let arr=Array.from(jsonData)
  8. console.log(arr)//[0,1,2]
of模块=>文本转数组

</>复制代码

  1. let txt="1,2,3,4,5"
  2. let data=Array.of(txt)
  3. console.log(data)
copyWithin模块=>第一个是准备要替换位置,第二个是开始截取替换位置,第三个是最后截止位置,函数执行将截取的数据从起始位置开始覆盖

</>复制代码

  1. let arr=[0,1,2,3,4,5,6,7,8]
  2. console.log(arr.copyWithin(1,3,8))//[0,3,4,5,6,7,6,7,8]
find模块=>依次遍历,遇到条件为true则返回

</>复制代码

  1. let arrDemo=[0,1,2,3,4,5,6,1,8]
  2. console.log(arrDemo.find((value,index,arr)=>{
  3. return value >5
  4. }))//6
fill模块=>遍历替代,第一个参数表示要替代的值,第二个是替代开始位置,第三个是替代终止位置

</>复制代码

  1. let arrDemo=[0,1,2,3,4,5,6,1,8]
  2. console.log(arrDemo.fill("x",2,5))
  3. //[0, 1, "x", "x", "x", 5, 6, 1, 8]
of模块=>遍历每个元素

</>复制代码

  1. let arrDemo=[0,1,2,3,4,5,6,1,8]
  2. for (let i of arrDemo) {
  3. console.log(i)//依次打印每个元素
  4. }
in模块与of一样

</>复制代码

  1. let arrDemo=[0,1,2,3,4,5,6,1,8]
  2. for (let i in arrDemo) {
  3. console.log(i)
  4. }

在有些场景in不好用,例如

</>复制代码

  1. let arrDemo=["1","2","3"]
  2. for (let [index,val] of arrDemo.entries()) {
  3. console.log(index,val)
  4. }//能输出key和value

</>复制代码

  1. let arrDemo=["1","2","3"]
  2. for (let [index,val] in arrDemo.entries()) {
  3. console.log(index,val)
  4. }//不能输出
entries

</>复制代码

  1. let arrDemo=["a","b","c"]
  2. let flag=arrDemo.entries()
  3. console.log(flag.next().value)
  4. console.log(flag.next().value)
  5. console.log(flag.next().value)
  6. console.log(flag.next().value)
  7. //输出[0,"a"],[1,"b"],[2,"c"]
function模块 参数预设值 ==>不可以使用严谨模式

</>复制代码

  1. function addDemoOne(a,b){
  2. return a+b
  3. }
  4. function addDemoTwo(a,b=3){
  5. return a+b
  6. }
  7. console.log(addDemoOne(2,3))//5
  8. console.log(addDemoTwo(2))//5
参数覆盖

</>复制代码

  1. function addDemoTwo(a,b=3){
  2. return a+b
  3. }
  4. console.log(addDemoTwo(1,2))//3
预设函数违法值

</>复制代码

  1. function addDemoTwo(a,b=3){
  2. if(a === 1){
  3. throw new Error("值错误")
  4. }
  5. return a+b
  6. }
  7. console.log(addDemoTwo(1))//Uncaught Error: 值错误
计算函数几个参数

</>复制代码

  1. 在这里有个坑,请看demo2,3

</>复制代码

  1. function addDemoOne(a,b,c){
  2. return a+b
  3. }
  4. console.log(addDemoOne.length)//3
  5. function addDemoTwo(a,b,c=2){
  6. return a+b
  7. }
  8. console.log(addDemoTwo.length)//2
  9. function addDemoThree(a,b=2,c){
  10. return a+b
  11. }
  12. console.log(addDemoThree.length)//1
function的name模块

</>复制代码

  1. function addDemoOne(a,b,c){
  2. return a+b
  3. }
  4. console.log(addDemoOne.name)//addDemoOne
  5. let addDemoTwo = function addDemoThree(){}
  6. console.log(addDemoTwo.name)//addDemoThree
箭头函数

</>复制代码

  1. let demo = (a,b) => a+b//省略 return,如果加return则必须加{}
  2. console.log(demo(2,3))//5
解构对象

</>复制代码

  1. let jsonData={
  2. a:100,
  3. b:200
  4. }
  5. function addDemoTwo({a,b=3}){
  6. return a+b
  7. }
  8. console.log(addDemoTwo(jsonData))//300

</>复制代码

  1. 判断json存在某属性

</>复制代码

  1. let jsonData={
  2. a:1,
  3. b:2
  4. }
  5. console.log("a" in jsonData)//true
  6. console.log("c" in jsonData)//false

判断数组是否为空

</>复制代码

  1. let arrOne=[,,,,]
  2. let arrTwo=[1,2,3]
  3. console.log(0 in arrOne)//false
  4. console.log(0 in arrTwo)//true

将对象合并

</>复制代码

  1. var a={a:1}
  2. var b={b:2}
  3. var c=Object.assign(a,b)//可以合并多个
  4. console.log(c)//{a: 1, b: 2}
解构数组

</>复制代码

  1. let arr =[1,2,3,4]
  2. function addDemoTwo(a,b,c,d){
  3. console.log(a,b,c,d)
  4. }
  5. addDemoTwo(...arr)//1,2,3,4
Symbol类型=>独一无二的类型

</>复制代码

  1. let testData=Symbol("hello")
  2. console.log(testData)//Symbol(hello)
  3. console.log(typeof testData)//symbol
symbol的应用

</>复制代码

  1. let demoOne=Symbol("hello")
  2. let demoTwo=Symbol("word")
  3. let jsonData={
  4. a:"aaa",
  5. b:"bbb"
  6. }
  7. jsonData[demoOne]="ccc"
  8. jsonData[demoTwo]="ffffd"
  9. for(let i in jsonData){
  10. console.log(jsonData[i])//遍历不出symbol属性
  11. }
  12. console.log(jsonData);//可以遍历出
Set与WeakSet=>数据集合

</>复制代码

  1. let demoData=new Set([1,2,3,4,5,5])//不允许重复元素
  2. console.log(demoData);
  3. demoData.add(6)
  4. console.log(demoData);
  5. demoData.delete(1)
  6. console.log(demoData);
  7. console.log(demoData.has(1));
  8. console.log(demoData.has(2));
  9. for (let i of demoData){
  10. console.log(i);
  11. }
  12. demoData.clear()
  13. console.log(demoData);

</>复制代码

  1. 去除数组中重复的元素可以这样

</>复制代码

  1. let arr=[1,2,3,3,4]
  2. let setOne=new Set(arr)
  3. console.log(setOne);
Weakset

</>复制代码

  1. let demo={a:1,b:2}
  2. let setData=new WeakSet()
  3. setData.add(demo)
  4. console.log(setData);
Map

</>复制代码

  1. let json={name:"fan",age:18}
  2. let m = new Map()
  3. m.set(json,"me")
  4. m.set("name","fan")
  5. console.log(m.get("name"));//fan
  6. console.log(m.get(json));//me,根据对象搜索
Proxy

</>复制代码

  1. Proxy本质是一个对象,当对对象的属性进行操作可以触发一系列操作

</>复制代码

  1. let data2=new Proxy({
  2. add:function(val){
  3. return val+1
  4. },
  5. name:"tom"
  6. },{
  7. get:function(target,key,property){
  8. console.log("get key--->",key)//name
  9. console.log("get target--->",target);//obj
  10. console.log("get property--->",property);//proxy obj
  11. return target[key]
  12. },
  13. set:function(target,key,value,receiver){
  14. console.log("set key--->",key);//name
  15. console.log("set value--->",value);//3333
  16. console.log("set target--->",target);//obj
  17. console.log("set reeiver--->",receiver);//proxy obj
  18. return target[key]=value
  19. }
  20. })
  21. data2.name=3333//执行set
  22. console.log(data2.name);//执行get
apply--->执行的时候必须调用

</>复制代码

  1. let target = ()=>{
  2. return "hello world"
  3. }
  4. let handler = {
  5. apply(target,ctx,args){
  6. //不要加钩子
  7. console.log("6666");
  8. return Reflect.apply(...arguments)//Reflect代码demo本身
  9. }
  10. }
  11. let demo=new Proxy(target,handler)
  12. demo()//6666
Promise

</>复制代码

  1. promise就是前一步完成了动作就执行下一步操作

</>复制代码

  1. let flag=200
  2. function one(resolve,reject){
  3. console.log("one");
  4. if(flag==200){
  5. resolve("step1 finish")
  6. }else{
  7. reject("step1 erro")
  8. }
  9. }
  10. function two(resolve,reject){
  11. console.log("two");
  12. if(flag==200){
  13. resolve("step2 finish")
  14. }else{
  15. reject("step2 erro")
  16. }
  17. }
  18. function three(resolve,reject){
  19. console.log("three");
  20. if(flag==200){
  21. resolve("step3 finish")
  22. }else{
  23. reject("step3 erro")
  24. }
  25. }
  26. new Promise(one).then(function(val){
  27. console.log(val);
  28. return new Promise(two)
  29. }).then(function(val){
  30. console.log(val);
  31. return new Promise(three)
  32. }).then(function(val){
  33. console.log(val);
  34. return val
  35. })
Class语法糖

</>复制代码

  1. class people{
  2. name(val){
  3. // console.log(val);
  4. return val
  5. }
  6. fullname(val){
  7. console.log("Mr"+this.name(val))
  8. }
  9. add(){
  10. return this.x+this.y
  11. }
  12. constructor(x,y){
  13. this.x = x
  14. this.y = y
  15. }
  16. }
  17. let p = new people(1,2)
  18. console.log(p.add());
  19. class student extends people{
  20. hello(){
  21. console.log("hello");
  22. }
  23. }
  24. let s= new student(10,20)
  25. console.log(s.add());

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107545.html

相关文章

  • 关于Node.js__dirname,__filename,process.cwd(),./文件路

    摘要:先把当成文件,依次查找当前目录下的,找到了,就返回该文件,不再继续执行。那么关于正确的结论是在中使用是跟的效果相同,不会因为启动脚本的目录不一样而改变,在其他情况下跟效果相同,是相对于启动脚本所在目录的路径。 起因 原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步,以学习者的身份写博...

    harryhappy 评论0 收藏0
  • 关于Node.js__dirname,__filename,process.cwd(),./文件路

    摘要:先把当成文件,依次查找当前目录下的,找到了,就返回该文件,不再继续执行。那么关于正确的结论是在中使用是跟的效果相同,不会因为启动脚本的目录不一样而改变,在其他情况下跟效果相同,是相对于启动脚本所在目录的路径。 起因 原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步,以学习者的身份写博...

    pumpkin9 评论0 收藏0
  • ES6】对象新功能与解构赋值

    摘要:通过字面量语法扩展新增方法改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程。四解构赋值为数组和对象字面量提供了新特性解构,可以简化数据提取的过程,减少同质化的代码。 ES6 通过字面量语法扩展、新增方法、改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程。 一、字面量语法扩展 在 ES6 模式下使用字面量创建对象更加简洁,对于对象属性来说,属性初始值可...

    Lowky 评论0 收藏0
  • 在非阻塞IO下nodejs下同步并行 ES6 promise 从入门深入(二)

    摘要:现在我们要用的重点就是我们的,这是一个能让函数并行的,可以基于多个。非常有用啊先上一个错误的代码这时候我们得到的就是数字了,而不是一个数组,这就是神奇所在。 看过 (一)的同学一定觉得这个Promise很简单,好像没什么可以用的地方,但是事实上,它的用处非常大啊,尤其是在nodejs上,愈加重要,虽然已经有大量的库实现了对Promise的封装了,不过我还是更倾向用原生的node来实现对...

    Jrain 评论0 收藏0
  • 在非阻塞IO下nodejs下同步并行 ES6 promise 从入门深入(二)

    摘要:现在我们要用的重点就是我们的,这是一个能让函数并行的,可以基于多个。非常有用啊先上一个错误的代码这时候我们得到的就是数字了,而不是一个数组,这就是神奇所在。 看过 (一)的同学一定觉得这个Promise很简单,好像没什么可以用的地方,但是事实上,它的用处非常大啊,尤其是在nodejs上,愈加重要,虽然已经有大量的库实现了对Promise的封装了,不过我还是更倾向用原生的node来实现对...

    verano 评论0 收藏0

发表评论

0条评论

oysun

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<