一 JavaScript简介
1.JavaScript语言的标准,被称为ECMAScript标准 简单来说就是ECMAScript是一种标准语言,而javascript是网景公司对ECMAScript标准的一种实现
2.ECMAScript第一版标准发布于1997年
js全栈学习
1.js严格区分大小写
2.关系运算符(比较运算符)[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hdNHawvW-1594290720164)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\1594198194665.png)]
3.数据类型
Number | 不区分整数和浮点数,同意用Number类型表示 | NaN表示not a number 当无法为计算出结果时用NaN表示 | Infinity表示无限大 ,当数值超过JavaScript的Number所能表示的最大值时,就表示为Infinity | + - * / %(求余) | |
---|---|---|---|---|---|
string | |||||
布尔值 | 运算符&& || ! 比较运算符看2. | 第一种是== 比较,它会自动转换数据类型再比较,很多时候,会得到非常诡异的结果;第二种是=== 比较,它不会自动转换数据类型,如果数据类型不一致,返回false ,如果一致,再比较。 | 另一个例外是NaN 这个特殊的Number与所有其他值都不相等,包括它自己:NaN === NaN; // false | 唯一能判断NaN 的方法是通过isNaN() 函数:isNaN(NaN);//true | 这不是JavaScript的设计缺陷。浮点数在运算过程中会产生误差,因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等 |
null与undefined | null为空,判断null类型使用原型判断Object.prototype.toString.call(null) | undefined声明了未定义 | |||
数组 | |||||
对象 |
4.变量
变量名是大小写英语 数字 $ 和_的组合 ,不能以数字开头 ,不能是JavaScript关键字 例如 if while等
5.严格模式下 ‘use strict’;
强制通过var 声明变量 为生命将报错 ‘use strict’是字符串,在不支持的浏览器下会被当成字符串 支持的浏览器下将开启strict模式运行
6.字符串
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wnBdw2cw-1594290720170)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\1594200498091.png)]
'I\'m \"OK\"!'///\'吧'转义成单纯的’输出 \" 吧" 转义成单纯的" 输出
//结果为I'm "OK"!
7.数组
1.数组可以通过索引吧对应的元素修改为新的值
var arr = ['A', 'B', 'C'];
arr[1] = 99;
arr; // arr现在变为['A', 99, 'C']
如果索引超出范围,会引起数组大小的变化
var arr = [1, 2, 3];
arr[5] = 'x';
arr; // arr变为[1, 2, 3, undefined, undefined, 'x']
2.数组处理函数
arr.indexOf(10)---------元素10的索引值string类型页可以用
arr.slice()--------从头到尾截取所有元素 参数1–起始索引(包含) 参数2结束位置(不包含)
**arr.push(‘A’)------向数组末尾添加若干元素 **返回数组长度
arr.pop()------把arr最后一个元素删掉 返回被删除的元素 空数组返回undefined
arr.unshift(“A”)-------向arr头部添加若干元素 返回数组长度
arr.shift() ------- 删除第一个元素 返回删除元素
arr.sort()-------按照默认顺序排序 返回排序后的数组
arr.reverse()------倒序数组元素 返回新数组
arr.splice()-----从指定索引开始删除若干元素 参数1–起始索引(不包含) 参数2–删除个数 参数3–要添加的元素 添加元素参数1起始位置开始添加
删除时返回删除元素 添加时返回空数组
arr.concat([1,2,3])-----把当前arr与了另一个arr连接起来 返回新数组 本质并不是修改原数组是返回一个新数组
**arr.join()----把当前每一个元素都应指定字符串连接起来 ** 返回连接后的字符串
var arr = ['A', 'B', 'C', 1, 2, 3]; 如果arr的元素不是字符串 将自动转换为字符串后连接
arr.join('-'); // 'A-B-C-1-2-3'
3.多为数组
var arr = [[1, 2, 3], [400, 500, 600], '-'];
console.log(arr[1][1])///500
4.对象
var xiaohong = {
name: '小红',
'middle-school': 'No.1 Middle School'
};
方位属性的方法:
1.打点访问:这个属性必须时有效变量
对象.属性名//属性值
2.当属性名不是有效的变量时,需要用’ '括起来 ,也不能打点访问,需要用中括号[ ]
xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小红'
xiaohong.name; // '小红'
3.实际上JavaScript对象的所有属性都是字符串,不过属性对应的值可以是任意数据类型。
4.js规定访问不存在的属性不报错,返回undefined
5.新加对象属性: js对象是动态的,可以自由的给对象添加或删除属性
var xiaoming={
name:'小明'
};
xiaoming.age=18///新增一个age属性
delete xiaoming.age;//删除age属性
delete xiaomimg.school;//删除一个不存在的属性也不会报错
5.检测一个对象是否拥有某个属性 使用in操作符 和 hasOwnProperty()
方法:
'name' in xiaoming;//true
'grade' in xiaoming;//false
**注意 : **in操作符判断一个属性是否存在,这个属性也包含xiaoming继承来的属性
因为toString
定义在object
对象中,而所有对象最终都会在原型链上指向object
,所以xiaoming
也拥有toString
属性。
要判断一个属性是否是xiaoming
自身拥有的,而不是继承得到的,可以用
hasOwnProperty()
方法:
var xiaoming = {
name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false
.8.if(){ }else if(){ }else{ }
var s = '123';
if (s.length) { // 条件计算结果为3
//
}
JavaScript把null
、undefined
、0
、NaN
和空字符串''
视为false
,其他值一概视为true
,因此上述代码条件判断的结果是true
。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CibjWQ2i-1594290720172)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\1594279280657.png)]
9.for循环
for比较常用的是使用利用 索引来遍历数组;
**break;**退出循环
1.for …in 把一个对象所有属性一次循环出来
var 对象 = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in 对象) {
console.log(key); // 'name', 'age', 'city'
}
要过滤掉对象继承属性使用hasOwnProperty()
var o = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in o) {
if (o.hasOwnProperty(key)) {
console.log(key); // 'name', 'age', 'city'
}
}
Array也是对象 for in 直接循环出每一个元素索引
请注意,for ... in
对Array
的循环得到的是String
而不是Number
。
while 循环只有一个判断条件,条件满足,就不断循环,条件不满足时则退出循环。比如我们要计算100以内所有奇数之和,可以用while循环实现:
var x = 0;
var n = 99;
while (n > 0) {
x = x + n;
n = n - 2;
}
x; // 2500
do … while
最后一种循环是do { ... } while()
循环,它和while
循环的唯一区别在于,不是在每次循环开始的时候判断条件,而是在每次循环完成的时候判断条件:
var n = 0;
do {
n = n + 1;
} while (n < 100);
n; // 100
10.练习 遍历修改数组属性值
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VpENBbko-1594290720175)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\1594282149139.png)]
11. Map ES6新增
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
1. m.get('Bob') / /95 根据名字查找对应值
2. m.set('admin',35) 添加新的key --- value
3. m.has('admin'); //true 判断是否存在admin
4. m.delete('admin') ///删除key'admin'
12 . set ES6新增
set和map 类似 ,也是有一组key 的集合 ,但不存储value ,key不能重复
重复元素在Set中被自动过滤
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
s.add(4)///向set中添加4
s.delete(3)//删除 set 中3
13. for …of
用于解决for …in 循环的历史遗留问题 ,它遍历的是对象属性名( 可以是索引 ) , 一个Array
数组实际上也是一个对象,它的每个元素的索引被视为一个属性。
for … of 循环集合本身的元素
var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
console.log(x); // 'A', 'B', 'C'
}
更好的迭代方法: 直接使用giterable内置的forEach方法,
a.forEach(function (element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
console.log(element + ', index = ' + index);
});
结果
A, index = 0
///B, index = 1
///C, index = 2
14.函数
函数体内出现return时函数执行完毕返回结果 ,如果没有return 函数会执行完所有返回undefined
注意
-
由于JavaScript允许传入任意个参数而不影响调用,因此传入的参数比定义的参数多也没有问题,虽然函数内部并不需要这些参数:
-
传入的参数比定义的少也没有问题:
abs(); // 返回NaN
**arguments ** JavaScript还有一个免费赠送的关键字arguments
,它只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数(即使函数不定义任何参数)。arguments
类似Array
但它不是一个Array
:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GiZhAE4m-1594290720177)(C:\Users\admin\AppData\Roaming\Typora\typora-user-images\1594286089674.png)]
15 rest ES6新增 用来获取未定义传入参数 rest以数组形式接受多余的参数 ,没有多余的时候返回空数组
function foo(a, b, ...rest) {
console.log('a = ' + a);
console.log('b = ' + b);
console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
foo(1);
// 结果:
// a = 1
// b = undefined
// Array []
二 js基础经验
1.全局变量var 退出页面清除数据
2.onLoad小程序开启以后第一次进入页面执行一次
例: 多个页面开webSocket时监听事件放onShow里面
3.改变对象属性值
let obj=要改变的对象
obj.对象属性=obj.对象属性.slice(开始位置下标,结束位置下标) 包含开始不包含结束
4.节流实际应用
///首先声明payFlag=false
if(this.data.payFlag){
retrue;
}
this.data.payFlag=true
///被节流的功能操作
操作完更新payFlag为false
5.使用函数注意异步队列
- console.log()执行顺序
6.webSocket
问题 : 一个程序多个页面使用webSocket时候 容易串页面数据
解决方案 : 建立链接 监听事件都放在onShow钩子函数里边 是因为onLoad钩子只在打开小程序第一次进入页面时执行所以会串数据