白云点缀的蓝 发表于 2021-5-24 12:29

学习ES6语法和Reactjs的练习





<!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>

<!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>

<!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>

<!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>

<!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>

<!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>

<!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>

<!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>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
var arr=;
document.write(...arr);
document.write("<br>");
function f(a,b) {
    return a+b;
};
var =arr;
document.write( f(a,b)+"<br>");
var =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=;
var arr4=;
document.write("<br>");
document.write(...arr3,...arr4);

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

<!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>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
var arr=;
var =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 =strarr;
console.log(o);
console.log(p);
console.log(q);
console.log(r);
console.log(s);
console.log(t);
console.log(u);
var =strarr;
var =strarr;
console.log(g);
console.log(ll);
console.log(gg);
console.log(aa);
var =arr;
var =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>

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));

class calculate {
    constructor() {
    }
    static add(a,b,c){
      return a+b+c;
    }
    static mul = (a,b,c)=>{
      return a*b*c;
    }
}
export default calculate;

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

背景nb...

15278066219 发表于 2021-5-24 14:27

想知道背景咋换的？{:17_1062:}

Su、 发表于 2021-5-24 14:32

太难了。永远跟不上发展的速度，要弃前端的坑了

Jack-yu 发表于 2021-5-24 14:36

这扑面而来的二次元气息..........{:301_975:}

coolliyong 发表于 2021-5-24 16:04

厉害了，加油，这个背景有点厉害

xr1627119275 发表于 2021-5-24 17:04

好家伙，来做笔记了

muhuo522 发表于 2021-5-24 17:38

学习了 谢谢
页: [1]
查看完整版本: 学习ES6语法和Reactjs的练习


免责声明：
吾爱破解所发布的一切破解补丁、注册机和注册信息及软件的解密分析文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:Service@52pojie.cn