【Vue】javascript学习篇1

学习博客在此，针对学习博客中自己不熟悉的地方在此做一个记录，以供日后参考

基础

• ECMAScript是JavaScript的标准，但实际上JavaScript的含义更大一些。JavaScript由以下三个部分构成：ECMAScript，DOM,BOM
• console.log.info.warn.error，都能输出相应等级的信息
• JS一共有5种数据类型：
  • String
  • Number
  • Boolean
  • undefined
  • null
• typeof 数据对没有初始化和没有声明的变量，会返回undefined
• null表示一个空对象，用typeof检查null会返回Object
• 转为字符串：String()或者（.toString());转为Number：Number()
• ==判断值是否相等；===判断值和类型是否都相等
• for(var 对象的key in 对象)，来遍历对象的属性
• JS基本类型保存在栈内存。
• 引用变量（对象）保存在堆内存，变量中保存的是对象在堆内存中的地址
• JS的所有参数传递都是按值传递的
• 对象的属性可以是任何值，包括函数，该函数叫做方法
• 解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象。
• 使用工厂模式创建对象，就是用函数创建对象，传进去对象的参数，在函数内创建对象，再返回即可
• 构造函数和原型函数参考学习博客原型函数就是类方法
• 构造函数用new调用，调用构造函数会立刻创建一个新对象
• in运算符，判断属性是否在对象中
• 将对象设为null可回收垃圾
• 声明提前：变量用var定义就能声明提前，函数声明方式创建的函数也能声明提前

数组

• 数组的创建：用对象：new Array()；用字面量：= [ ]
• push,pop,unshift(添加头）,shift（删除头）
• arr.forEach(函数)，传进去function(value,index,obj){}函数，第三个参数是数组本身
• arr.slice(start[,end])：获取子数组，从0开始，不包括end,-1代表倒数第一个，不影响原数组
• arr.splice(start,num)：删除指定子数组，对原数组产生影响
• arr.contact(arr1,arr2…)，连接多个数组，不会对原数组产生影响，返回新数组
• arr.join(String)，将数组转为一个字符串，以String为连接符，不会对原数组产生影响
• arr.reverse()，反转数组，对原数组产生影响
• arr.sort(function(a,b){})，排序数组，影响原数组;默认Unicode编码方式，可以自定义规则，返回值大于0才调换

正则

• 字面量创建：var 变量名=/正则表达式/[匹配模式(i,g,ig)](i是忽略大小写，g是是否全局匹配

var reg = /正则表达式/
var str = "str"
boolean result = reg.test(str)

• 实例
  • 检查一个字符串是否有字母：/[A-z]/
  • 检查一个字符串中除了数字是否有其他字符：/[^0-9]/

字符串与正则

• str.split(reg)：将一个字符串拆分为一个数组，返回数组
• str.search(reg)：搜索字符串中是否有指定内容，返回索引，没有返回-1
• str.match(reg)：提取出匹配的内容封装成数组返回
• str.replace(reg,‘str’)：将字符串中的内容替换为新的内容

正则量词

正则量词只对前边的一个内容起作用

• {n} ：正好出现n次
• {m,} ：出现m次及以上
• {m,n} ：出现m-n次
• +,*,?
• 如：/12{3,}3/ 匹配： 1222223
• /(12){2,}3/ 匹配： 1212123

我已贯穿旧版js!!

DOM对象

当网页加载时，浏览器会创建页面的文档对象模型DOM , HTML DOM模型被结构化为对象树

• Node节点——构成了HTML文档最基本的单元
  1. 文档节点：整个HTML文档，是根节点，操作其他节点的途径document
  2. 元素节点：各种标签
  3. 属性节点：标签属性，是元素节点一部分
  4. 文本节点：非HTML的文本都是文本节点，一般作为元素节点的第一个子节点
• 通过js可以更改文档节点的所有DOM元素，可以把学习博客当作一个速查宝典
• 获取鼠标事件中event.client - obj.offset获取的是块元素左上角点的坐标
• 事件冒泡：点击父子重叠的元素，事件会从子传递到父；
• 事件委托：将事件统一绑定给元素的共同祖先，在后代元素触发的事件会一直冒泡到祖先元素
• 一个事件可以绑定多个函数
• 事件传播分为“捕获，目标，冒泡”三个阶段。捕获阶段从外到内，然后从内到外触发

BOM

浏览器对象模型BOM使JS有能力与浏览器“对话”。

• 弹窗的类型：alert(),confirm(),prompt()
• 定时时间：setTimeout(ms)；setInterval(ms)
• 把学习博客当成‘素茶煲点’

高级语法

错误处理

• error是JS的一个内置类型，有name和message
• try-catch是处理异常的标准方式
• 通过throw抛出一个错误

JSON

JSON对象用于浏览器和服务器之间进行数据的交换，这些数据只能是文本。

• 键必须用引号括起来
• JSON.parse(JSON串)可以转为对象
• JSON.stringify(obj)可以转为JSON对象

Cookie

Cookie是一些数据，存储于电脑上的文本文件中。作用就是解决“如何记录客户端的用户信息”

document.cookie ="key=value"
var cookies = document.cookie

webstorage

webstorage是HTML5中本地存储的解决方案之一。分为sessionStorage，生命周期为当前窗口或标签页；和localStorage

localStorage.setItem(key,value)
localStorage.getItem(key)

闭包Closure

• 是块嵌套函数，父函数返回的是子函数，子函数可以操纵父函数作用域中的变量。

ECMAScript6新特性

• let关键字：不允许重复声明（用let就对了！）
• 解构赋值：用数组（对象）给接收变量围起来，接收数组或对象
• 高级字符串，支持换行符和以**${}**输出变量
• 在大括号里直接写入变量和函数，作为对象的属性和方法
• 箭头函数
  • 形参只有一个，小括号可以省略
  • 函数体只有一个语句，花括号可以省去
  • 箭头函数不会更改this的指向
• arguments不是新特性，实参被包裹成了对象
• 引入rest参数来获取函数的实参,实参被包裹成了一个数组，与argument类似

function add(...args) {
    console.log(args);
}
add(1, 2, 3, 4, 5);
//Array [1, 2, 3, 4, 5]

• spread扩展运算符：像是rest的逆运算，一个数组会被分解为它的各元素

迭代器

• ES6引入了 for … of 数组来循环数组，与for…in不同的是。前者循环变量数组元素，后者是下表
• 迭代器通过不断调用next方法来遍历数组，通过done属性判断是否已经循环结束
• 具体用法，参考学习宝典

生成器

• 生成器函数返回的结果是迭代器对象，调用next方法可以得到yield语句后的值。每调用一次next方法，执行一段代码

function * gen(){
	yield ..
}
let iterator = gen()
iterator.next()

Promise

Promise语法上是一个构造函数。语法形式

p = Promise(function(resolve,reject){
	resolve(value1);
	或：reject(value2);
})
或者
Promise( (resolve,refject) =>{
	resolve(value1);
	或：reject(value2);
} )

调用形式：

p.then(function(value){
	console.log(value);//value1
}).catch(function(value){
	console.log(value);//value2
})

Set

Set中的内容必须是独一无二的，有

let  s1 = new Set([1,2,3])
s1.has();s1.delete();
s1.add();s1.size;s1.clear()

Map

也是键值对的集合，但是“键”不限于字符串
size,get(),set(),clear(),has

class类

就像是其他语言一样的语法一样，构造方法是constructor

拷贝

浅拷贝：B复制了A，A修改，B跟着变
深拷贝：B复制了A，A修改，B不变

对象\数组的浅拷贝： B = A
数组的深拷贝： B = A.slice() A.contact()
对象的深拷贝：B = Object.assign({},A)

ECMAScript8新特性

async

async返回的是成功的Promise对象或者是失败的Promise对象

async function fun1(){
	return new Promise(function(resolve,reject){})
}

await

await必须写在async函数中，右侧表达式一般为Promise对象，如果promise失败了，会抛出异常，通过try…catch捕捉

const p = new Promise( (resolve,reject) =>{
	 resolve("用户数据")
})
async function fn(){
	try{
		let result = await p;
	}catch(e){}
}
fn()

对象方法拓展

• Object.keys()方法返回一个给定对象的所有可枚举键值的数组
• Object.values()方法返回一个给定对象的所有可枚举属性值的数组
• Object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组