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()//
```
最新文章
- MySQL Workbench gnome-keyring-daemon错误的解决
- haskell debug
- SRAM与SDRAM的比较（转）
- uva 12300 - Smallest Regular Polygon
- Hadoop能力测试图谱
- Chapter7 迭代器
- storyboard页面跳转传值
- Eclipse显示内存占用
- 用原型代替PRD时，原型应该包含哪些内容
- ccos2d-x 学习
- ASP.NET/MVC/Core的HTTP请求流程
- Spring Boot 2.x中的management.security.enabled=false无效问题
- nginx配置访问频率
- 2019.03.25 bzoj4539: [Hnoi2016]树（主席树+倍增）
- gcc update in centos to 6.3 by scl
- MySQL 5.5 服务器变量详解(二)
- 【题解】Luogu UVA1411 Ants
- Python3基础 dict fromkeys 多个键对应相同的值
- Redis和数据库 数据同步问题
- javascript string replace 正则替换