js 学习笔记-----每周更新

一 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

注意

1. 由于JavaScript允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题，虽然函数内部并不需要这些参数：

2. 传入的参数比定义的少也没有问题：

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小程序开启以后第一次进入页面执行一次

• 注意：受用取消监听事件以后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钩子只在打开小程序第一次进入页面时执行所以会串数据

7.请求封装成方法 在生命周期钩子里使用