【前端】JavaScript学习笔记(二)——数据类型
2021/7/14 11:04:53
本文主要是介绍【前端】JavaScript学习笔记(二)——数据类型,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
✨课程链接
【狂神说Java】JavaScript最新教程通俗易懂_哔哩哔哩_bilibili
✨学习笔记
字符串
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> 'use strict'; // `` 多行字符串 Esc键下面 let str = `多行 字符串` console.log(str) let name = 'admin' let passwd = 'root' // 模板字符串 let msg = `name:${name}passwd:${passwd}` console.log(msg) console.log("!字符串不可变") console.log(msg.length) console.log(msg.toUpperCase()) console.log(msg.toLowerCase()) console.log(msg.indexOf("r")) // 1到最后 console.log(msg.substring(1)) // [5,10) console.log(msg.substring(5,10)) </script> </head> <body> </body> </html>
数组
Array可以包含任何的数据类型
let arr = [1, 2, 3, "1", "2"]
长度
arr.length
注意:如果给 arr.length 赋值 数组大小会发生变化 如果赋值过小元素就会丢失
indexOf
通过元素获得下标索引
arr.indexOf(1) arr.indexOf("2")
slice()
截取Array的一部分 返回一个新数组 类似String中的substring
arr.slice(0, 1)
push() pop() 尾部
arr.pop() arr.push()
unshift() shift() 头部
arr.unshift() arr.shift()
排序
arr.sort()
元素反转
arr.reverse()
concat()
注意:并没有修改数组 只是返回一个新的数组
console.log(arr.concat(["A"]))
连接符 join
打印拼接数组 使用特定的字符串连接
arr.join("-")
多维数组
对象
若干个键值对
{...}表示一个对象
键值对描述属性 xxx:xxx
多个属性之间使用逗号隔开 最后一个属性不加逗号!
var person = { name: "test", age: 3, email:"test@163.com", score: 0 }
js中的所有键都是字符串 值是任意对象!
对象赋值
使用一个不存在的对象属性 不会报错!undefined
动态地删减属性 通过delete删除对象的属性
动态地添加属性 直接给新的属性添加值即可
person.temp = "temp"
判断属性值是否在对象中
"age" in person true // 继承 "toString" in person true
判断一个属性是否是这个对象自身拥有的
person.hasOwnProperty("toString") false person.hasOwnProperty("age") true
流程控制
if 判断
while 循环
while(true){ alert("避免程序死循环") } do{ alert("避免程序死循环") }while (true)
for 循环
forEach 循环
ES 5.1 引入
let arr = [1, 2, 3, "1", "2"] arr.forEach(function (value){ console.log(value) })
for...in
// for(index in object){} for(let num in arr){ if (arr.hasOwnProperty(num)){ console.log("exist!") console.log(arr[num]) } }
for...of
// for(elem in object){} let arr = [1, 2, 3] for (let x of arr){ console.log(x) }
Map 和 Set
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> "use strict" // ES6 新特性 var map = new Map([["name1", 100], ["name2", 99]]) console.log(map.get("name1")) map.set("admin", "admin") console.log(map) map.delete("admin") // Set 无序不重复的集合 // set 去重 var set = new Set([1, 2, 3, 1, 1, 1]) set.add("1") // 是否包含 console.log(set.has(1)) </script> </head> <body> </body> </html>
iterator
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> "use strict" // iterator ES6新特性 // 通过for in let arr = [1, 2, 3] // 早期bug for in 输出index时会输出 "name" arr.name = "bug" for (let x in arr){ console.log(x) } var map = new Map([["name1", 100], ["name2", 99]]) for(let x of map){ console.log(x) } var set = new Set([1, 2, 3]) for(let x of set){ console.log(x) } </script> </head> <body> </body> </html>
⭐转载请注明出处
本文作者:双份浓缩馥芮白
原文链接:https://www.cnblogs.com/Flat-White/p/15009823.html
版权所有,如需转载请注明出处。
这篇关于【前端】JavaScript学习笔记(二)——数据类型的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-16使用vue3+springboot构建简单Web应用教程
- 2024-11-15全栈开发项目实战:从入门到初级项目的实现
- 2024-11-15数据库项目实战:从入门到初级应用教程
- 2024-11-15IDEA项目实战入门教程
- 2024-11-15IT编程项目实战:新手入门的全面指南
- 2024-11-15Java开发项目实战:新手入门与初级技巧
- 2024-11-15Java零基础项目实战:从入门到独立开发
- 2024-11-15MyBatis Plus教程:入门与基础操作详解
- 2024-11-15MyBatis-Plus教程:新手入门与实战技巧
- 2024-11-15MyBatis教程:从入门到实践