前端知识总结.xmind
2.js三种书写位置:
(1)行内:写在标签内部.
(2)内联:写在script标签里面,script标签放在
3.js的两种注释方法:
(1)//单行注释(vscode快捷键 ctrl+/)
(2)/ / 多行注释(vscode快捷键 ctrl+alt+a)
4.输入与输出语句:
(1)弹出提示框 alert()
(2)页面输出 document.write()
(3)控制台输出 console.log()
(4)弹出输入框 prompt()
(5)弹出确认框 confirm()
5.数据类型
(1)number数值类型[一切数学中数字 作用:数学计算]
(2)string 字符串类型[单引号'' 双引号"" 反引号(模板字符串)`` 一切用引号抱起来的内容 用来展示文本]
(3)boolean布尔数据类型[true(真) false(假) 表示条件成立/不成立]
(3)undefined未定义[变量有声明,未赋值,默认值就是undefined]
(4)null[主动赋值,要存东西,但是不知道存什么]
6.检测数据类型
(1)typeof数据:得到一个字符串,告诉你是数据都是什么类型的
1.变量的作用:在内存中存储数据
2.数据语法:
(1)声明变量:let变量名(在内存中开辟空间)
(2)赋值:变量名=值
(3)取值:变量名
变量注意点
(1)let变量不允许重复声明
(2)变量赋值的时候会先销毁,然后存入新值
(3)变量给变量赋值,先拷贝后赋值
(3)变量命名规则: 开头:字母 下划线_ $ 后面:字母 下划线_ $ 数字 不能使用关键字[取名最好是英文单词,多个单词驼峰命名:首字母小写,后面单词首字母大写]
1.运算符不能单独使用,需要与运算数据一起组成式子,称之为表达式
2.表达式一定会有运算结果,要么打印,要么存入变量
3.关系(比较)表达式结果一定是布尔类型,true:成立 false:不成立
逻辑运算符
作用:计算多个条件关系
&&:一假全假 全真为真
|| :一真全真 全假为假
!:取反 true变false false变true
数据类型转换
字符串类型转number
1.1 转整数: parseInt(数据)
console.log(parseInt('123'));
1.2 转小数: parseFloat(数据)
console.log(parseFloat('123.4'));
2.非字符串类型转number
console.log(Number(null)); //0
console.log(Number(undefined)); //NaN
console.log(Number(true)); //1
console.log(Number(false)); //0NaN特点： 不能参与任何运算。 结果一律是NaN
console.log(NaN === NaN); //false
隐式转换 ： 当运算符两边的 ‘数据类型不一致’ 的时候，编译器会转成一致后运算
(1)转换数字 ： 算术运算符 + - * / %
(2)转换字符串 ： 连接符+ (+号两边只要有一边是字符串，此时+就是连接符)
(3)转换布尔: 逻辑非 !
*/
//转数字
console.log('10' - 1); //Number('10')-1=10-1=9
console.log(1 + true); //2 1+Number(true)=1+1=2
console.log(+'20'); //+Number('20')//20
let num = '10'
num++
console.log(num); //11
//转字符串
console.log(1 + '1'); //String(1)+'1'='1'+'1'='11'
//逻辑非
console.log(!1); //!Boolean(1)=!true=false
console.log(!null); //!Boolean(null)=true
console.log(1 + 1 + '1'); //'21'
console.log(1 + '1' + 1); //'111'
console.log('1' + 1 + 1); //'111'
转换为Boolean布尔类型
1.false： 有7种数据会得到false
'' 0 -0 NaN undefined null false2.true: 除false 7种之外的一切数据
转换为字符串类型
String(数据)
console.log(String(10)); //'10'
console.log(String(true)); //'true'
console.log(String(undefined)); //'undefined'
console.log(String(null)); //'null'
2. 变量名.toString()
a. 如果是undefined与null，这种方式会报错
b. 这种方式可以支持进制转换。 例如把 十进制转十六进制
let num = 255
console.log(num.toString(16)); //FF 转换为16进制
1.数组是一种复杂数据类型
2.可以在变量中存储多个数据
3.数组内存由三个部分组成[元素;数组中的数据,下标:元素的位置,长度:元素的数量]
4.数组名.push(元素):一个或多个元素,添加到数组末尾
5.数组名.unshift(元素):一个或多个元素,添加到数组开头
数组删除
(1)数组名.pop() 删除数组 最后一个元素
(2)数组名.shift() 删除数组第一个元素
(3)数组名.splice(下标,数量)从指定下标开始 删除元素//函数和循环区别
// 1.本质区别:
// 函数是一种数据类型:存储代码
// 循环是一种语句:让一段代码执行多次
// 2.功能不同
// 函数:代码复用(一段代码需要在很多个地方执行一次)
// 循环:重复执行(一段代码在一个地方执行多次)
0.函数语法 : 函数是一种用于存储代码块的复杂数据类型
* 作用：解决代码复用问题
1.声明函数 : 声明函数只是把代码存起来，不会执行函数体
function 函数名(){
函数体代码： 需要存储的一段代码
}
2.调用函数 ： 执行函数体代码
函数名()
3.函数参数 ： 调用者 传递数据 函数
3.1 传：调用者
函数名(实际参数)
3.2 收：函数
function 函数名(形式参数){ //函数体代码 }
3.3 函数传参本质： 实参给形参赋值的过程
(1)函数传参是按照传入顺序一一赋值
(2)函数每一次调用传参过程都是独立的，互不影响
(3)函数 形参数量 和 实参数量 可以不一致的
3.4 注意点:
a.实参和形参数量可以不一致,但是按照顺序一一赋值
每一个调用者,调用的过程都是独立的过程,互不影响.
没有传参,实参为undefined
1.函数默认参数，我们自己在开发中使用不多。（了解后面很多js框架函数默认参数底层原理）
2.函数默认参数 使用 逻辑运算符短路运算(逻辑中断)
2.1 短路运算： 左边式子就可以决定结果，右边式子不执行
&& : 一假则假
|| : 一真则真
! : 取反(没有短路运算，因为只有一个式子)
2.2 短路规则：
&& : 找假。 左边式子值可以转成false，则无条件返回左边式子的值，右边不执行。 反之无条件返回右边式子的值。
|| : 找真。 左边式子值可以转成true，则无条件返回左边式子的值，右边不执行。 反之无条件返回右边式子的值。
//逻辑与:一假则假
//&& : 找假。 左边式子值可以转成false，则无条件返回左边式子的值，右边不执行。 反之无条件返回右边式子的值。
let res = 1 && null
console.log(res) //null
//逻辑或:一真则真
// || : 找真。 左边式子值可以转成true，则无条件返回左边式子的值，右边不执行。 反之无条件返回右边式子的值。
let res1 = 1 + 1 || null
console.log(res1) //2
console.log(1 && undefined && null) //undefined
console.log(1 || undefined || null) //1
//应用场景
function getSum(num1, num2) {
num1 = num1 || 10
num2 = num2 || 20
let sum = num1 + num2
console.log(sum);
}
getSum(10, 20) //20
getSum(1) //21
0.函数语法 : 函数是一种用于存储代码块的复杂数据类型
* 作用：解决代码复用问题
1.声明函数 : 声明函数只是把代码存起来，不会执行函数体
function 函数名(){
函数体代码： 需要存储的一段代码
}
2.调用函数 ： 执行函数体代码
函数名()
3.函数参数 ： 调用者 传递数据 函数
3.1 传：调用者
函数名(实际参数)
3.2 收：函数
function 函数名(形式参数){ //函数体代码 }
3.3 函数传参本质： 实参给形参赋值的过程
(1)函数传参是按照传入顺序一一赋值
(2)函数每一次调用传参过程都是独立的，互不影响
(3)函数 形参数量 和 实参数量 可以不一致的
4.函数返回值 ： 函数 传递数据 给调用者
4.1 传 ： 函数
function 函数名(){ return 值 }
4.2 收 : 调用者
let 变量名 = 函数名()
4.3 注意点
(1)函数return关键字后面的代码不会执行的
* 只要有return关键字，函数体立即结束执行。
(2)如果函数没有return，则默认返回值是undefined
(3) 如果函数有return, 但是return后面没有值, 此时默认值也是undefined
1.声明对象
let 对象名 = {
属性名:属性值,
属性名:属性值,
方法名:function(){}
}
2.取值语法
对象名.属性名
3.细节： 对象中的属性值是什么数据类型， 取出来的时候就可以使用这个类型的所有语法
如，对象的属性值是 数组， 则可以： 对象名.属性名[下标]
如，对象的属性值是 函数， 则可以： 对象名.属性名()
let object = {
name: '张三',
age: 18,
sex: '男',
habby: ['吃饭', '打台球', '健身'],
eat: function () {
alert('今天吃的营养餐')
},
car: {
name: '凯迪拉克',
year: 5,
ways: '8万公里'
}
}
console.log(object)
//对象取值:对象名.对象值
console.log(object.name); //张三
console.log(object.name + 1); //'张三1'
console.log(object.age + 1); //19
console.log(object.habby[1]); //'打台球'
object.eat()
console.log(object.car.name); //'凯迪拉克'
1.查询属性
点语法 对象名.属性名
[]语法 obj['属性名'] obj[ 变量名 ]
2.修改属性
对象名.属性名 = 值
对象名['属性名'] = 值
3.新增属性
(1)如果已经存在的属性赋值，则是修改
(2)如果不存在的属性赋值，则是新增
4.删除对象属性
delete 对象名.属性名
let obj = {
name: '班长',
age: 38,
sex: '男'
}
// (1)如果已经存在的属性赋值，则是修改
obj.sex = '女'
console.log(obj);
// (2)如果不存在的属性赋值，则是新增
obj.girlFrienf = '十月'
console.log(obj)
// delete 对象名.属性名
delete obj.sex
console.log(obj);对象练习
//需求：封装一个函数，返回一个随机颜色 rgb(255,255,255)
//生成随机颜色
// function getRandomColor() {
// let r = Math.floor(Math.random() * 256)
// let g = Math.floor(Math.random() * 256)
// let b = Math.floor(Math.random() * 256)
// return `rgb(${r},${g},${b})`
// }
// let res = getRandomColor()
// console.log(res)
//生成十六进制颜色
function getRandomColor() {
let str = '#'
for (let i = 0; i < 6; i++) {
str += (Math.floor(Math.random() * 16)).toString(16)
}
// let color2 = (Math.floor(Math.random() * 16)).toString(16)
// let color3 = (Math.floor(Math.random() * 16)).toString(16)
// let color4 = (Math.floor(Math.random() * 16)).toString(16)
// let color5 = (Math.floor(Math.random() * 16)).toString(16)
// let color6 = (Math.floor(Math.random() * 16)).toString(16)
return str
}
let res = getRandomColor()
console.log(res)
//数组方法 生成十六进制颜色
function getClor() {
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
let str = "#"
for (let i = 0; i < 6; i++) {
//定义一个变量 获取随机数下标
let index = parseInt(Math.random() * arr.length)
str += arr[index]
}
return str
}
console.log(getClor())
(1)js中几乎所有的内置对象，都是通过new来创建的
new Date()
new RegExp()
new Array()
new Object()
(2)js中有三种内置对象有简写语法
数组: []
对象: {}
正则: /正则/
最新回复