JavaScript学习记录3

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="list"><!--<ul id="list" title="xxxx"-->           <!-- 这里的title表示鼠标移入 -->
    <li class="liRed">00001</li>
    <li>00002</li>
    <li>00003</li>
    <li class="liRed">00004</li>
    <li>00005</li>
    <li>00006</li>
    <li>00007</li>
    <li>00008</li>
</ul>
<input type="text" id="ipt">
<p id="screen"></p>
</body>
</html>
<script>
    // dom文档对象模型,document object,model
    let list = document.getElementById('list')            // 获取dom(js中的选择器)
    let liReds = document.getElementsByClassName('liRed')//collection集合, 拥有跟数组拒户完全一致的方法等
    let lis = document.getElementsByTagName('li')      //collection集合   可以理解为伪数组
 
 
    // dom都可以干啥
    // 1.改变html的输出流(可以把其他内容输出到页面上)
    document.write(new Date())
    // 2.改变HTML内容
    liReds[1].innerHTML = '蛤蛤蛤'
    // 3.改变HTML属性
    list.title = '12345678'
    // 4.改变HTML样式(修改css样式)
    liReds[1].style.color = 'red'
    // 5.使用事件
    //     鼠标事件:onmousedown,onmouseenter,onmouseleave,onmousemove,onmouseout,onmouseover,onmouseup,onmousewheel,onclick
    //     键盘事件:onkeyup,onkeypress,onkeydown
    //     窗口事件:onload,onscroll(页面上下滚动)
    //     表单事件:onfocus(获得焦点),onblur(失去焦点),onsubmit(提交事件),oninput,onchange
    let ipt = document.getElementById('ipt')
    let screen = document.getElementById('screen')
    ipt.oninput = function () {
        screen.innerHTML = ipt.value                //输入什么填充什么
    }
    // ipt.onchange=function () {              //onchange  失去焦点后，内容发生改变才输出，内容不发生改变不输出
    //     screen.innerHTML=ipt.value
    // }
    // ipt.onblur=function () {             //onblur  只要失去焦点就输出,无关乎里面的内容
    //     screen.innerHTML=ipt.value
    // }
 
 
    //字符串
    let str1 = ''
    let str2 = ""
    let str3 = ``      //是ES6里的新语法
 
    //生成随机的颜色
 
 
    function randColor() {
        // return `rgb(${parseInt(Math.random()*256)},${parseInt(Math.random()*256)},${parseInt(Math.random()*256)})`  //parseInt向下取整，所以要256
        return "rgb(" + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ')'
    }
 
    list.style.background = randColor()
    list.style.color = randColor()
 
    let str4 = "I am a student!"
    //charAt()返回在指定位置的字符    空格也占位置   几乎不用，用str[3]来代替
    // str4.charAt(3)
    console.log(str4.charAt(3))
    console.log(str4[3])
    //concat  连接两个字符串，生成新字符串
    console.log(str4.concat(str3))  //一般不用，用+号更好
    let num = 123
    // console.log(String(num))
    console.log(num + '')          //快速把数字转换为字符串
 
    //endsWith()  判断当前字符串是否以指定字符串结尾,区分大小写,返回布尔值    区分大小写
    console.log(str4)
    // str4.endsWith('!')
    console.log(str4.endsWith('!'))
    // startsWith()  判断当前字符串是否以指定字符串开头,区分大小写,返回布尔值    区分大小写
    console.log(str4.startsWith('I'))
 
 
    //indexOf返回字符串在当前字符串中首次出现的位置.如果没有，则返回-1
    // str4.indexOf('a')
    console.log(str4.indexOf('a'))
 
    //lastIndexOf() 使用方法与上相同，返回字符串在当前字符串中最后出现的位置，如果没有，则返回-1
    // str4.lastIndexOf('a')
    console.log(str4.lastIndexOf('a'))
 
    //includes 查找字符串中是否存在指定的字符串
    // str4.includes('a')
    console.log(str4.includes('a'))
 
    //match查找到一个或多个正则表达式的匹配
    console.log(str4.match(/\ba\b/))     //  \b 是单词边界    两边都写  只找到一个就结束 输出
    console.log(str4.match(/a/g))        //匹配全部满足条件的字符串          如果找不到，则输出null
 
    //repeat             重复       复制字符串指定的次数，并连接在一起返回
    console.log(str4.repeat(3))
 
    // replace 在字符串中查找对应的子串，然后替换成新内容，生成新字符串
    console.log(str4.replace(/a/g, 'b'))
    // console.log(str4.replace('a','b'))
    // 可以用正则正则后面可以加g，则所有满足条件的字符串都将被替换
 
    //  replaceAll
    console.log(str4.replaceAll("a", "b"))
    //不能用正则，所有的a都将被替换
 
    let str5 = "abcdeFG1234567hijklmn"
    //search 查找字符串中满足正则的字符串,返回索引
    // str5.search(/\d{7}/)
    console.log(str5.search(/\d{7}/))
 
 
    //slice 从字符串中截取某部分
    console.log(str5.slice(7, 14))
 
 
    //split 以某字符为界限切割字符串，生成新数组
    // str5.split('')
    console.log(str5.split(''))   //以空为界限切割字符串
 
    //substring()  从字符串中提取指定的两个索引件的字符串
    console.log(str5.substring(7, 14))
 
    //substr() 从字符传中,从指定位置，提取指定数量的字符串
    console.log(str5.substr(7, 14))
 
    // 生成新字符串，把原字符串所有字母改称小写
    str5.toLowerCase()
    console.log(str5)
    // 生成新的字符串，把原字符串所有的字母改成大写
    console.log(str5.toUpperCase())
 
    let str6 = ' abc def '
 
    console.log(str6.trim())     //去掉字符串两边的空格，中间的不去    一般用于输入框
 
    //toString
    let a = 123
    console.log(a.toString())
    console.log(String(a))
    console.log(a + '')//最简的方式
 
 
    // 数组方法   unshift,push,pop,splice
    // concat()连接两个或更多数组，并返回结果
    // copyWithin 从数组的指定位置拷贝元素到另一个指定位置
    // every()    判断数组中是否所有元素都满足回调函数中的条件，满足返回true，不满足返回false
    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(function (item) {
    //     return   item%4===0&&item%100!==0||item%400===0
    // }))                         以下为简略方式
    let ye = [2000, 2004, 2008]
    console.log(ye.every(item =>
        item % 4 === 0 && item % 100 !== 0 || item % 400 === 0
    ))
 
    //过滤 筛选  filter
    let arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    // arr2.filter(item=>item%2===1)
    let arr3 = arr2.filter(item => item % 2 === 1)            // 将原数组中所有满足此条件的元素组成新数组
    console.log(arr3)
    // arr3.map(item=>item*2)
    let arr4 = arr3.map(item => item * 2)
    console.log(arr4)
    let total = arr4.reduce((pre, next) => pre + next, 0)
    console.log(total)
 
    // 将上面的写到一行里
    console.log(
        arr2.filter(item => item % 2 === 1)
            .map(item => item * 2)
            .reduce((pre, next) => pre + next, 0))
 
    //没有filter，map,reduce等高阶函数时，我们要使用以下代码来实现上面的功能
    var brr = []
    for (var i = 0; i < arr2.length; i++) {
        if (arr[i] % 2 === 1) {
            brr.push(arr2[i])
        }
    }
    console.log(brr)
    for (var i = 0; i < brr.lenth; 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)
 
    console.log(typeof ('123'))
    console.log(typeof (123))
    console.log(typeof (true))
    console.log(typeof typeof 123)                       //输出为string  number是字符串  typeof 123 是number,  typeof number是string
    console.log(typeof '123' === 'string')
 
    let arr7 = ['a', 'b', 'c']
    arr7.every(item => typeof item === 'string')
 
    //find
    console.log(arr2)
    console.log(arr2.find(item => item === 10))
    //判断数组中是否有某个值，如果是undefined，则没有
    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))
 
    /*for (var i=0;i<arr8.length;i++){
        if(arr8[i].account===123458){                              //两种语法输出一样
            console.log(arr8[i])
        }
    }*/
 
    //findIndex查找对应元素的索引
    console.log(arr8.findIndex(item => item.account === 123458))
 
    arr2.forEach((item, index) => arr2[index] = item * 2)  //跟map几乎一致，但是没有返回值，不能链式调用
    console.log(arr2)
 
 
    //from
    arr2 = Array.from(arr2, item => item / 2)
    console.log(arr2)
 
    //includes  判断数组中是否包含指定的值
 
    //indexOf 搜索数组中的元素，并返回它所在的位置
 
    //lastIndexOf  返回它最后出现的位置
 
    //isArray   //判断是否是一个数组
    // console.log(typeof arr8)       //数组就是对象，是一种特殊形式的对象    输出object
    /*console.log(Array.isArray(arr8[0]))
    if (typeof  arr[0]==='object'&&!Array.isArray(arr[8])){
        console.log('是对象')
    }*/
 
    // 判断是否对象为object
    console.log(typeof arr8[0] === 'object' && arr8[0].length === undefined)
    console.log(typeof arr8[0] === 'object' && !arr8[0].length)
    // 弱类型转换 null,undefined,'',NaN,0 被转换成布尔值false
 
    //join 数组转换为字符串
    // arr2.join()
    console.log(arr2.join())
 
    //reverse 反转数组
    console.log(arr2.reverse())
 
    //反转字符串
    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(''))       //join('')  输出的时候就不是,作为分界了
 
    // map()    映射
    //pop() 后面删除  push()后面添加  shift()前面添加  unshift()前面删除  splice()
 
    //reduceRight()  从右往左计算
 
    // slice() 选取数组中的一部分,返回新数组
 
    // some()  检测数组中是否有元素符合指定条件,跟includes相同
 
    // sort()  对数组元素排序
    let arr9 = ['Banana', 'Apple', 'Orange', 'Mango']
    arr9.sort()  //默认按照字母升序排列
    console.log(arr9)
 
    let arr10 = [8, 7, 45, 3, 9, 97, 186]
    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', 'i', 'j', 'k', 'l', 'm', 'n']
    console.log(arr11.sort(() => Math.random() - 0.5))  //Math.random()取值在0~1之间随机数
 
    // toString()  数组转字符串
     
    //Object  对象
 
    function able(){
        console.log('正在学习')
    }
 
    let gender='男'
    let obj1={
        name:'小明',
        age:10,
        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))//更优
 
    obj1.able()
 
    var text=1          //var可以重复声明
    var text=2          //let不可以重复声明
    var j=3
    for(var j=0;j<arr11.length;j++){
        console.log(j)  //内存泄露
    }
    console.log(j)
 
    let test2=1
    // let test2=2           //let不允许重复声明
 
    let m=3
    for (let m=0;m<arr11.length;m++){
 
    }
    console.log(m)
    // 作用域
    // 全局/局部作用域
    // es6新增块级作用域
 
    var n=1
    function xxx() {
        console.log(n)//   undefined暂时性死区，作用域内，一旦var/let声明了变量，那么此作用域就不会向外查找该变量
        var n //var存在变量提升，作用域内，后面声明了某变量，则在前面也可以使用，只不过值为undefined
        n = 2
        console.log(n)   //2
    }
    xxx()
    console.log(n)       //1
 
    let x=1
    function yyy() {
        console.log(x)   //1
        x=2
        console.log(x)   //2
    }
    yyy()
 
     
     
     
     
</script>