一, 浏览器的主要构成部分
- 用户界面
- 浏览器引擎(负责窗口管理、Tab进程管理等)
- 渲染引擎(俗称内核，负责HTML解析、页面渲染 (绘制网页是每帧16毫秒由上而下一屏一屏绘制的) )
- JS引擎(俗称js解析器 负责分析,优化,垃圾回收js代码，如Chrome和Nodejs采用的V8 (v8引擎是将js代码直接转化成机械代码（0/1）来执行，以速度快而闻名) )
浏览器翻译的过程分为编译性语言和解释性语言
编译性语言：翻译方式：通篇翻译(浏览完所有代码通篇翻译）翻译成一个文件，然后系统执行该文件。如c语言翻译成 .obj文件 。java 编译时为.java文件然后翻译成.class文件。
不足：不能跨平台。（window生成的文件放Linux上不能用）。c语言，c++，
解释性语言：翻译方式：翻译行，执行一行不生产一个文件。有：javascript，php
java是先通过 --- javac指令编译成 --- .class 再通过 --- java虚拟机jvm 解释执行 。所以java既不是编译性语言也不是解释性语言它是oak语言。
多数人用window系统，linux系统多用于服务器（稳定）
1. js是单线程运行的,浏览器是多线程运行的,
2. 异步任务：setTImeout、setInterval、Promise、process.nextTick(Node.js)、Ajax
es6之前是如下 es6引入microtask的概念 为此异步任务分为task (宏观任务:setTImeout、setInterval、ajax)和microtask(微任务:MutationObserve、promise)。
3. DOM能更快的被渲染出来。另外Vue.js nextTick使用promise,是个微任务最新版本数据变更的时候采用的是promise和MutationObserver创建微任务：https://github.com/vuejs/vue/...
原文参考 https://www.cnblogs.com/mike-mei/p/11989145.html
二, js 分类: ECMA , DOM, BOM
ECMA : ECMA规定了js的标准语法和核心基础知识
DOM : 文档对象模型, 对页面元素操作,图片的大小,及隐藏
BOM : 浏览器对象模型,操作浏览器窗口的,eg:弹框,页面跳转,获取分辨率...
三, 作用域和作用域链
定义:作用域就是变量与函数的可访问范围
全局作用域, 局部作用域, 块级作用域
全局作用域 : 1.函数外生命的变量 2. 未声明的变量 3. window 下的属性
局部作用域: 只在作用域内有效eg:函数内声明的变量
块级作用域: 由来: 1. 变量提升导致 局部变量覆盖全局变量 2. 循环变量在结束循环后会泄露成为全局变量
var aa="东方时";function fn(){console.log(aa);}fn() //东方时 var aa="东方时";function fn(){ console.log(aa); var aa="new变量" }fn() //undefined
块级作用域: 由来: 1. 变量提升导致 局部变量覆盖全局变量 2. 循环变量在结束循环后会泄露成为全局变量
let和const命令都涉及块级作用域 块级作用域允许声明函数只在使用大括号的情况下成立，如果未使用大括号报错
if (true) function func2() {} //报错 if (true){ function func2() {} //不报错}
es6之前允许变量名重复, 但 es6 let 声明的变量名称不可以重复
作用域链: 内部函数通过一层一层向外查找变量形成的链条叫作用域链 (取最近的一个值)
四, 创建对象的方法:
1. 字面量 var obj1 = { name:"userName"};
2. 系统构造函数 var obj2 = new Object(); obj2.name = "userName";
3. 工厂模式: function person1(name,age) { var obj= new Object(); obj.name=name; return obj } var obj3 = person1("赵珍珍",18)
4. 自定义构造函数 function person2(name,age) { this.name = name; this.age = age; } var obj4 = new person2("美力",18);
5. 原型链创建 function person3 () {} person3.prototype.name = "zzz"; var obj5 = new person3();
6. 混和 function person4 (name) { this.name = name; } person4.prototype = { constructor:person4 ,age:18} ; var obj6=new person4("zhenrow");
备注:构造函数需要new关键字 实例化对象
五, object对象的属性和方法
5.1 属性: Object.prototype._proto(通常查看对象下的属性和方法) 和 Object.prototype.constructor (通常用于判断变量的类型是 object 还是 array)
5.2 方法:
5.2.1 Object.assign(target,...source) 复制,合并对象(合并后会改变target原对象) 属于浅拷贝
eg:const tar={a:1,b:2}; const sou1={b:3,c:4}; const sou2={b:5,d:6}; const obj= Object.assign(tar,sou1,sou2);打印 tar= obj= {a:1,b:5,c:4,d:6 };
5.2.2 Object.defineProperty(obj, prop, descriptor); 添加修改对象的属性
obj:被修改的对象,
prop:属性名称
descriptor:描述{
value: ,//属性值
writable: true,//是否可写
enumerable:false,//出现在枚举中
configurable:false,
set(){}, get(){}
}
六, js 判断数据类型方法及 缺点 ( typeof，instanceof，constructor，Object.prototype.toString.call() )
1. typeof
console.log(typeof 2); // number
console.log(typeof true); // boolean
console.log(typeof 'str'); // string
console.log(typeof function(){}); // function
console.log(typeof []); // object
console.log(typeof {}); // object
console.log(typeof null); // object
console.log(typeof undefined); // undefined
缺点: 无法判断 [] {} 和null []数组和null 数据类型在 typeof 中被解释为
2. instanceof
console.log(2 instanceof Number); // false
console.log(true instanceof Boolean); // false
console.log('str' instanceof String); // false
console.log([] instanceof Array); // true
console.log(function(){} instanceof Function); // true
console.log({} instanceof Object); // true
console.log(undefined instanceof Undefined); // Undefined is not defined
console.log(null instanceof Null); // Null is not defined
console.log(new Number(2) instanceof Number); // true
console.log(new Boolean(true) instanceof Boolean); // true
console.log(new String('str') instanceof String); // true
缺点: instanceof 定义: 判断一个对象是否是数据类型的实例。 2， true ，'str'不是实例，所以判断值为false 无法判断null和undefined
3. constructor
console.log((2).constructor === Number); // true
console.log((true).constructor === Boolean); // true
console.log(('str').constructor === String); // true
console.log(([]).constructor === Array); // true
console.log((function() {}).constructor === Function); // true
console.log(({}).constructor === Object); // true
缺点: 如果原型被更改则类型也被更改 eg:
function Fn(){};
Fn.prototype=new Array();
var f=new Fn();
console.log(f.constructor===Fn); // false
console.log(f.constructor===Array); // true
4. Object.prototype.toString.call()
var a = Object.prototype.toString;
console.log(a.call(2)); "[object Number]"
console.log(a.call(true)); "[object Boolean]"
console.log(a.call('str')); "[object String]"
console.log(a.call([])); "[object Object]"
console.log(a.call(function(){})); "[object Function]"
console.log(a.call({})); "[object Array]"
console.log(a.call(undefined)); "[object Undefined]"
console.log(a.call(null)); "[object Null]"
完美
//// 格式化金额,保留2位小数(四舍五入),补0, 添加千位符号
parseInt('13.14g');//13
parseInt(0.00000060);//6
Math.trunc('13.14g');//NaN
Math.trunc(0.00000060);//0
Math.trunc(0.00000060);//0
Math.ceil(13.46) = Math.ceil(13.68) = Math.ceil(13.5) = 14;
Math.floor(13.46) = Math.floor(13.68) = Math.floor(13.5) = 13;
Math.round(13.46) = 13 ; Math.round(13.68) = Math.round(13.5) = 14;
parseInt() 小数部分去掉，只保留整数部分 函数解析一个字符串参数,返回第一个参数的整数。如果出现连续的超过6个及其以上连续的6个0会自动改成科学计数法
Math.trunc() 小数部分去掉，只保留整数部分,如果是字符串则转成数值再去掉
Math.ceil() 向上取整
Math.floor() 向下取整
Math.round() 四舍五入
//// 位运算符在JS中的妙用
console.log(~~13.46) == console.log(~~13.68) ==console.log(~~13.5) == // 13 相当于Math floor 但>>>不可以对负数取整
//// 数组的声明
var arr1=[1,2];
var arr2=new Array(1,2,3);
var arr3 =Array of(1,2,3,4);
var arr4=Array from({0:1,1:2,2:3,length:2})//伪类数组,将数组转成数组,有length存在时 读取length的长度
注意: new Array(empty*5);表示数组的长度[] Array of (5) 表示数组的值//[5]
//// 截取字符串
var a="/s/d"; console.log(a.substr(0,a.indexOf("/",1))) // 得到/s
//// json数组 合并去重保留后面的
var songs = [
{name:"羽根",artist:"羽根"},
{name:"晴天",artist:"晴天1"},
{artist:"周杰伦",name:"周杰伦1"}
];
var arr = [
{name:"羽根",artist:"羽根2"},
{name:"晴天",artist:"晴天2"},
]
for (let i = 0; i < arr.length; i++) {
songs.push(arr[i])
}
function unique(songs){
let result = {};
let finalResult=[];
for(let i=0;i<songs.length;i++){
result[songs[i].name]=songs[i];
}
for(let item in result){
finalResult.push(result[item]);
}
return finalResult;
}
console.log(JSON.stringify(unique(songs)));
//[{"name":"羽根","artist":"羽根2"},{"name":"晴天","artist":"晴天2"},{"artist":"周杰伦","name":"周杰伦1"}]
//// 正则 替换<括号
this.detailsForm.map(item => {
if(item.indexOf("<") != -1) {
let trunItem = item.replace(/</g, '<');
this.lists.push(trunItem);
} else {
this.lists.push(item);
}
})
//// js获取对象的key
var obj = {"name":"名字","age":"18"};
var temp = "";
for(var i in obj){//用javascript的for/in循环遍历对象的属性
temp += i+":"+obj[i]+"
";
}
console.log(temp);//结果："name":"名字","age":"18"