js拓展-Dom与事件，字符串，数组方法，object对象，作用域

js-扩展-Dom与事件

```text

# dom 文档对象模型，document object model

### 获取dom（js中的选择器）

js

let list=document.getElementById('list')

let liReds=document.getElementsByClassName('liRed')//collection集合，拥有和数组几乎完全一致的方法等

let lis=document.getElementsByTagName('li')//collection集合，可以理解为伪数组

### dom都可以做什么？

#### 1.改变html的输出流(说人话：可以把内容输出到页面上)

js

document.write(new Date())

#### 2.改变html的内容

js

liReds[1].innerHTML='哈哈哈'

#### 3.改变html属性

js

list.title='12345678'

#### 4.改变html样式

js

liReds[1].style.color='red'

#### 5.使用事件

鼠标事件：onmouseover,onmouseenter,onmousedown,onmouseup,onmousewheel,onmousemove,onmouseleave,onmouseout,onclick

键盘事件：onkeydown,onkeyup,onkeypress(不咋用)

窗口事件：onload,onscroll 滚动事件

表单事件：onfocus 获得焦点， onblur 失去焦点， onsubmit 提交， oninput ，onchange

```

## /js-扩展-onblur、oninput、onchange

```text

### onchange只有在元素发生改变时才会运行，onblur只要失去焦点就运行，oninput 事件在用户输入时触发。

js

let ipt=document.getElementById('ipt')

let  screen=document.getElementById('screen')

ipt.oninput=function () {

screen.innerHTML=ipt.value

}

ipt.onchange=function () {

console.log(111)

screen.innerHTML=ipt.value

}

ipt.onblur=function () {

console.log(111)

screen.innerHTML=ipt.value

}

```

## /js-扩展-字符串

```text

### 字符串的声明

js

let str1=''

let str2=""

let str3=`是Es6的新语法`

### charAt()返回在指定位置的字符,空格也占位置,几乎不用，用str[3]来代替

js

let str4="I am a student!"

console.log( str4.charAt(3))

console.log(str4[3])

### concat 连接两个字符串，生成新的字符串,一般不用，用+号更好

js

console.log(str4.concat(str3))

### JavaScript奇技淫巧之快速把数字转换成字符串

js

let num=123

console.log(num+'')

### endsWith()与startsWith()

endsWith() 判断当前字符串是否已指定字符串结尾,区分大小写，返回布尔值

startsWith()判断当前字符串是否已指定字符串开头,区分大小写，返回布尔值

js

let str4="I am a student!"

console.log(str4.endsWith('nt!'))

console.log(str4.startsWith('I'))

### indexOf返回某字符串在当前字符串中首次出现的位置,如果没有，则返回 -1

let str4="I am a student!"

console.log(str4.indexOf('a'))

### lastIndexOf() 使用方法遇上相同，返回字符串在当前字符串中最后出现的位置

### includes 查找字符串中是否存在指定的字符串

js

let str4="I am a student!"

console.log(str4.includes('a'))

### match 查找到一个或多个正则表达式的匹配

js

let str4="I am a student!"

console.log(str4.match(/\ba\b/))//'\b'字符边界

console.log(str4.match(/a/g))

console.log(str4.match(/b/g))//不加g，查找到第一个结果就结束并输出，加了g，找到一个不结束，继续找，直到把所有满足条件的字符串都出找出来位置，如果找不到，则输出null

### repeat 复制字符串指定的次数，并连接在一起返回

js

let str4="I am a student!"

console.log(str4.repeat(3))

### replace在字符串中查找对应的子串，然后替换成新内容,生成新字符串，

js

let str4="I am a student!"

console.log(str4.replace("a",'b'))//正则后面可以加g，则所有满足条件的字符串都将被替换

### replaceAll

js

let str4="I am a student!"

console.log(str4.replaceAll("a",'b'))//不能用正则，所有a都将被替换

### search查找字符串中满足正则的字符串，返回索引

js

let str5="abcdeFG1234567higklmn"

console.log(str5.search(/\d{7}/))

### slice从字符串中截取某部分

js

let str5="abcdeFG1234567higklmn"

console.log(str5.slice(7,14))

### split以某字符为界限，切割字符串，生成新数组

js

let str5="abcdeFG1234567higklmn"

console.log(str5.split('')) //以空为界限切割字符串

### substring() 从字符串中提取指定两个索引间的字符串

js

let str5="abcdeFG1234567higklmn"

console.log(str5.substring(7,14))

### substr() 从字符串中，从指定位置，提取指定数量的字符串

js

let str5="abcdeFG1234567higklmn"

console.log(str5.substr(7,14))

### toLowerCase生成新字符串，把原来的所有字母改为小写

js

let str5="abcdeFG1234567higklmn"

console.log(str5.toLowerCase())

### toUppercase把原来的所有字母改为大写

js

let str5="abcdeFG1234567higklmn"

console.log(str5.toUpperCase())

### trime()去掉字符串两边的空格

js

let str6=' abc def '

console.log(str6.trim())

### toString，将元素变成字符串形式

js

let a =123

console.log(a.toString())

console.log(String(a))

console.log(a+'')//最简

```

## /js-扩展-字符串-练习

```text

### 写一个函数，可以生成随机的颜色

js

function randColor() {

return`rgb(${parseInt(Math.random()*256)},${parseInt(Math.random()*256)},${parseInt(Math.random()*256)})`

// return "rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+')'

}

list.style.background=randColor()

// list.style.color=randColor()

/* //相同颜色

let color=randColor()

list.style.background=color

list.style.color=color*/

```

## /js-扩展-数组方法

```text

### unshift前面添加，shift前面删除，push后面添加，pop后面删除，splice任意位置的添加和删除

### concat()连接两个或更多数组，并返回结果  ， A.concat(B)

### copyWithin 从数组的指定位置拷贝元素到另一个指定位置

### every()判断数组中，是否所有元素都满足回调函数中的条件，满足返回true

js

let arr=[2,4,6,9,10]

console.log(arr.every(item =>item%2===0))

//能被4整除，不能被100整除，或者被400整除是闰年

let years=[2000,2004,2008]

console.log(years.every( item=> item%4===0&&item%100!==0||item%400===0))

### 过滤 筛选filter

js

let arr2=[1,2,3,4,5,6,7,8,9]

let arr3= arr2.filter(item=>item%2===1)//把元素组中所有满足此条件的元素组成新数组

console.log(arr3)

let arr4=arr3.map(item=>item*2)

console.log(arr4)

let total=arr4.reduce((pre,next)=>pre+next,0)

console.log(total)

#### 一行搞定,链式调用

js

let arr2=[1,2,3,4,5,6,7,8,9]

console.log(

arr2.filter(item=>item%2===1)

.map(item=>item*2)

.reduce((pre,next)=>pre+next,0)

)

#### 没有filter过滤,map映射,reduce等高阶函数时，我们要使用一下代码来实现上一行功能

js

let arr2=[1,2,3,4,5,6,7,8,9]

var brr=[]

for (var i =0;i<arr2.length;i++){

if(arr2[i]%2===1){

brr.push(arr2[i])

}

}

console.log(brr)

for(var i=0;i<brr.length;i++){

brr[i]=brr[i]*2

}

console.log(brr)

var result=0

for (var i =0 ;i<brr.length;i++){

result=result+brr[i]

}

console.log(result)

### typeof判断是否为字符串

js

console.log(typeof('123'==='string'))

let arr7=['a','b','c']

arr7.every(item=>typeof item==='string')

console.log(typeof typeof 123)//输出string

### find，判断数组中是否有某个值，如果是undefined则没有

js

let arr2=[1,2,3,4,5,6,7,8,9]

console.log(arr2)

console.log(arr2.find(item=>item===3))

const arr8=[

{account:123456, password:'abcdefg'},

{account:123457, password:'abcdefg'},

{account:123458, password:'abcdefg'},

{account:123459, password:'abcdefg'}

]

console.log(arr8.find(item=>item.account===123458))

### findIndex查找对应元素的索引

js

const arr8=[

{account:123456, password:'abcdefg'},

{account:123457, password:'abcdefg'},

{account:123458, password:'abcdefg'},

{account:123459, password:'abcdefg'}

]

console.log(arr8.findIndex(item=>item.account===123458))

### forEach跟map几乎一直，但是没有返回值，不能链式调用

js

let arr2=[1,2,3,4,5,6,7,8,9]

arr2.forEach((item,index)=>arr2[index] = item*2)

console.log(arr2)

### from

js

let arr2=[1,2,3,4,5,6,7,8,9]

arr2=Array.from(arr2,item=>item/2)

console.log(arr2)

### includes 判断数组中是否包含指定的值

### indexOf 搜索数组中的元素，并返回他所在位置

### lastIndexOf 返回他最后出现的位置

### isArray 判断是否是一个数组

js

const arr8=[

{account:123456, password:'abcdefg'},

{account:123457, password:'abcdefg'},

{account:123458, password:'abcdefg'},

{account:123459, password:'abcdefg'}

]

console.log(Array.isArray(arr8[0]))

### 判断是否为对象

js

const arr8=[

{account:123456, password:'abcdefg'},

{account:123457, password:'abcdefg'},

{account:123458, password:'abcdefg'},

{account:123459, password:'abcdefg'}

]

console.log(typeof arr8[0]==='object'&&arr8.length===undefined)

console.log(typeof arr8[0]==='object'&&!arr8.length)

//弱类型转换 null， undefined， ''， NaN， 0 被转换证布尔值false

### join 数组转换字符串

js

let arr2=[1,2,3,4,5,6,7,8,9]

console.log( arr2.join())

### reverse 反转数组

js

let arr2=[1,2,3,4,5,6,7,8,9]

console.log(arr2.reverse())

### 反转字符串

js

let strA='a,b,c,d,e,f,g'

console.log(strA.split(',').reverse().join())

let strB='abcdefg'   //gfedcba

console.log(strB.split('').reverse().join(''))

### map() 映射

### reduceRight() 从右往左计算

### slice() 选取数组中的一部分，返回新数组

### some() 检测数组中是否有元素符合条件，跟includes相同

### sort() 对数组元素排序

js

let arr9=['Banner','Orange','Apple','Mango']

arr9.sort()//默认按照字母升序排列

console.log(arr9)

let arr10=[8,7,45,3,9,97]

arr10.sort()//默认按照字母的升序排列

console.log(arr10)

//按照数字升序排列

arr10.sort((next,pre)=>next-pre)//下一个值减前一个值为正数

console.log(arr10)

//数字降序排列

arr10.sort((next,pre)=>pre-next)

console.log(arr10)

//数组乱序

let arr11=['a','b','c','d','e','f','g','h','i','j','k']

console.log(arr11.sort(()=>Math.random()-.5))

### toString()数组转字符串

```

## /js-扩展-Object对象

```text

### 一

js

let gender='男'

let obj1={

name:'小明',

age: 18,

hobbies:['吃饭','睡觉','打豆豆'],

able:function () {

console.log('正在学习')

},

gender

}

console.log(obj1.name)//最优

console.log(obj1['age'])

obj1.hobbies.map(item=>console.log(item))//map是有返回值的，会生成一个新数组

obj1.hobbies.forEach(item=>console.log(item))//更优

obj1.able()

### 二

js

function able(){

console.log('正在学习')

}

let gender='男'

let obj1={

name:'小明',

age: 18,

hobbies:['吃饭','睡觉','打豆豆'],

able,

gender

}

console.log(obj1.name)//最优

console.log(obj1['age'])

obj1.hobbies.map(item=>console.log(item))//map是有返回值的，会生成一个新数组

obj1.hobbies.forEach(item=>console.log(item))//更优

able()

```

## /js-扩展-作用域

```text

### var可以重复声明，let不可以

js

var test=1//var可以重复声明，let不可以

var test=2

var j=3

for (var j=0;j<arr11.length;j++){

console.log(j)//内存泄漏

}

console.log(j)

let test2=1

// let test2=1  //let 不允许重复声明

### 作用域: 全局作用域/ 局部作用域/ es6新增块级作用域

js

let m=3

for (let m=0;m<arr11.length;m++){}

console.log(m)//3

js

var n=1

function xxx() {

console.log(n)//undefined暂时性死区，作用域内一旦var/let声明了某变量，那么此作用域就不会查找该变量

var n=2//var 存在变量提升，作用域内后面声明了变量，则在前面也可以使用之，只不过其值为undefined

console.log(n)//2

}

xxx()

console.log(n)//2

js

let x=1

function yyy() {

console.log(x)//1

x=2

console.log(x)//2

}

yyy()

console.log(x)//2

js

let p=1

function ppp() {

console.log(p)//p在这里不存在，不是undefined，但是由于局部作用域内声明了p，所以暂时性死区，不会像外界获取p,**会直接报错**

let p=2//let不存在变量提升

console.log(p)//

}

ppp()

console.log()//

```