js

访问dom元素

document.querySelector(’[aaa=“aaa”]’)

搜索与传入的选择器匹配的元素，即使有多个，也只返回一个

document.querySelectorAll(’[aaa=“aaa”]’)

匹配所有

返回值：NodeList对象

DOM元素返回值:节点列表（！数组）

//节点列表（！数组）向后兼容
var arr=[].slice.call(obj)

document.getElementByTagName(“div”)

返回值：HTMLCollection对象

动态节点：修改DOM，HTMLCollection内容自动变化

转化为数组，可通过数组方法，即使修改DOM，数组中的值也不会发生变化

function huoqu(){
  //该部分一定要放在函数体内
  var G=document.getElementById('value').value;
  console.log(G);
}

改变src属性

element.src=".jpg"

element.setAttribute(‘src’,’.jpg’)

element.getAttribute(‘属性名’)

textContent:指向元素内部的文本（！html)

element.textContent=‘aa’

操作类名

document.body.classList.add(".aaa")

document.body.classList.remove(".aaa")

函数

function setDetails(img,title){
  'use strict'
  element.setAttribute('src','.jpg')
  element.textContent='aa' 
}
function img(list){
  'use strict'
  element.getAttribute('属性名')
}
function title(list){
  'use strict'
  element.getAttribute('属性名')
}
function aa(){
  'use strict'
  
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8rwy93uk-1575444965778)(assets/1574903799958.png)]

事件监听器：

两个参数：事件名，函数

DOMe.addEventListener('click',function(){})

键盘事件

keydown按下事件

keyup释放事件

1. 字母键：

   还会触发keypress事件

2. 功能键：

event.keyCode

=== 严格等于

==自动进行类型转换

==，+：强制类型转换

事件对象：event

event.preventDefault() 阻止默认事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vREVc9vy-1575444965779)(assets/1574904453703.png)]

延时器setTimeout(函数,时间)

迭代数组

调用数组的每个元素，并将元素传递给回调函数。

array.forEach(function(currentValue, index, arr), thisValue)

bind():函数的方法,this指向bind的参数

返回值：函数

set:

for of :遍历数组，set,不能遍历字符串，不能迭代循环

闭包：

作用域外访问作用域内

局部变量当成全局变量

一个函数定义在另一个函数内：可使用其的全部参数，变量

function Animal(){
    var leg=4;
    this.run=function (){
        leg=3;
    }
    this.aaa=function (){
        console.log(leg)
    }
}
var cat=new Animal ()
cat.run();	//
cat.aaa();	//3

子函数引用父函数的变量，父函数被关联的变量便不会被释放

返回值保存给全局变量

关联return后的函数的内存地址

ES5构造函数

普通函数可当构造函数用

构造对象

原型

原型：prototype

object类型

函数特有的属性继承

不是自己的属性和方法，

function f(){
    //自身的属性，不是给新对象添加的
    var leg=4;
    //指向当前对象
    //实例属性，方法，对象自身的
    this.leg=3;	
}
//
f.aa={}
//原型属性，方法
f.prototype.eat=function(){
    
}
//实例对象
var aa=new f()

_proto_

每个对象（包括函数）都有__proto__属性

所有对象都默认继承Object根对象

console.log(f.__proto__===F.prototype)

继承

var animal=cat.__proto__=new Cat().__proto__=Cat.prototype=new Animal()

call/apply

函数的方法

普通对象没有

继承的属性方法为：实例属性方法

当前函数的this指向call方法的第一个参数

function f(){
    
}
//函数的调用方式
f()
f.call()

function Run(){
    this.run =function (){
        
    }
}

var cat={}
//cat继承A
Run.call(cat)

ES6的继承

使用关键字 extends

构造函数传参：在构造器中接收

继承传参：super

//命名空间
class Animal{
    //实例属性方法,写在构造器中
    constructor(){
        this.leg=4;
        this.shout=function(){
            
        }
    }
    //原型属性
    run(){
        
    }
}
//{}里的内容为Cat的属性方法
//不写会继承父类的构造器
class Cat extends Animal{
    constructor(leg){
        super(leg)
    }
}

es5

没有命名空间

原型链上就近查找：实例上没有再去原型

设计者模式

单例模式

function Cao(){
    if(!Cao.obj){
        Cao.obj={
            account:"1111",
           	pwd:"111"
        }
    }
    return Cao.obj
}

let aa=new Cao()
aa.pwd="22"
let bb=new Cao()
console.log(bb.pwd)

13、require和import的本质区别是什么*

• 遵循规范
  • require 是 AMD规范引入方式
  • import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法
• 调用时机
  • require是运行时调用，所以require理论上可以运用在代码的任何地方
  • import是编译时调用，所以必须放在文件开头
• 解析过程
  • require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量
  • import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require

模块ES5

相关函数集合，部分可被外部函数访问，其余只能被模块内部访问

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ksp50FOt-1575444965780)(assets/1574989113535.png)]

立即调用的函数表单式IIFE

()()

可传参

不创建额外的全局变量

某些代码只运行一次

全局命名空间：储存函数，变量

函数内声明，避免被外界代码，访问，覆盖

IIFE修改对象

初始化代码

修改作为参数传入的对象

function addClick(){
  
}
//
function initEvent(){
  var arr=getArray()
  arr.forEach(addClick)
}
initEvent()
//通过实参接受数组
function initEvent(arr){
  arr.forEach(addClick)
}
var arr=getArray()
initEvent(arr)
//IIFE模式
(function initEvent(arr){
  arr.forEach(addClick)
})(getArray())

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5LIPx29k-1575444965780)(assets/1574999382458.png)]

可以把任何东西传入IIFE，然后修改

---

datastore.js

(function (window){
  'use strict';
  var App=window.App || {};
  /**构造函数：工厂模式
  *创建和定制新的对象。
  *在构造函数内部，通过this关键字调用这个新对象
  */
  function DataStore(){
    this.data={}
  }
  /**DataStore实例只能直接操作DataStore的data属性
  *提供接口
  */
  //原型属性
  DataStore.protype.add=function (key,val){
    this.data[key]=val
  }
  App.DataSrore=DataStore;
  //将App对象绑定到全局
  window.App=App;
})(window)

//实例对象
var one=new App.DataStore()

区分构造函数和普通函数：

调用时是否使用了new关键字。

new会告知js创建一个新对象，将this指向新对象，然后返回该对象。

构造函数的原型

1. 所有通过构造函数创建的实例都可访问其属性和方法的共享仓库：构造函数的prototype属性
2. new关键字在实例和构造函数的prototype属性间建立特别的连接。
3. 实例可访问protype属性，protype属性中this指向当前对象

模块ES6

一个js文件就是一个模块

---

---

Proxy:代理对象

new Procy(target,handler)

target:原始对象

handle:处理器

对象类型，代理逻辑通过设置到handle的属性方法中完成

var handle={
  set:function (obj,key,val){
    obj[key]=val
  }
}

---

---

内置对象

直接量：string,number,boolean

使用两块内存保存名值对，各自保存各自的值

直接量的封包与解包：

直接量不是对象，没有属性

Function

JSON

Error

Date

Boolean

function类型

Boolean自身的属性

prototype

Boolean.prototype的属性

constructor

toString

valueOf

Object

assign:

类似jQuery中extend,将一个对象中的属性复制到另一个对象

Object.assign(target,…,sources)

getOwnPropertySymbols

is

String

String自身属性

prototype

fromCharCode

创建由Unicode值所对应的字符组成的字符串

var s=String.fromCharCode(97,98,99) //abc

String.prototype中的属性

constructor

默认指向String对象本身

toString

返回字符串本身的值

valueOf

返回字符串本身的值

charAt

获取指定位置的字符

var a=‘hello’;

a.charAt(1) //e

charCodeAt

获取指定位置的字符Unicode

var a=‘hello’;

a.charAt(1) //101

concat

字符串连接在一起组成一个新字符串

var a=‘hello’; //不变

var a1=a.concat(‘ECMAScript’,’!’); //

indexOf

查找指定字符/串

1. 要查找指定字符/串
2. 可选，查找的起始位置，省略则从第一个字符开始查询
3. 找到返回序号(0-),否则返回-1

var s=‘prototype’;

s.indexOf(‘o’);

s.indexOf(‘ot’,3) //

lastIndexOf

从后往前找

2. 查找字符串的结束位置

localeCompare

比较

‘a’.localeCompare(‘b’) //-1

‘b’.localeCompare(‘a’) //1

‘a’.localeCompare(‘a’) //0

match

匹配指定内容(字符串/正则表达式)

‘hello js’.match(“js”) //[“js”]

‘hello js’.match(/js/i) //[“js”]不区分大小写

‘hello3 js5 111’.match(/\d+/g) //[“3”,“5”,“111”]查找全部符合条件的内容

replace

将指定内容替换为新内容，

默认替换第一个符合条件的内容，使用正则表达式可用g来替换全部符合条件的内容

不修改原对象

var s=‘hello’;

s.replace(‘e’,‘E’)

“ped:12345”.replace(/\d/g,"*") //pwd:*****

search

使用正则表达式进行查找，不能指定起始位置，不能使用g标示

slice

截取

两个参数：起始/结束位置

大于0，从前计数

大于0，从前计数

var s=“hello js”

s.slice(6,7) //j

s.slice(6,-1) //j

substring

截取

两个参数：起始/结束位置

如结束位置在起始位置前，自动调换

参数小于0则按0处理

“www.excelib.com”.substring(3,0) //www

“www.excelib.com”.substring(3,-4) //www

substr

1. 起始位置，负数时从后向前计数
2. 要截取的长度

split

按指定分隔符将字符串转换为字符串数组

1. 分隔符，不为空则用它分割字符串，为空则按字符分割
2. 返回数组中元素的个数，可选，省略则分割后的元素全部返回

“excelib”.split("") //[“e”,“x”,“c”,…]

“excelib”.split("",5) //[“e”,“x”,“c”,…]

toLowerCase

将字符串转为小写

“hhHH”.toLowerCase()

toLocaleLowerCase

toUpperCase

将字符串转为大写

toLocaleUpperCase

trim

去掉字符串中头尾的空格

" hello 张三丰 ".trim()

includes:

包含

repeat(num)

将字符串内容重复

String创建对象实例的属性

length

长度

类似数组，属性名为0-(length-1),属性值为序号对应的字符

使用该属性可将字符串当字符数组来使用

var s=“www.ec”;

s.length //

s[3] //

Number

function类型的对象

new Number(123)

Number自身的属性

prototype

MAX_VALUE

最大数

MIN_VALUE

最小数

NaN

不是数字

NEGATIVE_INFINITY

-Infinity负无穷大

POSITYVE_INFINITY

Infinity

Number.prototype的属性

constructor

toString

返回数字的字符串形式，可指定要转换为几进制数，默认十进制

var n=11;

n.toString(2) //1011

(255).toString(16) //ff

toLocaleString

valueOf

返回对象的直接量

toFixed

指定保留几位小数

toExponential

科学计数法

toPrecision

转换为指定位数

Math

RegExp

Array

array对象

of

在浏览器中查看对象的属性

使用object的getOwnPropertyNames方法获取浏览器中对象自身的所有属性

对function类型的对象，

1. function自身的属性
2. function.prototype包含的属性
3. function创建的实例对象的属性

Object.getOwnPropertypeNames(String)

Object.getOwnPropertypeNames(String.prototype)

prototype

MAX_VALUE

最大数

MIN_VALUE

最小数

NaN

不是数字

NEGATIVE_INFINITY

-Infinity负无穷大

POSITYVE_INFINITY

Infinity

Number.prototype的属性

constructor

toString

返回数字的字符串形式，可指定要转换为几进制数，默认十进制

var n=11;

n.toString(2) //1011

(255).toString(16) //ff

toLocaleString

valueOf

返回对象的直接量

toFixed

指定保留几位小数

toExponential

科学计数法

toPrecision

转换为指定位数

Math

RegExp

Array

array对象

of

在浏览器中查看对象的属性

使用object的getOwnPropertyNames方法获取浏览器中对象自身的所有属性

对function类型的对象，

1. function自身的属性
2. function.prototype包含的属性
3. function创建的实例对象的属性

Object.getOwnPropertypeNames(String)

Object.getOwnPropertypeNames(String.prototype)

Object.getOwnPropertypeNames(new String())