微信小程序开发之九 —— JavaScript入门

学习前后

上一篇：微信小程序开发之八 —— swiper、video、map组件与cover效果
下一篇：微信小程序开发之十 —— 点击事件

了解控制台Console

我们看网页按F12键也可以看到console的控制台，而微信开发者工具的调试里面也有，控制台可以显示小程序错误信息，也可以进行输入和调试代码。

数学运算

JavaScript的一些算术运算跟我们了解的没有太大区别

日志打印console.log()

console.log()使我们使用console输出最常用的方式，可以输出数组、数字、字符串、对象等内容。

JavaScript中单引号和双引号都表示字符串

如果要输出的字符串中带有单引号，那最外层使用双引号包含

如果包含双引号，最外层就使用单引号包含即可

打印数组Aarry

输出整个数组，结果会带有下标与值，还有显示数组长度的信息,显示数据类型为数组。

console.log(["java","javascript","python","CSS","小程序"])

如果需要输出单个数据

console.log(["java","javascript","python","CSS","小程序"][4])

打印对象Object

console.log({name:"小程序", tool: "云开发", desc: "继续加油呀"})

变量与赋值

JavaScript中可使用let语句进行变量声明，使用等号进行赋值，等号左边为变量名，右边为值，这个跟我们学过的C、C++等语言差不多，不同的是JavaScript的所有类型声明都可以用let，具体时哪个类型是根据值的情况来决定的。

JavaScript常见的数据类型有：

数值（Number）、字符串（String）、布尔值（Boolean）、

对象（Object）、函数（Function）等。

数据赋值

let name = "不胜寒"
console.log(name)
let array = ["java","javascript","python","CSS","小程序"]
console.log(array)
let obj = {name:"小程序", tool: "云开发", desc: "继续加油呀"}
console.log(obj)

结果：

变量冲突与覆盖

如果已经使用let声明一个变量了，再次声明这个变量会产生冲突报错，而这个变量可以重新赋值进行覆盖。

错误写法：

let name = "不胜寒"
console.log(name)
let name = "五连绝世"
console.log(name)

结果显示错误

而重新赋值可以覆盖不会报错
正确写法：

let name = "不胜寒"
console.log(name)
name = "五连绝世"
console.log(name)

结果：

数组操作

已有数组

let code = ["java","javascript","python","CSS","小程序"]

分割符join方法

join方法将数组元素拼接为字符串,以分隔符分割，默认是逗号,分割。

console.log(code.join("、"))
// java、javascript、python、CSS、小程序

添加数组push方法

push是向数组末尾添加一个或多个元素，并返回新数组长度

console.log(code.push("C++","C","html"))
// 8
console.log(code)
//(8)["java", "javascript", "python", "CSS", "小程序", "C++", "C", "html"] 

删除数组末尾的元素pop方法

console.log(code.pop())
//html

删除数组最前面（头部）的元素shift

console.log(code.shift())
//java
console.log(code)
//(6) ["javascript", "python", "CSS", "小程序", "C++", "C"] 

添加元素到数组的头部unshift

console.log(code.unshift("Vue","Spring"))
//8
console.log(code)
//(8) ["Vue", "Spring", "javascript", "python", "CSS", "小程序", "C++", "C"]

找出某个元素在数组中的索引indexOf

console.log(code.indexOf("javascript"))
//2

复制一个数组slice

console.log(code)
//(8) ["Vue", "Spring", "javascript", "python", "CSS", "小程序", "C++", "C"]
let copy = code.slice()
console.log(copy)
//(8) ["Vue", "Spring", "javascript", "python", "CSS", "小程序", "C++", "C"]

更多有关数组的操作请查看技术文档：MDN数组Array

对象操作

已有对象

let study = {name:"小程序", tool: "云开发", desc: "继续加油呀"}

添加对象属性

study.year = 2020
study.activity = "迟到的校园布道师"
console.log(study)
//{name: "小程序", tool: "云开发", desc: "继续加油呀", year: 2020, activity: "迟到的校园布道师"}

删除对象的某个属性

delete study.year
//true
console.log(study)
//{name: "小程序", tool: "云开发", desc: "继续加油呀", activity: "迟到的校园布道师"}

更新对象的某个属性

study.name = "不胜寒"
console.log(study.name)
//不胜寒

常量const

同样，JavaScript也需要有只读的数据，如果有不想被修改的值就可以使用const声明，const和let声明类似，如下

const test = "我是不能被修改的常量"
console.log(test)
//我是不能被修改的常量
test = "尝试去修改"
//报错：Uncaught TypeError: Assignment to constant variable.

字符串操作

let lesson="云开发技术训练营";
let enname="CloudBase Camp"
console.log(lesson.length);  //返回字符串的长度
//8
console.log(lesson[4]);  //返回在指定位置的字符
//术
console.log(lesson.charAt(4));   //返回在指定位置的字符
//术
console.log(lesson.substring(3,6));  //从索引3开始到6（不包括6）
//技术训
console.log(lesson.substring(4));  //从索引4开始到结束
//术训练营
console.log(enname.toLowerCase()); //把一个字符串全部变为小写：
//cloudbase camp
console.log(enname.toUpperCase());  //把一个字符串全部变为大写：
//CLOUDBASE CAMP
console.log(enname.indexOf('oud')); //搜索指定字符串出现的位置：
//2
console.log(enname.concat(lesson)); //连接两个字符串
//CloudBase Camp云开发技术训练营
console.log(lesson.slice(4)); //提取字符串的某个部分，并以新的字符串返回被提取的部分
//术训练营

更多字符串操作请查看技术文档：MDN字符串String

函数与调用函数

JavaScript函数的本身也是对象，因此可以把函数赋值给变量，或者作为参数传递给其他函数。

函数结构

function 函数名(参数 1, 参数 2, 参数 3) {
    代码块内要执行的语句
}

不带参数的函数

function greet() {
    console.log("你好，欢迎来学习小程序开发");
};
greet(); //调用greet()函数

带一个参数

function square(number) { 
  return number * number;  
}; 
square(5);
//25

匿名函数

函数声明function在语法上是一个语句，但函数也可以由函数表达式创建，这样的函数没有函数名称（匿名）

let square = function(number) {
  return number * number
};
console.log(square(5))//使用console.log()输出变量square
//25

箭头函数

箭头函数可以说是相当地简便，不过觉得还是使用前面两种好，了解一下有这样的写法就好。（毕竟要是碰到个不知道这种写法的程序员你给他看他还要过来问你一个特别简单的问题）

const multiply = (x, y) => {
  return x * y;
}
const sum= (x, y) => x + y;//连{}和return语句都可以省掉
console.log(multiply(20, 4));
//80
console.log(sum(20, 4));
//24

本文地址：https://blog.csdn.net/weixin_45079619/article/details/107522400