ECMAScript复习笔记--查漏补缺，小白入门

最新推荐文章于 2024-07-25 15:46:04 发布

不落不息

最新推荐文章于 2024-07-25 15:46:04 发布

阅读量174

点赞数

分类专栏： # javascript 文章标签： javascript ecmascript

本文链接：https://blog.csdn.net/weixin_43416215/article/details/108998821

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

变量

var num = 123;

命名规则

由字母、数字、下划线、$符号组成，但不能以数字开头
不能与关键字和保留字相同，例如 for
区分大小写

规范：
变量名：有意义，遵守驼峰命名法，例如 firstName

数据类型

简单数据类型

number类型

数值型的，例如10 、oxAB（十六进制）、浮点数（不要判断两个浮点数是否相等）
在这里插入图片描述
注意
NaN ：not a number

NaN 与任何值都不相等，包括他自己
isNaN() 判断不是number，不是为true，是number 的则为false

string类型

'abc'  "abc" "abc\'abc"

str.length ---->获取字符串的长度
str1 + str2 ---->把两个字符串拼接在一起
str1+number1 ---->先把数值型的自动转为字符串然后再进行字符串拼接
str1+true ---->同上
【注意】
字符串具有不可变性

	var s = 'abc'; 
	s = 'bcd'; //在内存中是重新开辟一个空间放置，上面的abc依旧存在

故当拼接大量字符串的时候，会有性能问题

常用方法

			charCodeAt() // 获取指定位置处字符的ASCII码
			charAt()   // 获取指定位置的字符，|str[0]同样的作用，HTML5，存在兼容问题
			// 字符串操作方法
			concat() // 拼接字符串，等效+

			slice()  // 从start开始，截取到end之前的位置
			substring() // 从start开始，截取到end之前
			substr() // 从start开始，截取length个字符

			search() // 查找，返回第一个查找到的索引，无则返回-1，支持正则表达式
			replace() // 只会替换第一个找到的字符串
			split()   //  str.split(',') 将字符串按逗号切割成数组
			// 位置方法参数1：查找的内容，参数2：指定开始查找的位置
			indexOf()/lastIndexOf()
			// 去除空白
			trim() // 只能除掉字符串前后的空白
			// 大小写转换方法
			toUpperCase() // 转成大写
			toLowerCase()  // 转成小写

获取url后面的用户信息，方法试炼

			var url = 'sadfiuefbdsbvaks?name=zs&pw=2412&flag=true';
			function getParams(url) {
				var index = url.indexOf('?') + 1;
				var params = url.substr(index);
				var arr = params.split('&');
				var o = {};
				for(var i = 0; i < arr.length; i++) {
					var temp = arr[i].split('=');
					var key = temp[0];
					var value = temp[1];
					o[key] = value;
				}
				return o;
			}
			console.log(getParams(url));

Boolean类型

true和false
计算机内部存储：true为1，false为0

undefined和null

变量只声明没赋值默认为undefined
null表示一个null，变量的值如果想为null，必须手动设置

复杂数据类型

除了简单数据类型的就是复杂数据类型
引用类型，Object【对象】
数组

数据在内存中的存储

简单数据类型：存储在内存中的栈上
复杂数据类型：存储在内存中的堆上
【js中没有堆栈的概念】

基本包装类型

			// 简单类型 没有属性和方法
			// 对象 有属性和方法
			// 基本包装类型： 基本类型包装成复杂类型 String 【Number Boolean不常用】
			var str1 = 'abc'; // 简单类型，但可调用复杂类型里的方法，执行时会临时为它new String(),然后执行后销毁
			var str2 = new String ('abc'); // str2是一个对象
			console.log(str1);
			console.log(str2); //PrimitiveValue 原始值就是简单类型的值

基本操作

查看变量的类型

			var data = 123;
			console.log(typeof data);

转换成字符串类型

toString()

			// toString() 方法
			var data = 123;
			console.log( typeof data.toString());  //1

String()

			// String()
			console.log(String(data));             //2

注意

			// null和undefined没有toString()方法,只能用String()
			var n = null;
			console.log(typeof String(n));

字符串的拼接

			// 字符串拼接
			console.log(typeof(data+ ''));

转成数值型

Number()

			var str = 'abc';  
			// console.log(Number(str));  // NaN
			var bool = true;
			console.log(Number(bool));  // 1

			console.log(Number('123')); // 123
			console.log(Number('123a')); // NaN
			// Number() 将字符串转换时，除了数字还有其他就会返回NaN
			console.log(Number('123#')); //NaN

正负

			// 2.取正或取负
			var str = '123';
			console.log(-str); // -123
			console.log(+str); // 123
			console.log(+('123a')); // NaN 参考Number()
			console.log(+true);    // 1

parseInt()

			// 3. parseInt()
			console.log(parseInt(str)); //NaN
			console.log(parseInt('123')); // 123
			console.log(parseInt(bool)); //NaN
			// parseInt() 不能转布尔型转成数值型
			console.log(parseInt('123a')); //123
			// parseInt() 遇到数字时会把数字转换成数值型，遇到非数字就返回。
			console.log(parseInt('a123')); //NaN

parseFloat()

			// 4.parseFloat()
			console.log(parseFloat('123.1a')); //123.1 能识别第一个非数字
			console.log(parseFloat('a123.1')); //NaN,与parseInt()执行原理相同
			console.log(parseFloat(true));     //NaN
			console.log(parseFloat('123'));    //123

注意


			 var str = '123a';
			 // 123a这样的需要先转成数值型，然后进行减法运算，但要是转换失败则返回NaN
			 console.log(str-0); //NaN
			 
			 // 这样的会先把数值型的转成字符串，然后拼接
			 console.log(str+0);// 123a0

转成布尔

注意 null undefined ‘’ 0 NaN 会转成false即可

			var a;
			var b=null;
			console.log(Boolean('abc')); //true
			console.log(Boolean(123));  //true
			console.log(Boolean(b));       // false 
			console.log(Boolean(a));       // false 
			console.log(Boolean(NaN));     // false 
			// null undefined '' 0 NaN  会转成false

运算

一元运算【搞清就好】

			var num = 1;
			console.log(++num);//2 :++在前，先加后返
			console.log(num++);//2 :++在后，先返再加
			console.log(--num);//2 :--在前，先减再返
			console.log(num--);//2 :--在后，先返再减

逻辑运算
&&【与】：两真即真，有假必假
|| 【或】：两假才假，有真即真
！【非】：取反
关系运算符

== 判断的是变量的值是否相等

=== 判断值和类型都相等才返回true

数组

			var str = ['xi','a','b'] ; //创建一个数组
			console.log(str[0]);       //xi，获取
			var str1 = new Array(1,2,3); //创建一个数组
			console.log(str1);
			console.log(str.length); //获取数组的长度
			str.length =0;
			console.log(str);        //[] 清空数组
			str[0] = 'ci';          // 修改
			str[3] = 'c';           //增加

数组常用方法

			toString() 把数组转换成字符串，并且使用逗号分隔每一项
			valueOf() 返回数组对象本身
			// 每一个对象都具有以上两种方法

			push()   // 插入到数组最后一项，返回新的数组长度
			pop()    // 取出数组中的最后一项，返回取到的元素
			shift()  // 取出数组中的第一个元素，返回取到的元素
			unshift() // 在数组最前面插入，返回新数组的长度
			// 排序方法
			reverse() // 翻转数组
			sort(function(a, b){
				// return a-b; // 从小到大
				return b-a ; //从大到小
			}) 
			// 用法
			arr.sort(function(a, b){
				return a-b;
			})
			console.log(arr);
			// 操作方法
			concat() // 把参数拼接到当前数组
			slice()  // 从当前数组中截取一个新的数组，不影响原来的数组
			splice() // 删除或替换当前数组的某些元素，参数start[开始删除位置]，deleteCount【删除个数】，options【要替换的内容】
			// 位置方法，没有找到返回-1
			indexOf() // 从前往后找指定的元素的位置
			lastIndexOf() // 从后往前找
			// 迭代方法 【html5提供的】
			every()
			filter()
			// 用法
			var arr = [23,2,45,65,6,67];
			var newArray = arr.filter(function(item){
				// item 是数组中的每一个元素
				return item > 10;
			});
			console.log(newArray);
			forEach()
			// 用法
			var arr = ['wer','erer','ertw','rtyr'];
		arr.forEach( function(element, index) {
			// element就是元素，index就是索引
			console.log(element + ' ' + index);
		});
			map()
			some()
			// 将数组连接到一个字符串中
			join()  // arr.join('|')，将数组个元素用|连接起来形成字符串

			// 删除数组
			arr = [];
			arr.length = 0;

函数里的arguments

			function getSum(){
				//arguments 可获取函数调用时的实参
				var sum = 0;
				for(var i = 0 ; i < arguments.length ; i++){
					sum += arguments[i];
				}
				return sum;
			}
			console.log(getSum(1,2,3));  //可任意传参

代码规范

命名规范：变量、函数都要有意义
变量规范：操作符前后要有空格，例如 var num = 1；
注释规范：// 隔个空格再写
空格规范：

			//括号前后加空格，逗号、分号后面加空格，{}要换行
			if () {
			
			}     
			var arr = [1, 3, 5, 4];
		    for (var i = 0; i < str.length; i++) {

		    }

全局变量、局部变量

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

			// 全局作用域：在script或者一个独立的js文件中
			var num = 23; // 全局变量，在全局作用域中定义的变量，在任何位置都可以访问
			// 局部作用域：在任何一个函数内部都有一个局部作用域
			function fname () {
				str = 'yes'; // 不带var声明的变量也是全局变量，但不提倡

				var a = 2; // 局部变量，只能在该函数中访问，外部不可以

			}

			// 块级作用域：在ECMAScript中没有块级作用域
			{
				// 代码块
				var b = 5;
				console.log(b);

			}
			console.log(b); // 都可调用

作用域链

			// 全局作用域 --- 0级作用域链
			var a = 3; 

			function f1() {
				// f1 局部作用域 --- 1级作用域链
				var a = 12;

				function f2() {
					// f2 局部作用域 --- 2级作用域链
					console.log(num); // 会往上找变量
				}
			}

			function f3() {
				// 与f1同一级，1级作用域链
			}

【注意】

			var a = b = c = 12;
			// 过程为
			var a = 12; // 局部或全局看声明的位置
			// 全局变量
			b = 12; 
			c = 12;

预解析

变量提升，把变量的声明提升到当前作用域的最上面，不包括变量的赋值
函数提升，把函数的声明提升到当前作用域的最上面，不包括函数的调用
如果函数和变量的名字相同，函数优先

			console.log(num);  // undefinded
			var num = 3; 

			fname(); //可调用
			function fname() {

			}

对象

法1

			// 创建对象
			var person = {
				name: "小红",
				age: '18',
				sex: '女',
				action: function() {
					console.log('my name is'+this.name);
				}
			}

			// 访问：1.对象.属性名
			console.log(person.name);
			// 访问：2.对象[name]
			console.log(person['name']);
			// 函数：独立存在的函数； 方法：属于对象的函数

法2

		    // 与法1的区别：会在内存中创建一个对象
			// 创建1个空的对象
			var person = new Object(); // Object 是一个构造函数,new的方式来调用
			person.name = '小红';      // 动态特性
			person.age = 18;
			person.sex = '女';
			person.action = function() {
				console.log('yes');
			}

			// 改进
			function Person(name, age, sex) { 
				var person = new Object();   //创建一个空的对象
				person.name = name;
				person.age = age;
				person.sex = sex;
				person.action = function() {
					console.log('my name is :'+this.name);
				}
				return person;
			}
			var person1 = Person('小红', 12, '女');
			person1.action();

法3

			// 创建自定义构造函数，第一个字母大写
			function Person(name, age, sex) {
				this.name = name;
				this.age = age;
				this.sex = sex;
				this.action = function () {
					console.log('my age is :' + this.age);
				}
			}
			var person = new Person('小红', 13, '女');
			person.action();

new执行过程

在内存中创建一个空的对象
让构造函数的this指向该对象
执行构造函数
返回当前对象

this

在函数中 ------指向window
在方法中-------指向该方法所属的对象
在构造函数中----指向构造函数创建的对象

对象的循环

for(var key in object){
	console.log(object[key]);
}

内置对象

MDN
Mozilla开发者网络（MDN）提供有关开放网络技术（Open Web）的信息，包括HTML、CSS和万维网及HTML5应用的API。
使用方法：直接搜索

Math

不是一个构造函数，提供的是静态成员

			// Math.random() * (max - min) + min;  --不含最大值，含最小值
			console.log(Math.floor(25.56)); // 25, 向下取整
			console.log(Math.ceil(25.05));  // 26, 向上取整
			console.log(Math.round(25.5) + " " + Math.round(25.2)); // 26 25,四舍五入

Date

Date 是构造函数，首先需要new Date创建日期示例

			// 获取日期对象的毫秒值
			var date = new Date();
			console.log(date.valueOf());
			console.log(date.getTime()); // 常用这个

			// 获取当前时间的毫秒值
			var time = Date.now();  // 有浏览器兼容性问题，HTML5
			console.log(time);

			// 将日期对象转成数值型,可获得毫秒值

			var time1 = + new Date();
			console.log(time1);

常用方法

			getFullYear() // 返回4位的年份
			getMonth()    // 返回月份，从0开始
			getDate()     // 返回当前月的第几天
			getDay()      // 返回星期几 0-6，星期日-星期六
			getHours()    // 返回0-23
			getMinutes()  // 返回0-59
			getSeconds()  // 返回0-59[秒] 

			// 用法：
			var date = new Date();
			console.log('当前第'+(date.getMonth()+1)+'月');

instanceof用法及格式化日期

			function formatDate(date) {
				// 判断参数date是否是日期对象 【变量 instanceof 对象】
				if (date instanceof Date) {
					var year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours(),
					minute = date.getMinutes(),
					second = date.getSeconds();

					month = month < 10 ? '0' + month : month; // 判别式为真，则取前值，否则取后值
					day = day < 10 ? '0' + day : day;
					hour = hour < 10 ? '0' + hour : hour;
					minute = minute < 10 ? '0' + minute :minute;
					second = second < 10 ? '0' + second : second;

					return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;

				} else {
					console.error('date不是日期对象');
					return;
				}
			}
		// var date = new Date();
		console.log(formatDate(new Date()));

计算相差的天/时/分/秒

				// 计算相差的 天/时/分/秒
				var d1 = new Date();
				var d2 = new Date(2020,10,10,17,3);

				// 相差的总的毫秒值
				// console.log(d2 - d1);  // 实质是调用 d1.valueOf() - d2.valueOf() = 55183391937

				// 相差的总的秒数 = 55183391937 / 1000
				// 相差的天数 = 55183391937 / 60 / 60 / 24 
				// 相差的小时 = 55183391937 / 60 / 60 % 24 
				// 相差的分钟数 =55183391937 / 60 % 60
				// 相差的秒数 = 55183391937 % 60

				function getInterval(start, end) {
					var interval = end - start;
					// 相差的总的秒
					interval /= 1000;
					// 求天 / 时 / 分 / 秒
					var day = Math.round(interval / 60 / 60 / 24);
					var hour = Math.round(interval / 60 / 60 % 24);
					var minute = Math.round(interval / 60 % 60);
					var second = Math.round(interval % 60);

					return {
						day: day,
						hour: hour,
						minute: minute,
						second: second
					}

				}

				console.log(getInterval(d1,d2));

不落不息

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
ECMAScript复习笔记--查漏补缺，小白入门

变量var num = 123;命名规则由字母、数字、下划线、$符号组成，但不能以数字开头不能与关键字和保留字相同，例如 for区分大小写规范：变量名：有意义，遵守驼峰命名法，例如 firstName数据类型简单数据类型number类型数值型的，例如10 、oxAB（十六进制）、浮点数（不要判断两个浮点数是否相等）注意NaN ：not a numberNaN 与任何值都不相等，包括他自己isNaN() 判断不是number，不是为true，是number 的则为fal
复制链接

扫一扫