JavaScript基础笔记（复习）_html-js-css

javascript JavaScript区分大小写js解释型脚本语言一行一行边解释边执行 JS三种书写方法 1. 行内式

<body>
    <input type="button" value="按钮" onclick="alert('这是行内样式的js')">
body>

2. 内嵌式

<script type="text/javascript">
	alert('这是内嵌的js');
script>

3. 外部样式

<script src="index.js">script>

注释

//  单行注释  ctrl + /
/*  多行注释  shift + alt + a
    多行注释  */

输入输出

prompt('d出输入框! 用户输入');
alert('d出警告框!');
console.log('控制台d出信息');

变量声明和赋值

变量名为数字，字母，下划线，$。不能以数字开头，采用驼峰命名法

var age = 19; //变量
const name = '张三'; //常量
let sex = '男'; //变量避免变量名重复

简单数据类型 1.Number(数值)

整数，小数，八进制 (0)，十六进制 (0x)，Numder.MAX_VALUE(最大值)，Numder.MAN_VALUE(最小值) ，Infinity(无穷大)，-Infinity(无穷小)

var age = 21; //整数
var PI = 3.14; //小数
var num1 = 010; // 八进制 0 ~ 7, 010 = 8
var num2 = 0xf; // 十六进制 0 ~ 9 , a ~ f. 0xf = 15
alert(Number.MAX_VALUE); // 数值型的最大值：1.7976931348623157e+308
alert(Number.MIN_VALUE); // 数值型的最小值：5e-324
alert(Infinity); // 无穷大：Infinity
alert(-Infinity); // 无穷小：-Infinity
alert(NaN); // 非数值: NaN

isNaN()：判断非数字，是数字返回false，不是数字true

console.log(isNaN(14)); // false
console.log(isNaN('Str')); // true

2.Boolean(布尔型)

真 true(0)，假 false(1)

3.String(字符串)

是基本包装类型可以包装成复杂类型，字符串是不可变的,会产生返回新的的字符串，修改了原先的字符串值会变但在内存中原先的字符串还存在，所有不要大量拼接字符串
字符串转义符()😦\n)换行，(\b)空格，(\t)缩进

计算字符串长度

str.length

var str = 'my name is luokong';
console.log(str.length); // 18

拼接字符串

concat()，或“➕”号使字符串相接，数值相加，字符相连

var str = 'abc';
console.log(str.concat('defg')); // abcdefg
console.log(str + 'defg'); // abcdefg

查找字符

str.indexOf(‘查找字符’,开始位置) 字符串中查找给定元素的第一个索引，不存在返回-1 。
str.lastlndexOf() 从后往前查找定元素的最后一个索引不存在返回-1
str.charAt(index) 返回指定位置的字符 index索引号
str.charCodeAt(index) 获取定位置的字符的ASCII码
str[index] 获取指定位置的字符h5新增

var str = '好好学习a，A天天向上学';
console.log(str.indexOf('学')); // 2
console.log(str.indexOf('学',3)); // 11
console.log(str.lastIndexOf('学')); // 11
console.log(str.lastIndexOf('学',4)); // 2
console.log(str.charAt(6)); // A
console.log(str.charCodeAt(4)); // 97
console.log(str[9]); // 向

截取字符串

str.substr(start,length) 截取字符串的起始位置，取几个字符
str.slice(start,end) 字符串的截取bengin起始位置end结束位置-1，支持负数
str.substring(start,end) 字符串的截取bengin起始位置end结束位置-1

var str = 'abcdefghijk'
console.log(str.substr(2,6)) // cdefgh
console.log(str.slice(6,-2)) // ghi
console.log(str.substring(2,6)) // cdef

替换字符

str.replace(‘被替换的字符’,‘替换为的字符’) 需要全部替换指定字符需要循环执行

var str = '4477744';
console.log(str.replace('77','8888')); // 448888744

字符转换为数组

str.split(‘分隔符’)

var str = 'red,pink,blue';
console.log(str.split(',')); // ['red', 'pink', 'blue']

字符串大小写转换

str.toUpperCase() 转换成大写
str.toLowerCase() 转换成小写

var str = 'aAbBcCdDeE';
console.log(str.toUpperCase()); // aabbccddee
console.log(str.toLowerCase()); // AABBCCDDEE

4.Undefined(未定义)

与数字相加为NaN，与字符串相加为新的字符串

var atr;
console.log(atr); // undefined
console.log(atr + 66); // NaN
console.log(atr + 'luokong'); //undefinedluokong

5.Null(空)

与数字相加为数字，与字符串相加为新的字符串

var atr = null;
console.log(atr); // null
console.log(atr + 66); // 66
console.log(atr + 'luokong'); // nullluokong

数据类型 1.数据类型的检测

typeof 检查数据类型

var str1 = null;
var str2 = '666';
var str3 = 888;
console.log(typeof str1); // object
console.log(typeof str2); // string
console.log(typeof str3); // number

2.数据类型的转换字符串

1.变量.toString()
2.String(变量)
3.变量➕""

var str = 88888;
console.log(typeof str.toString()); // string 
console.log(typeof String(str)); // string
console.log(typeof (str + '')); // string

数字型

1.parseInt(变量) 整形
2.parseFloat(变量) 浮点型
3.Number(变量) 强制转换
4.算数运算符隐式转换

var str = '88888';
console.log(typeof parseInt(str)); // number
console.log(typeof parseFloat(str)) // number
console.log(typeof Number(str)); // number
console.log(typeof (str - '0')); // number

布尔型

Boolean(变量)，空或否定为false其他为true，’ '，0，NaN，null，undefined

var num1 = '7';
var num2 = 0;
console.log(Boolean(num1)); // true
console.log(Boolean(num2)); // false

运算符算数运算符

（+，-，*，/，%）浮点数运算会存在精度的问题，先乘除后加减，有小括号先算小括号，表达式由数字、运算符、变量等组成的式子称为表达式

console.log(10 + 20) // 30
console.log(10 % 3) // 1

自增(++)自减(–)运算符

加加在前先加后用，加加在后先用后加，减减在前先减后用，减减在后先用后减

var i = 5;
console.log(i++); // 5
console.log(--i); // 4

比较运算符

两个数进行比较时会返回一个布尔值（true/false）
（<，>，>=，<=，，!=，=，!==），==存在隐式转换，=值和类型都相等才执行，! 类型一致的不相等

console.log(3 >= 5) // false
console.log(3 <= 5) // true
console.log(3 == 5) // false
console.log(18 == '18') // true

逻辑运算符

逻辑运算符（返回布尔值）（&&、||、！）
逻辑或（||）两个都为假时为假否则为真
逻辑与（&&）两个都为真时为真否则为假
逻辑非（!）真时假，假时真。相反

console.log(3 > 5 || 3 > 2) // true
console.log(3 > 5 && 3 > 2) // false
console.log(!true) // false

逻辑中断

逻辑或（||）:谁真返回谁,都假则返回最后的值
逻辑与（&&）:谁假返回谁,都真则返回最后的值

console.log(123 || 456); // 123
console.log(0 || 456 || 456 + 123); // 456
console.log(123 && 456); // 456
console.log(0 && 456); // 0

赋值运算符

赋值运算符（=、+=、-=、*=、/=、%=）

var num = 7;
num+=8; // num = num + 8 = 7 + 8 = 15
num*=4; // num = num * 4 = 7 * 4 = 28

逻辑控制语句顺序结构

程序按照代码的先后顺序进行依次执行

选择结构 if 语句

if (条件表达式) { 执行语句 } 条件表达式为true时执行语句，为false不执行语句

if(3 < 5){ // 3 > 5
    alert('3 < 5 执行'); // 3 > 5 执行不执行
}

if-else 双分支语句

if (条件表达式) { 语句1 } else { 语句2 } 条件表达式为true时执行语句1，为false不执行语句2

if(3 > 5){
    alert('表达式为真时执行');
} else {
    alert('表达式为假时执行');
}

if-else if-else 多分支

if (条件表达式1) { 语句1 } else if (条件表达式2){ 语句2 } else { 最后的语句 }
那个条件表达式为真时就执行对应的语句退出分支，都不为真时执行最后的语句

var score = prompt('请输入你的成绩');
if(score >= 90){//输入不同的成绩判断不同的层次
	alert('A');
}else if(score >= 60){
	alert('B');
}else {
    alert('C');
}

三元运算符(?)

a > b ? a : b a > b为真时返回a 假时返回b

var a = 5
console.log(a > 9 ? a : '0' + a); // 05 补零 *** 作当a<9时在前面添零

switch语句

switch与if-else if-else类似匹配对应的值，确定值用switch判断范围用if，switch直接跳转到对应的值，if是依次判断效率低

var a=prompt("输入一个数"); //prompt获取的是字符串
switch(a){ //类型需要一致才能执行
	case '1':
		alert("你输入的是1");
		break; //跳出switch循环
	case '2':
		alert("你输入的是2");
		break;
	default: // 都不满足执行
		alert("你输入是其他的数");
}

循环结构

continue跳过这一次的循环
break跳出循环

for 循环

for(var i=0;i<10;i++){ 循环体 }

for(var i=0;i<10;i++){ // 循环了10次
	console.log('这是第'+ i + '次循环');
}

while 循环

while（true）{ 循环体 } 为真时执行循环，需要在内部定义一个变量来跳出循环

var i = 1;
while(i <= 10){ //对i进行判断为false时跳出循环
    console.log('这是第'+ i + '次循环');
    i++; // 需要每次对i++
}

do—while 循环

do{ 循环体 } while（true）至少执行一次，为真时执行循环，需要在内部定义一个变量来跳出循环

do{
    var i = prompt('输入小于10将重复执行'); 
}while(i <= 10) //当表达式为true时执行循环

数组(array) 创建数组

var arr = new Array();
var arr = [];

遍历数组

var arr = [1,2,3,4,5,6,7,8];
//数组的下标从0开始，通过循环遍历
for(var i=0;i<arr.length;i++){ //arr.length计算数组的长度
    console.log(arr[i]);
}

数组新增元素

// 1.修改length长度
var arr = ['red','green','blue']
arr.length = 5;
console.log(arr); // ['red', 'green', 'blue', empty × 2] empty 为空输出为Undefined
// 2.修改索引号
arr[6] = 'hotpink';
console.log(arr); // ['red', 'green', 'blue', empty × 3, 'hotpink']

判断数组

arr instanceof Array 当arr为数组时返回为true否则返回false
Array.isArray(arr); 当arr为数组时返回为true否则返回false

var arr = [1,2,3,4,5];
console.log(arr instanceof Array); // true
console.log(Array.isArray(arr)); // true

数组排序

arr.reverse() 翻转数组中的元素，返回新的数组
arr.sort() 对数组的元素进行排序，返回新的数组

var arr = [3,5,74,4,7,8];
arr.reverse();
console.log(arr); // [8, 7, 4, 74, 5, 3]
arr.sort(function(a,b){
	return a-b; //a-b升序或b-a降序
 }) 
console.log(arr); // [3, 4, 5, 7, 8, 74]

增

arr.push(参数1…) 在数组末尾添加一个或多个数组元素返回新数组的长度
arr.unshift(参数1…) 在数组开头添加一个或多个数组元素返回新数组的长度
arr.splice(第几个开始,要删除个数,加入的元素) 返回被删除项目的新数组

var arr = [1,2,3,4,5]
arr.push(6); // 在数组末尾添加返回长度 6 
console.log(arr); // [1, 2, 3, 4, 5, 6]
arr.unshift(7); // 在数组开头添加返回长度 7 
console.log(arr); // [7, 1, 2, 3, 4, 5, 6]
arr.splice(3,3,'a','b','c');
console.log(arr); // [7, 1, 2, 'a', 'b', 'c', 6]

删

arr.pop() 删除最后一个元素返回删除的元素值
arr.shift() 删除第一个元素返回第一个元素的值
arr.splice(指定数组下标,删除几个) 删除指定位置的数组

var arr = [1,2,3,4,5]
arr.pop(); // 返回 5
console.log(arr); // [1, 2, 3, 4]
arr.shift(); // 返回 1
console.log(arr); // [2, 3, 4]
arr.splice(1,1); // 删除下标为1开始的一个数组元素
console.log(arr); // [2, 4]

查

arr.indexOf() 数组中查找给定元素的第一个索引不存在返回-1 下标
arr.lastlndexOf() 从后往前查找定元素的最后一个索引不存在返回-1
arr.slice(begin,end) 数组的截取bengin起始位置end结束位置-1

var arr = [1,2,3,4,3,5]
console.log(arr.indexOf(3)) // 2 不存在返回-1
console.log(arr.lastIndexOf(3)) // 4 不存在返回-1
var arr1 = arr.slice(2,4);
console.log(arr1); // 截取数组下标2 - 4 之间的值返回一个新数组 [3, 4]

数组转字符串

arr.toString() 数组转换成字符串,逗号分隔
arr.join(‘分隔符’) 数组转换成字符串,指定符号分隔

var arr = ['a','b','c','d']
var str = arr.toString(); // 默认用 ‘ , ’ 分隔 返回字符串
var str1 = arr.join('|'); // 指定分隔符分隔
console.log(str); // a,b,c,d
console.log(str1); // a|b|c|d

函数函数声明与使用

function 函数名(形参){} 调用函数名(实参)
var fun = function() {} 匿名函数调用fun()
(function() {})() 或 (function() {} ()) 立即执行函数

function fn() { // 普通函数
	console.log('调用了这个函数fn')
}
fn(); // 调用了这个函数fn
var fun = function () { // 匿名函数
	console.log('调用了这个函数fun')
}
fun(); // 调用了这个函数fun
(function() { // 立即执行函数
	 console.log('立即执行函数')
})()  // 立即执行函数

return返回值

return 是函数中返回数据的东西，当函数中遇到return会跳出函数不执行接下来的内容

function fn() { // 普通函数
return 666;
console.log('不执行这句话')
}
console.log(fn()); // 666

形参和实参

1.实参的个数和形参一致正常
2.实参的个数多于形参取形参的个数
3.实参的个数少于形参多出来的形参未定义参与计算为NaN

function fn(num1,num2) {
	console.log(num1+num2)
}
fn(3,5); // 8
fn(3,4,5); // 7
fn(1); // NaN

arguments

在不确定有多少参数传递的时候用arguments来获取，传递所以实参为伪数组

function fn() {
	console.log(arguments) // arguments = [3,4,5]
	console.log(arguments[2]) // 5
}
fn(3,4,5);

全局变量与局部变量

全局变量：在全局的作用域下都能使用，没有用var声明当全局变量
局部变量：只能在函数定义的内部使用

var num = 10; // 全局变量
function fn(){
	var num1 = 10; // 局部变量
	console.log(num); // 全局变量的10
}
fn();
console.log(num1); // num1 is not defined

作用域链与预解析

作用域链就近原则
java预解析将变量var(为赋值)和函数提前解析在按顺序执行

function f1(){ //作用域
	var num = 123;
	function f2(){
		console.log(num);
	}
	f2();  // 123
}
var num = 456;
f1();

var a = 18;
fun();
function fun(){
    var b = 9;
    console.log(a);
    console.log(b);
    var a = '123';
}
//相当于
var a;
function fun(){
    var b;
    var a;
    b = 9;
    console.log(a);
    console.log(b);
    a = '123';
}
a = 18;
fun();

对象

所有具体的形或物都阔以称为对象，由属性(类似变量)和方法(类似函数)组成。

创建对象

var obj1 = new Object();
var obj2 = {
    name: 'luokong', //用":"赋值用","号隔开最后阔以不用
    age: 18, // 属性
    fun: function () { // 方法
        console.log('luokong')
    }
}

使用对象

var obj = {
	name: 'luokong', //用":"赋值用","号隔开最后阔以不用
	ge: 18, // 属性
	fun: function () { // 方法
		onsole.log('luokong')
	}
}
console.log(obj.name) // 对象名.属性名 luokong
console.log(obj['age']) // 对象名['属性名'] 18
obj.fun() // 对象名.方法名() luokong

构造函数

// 通过构造函数定义多个对象
function Star(uname,age,sex){
	this.name = uname;
	this.age = age;
	this.sing = function(content) {
		console.log(content)
	}
}
var obj = new Star('luokong',18,'男') // Star 首字母要大写
obj.sing('这是构造函数')
console.log(obj);

数学对象(Math)

console.log(Math.PI) // 圆周率 3.141592653589793
console.log(Math.max(1,99,3)) // 最大值 99
console.log(Math.min(-5,-10)) // 最小值 -10
console.log(Math.floor(3.9)) // 向下取整 3
console.log(Math.ceil(3.1)) // 向上取整 4
console.log(Math.round(4.4)) // 四舍五入 4
console.log(Math.abs(-45)) // 绝对值 45
console.log(Math.random()) // [0-1)之间的随机数
// Math.floor(Math.random()*(max-min+1)-min);
console.log(Math.floor(Math.random()*(100-1+1)-1)) // [1-100]的随机数

日期对象(Date)

var date = new Date(); 
console.log(date.getFullYear()) //年份
console.log(date.getMonth() + 1) //月份(0-11)
console.log(date.getDate()) //日期
console.log(date.getDay()) //星期几(周日0 到周六6)
console.log(date.getHours()) //小时
console.log(date.getMinutes()) //分钟
console.log(date.getSeconds()) //秒

时间戳

（1970年开始到现在的毫秒数）1000毫秒等于1秒

// 获取时间戳
var date = new Date() // 1652600522903
console.log(date.valueOf());
console.log(date.getTime());
date1 = +new Date();
console.log(date1);
console.log(Date.now());

简单数据类型(栈)按值存储不会相互影响
复杂数据类型(堆)通过new创建按址存储会相互影响

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/932576.html

JavaScript基础笔记（复习）

发表评论

评论列表（0条）