1,033
社区成员
发帖
与我相关
我的任务
分享JS基础|“朝闻道”知识分享大赛
这是我参加“朝闻道”知识分享大赛的第十一篇文章。
JS基础：
1、JavaScript 输入输出
(1)输出
// 语法1.文档输出内容，向页面中打印
document.write('111')
document.write('<h1>111</h1>')
// 语法2.控制台输出，程序员调试使用
console.log('100')
// 语法3.页面弹出警告对话框
alert('110')
(2)输入
-
语法
prompt('请输入您的姓名：')
-
作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字
-
展示：
2、变量
(1)变量是什么
变量是计算机存储数据的“容器”
-
白话：变量就是一个装东西的盒子。
-
通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆
-
变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。
(2)变量的基本使用
1、声明变量：
要想使用变量，首先需要创建变量（也称为声明变量或者定义变量）
let 变量名
2. 变量赋值：
定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值，也可以声明变量的时候直接完成赋值操作,这种操作也称为 变量初始化。
3、 更新变量：
变量赋值后，还可以通过简单地给它一个不同的值来更新它。
注意： let 不允许多次声明一个变量。
4、变量命名规则与规范
-
规则：
不能用关键字
关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等
只能用下划线、字母、数字、$组成，且数字不能开头
字母严格区分大小写，如 Age 和 age 是不同的变量
2.规范：
第一个单词首字母小写，后面每个单词首字母大写。例：userName
3、常量
-
概念：使用 const 声明的变量称为“常量”。
-
使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let
-
注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）
-
小技巧：不需要重新赋值的数据使用const
const G=9.8
4、模版字符串
-
在没有模版字符串之前，要拼接变量比较麻烦
let age=18
document.write('我今年'+ age + '岁了')
-
当使用模版字符串时，
let age=18
document.write(`我今年${age}岁了`)
-
`` (反引号)
-
在英文输入模式下按键盘的tab键上方那个键（1左边那个键）
-
内容拼接变量时，用 ${ } 包住变量
5、检测数据类型
-
作为运算符：typeof x（常用写法）
-
函数形式： typeof(x)
6、类型转换
(1)隐式转换
规则：
-
+ 号两边只要有一个是字符串，都会把另外一个转成字符串
-
除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
小技巧：
-
+号作为正号解析可以转换成数字型，例如：+'123' 为数字型
-
任何数据和字符串相加结果都是字符串，例如：123+'123'=123123，'pink'+1=pink1
(2)显式转换
编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。
转换为数字型
-
Number(数据)
-
转成数字类型
-
如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
-
NaN也是number类型的数据，代表非数字
-
parseInt(数据)
-
只保留整数
-
parseFloat(数据)
-
可以保留小数
转换为字符型:
String(数据)
变量.toString(进制)
7、数组
(1)数组新增
-
数组.push( 新增元素 )方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度
-
数组.unshift( 新增元素 )方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
(2)数组筛选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = [2,0,6,1,77,9,54,3,78,7]
//1.声明新的空数组
let newarr=[]
//2.遍历旧数组
for(let i=0;i<arr.length;i++){
if(arr[i]>=10){
//3.满足条件 追加给新的数组
newarr.push(arr[i])
}
}
//4.输出新的数组
console.log(newarr)
</script>
</body>
</html>
(3)数组删除
-
数组.pop( )方法从数组中删除最后一个元素，并返回删除元素的值
-
数组.shift( )方法从数组中删除第一个元素，并返回删除元素的值
-
数组.splice( )方法删除指定元素
语法：
arr.splice(start,deleteCount) arr.splice(起始位置（下标），删除几个元素)
解释：
-
start起始位置
指定修改的开始位置（从0计数）
2.deleteCount
表示要移除的数组元素个数
可选的。如果省略则默认从指定起始位置删到最后
(4)数组排序
-
数组.sort()方法可以排序
-
语法：
let arr=[4,2,5,1,3]
//1.升序排列写法
arr.sort(function(a,b){
return a-b
})
//2.降序排列写法
arr.sort(function(a,b){
return b-a
})
8、函数
(1)函数使用
-
函数的声明语法
function 函数名(){
函数体
}
(2)函数传参
-
声明语法
function 函数名(参数列表){
函数体
}
(3)函数返回值
-
为什么要让函数有返回值
-
函数执行后得到结果，结果是调用者想要拿到的（一句话，函数内部不需要输出结果，而是返回结果）
-
对执行结果的扩展性更高,可以让其他的程序使用这个结果
-
函数有返回值用那个关键字？ 有什么注意事项呢？
-
语法：return 数据
-
return后面不接数据或者函数内不写return，函数的返回值是undefined
-
return能立即结束当前函数, 所以 return 后面的数据不要换行写
(4)变量访问原则
就近原则
(5)匿名函数
1、函数表达式
声明语法：
let fn=function(){
//函数体
}
调用
fn()//函数名
函数表达式要先声明后调用
2、立即执行函数
场景介绍: 避免全局变量之间的污染
写法1：
(function(形参){
let num = 10
})(实参);
(function(形参){
let num = 20
})(实参);
写法2：
(function(形参){
let num = 10
}(实参));
(function(形参){
let num = 20
}(实参));
注意：
-
多个立即执行函数要用 “; “隔开，要不然会报错
-
无需调用，立即执行，其实本质已经调用了
(6)逻辑终断
1. 逻辑运算符里的短路
短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行
&&：左边为false就为假，如果两边都为真，则看最后一个
||：左边为true就为真，如果两边都为真，则看第一个
2. 转换为Boolean型
0、undefined、null、false、NaN 转换为布尔值后都是false, 其余则为 true
隐式转换：
-
有字符串的加法 “” + 1 ，结果是 “1”
-
减法 - （像大多数数学运算一样）只能用于数字，它会使空字符串 "" 转换为 0
-
null 经过数字转换之后会变为 0
-
undefined 经过数字转换之后会变为 NaN
9、对象
(1)对象使用
1、对象声明语法
语法1
let 对象名={}
语法2
let 对象名=new Object()
2、 对象由属性和方法组成
-
属性：信息或叫特征（名词）。 比如 手机尺寸、颜色、重量等…
-
方法：功能或叫行为（动词）。 比如 手机打电话、发短信、玩游戏…
let 对象名={
属性名：属性值,
方法名：函数名（也叫方法名）
}
(2)对象使用
1、属性-查
语法：对象名.属性 或 对象名['属性名']
区分：数组：数组名[下标]
2、属性-改
语法：对象名.属性 = 新值
3、属性-增
语法：对象名.新属性 = 新值
4、 属性-删（了解）
语法：delete 对象名.属性
(3)遍历对象
let obj={
uname:'andy',
age:18,
sex:'男'
}
for(let k in obj){
//k 属性名 字符串 带引号 obj.'uname' k==='uname'
console.log(k) //属性名 'uname' 'age' 'sex'
console.log(obj[k]) //属性值
}
-
一般不用这种方式遍历数组、主要是用来遍历对象
-
for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名
-
一定记住： k 是获得对象的属性名， 对象名[k]
10、内置对象
(1)内置对象-Math
-
介绍：Math对象是JavaScript提供的一个“数学”对象
-
作用：提供了一系列做数学运算的方法
-
Math对象包含的方法有：
random：生成0-1之间的随机数（包含0不包括1）
ceil：向上取整
floor：向下取整
parseInt：取整
max：找最大数
min：找最小数
pow：幂运算
abs：绝对值
(2)内置对象-生成任意范围随机数
Math.random() 随机数函数， 返回一个0 - 1之间，并且包括0不包括1的随机小数 [0, 1）
-
如何生成0-10的随机数呢？
Math.floor(Math.random() * (10 + 1))
-
如何生成5-10的随机数？
Math.floor(Math.random() * (5 + 1)) + 5
-
如何生成N-M之间的随机数
Math.floor(Math.random() * (M - N + 1)) + N
11、拓展- 基本数据类型和引用数据类型
-
简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。
值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此 叫做值类型
引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此 叫做引用数据类型，通过 new 关键字创建的对象（系统对象、自定 义对象），如 Object、Array、Date等
-
堆栈空间分配区别：
-
栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中栈；简单数据类型存放到栈里面。
-
堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。引用数据类型存放到堆里面。
...全文
请发表友善的回复…
发表回复
