手把手带你学习微信小程序 —— (ES6语法简要概述)

x33g5p2x  于2021-12-30 转载在 其他  
字(3.6k)|赞(0)|评价(0)|浏览(356)

一篇拖了快两年的文章 hhhh

手把手带你学微信程序系列 —— 入门

一、定义变量

let关键字简单语法学习
一、 let关键字
let 同 var

1.1 出现变量提升的问题

var a = 10;
console.log(a);
//正常情况在控制台打印 10

//反过来呢?
console.log(a);
var a = 10;
//则会出现未定义 undifined

1.2 let 代码块只在当前代码中有效

类比于局部变量

for(var i=0;i<=10;i++){
    console.log(i);
}

console.log(i); //结果为11,i依然有效

126节 ES6语法 (二)

for(let i=0;i<10;i++){
    console.log(i);
}
// 此时打印i

1.3 const 只读变量

127节 const关键字

  1. 常量 readOnly
const PI = 3.14;
PI = 3;

  1. const 指向的地址不会改变,但是可以改变该地址的数据
const list=[1,2,3];
list.push(4);
console.log(list);

二、函数的基本使用

2.1 定义函数

128节 ES6语法 —— 定义函数

  1. 默认参数(按顺序传参,默认参数要在非默认参数前面)
fucndemo:function(){
    function person(name,age=18){
    console.log("=============");
    console.log(name,age);
    console.log("=============");
}
    person("GG",20);
},

2.解构传参,使用对象传参 —— 解决个别无法传参的问题

fucndemo:function(){
    function person(name,age=18,gender="男",height=170){
    console.log("=============");
    console.log(name,age,gender,height);
    console.log("=============");
}
person("GG",20,height=180);
},

因此,可以采用对象传参

fucndemo:function(){
    function person(name,{age=18,gender="男",height=170}){
    console.log("=============");
    console.log(name,age,gender,height);
    console.log("=============");
}
    person("GG",20,{height:180});
        person("GG",{});
    //使用对象传值的时候,默认值要传一个空值, 或者在定义函数的时候给一个默认值
     //function person(name,{age=18,gender="男",height=170}={})
     // person("GG");

},

2.2 ES6 箭头函数?

129节 箭头函数

  1. 模拟一个网络请求,使用两种方式
fucndemo:function(){
// 网络请求的模拟
    function request(url,success){
    console.log("正在请求:"+url);
    console.log("请求完成");
        if(success){
            success([1,2,3,4]);
        }
    }
    // request("http://www.baidu.com/",function(res){
    // console.log(res);
    // });
    request("http://www.baidu.com/", res =>{
    console.log(res);
});
},
  1. 返回多个参数
function request(url,success){
    console.log("正在请求:"+url);
    console.log("请求完成");
        if(success){
            success([1,2,3,4],"aaa");
        }
}
// request("http://www.baidu.com/",function(res){
// console.log(res);
// });
//如果没有任何参数,可以使用 空的括号
    request("http://www.baidu.com/", (res1,res2) =>{
    console.log(res1,res2);
});
  1. 获取返回值
function request(url,success){
    console.log("正在请求:"+url);
    console.log("请求完成");
        if(success){
            let result=success([1,2,3,4],"aaa");
        console.log(result);
        }
    }
// request("http://www.baidu.com/",function(res){
// console.log(res);
// });
    request("http://www.baidu.com/", (res1,res2) =>{
    console.log(res1,res2);
    return true;
    });
},
  1. 直接返回
request("http://www.baidu.com/", (res1, res2) => "hello world");

130节 promise 风格调用

promisedemon:function(){
    let p= new Promise((resolve,reject) =>{
        setTimeout(()=>{
//模拟网络请求
        // resolve([1,2,3,4]); 请求成功了,执行 then方法
       // reject("请求失败。。。"); 请求失败了 执行 catch方法
        },1000);
});
//等价于succe回调,resolve 和 reject 只会执行一种情况
    p.then(res =>{
        console.log(res);
        console.log(res+"\n请求成功");
    }).catch(err =>{
        console.log(err);
        console.log("请求失败");
});
},

三、类的学习

3.1 定义类以及使用构造函数

131节 ES6 类的学习

  1. 类的基本使用
// 定义 ES6 中的类,类中每个方法都不能加逗号
classdemo:function(){
    class Person{
	// 构造函数
    constructor(name,age){
    this.name = name;
    this.age = age;
}
    sayHello(){
    console.log("Hello World,my name is "+this.name+" and I am "+this.age);
    }
}
    var p =new Person("dd",18);
    p.sayHello();//该方法通过对象调用
},

//Hello World,my name is dd and I am 18

3.2 定义类以及使用静态方法

  1. 定义静态方法,直接调用方法
    使用 static 关键字 修饰的方法或者 类,可以直接通过类名调用方法
    对象方法和类方法灵活使用

四、模块化代码

4.1 import 或者 export

132节 模块
使用export 和 impoet 语句即可,可以直接导入js文件

eg:
新建一个util.js 文件,添加如下代码

function sayHello()
{
    console.log("hello world");
}
export {sayHello}

然后在 index.js 文件中导入,使用 {} 将 sayHello 从 util.js 中解构出来

import {sayHello} from "util.js"
Page({
/** * 页面的初始数据 */
    data: {},
/** * 生命周期函数--监听页面加载 */
    onLoad: function (options) {
        sayHello();
    },
})

运行结果自然是 hello world

相关文章