昔洛 的个人博客

Bug不空,誓不成佛

目录
JavaScript 基础
/        

JavaScript 基础

学习内容

  • JavaScript 简介
    • 简介
    • 书写规范
    • 数据类型
    • 常用输出方式
    • typeof
    • 数据转换
  • JavaScript 语法
    • 基础语法
    • 语句结构
    • 数组
    • 函数
    • 作用域
    • 预解析(提权)
    • 对象
    • 为什么要根据数据创建结构
  • 内置对象、内置 API
    • Math 数学
    • Date 日期对象
    • 数组操作
    • 字符串操作

一、JavaScript 简介

JavaScript 是用于制作的网页与用户进行交互,其最初的目的是为了进行表单验证。

  • JavaScript 的组成部分
    • ECMAScript 简称 ES,指的是 JavaScript 的基础语法,语言规范
    • BOM 浏览器对象模型,本质上是一组用来操作浏览器功能的工具
    • DOM 文档对象模型,本质上是一组用来操作文档(HTML页面)的工具。
  • 书写方式
    • 外链式
      • <script src="地址"></script>
      • 不可在外链式的标签内写书写代码,不会生效的。
    • 内嵌式
      • <script>这里书写代码即可</script>
    • 行内式
      • <button onClick="alert('点击')">
  • 变量命名规范
    • 规则:
      • 变量名可以使用字母,_下划线,$美元符 开头
      • 组成中除了上面的形式外,还可使用数字
      • 不能使用 js 中的关键字和保留字
      • 名称区分大小写
    • 规范:
      • 命名有意义
      • 命名由多部分组成时,推荐使用驼峰命名法
  • js中的常用输出方式
    • alert() 当初提示框
    • console.log() 在控制台中输出内容(常用)
    • confirm() 确认提示框,比 alert 多个取消按钮
    • prompt() 输入提示框,比confirm多了个输入框
    • document.write() 在页面中展示内容
      • 如果内容中存在标签,标签会生成为 html 标签结构
      • 设置为 body 中
  • 数据类型
    • 基本类型:
      • number:任何数字类型,包括浮点数
        • 组成:生活中见到的任何数字
        • 特殊值:NaN
      • 字符串类型 string
      • 布尔类型 boolean
      • undefined 未定义(默认为空)
        • 通常是出现在某些操作的默认值中
      • null 空(主动设置为空)
  • 类型检测方式 typeof
    • 使用方式:
      • typeof 数据;
      • typeof(数据);
    • 结果为数据对应的类型名称,名称为字符串形式。
    • 其对 null 测试结果不准确,对复杂类型的检测结果不准确
  • 数据类型转换
    • 转换为字符串
      • 数据.toString() (null 和 undefined 无法使用,数值类型要 100..toString())
      • String(数据),任何数据都可以使用
      • 隐式转换,任意字符串进行 ‘+’ 操作表示内容连接,结果为连接后的字符串
    • 转换为数值类型
      • Number(数据)如果有非数字字符,则为 NaN
      • parseInt(数据)如果第一个字符是数字解析到字符停止,如果解析失败返回 NaN
      • parseFloat(数据)与 parseInt 规则一样
      • 算术运算中除了’+’操作符与字符串会拼接成字符串,其他的算术运算符都会隐式转换成数字类型
    • 布尔类型转换
      • 转换方式:Boolean()
      • 六个否定含义为 false (0 NaN null undefined false),其他都为true

二、JavaScript 语法

JavaScript 的基础语法与其他语法相类似

  • 声明变量:
    var a = ? var 声明的变量可以使任何基本数据类型或复杂类型,不加 var 直接复制 sum=100 则 sum 直接默认为全局变量,并且 var a=b=c=1 只有 a 是标准变量命名方式。
  • 分支语句:
if: 
	if() {
	} else {
	}
	if() {
	} else if() {
	} else {
	}
switch(i) {
	case 1:break;
	case 2:break;
	case 3:break;
	case 4:break;
}
  • 循环语句
for(var i = 1;i<10;i++){}
while(true){}
do{
}while(true);
  • 数组声明方式:
var arr = [];
var arr = new Array();
var arr = [1,2,3,4,5];
  • 基本数据与复杂数据的区别
    • 基本数据类型占用内存小,直接存储在栈内存中, 其内存单元存储的位数据,而复杂类型占用空间会大,其内容存储在堆区,而栈区的内存单元格则存储着复杂类型的地址,用来指向堆区的内容。
    • 基本数据类型直接复制会复制相同的值,而且是相互独立,互补影响,而复杂类型数据直接复制的话复制的是地址,两个指向的同一个对象,改变一个,影响另一个。
  • 函数声明方式:
// 函数声明语句 会提权
function 函数名() {
}
// 函数表达式 不会提权
var 函数名 = function() {
};

// 匿名函数
function () {
}

// 立即执行函数
(function(){
}());
或
(function(){
})();

函数的参数:可以接受自定义的,也可以接受更多的,如果形参不够实际给的,可以使用函数内置对象 arguments ,它是一个伪数组,类似于数组的访问方式,用来存储传入的参数个数

函数返回值默认为 undefined,它可以返回任意数据类型
  • 作用域(一般情况下)
    • 全局作用域:只要不在函数内,就是全局作用域
    • 局部作用域:任意函数内都称为局部作用域
    • 全局变量和函数: 全局作用域中声明的变量和函数称为全局变量和全局函数
    • 局部变量和函数:局部作用域中声明的变量和函数称为局部变量和局部函数,其访问范围只能在当前作用域内部访问,无法被外部作用域访问,内部可以访问,内部的内容也可以…
    • 作用域链:
      • 首先查找当前作用域,如果存在则使用
      • 如果不存在,会查找父作用域,如果存在则使用
      • 最终找到全局作用域,如果存在则使用,如果不存在,取值报错,赋值隐式声明为全局变量。
  • 预解析(提权)
    js 代码在执行之前解析器对代码预先进行了解析操作,如下
// 解析前
var sum = 10;
function test() {
	console.log(num);
	var sum = 20;
}
test(); // undefined

// 解析后
var sum;
function test() {
	var sum;
	console.log(num);
	sum = 20;
}
sum = 10;
test(); // undefined

自己总结的秘籍:先定义,后执行;寻变量,就近查,表达执行顺序排(表达式声明,立即执行函数)

  • 对象
    • 对象是一种复杂数据类型
    • 对象是有一个或多个属性组成的
    • 属性是由属性名和属性值组成的
    • 这种写法称为键值对
    var obj = {
    	name: 'jack',
    	age: 18,
    	gender: '男'
    }
    var obj2 = new Object();//声明了一个空对象
    
    • 对象的属性操作
      • 对象.属性名
      • 对象[‘属性名’]
    // 声明对象同时设置初始属性:
        var obj = {
            name : 'jack',
            age : 18,
            gender : '男'
        };
    
        // 声明后进行的属性操作:
        // 方式1:
        console.log( obj.name ); // 'jack'
        obj.name = 'rose';
        console.log( obj.name ); // 'rose'
    
        // 方式2:
        console.log( obj['name'] ); // 'rose'
        obj['name'] = '张三';
        console.log( obj['name'] ); // '张三'
    
    • 对象的属性和方法
      • 含义:方法其实也是属性,只是属性值保存的是函数,所以称为方法。
      • 起这个名字的作用:用来区分函数属性和其他普通属性
        • 函数需要进行调用才有意义
    • 设置方式:
      • 可以设置匿名函数
      • 也可以设置命名函数
    • 对象的遍历操作:
    for(var key in obj) {
    	console.log(obj[key]);
    }
    
    • 对象的属性删除:
      delete obj.name将obj 的 name 属性删除,此操作仅可以删除对象的属性,无法删除其原型中的 name(如果有)
  • 为什么要根据数据创建结构
    • 传统的 html 和 css 写法如果要进行内容修改,操作比较繁琐,很慢。
    • 通过 js 代码进行设置处理起来更为简便、快速
    • 操作步骤
      • 1、明确数据的含义
      • 2、明确数据对应的结构
      • 3、根据数据进行结构的生成即可
        • 在字符串中进行数据拼接的方法:
          • 找到要放置数据的位置,书写两个引号
          • 在书写两个 +
          • 将数据放入即可
        • 如果要生成复杂结构,会出现多行字符串导致的错误
          • 解决方式:在每行字符串最后设置一个\去除换行符的功能即可
  • 多对象的创建
// 通过工厂方式进行创建
function Person(name,age,gender) {
	var obj = {};
	obj.name = name;
	obj.age = age;
	obj.gender = gender;
	return obj; 
}
var person 1 = Person('lily',20,'男');

// 通过构造方法创建
function Person(name,age,gender) {
	this.name = name;
	this.age = age;
	this.gender = gender;
}
var person1 = new Person('Mike',18,'男');
  • 对象类型检测相关
    • typeof 只能用于除 null 以外的其他基本类型检测
    • instanceof
      • 格式:数据 instanceof 构造函数名
      • 返回值:boolean
    • constructor (常用)
      • 格式:数据.constructor
      • 返回值:获取创建当前函数的构造函数
    • Object.prototype.toString.call(数据)
      • 作用:可以获取任意数据类型的类型名称
      • 返回值:[object 首字母大写的类型名称]
    console.log( Object.prototype.toString.call('abc') ); // '[object String]'
    console.log( Object.prototype.toString.call(200) ); // '[object Number]'
    console.log( Object.prototype.toString.call({}) ); // '[object Object]'
    console.log( Object.prototype.toString.call(null) ); // '[object Null]'	
    
    • null 数据类型检测:
      • typeof 对 null 检测结果为 ‘object’ 检测结果不准确
      • null 一定为基本类型
      • 检测 null 的方式
        • 一般不写上面的检测方式,直接进行:
          • 数据 === null
          • Object.prototype.toString.call(null) === [‘object Null’] 太麻烦,但是功能没问题
  • 复杂类型比较
    复杂类型比较的是其地址,而不是内容

三、内置对象

  • Math
    • Math.max() 取最大值
    • Math.min() 去最小值
    • Math.random() 取随机数
    // 取一个区间的数
    function selectFrom(lowerNum,upperNum) {
    	var choice = upperNum - lowerNum + 1;
    	return Math.floor(Math.random()*choice + lowerNum);
    }
    
    • Math.ceil() 向上取整
    • Math.floor() 向下取整
    • Math.round() 四舍五入,负数.5特别
    • Math.abs() 取绝对值
  • Date 日期对象 var date = new Date();
    • var date = new Date() 表示当前计算机时间
    • var date = new Date(‘2018-7-5 15:13:6’); // 方式1:传参设置为指定的某个时间
    • var date = new Date(2018, 0, 5, 15, 13, 6); // 方式2:数值形式注意月份从0开始
    • date.getFullYear() 获取年
    • date.getMonth() + 1 获取月,月份从 0 开始
    • date.getDate() 获取当前日数
    • date.getDay() 获取星期,周日为0
    • date.getHours() 获取小时
    • date.getMinutes() 获取分钟
    • date.getSeconds() 获取秒
    • date.getMilliseconds() 获取毫秒
    • date.getTime() 获取当前时间毫秒,+date,Date.now(),date.valueOf(),Date.parse(‘2018-7-5’);
  • 数组操作
    • splice() 方法,用来在数组的任意位置进行增删改操作
      • 参数1:操作开始位置的索引值
      • 参数2:要删除的元素个数
      • 后续参数:向删除位置添加的元素值(个数无需对应)
      • 返回值:被删除的元素组成的新数组
    • slice() :取字符串,第一个参数代表要开始的索引,第二个参数为结束索引(不包含),不传参数则默认表示从头取到尾
    • indexOf():查找字符的位置,第一个参数为要查找的字符,第二个参数为开始的索引位置,示例代码:
    var index = -1;
    do {
    	index = arr.indexOf('a',index+1);
    	console.log(index);
    }while(arr.indexOf('a',index+1)!==-1);
    
    • 数组的排序方式
    var arr = [1,4,2,3,11,10,33,22];
    arr.sort(function (a,b) {
    	return a-b;
    });
    console.log(arr);
    
    • join(): 将数组以特定的符号连接成字符串
  • 字符串操作:
    • 字符串索引:
      • str[index] (IE6以下不支持)
      • str.charAt(index)
    • 拷贝字符串
      • str.slice():第一个参数是开始的索引,第二个参数是拷贝的结束索引(不包含)
      • substring():与 slice 一样
      • substr() 用法一样
    • indexOf() 用法与数组的 indexOf基本一样,检索字符串中的多个字符组成部分,返回的是首字符的索引,如果检索空字符串,没有第二个参数,一定返回 0;
    • replace() 字符串替换,一次只能替换一个,需要使用循环可以替换所有
    while(str.indexOf('-') !== -1) {
    	str = str.replace('-', '|');
    }
    console.log(str);
    
    • split()
    //不传参数没有意义
    //传入空字符串,将每个字符分隔
    //与数组的 join 方法结合使用
    // 1 替换字符串中的部分内容
    // var str = 'a-b-c-d-e';
    // 将字符串中的 - 替换为 |
    str.split('-').join('|'));
    
    // 2 删除字符串中的部分内容
    var str = 'a-b-c-d-e';
    // 将字符串那种的 - 删除
    console.log(str.split('-').join(''));
    
    • trim() 去除字符串中两端空格
    var str = '    jack    ';
    console.log(str.trim());
    console.log(str);
    
没有什么代码的执行速度比空代码更快。
评论
歌名 - 歌手
0:00