吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 1283|回复: 8
收起左侧

[学习记录] 学习ES6语法和Reactjs的练习

[复制链接]
白云点缀的蓝 发表于 2021-5-24 12:29


js.jpg

js1.jpg
[JavaScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  class a {
    constructor(name,age) {
      this.name=name,
      this.age=age
    }
    speak(){
      console.log(this.name,this.age);
    }
  }
  let a1 = new a("starry","19");
  a1.speak();
  class b {
    constructor(name,age) {
    this.name=name,
    this.age=age
    }
    static isAdult(ages){
      if(ages>18){
        console.log("成年了");
      }else
      {
        console.log("未成年");
      }
      console.log(this.name, this.age);
    }
    speak(){
      console.log(this.name, this.age);
    }
  }

  let b1 = new b("晓红","30");
  b1.speak();
 b.isAdult(29);
 class Class extends b{
   constructor(city) {
     super();
    this.city=city;
   }
  speak() {
    console.log(this.city);
  }
 }
 Class.isAdult(30);
 let class1 = new Class("上海");
 class1.speak();
</script>
</body>
</html>


[JavaScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    for (var i = 1; i <6 ; i++) {
        console.log(i);
    }
    console.log("外部能输出我吗?");
    if(undefined==i){
        console.log("不能,i="+i);
    }else {
        console.log("能,i="+i);
    }
    for (let k = 1; k <6 ; k++) {
        console.log(k);
    }
    console.log("外部能输出我吗?");
    if(undefined==k){
        console.log("不能,k="+k);
    }else {
        console.log("能,k="+k);
    }
</script>
</body>
</html>


[JavaScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  @fun
  class user {
    constructor(name,age) {
      this.name=name;
      this.age=age;
    }
    sayInfo(){
      console.log(this.name, this.age);
    }
  }
  var fun=(target)=>{
    target.city="北京";
  };
  let user1 = new user("星空","20");
  user1.sayInfo();
  console.log(user1.city);
</script>
</body>
</html>


[JavaScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  function* f() {
    yield "上海";
    yield "星空";
    yield "月薪过万";
    yield "19岁";
    return "success";
  };
  let hh=f();
  console.log(hh.next());
  console.log(hh.next());
  console.log(hh.next());
  console.log(hh.next());
  console.log(hh.next());
  for (var string of ffff= f()) {
    console.log(string);
  }
  console.log(ffff.next());
  for (let fKey of hh) {
    console.log(fKey);
  }
</script>
</body>
</html>


[JavaScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  let arr=["1","2","3","5","7"];
  var arr2=a=> parseInt(a);
  var abc= arr.map(arr1=> parseInt(arr1));
  // var cabc= arr.map(arr2());
  document.write(abc+"<br>");
  document.write(abc.reduce((a,b)=>{
    return a+b;
  }));
  document.write(abc.reduce((a,b,c)=>{
    return a+b+c;
  }));
</script>
</body>
</html>


[JavaScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var a=new Promise((resolve, reject)=>{
  setTimeout(()=>{
    document.write("异步开始了");
    let number = Math.random();
    if(number<0.5){
      resolve("成功了");
    }else {
      reject("失败了");
    }
  },300);

  });
  a.then((mes)=>document.write(mes));
  a.catch((messa)=>document.write(messa));
  document.write("前面的代码已经执行完啦");
</script>
</body>
</html>


[JavaScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var a=new Set();
  a.add("123");
  a.add("456");
  a.add("123");
  a.add("678");
  console.log(a.has("123"));
  console.log(a.has("111"));
  for (const key of a.keys()) {
    console.log(key);
  };
  a.clear();
  console.log(a.keys());
  let map = new Map();
  map.set("name","starry");
  map.set("age","19");
  console.log(map);
  for (const key of map.keys()) {
    console.log(map.get(key));
  };
  let b = map.has("name");
  let b1 = map.has("age");
  let b2 = map.has("aaa");
  console.log(b);
  console.log(b1);
  console.log(b2);
  let map1 = new Map([
    ["name","starry"],
      ["age","19"],]
  );
  console.log(map1.get("name"));
  for (const key of map1.keys()) {
    console.log(map1.get(key));
  }
  const mapaaa = new Map([ ['key1','value1'], ['key2','value2'], ]);
  console.log(mapaaa.get("key1"));;
  let set = new Set([["name","starry1"],["age","191"]]);
  let map2 = new Map(set);
  for (const key of map2.keys()) {
    console.log(map2.get(key));
  }
  function f(map4) {
    for (const key of map4.keys()) {
      console.log(map4.get(key));
    }
  }
  let map4 = new Map([["name","xk"],["age","20"]]);
  f(map4);
  a=()=>{
    return new Set([["name","xingkong"],["age","100"]]);
  }
  let map3 = new Map(a());
  for (const key of map3.keys()) {
    console.log(map3.get(key));
  }
</script>
</body>
</html>


[JavaScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var str="hello starry";
  console.log(str.endsWith("starry"));
  console.log(str.endsWith("abcdfg"));
  console.log(str.startsWith("hello"));
  console.log(str.startsWith("ello"));
  console.log(str.includes("ello"));
  console.log(str.includes("bc"));
</script>
</body>
</html>


[JavaScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var arr=[1,2,3,4,5,6,7];
  document.write(...arr);
  document.write("<br>");
  function f(a,b) {
    return a+b;
  };
  var [a,b]=arr;
 document.write( f(a,b)+"<br>");
 var [b,...c]=arr;
  document.write("b=",b);
  document.write("<br>");
  document.write("c=",c);//c=2,3,4,5,6,7
  document.write("<br>");
  function f2(a,b,c,d,e,f,g) {
    return a+b+c+d+e+f+g;
  };
  document.write( f2(...arr));
  var arr3=[1,2,3];
  var arr4=[4,5,6];
  document.write("<br>");
  document.write(...arr3,...arr4);

</script>
</body>
</html>


[JavaScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  function f(a,b) {
    return "和为"+(a+b);
  };
  var f1=(a,b,c)=>{
    return a+b+c;
  }
  var f2=()=>{
    document.write(f1(10,20,30)+"<br>");
  }
  document.write(f(10, 20)+"<br>");
  document.write(f1(10,20,30)+"<br>");
  f2();
  var peson={
    name:"starry",
    age:"16"
  };
  var f3=({name,age})=>{
    document.write(name+"<br>",age+"<br>");
  }
  var f4=({name})=>{
    document.write(name+"<br>");
  }
  f3(peson);
  f4(peson);
</script>
</body>
</html>


[JavaScript] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var arr=[1,2,3,4,5,6,7,8,9];
  var [a,b,c,d,e,g]=arr;
  console.log(a);
  console.log(b);
  console.log(c);
  console.log(d);
  console.log(e);
  console.log(g);
  var strarr=["a","b","c","d","e","f","g"];
  var [o,p,q,r,s,t,u]=strarr;
  console.log(o);
  console.log(p);
  console.log(q);
  console.log(r);
  console.log(s);
  console.log(t);
  console.log(u);
  var [g]=strarr;
  var [ll,gg,aa]=strarr;
  console.log(g);
  console.log(ll);
  console.log(gg);
  console.log(aa);
  var [g]=arr;
  var [ll,gg,aa]=arr;
  console.log(g);
  console.log(ll);
  console.log(gg);
  console.log(aa);
  var abcd={
    name:"starry",
    age:19
  };
  var {name,age}=abcd;
  console.log(name);
  console.log(age);
  var {name:name1}=abcd;
  console.log(name1);
</script>
</body>
</html>


[JavaScript] 纯文本查看 复制代码
import React from 'react';
import styles from './index.css';
import testIpEp from "./testIpEp";
import calculate from "./testIpEp";
import add from "./testIpEp";
export default function Page() {
  return (
    <div>
      <h1 className={styles.title}>Page index</h1>
    </div>
  );
}
@f
class user {
    constructor(name,age) {
        this.name=name;
        this.age=age;
    }
    sayInfo(){
        console.log(this.name, this.age);
    }
}
function f(target) {
    target.city="北京";
}
//不支持箭头函数
var fun=(target)=>{
    target.city="北京";
};
let user1 = new user("星空","20");
user1.sayInfo();
console.log(user.city);
//@T通过@符号进行引用该方法,类似java中的注解
// class User { constructor(name, age = 20)
// { this.name = name; this.age = age; }
// }function T(target) {
//     //定义一个普通的方法
// console.log(target);
// //target对象为修饰的目标对象,这里是User对象
// target.country = "中国";
// //为User类添加一个静态属性country
// }console.log(User.country); //打印出country属性值
//@T
// class Class {
//     constructor(name,age) {
//         this.name=name;
//         this.age=age;
//     }
// }
// function T(tar) {
//     tar.city="上海"
// }
// let class1 = new Class("星空","19");
// console.log(class1.age, class1.name, class1.city);


console.log(calculate.add(1, 2, 3));
console.log(calculate.mul(2,2,3));


[JavaScript] 纯文本查看 复制代码
class calculate {
    constructor() {
    }
    static add(a,b,c){
        return a+b+c;
    }
    static mul = (a,b,c)=>{
        return a*b*c;
    }
}
export default calculate;


[JavaScript] 纯文本查看 复制代码
export default ()=>
{
    return <div>
        hello world
        <a href={"http://www.baidu.com"}>点我</a>
        <a href={"http://www.52pojie.cn"}>点我</a>
    </div>;
}

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

江南小公子 发表于 2021-5-24 13:54
加油,我在学校vue.js
魔幻冰扬 发表于 2021-5-24 14:07
15278066219 发表于 2021-5-24 14:27
Su、 发表于 2021-5-24 14:32
太难了。永远跟不上发展的速度,要弃前端的坑了
Jack-yu 发表于 2021-5-24 14:36
这扑面而来的二次元气息..........
coolliyong 发表于 2021-5-24 16:04
厉害了,加油,这个背景有点厉害
xr1627119275 发表于 2021-5-24 17:04
好家伙,来做笔记了
muhuo522 发表于 2021-5-24 17:38
学习了 谢谢
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-26 02:48

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表