02JavaScript

THL577

已于 2024-02-20 16:54:18 修改

阅读量326

点赞数 8

文章标签： javascript 前端开发语言

于 2024-02-20 16:36:35 首次发布

本文链接：https://blog.csdn.net/qq_47774323/article/details/136193653

版权

JavaScript

输入输出

输入框：prompt('输入提示');
弹出警示框：alert('弹出内容');
控制台输出框：console.log('控制台输出内容');

数据类型

简单数据类型

数据类型：
    js的变量数据类型是只有在程序运行过程中，根据等号右边的值来确定的；
    js的变量数据类型是可以变化的
    获取变量的数据类型：typeof 变量名

简单数据类型：
    数字型Number：
        整数，小数，8进制（0o 0-8）16进制（0x 0-f）
        数字类型的最大值 Number.MAX_VALUE
        数字类型的最小值 Number.MIN_VALUE
        无穷大 Infinity
        无穷小 -Infinity
        非数字 NaN
        isNaN()用来判断非数字，如果是数字返回false,如果不是数字返回true

    字符型String：
        引号的嵌套：外双内单，或外单内双
        转义符： 换行\n  斜杠\\  单引号\'  双引号\"  缩进\t  空格\b
        检测获取字符串长度 字符串.length
        字符串的拼接 + 只要有字符串和其他类型相拼接就是字符串

	布尔型 boolean：
        false true
        布尔型和数值相加时true的值为1，false的值为0

	Undefined：
        如果一个变量只声明不给值输出为Undefined
        Undefined和数字相加结果为NaN

	Null:
		null和数字相加结果为数字

数据类型的转换

转换成字符串：
    变量名.toString();
    String(变量名);
    隐式转换：变量名 + "";

转换为数字：
    Number(变量名)
    parseInt/parseFloat(变量名)
    parseInt/parseFloat('120px')  //120
    parseInt/parseFloat('rem120px') //NaN
    隐式转换：利用算数运算 减- 乘* 除/  '12' * 1；  '123' - '120'

转换为布尔型         
    Boolean(变量名)
    0, NaN, null, undefined转换为false,其余全为true

运算

算术运算：
    加+ 减- 乘* 除/ 取余%*/
    浮点数精度问题：由于浮点数的最高精度位为17位，计算是会出现精度差,对于浮点数不要直接判断两个浮点数是否相等。

自增自减运算 ++ --
    前置递增递减：先自加或自减，后返回值
    后置递增递减：先返回值，后自加或自减

比较运算符： 
    小于<  大于>  大于等于>=  小于等于<=  
    等于（会转型，只需要数据的值一致）==  不等于（会转型）!=
    全等（数值和数据类型一致）===  全不等!==  

逻辑运算符：
	与&& 或|| 非!    

赋值运算符：
	= += -= *= /= %=     

运算符优先级：
    小括号，
    一元运算（++ -- !） 
    算数运算（先*  / % 后+ -）
    关系运算（< > <= >=） 
    相等运算（== != === !==）
    逻辑运算（先&&后||） 
    赋值运算（=） 
    逗号运算（,）

流程控制

if语句：
    if(条件表达式){
    	条件执行语句
    }

三元表达式：
	表达式? 表达式1: 表达式2;

swith语句
    swith(表达式){
        case value1:
        	表达式;
        	break;
        case value2:
        	表达式;
        	break;
        default:
        	表达式;
    }

for循环
    for(初始化变量;条件表达式;操作表达式){
    	循环体语句
    }

while循环
    while(条件表达式){
    	循环体语句
    }

continue; 当条件满足时跳过本次循环

break; 当条件满足时跳出循环，不在执行该循环体

数组

创建数组：
    利用new创建数组：
    var arr = new Array();

    利用数组自变量创建数组：
    var arr2 = [];
    var arr3 = ['1', 2, '小白', true];

遍历数组：
    获取数组长度：数组名.length
    for (var i = 0; i < arr3.length; i++) {

    }

数组新增加元素：
    通过修改数组的length长度新增元素：
    arr6.length = 数组长度;
    超出部分，相当于声明变量为给值，默认值为undefined

    通过直接修改数组索引新增数组元素：
    arr3[索引号] = '元素';

函数

函数定义：
    利用function关键字调用（命名函数）
    function 函数名（）{
    	函数体
    }

函数表达式（匿名函数）
    var 变量名 = function(){};
    函数表达式声明方式和声明变量差不多，只不过变量里面存的是值，而函数表达式存的是函数
    函数表达式也可以进行参数的传递

调用函数：
    函数名();
    变量名();

实参和形参
    实际参数多与形参，只取到形参的个数
    实际参数少于形参，多的形参相当于只定义不赋值为undefined

return作用：
    返回值return num1;
    终止函数：return后面代码将不在执行
    当返回的为多个值，如果用逗号隔开将只返回最后一个值：   return num1, num2; //返回num2
    若要返回多值可以用数组进行返回：return arr;
    若函数没有返回值，则默认返回undefined

arguments使用：
    当不确定有多少个参数进行传递时，可以通过arguments来获取
    arguments是一个伪数组，具有length属性，按索引的方式进行排序
    但不具有数组的push和pop方法

作用域

作用域：
    就是代码名字（变量）在某个范围内起作用和效果，目的是为了提高程序的可靠性，更重要的是减少命名冲突
    全局作用域：在整个script内部，或者独立的js文件
    局部作用域（函数作用域）：在函数内部，这个名字只在函数内部起效果和作用
    块级作用域：在es6之前没有块级作用域

变量作用域
    全局变量：在全局作用域下的变量，在函数内部没有申明直接赋值的变量也属于全局变量，只有在浏览器关闭时才会被销毁，比较占用内部资源
	局部变量：在局部作用域下（函数内部）的声明的变量，函数的形参也可以看成局部变量，在代码块执行时初始化，在执行结束后就会被销毁，可节省内存空间

作用域链：
    内部函数访问外部函数的变量，采取的是链式查找的方式来决定取哪一个值，这个结果称作为作用域链
    查找方式：就近原则

预解域

预解域
    1、预解析：js会把所有的var和function声明的变量不带赋值，提升到当前作用域的最前面
    2、代码执行：按代码书写顺序从上向下执行

对象

对象：
	是一组无序的相关属性和方法的集合，一切事物皆对象
    属性：事物的特征
    方法：事物的行为
    
    变量和属性他们都是用来存储数据的
    变量：单独声明并赋值，使用的时候直接写变量名，单独存在
    属性：在对象里面的不需要申明，使用时必须是对象.属性

    函数和方法都实现某种申明
    函数：是单独申明，并且调用的 函数名() 单独存在
    方法：在对象里面，调用时对象.方法()

对象的创建：
    用字面量创建对象：
    里面的属性和方法采取键值对的形式
    多个属性和方法直接用逗号隔开
    方法后面跟一个匿名函数
    var obj = { }; //创建空对象
    var obj1 = {
        uname: '张三丰',
        age: 18,
        sex: '男',
        sayHi: function (){
        	console.log('hi~');
        }
    }

    利用new Object创建对象
    利用 等号 = 赋值的方法 ，添加对象的属性和方法
    每个属性和方法之间用分号结束
    var obj2 = new Object();  //创建一个空对象
    obj2.uname = '张三疯';
    obj2.age = 18;
    obj2.sex = '男';
    obj2.sayHi = function (){
    	console.log('hi~');
    };

    利用构造函数创建对象
    构造函数名第一个字母大写
    构造函数泛指某一大类
    对象：是一个具体的事物，具体只某一个
    function 构造函数名() {
        this.属性 = 值;
        this.方法 = function(){
        }
    }
    
对象的调用：
	new 构造函数名();
    new：在内存中创建一个空对象，让this指向这个空对象，执行构造函数里面的代码，给这个对象添加属性和方法，返回这个对象
    function Star(uname, age, sex){
        this.name = uname;
        this.age = age;
        this.sex = sex;
        this.sing = function (sang){
        	console.log(sang)
        }
    }

使用对象
    调用对象的属性：
        对象名.属性名
        对象名['属性名']
    调用对象的方法：
    	对象名.方法名()

遍历对象
    for (变量 in 对象名字) {
    	执行代码
    }
    for (var k in obj2) {
        //k 变量 输出   得到的是 属性名
        console.log(k);
        //obj2[k] 得到的是属性值，  注意：k不需要引号
        console.log(obj2[k]);
    }

Math对象

绝对值：Math.abs();
向下取整：Math.floor();
向上取整：Math.ceil();
四舍五入：Math.round();
最小值：Math.min();
Math对象随机数方法  random() 返回随机小数 0 <= x < 1  不含参数
返回两个数字之间的随机整数   min <= x <= max
    function getRandom(min,max){
        return Math.floor(Math.random()*(max - min + 1) + min);
    }

日期对象

Date() 日期对象 
    是一个构造函数 必须使用new来创建构造对象，如果没跟参数返回当前系统时间
    var date = new Date();

    参数的常见写法 2021,11,02 或者'2021-11-02 8:8:8'
    var date1 = new Date(2021,11,2);
    console.log(date1); //返回时间比输入时间多一个月

    var date2 = new Date('2021-11-2 8:8:8');
    console.log(date2); //返回输入时间

    年：时间对象.getFullYear()  
    月(0-11)：时间对象.Month() + 1 
    日：时间对象.getDate() 
    星期(0-6)：时间对象.getDay() 
    小时：时间对象.getHours() 
    分钟：时间对象.getMinutes() 
    秒钟：时间对象.getSeconds()

封装函数显示时间
    function getTime(){
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
        var day = date.getDay();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        var str = year + '年' + month + '月' + dates + '日 ' + arr[day] + ' ' + hours + ':' + minutes + ':' + seconds;
        return str;
    }

获取日期的总毫秒数
	距离1970来1月1日过了多少毫秒
    实例化对象
        console.log(date.valueOf());
        console.log(date.getTime());

    简单写法
    	var now = + new Date();
    	console.log(now);

    HTML5新增加的方法
        var now1 = Date.now();
        console.log(now1);

封装函数倒计时
function conutDown(time){
    var stop = time.getTime();
    console.log(stop);
    var now = + new Date();
    console.log(now);
    var times = (stop - now)/1000;
    var d = parseInt(times/60/60/24);
    var h = parseInt(times/60/60%24);
    var m = parseInt(times/60%60);
    var s = parseInt(times%60);
    return d + ':' + h + ':' + m + ':' + s;
}

数组对象

创建数组
    利用数组字面量
    var arr = [1,2,312,132,12,43,423,32,123,423,4325,56,75];

    利用new Array()
    var arr1 = new Array();   //创建一个空数组
    var arr2 = new Array(2);  //表示数组长度为2
    var arr3 = new Array(2,3,4) //表示数组[2,3,4]

检查数组
    console.log(arr instanceof Array);
    console.log(Array.isArray(arr)); //HTML5中的方法

添加或者删除数组
    末尾添加一个和多个元素 push(元素1,元素2,...)
    删除最后一个元素 pop()
    向数组的开头添加一个或者多个元素 unshift(元素1,元素2,...)
    删除数组第一个元素 shift()

数组索引
    查找给定元素的第一个索引，存在为索引值不存在为-1
    console.log(arr.indexOf(423));
    查找给定元素的最后一个索引，存在为索引值不存在为-1
    console.log(arr.lastIndexOf(423)); 

数组排序
    翻转数组
    arr.reverse();
    console.log(arr);
    冒泡排序
    arr.sort(function (a,b){
        return a-b; //升序
        //return b-a; //降序
    });
    console.log(arr);

数组转换成字符串
    var str = arr5.toString();
    var str2 = arr6.join('#');  //里面可以添加分割符

字符串对象

字符串对象：
    var str = 'andy';
    console.log(str.length);
    基本包装类型：就是把简单数据类型包装成复杂数据类型
        1.把简单数据类型转换成复杂数据类型
        var temp = new String('andy');
        2.把临时变量的值给str
        str = temp;
        3.销毁这个临时变量
        temp = null;

字符串不可变：内容改变是由于地址变了，在内存中出现了一个新的空间	

根据位置返回字符
    console.log(str1.charAt(9));     //返回字符
    console.log(str1.charCodeAt(9)); //返回字符对应的ASCII码
    console.log(str1[9]);      //HTML5 返回字符

根据字符返回位置
    indexOf(要查找的字符，开始的位置);
    console.log(str1.indexOf('s'));       //查找给定内容的第一个索引，存在为索引值不存在为-1
    console.log(str1.lastIndexOf('s'));  //查找给定内容的最后一个索引，存在为索引值不存在为-1

字符串操作方法
    字符串的拼接
        concat(字符串1,字符串2,字符串3,...) 相当于 +
        var str2 = 'red';
        console.log(str.concat(str2));
    字符串索取
        substr(开始索引号，取的个数)
        console.log(str1.substr(3,5));
        slice(开始索引号，结束索引号)   结束的位置截取不到   可以使用负值 负值代表从左向右数数
        console.log(str1.slice(-6, -2));
        substring(开始索引号，结束索引号) 结束的位置截取不到   不可以使用负值
        console.log(str1.substring(2, 6));
    字符串的替换
        replace(被替换的字符串，要替换为的字符串)
        console.log(str.replace('a','b'));
    字符串转换为数组
        split('切割位置')
        var str3 = 'a,b,c,d';
        console.log(str3.split(',b'));
        转换为大写 toUpperCase()
        console.log(str.toUpperCase());
        转换为小写 toLowerCase()
        console.log(str.toLowerCase());