Javascript 基础语法-pink老师

Arina_Ke

已于 2022-01-21 06:40:11 修改

阅读量817

点赞数

分类专栏： javascript 文章标签： javascript 前端

于 2022-01-20 17:35:44 首次发布

本文链接：https://blog.csdn.net/Arina_Ke/article/details/122606333

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Javascript 基础语法-pink老师视频笔记

JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续

Pink老师

p1-p190

一. 数组

1.1 创建数组

var arr = new Array(); //利用new 创建数组
var arr1 = [1,2,'路臻', true]  //利用字面量来创建，更为常用
//数组元素没有类型限制； 数组元素用逗号分割；

1.2 访问数组元素

通过数组下标/索引来访问，从0开始；

arr[0]        //通过数组下标索引来访问；

如果数组只有2个元素，arr[4]会返回undefined；

1.3 遍历数组

利用for循环来遍历数组。

var arr  = ['red','yellow','blue'];
for (var i =0; i < arr.length; i++) {
	console.log(arr[i]);
}

1.4 数组元素转化为字符串

var str ='';
str = arr[1] + '';
str = arr[2] + ' | '；

1.5 新增数组元素

可以修改length的方式来实现数组扩容，新增加的数组元素为undefined;

也可以通过修改索引号来添加元素；例如原来只有3个数组元素，如果arr[8] = ‘yellow’；就会产生6个新元素；

因为length总是回避真实的数组大1，所以通过arr[arr.length] =22来添加数组；

1.6 检测是否为数组

instanceof 运算符它可以用来检测是否为数组

arr instanceof Aarray

Array.isArray();

var arr = new Array();
console.log(arr instanceof Array);
console.log(arr.isArray());

1.7 添加删除数组元素的操作

在这里插入图片描述

1.8 数组排序

在这里插入图片描述

	<script>
        
        //sort针对1位数没有问题，但是如果是多位数，要采取以下的方法。
        
		var arr1 = [13,24,2,4,21,3,5,1];
		arr1.sort(function(a, b){return a-b});  //升序
		arr1.sort(function(a, b){return b-a});  //降序
	</script>

1.9 数组索引

在这里插入图片描述

1.10数组去重

原理：利用indexOf()判断是否等于-1，那代表没有。

function uniqueArray(arr) {
	var newArr =[];
	for (var i = 0; i < arr.length;i++) {
		if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
		}
	}
	return newArr;
}

1.11 数组转换为字符串

在这里插入图片描述

var demo= ['a','d','c','a','c','z','y'];
		console.log(demo.toString());
//输出是 a,d,c,a,c,z,y
========================================
console.log(demo.join('-')); //用不同的符号分割；
//输出是 a-d-c-a-c-z-y

1.12 其他方法

在这里插入图片描述

二. 函数

2.1 申明函数

//function 函数名(参数1，参数2...) {代码块};
function add(){};

2.2调用函数

add();  //函数名
var fn = function(){};

2.3函数的参数

函数形参和实参不匹配的情况：

如果多于形参，就只有取到形参的个数；

如果少于形参，会返回NaN；因为形参可以看作不用声明的变量，如果一个形参没有接收值，就是undefined；

2.4 函数的返回值 return

return 需要返回的结果；

return后面的语句不会被执行；

return只能返回一个值；

函数如果没有return，就返回undefined；

2.5 break，continue，return的区别

break：结束当前的循环体；
continue：跳出本次循环，执行下一次循环；
return：不仅可以推出函数体循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码；

2.6 arguments使用

当我们不确定有多少个参数传递的时候，可以用arguments来获取。它是当前函数的一个内置对象，存储了传递的所有实参。

ararguments是一个伪数组。

具有length的属性
按索引方式存储数据；
不具有数组的push，pop等方法。

2.7 函数的两种声明方式

利用函数关键字自定义函数（命名函数）
```
funciton fn(){代码体};
```
函数表达式（匿名函数）
```
var fn = function(){};
```
在这里，fn是变量名，不是函数名。

三.对象

对象是一组无序的相关属性和方法的集合。

3.1创建对象的三种方式

利用字面量来创建对象。{}

var obj = {}; //创建了一个空的对象；
var obj1 = {
    uname:'arina',
    age:44,
    sex:'female',
    sayHi:function(){
        console.log('hi');
    }
}
// (1) 里面的属性或方法我们采取键值对的形式。 键 属性名 ：值 属性值
//（2）多个属性或者方法中间用逗号隔开；
//（3) 方法冒号后面跟着匿名函数。

console.log(obj1.uname);  //对象名.属性名
console.log(obj1['age']); //对象名['属性名']

obj1.sayHi();  //对象名.方法名

利用new Object来创建对象。

var obj = new Object();
obj.name ='Renee Wu'; 
obj.sayHi = function(){};

利用构造函数来创建对象。

构造函数名字首字母要大写；
构造函数不需要return，就可以返回结果；
调用构造函数，必须使用new；
属性和方法前面必须加this

function Star(uname,age,sex) {
    this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(song) {
        console.log(song);
    }
}
var ldh = new Star('刘德华',60,'男');
ldh.sing('冰雨');

3.2遍历对象

for …in 语句可以用于对数据或者对象的属性进行循环操作。

for (var k in obj) {
    console.log(k);                    //属性名
    console.log(obj[k]);               //属性值
}

四. 数学对象-Math

直接使用

Math.PI               //圆周率，一个圆的周长和直径之比，约等于 3.14159。
================================================
Math.floor(X)         //返回小于或等于一个给定数字的最大整数。
Math.floor( 45.95);   //45
Math.floor(-45.05);   // -46
Math.trunc() 		//截取整数部分
================================================
Math.ceil()           //返回大于或等于一个给定数字的最小整数。
console.log(Math.ceil(.95));		// expected output: 1
console.log(Math.ceil(4));			// expected output: 4
console.log(Math.ceil(7.004));		// expected output: 8
console.log(Math.ceil(-7.004));      // expected output: -7
================================================
Math.round()		//返回一个数字四舍五入后最接近的整数
====================================================
Math.abs()               //绝对值
Math.max()             	// 最大值
Math.min() 				//最小值

五.日期对象-Date

5.1 日期的构造函数

Date() 构造函数有四种基本形式，必须new后才能使用。

new Date();                       
//如果没有提供参数，那么新创建的Date对象表示实例化时刻的日期和时间。
new Date(value);

new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

5.2 日期的属性

Date.length //Date.length 的值是 7。这是该构造函数可接受的参数个数。

5.3 日期格式化

getFullYear()  	//获取当年
getMonth()		//获取当月 0-11
getDate()		//获取当天日期
getDay()		//获取星期几  0-6
getHours()		//获取当前小时
getMinutes()	//获取当前分钟
getSeconds()	//获取当前秒钟

var date = new Date();
var arr = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var day = date.getDay;

5.4 Date总的毫秒数

距离1970年1月1日过的毫秒数。

可以通过valueOf() getTime()获取

var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());

//简单写法
var date1 = +new Date();

//H5新增加的方法
console.log(Date.now());

5.5 案例分析-倒计时

输入的时间-现在的时间就是剩余的时间。但是不能拿时分秒去减，因为会得到负数。

通过时间戳的方式才是正确的。

把时间戳转化成天、时、分、秒就可以了。

		function countDown(time) {
			var nowTime = +new Date();
			var inputTime= +new Date(time);
			var times = (inputTime - nowTime) /1000;		
			var d = parseInt(times / 60 /60/24);
			d = d<10 ? '0'+d : d
			var h = parseInt(times / 60 /60%24);
			var m = parseInt(times /60%60);
			var s = parseInt(times %60);
			return d+' day '+h+' hrs '+m+' minutes '+s+' seconds ';
		}
		console.log(countDown('2022-1-15 10:00:00'))

六.基本包装类型

对象才有属性和方法，复杂数据类型才有属性和方法。

对于字符串变量，str 为什么能使用length属性呢？

为了方便操作，JS提供了3中特殊的引用类型，就是String Number Boolean；

基本包装类型：就是把简单数据类型包装成了复杂数据类型。

字符串不可变，只是变量的指针变了。所以字符串如果反复赋值，就会消耗很多内存空间。

字符串所有的方法，都不会修改字符串本身，而是操作完成就返回一个新的字符串

字符串所有的方法，都不会修改字符串本身，而是返回新的字符串

6.1 根据字符返回位置

在这里插入图片描述

6.2 根据位置返回字符

在这里插入图片描述

6.3 判断一个对象是否有某个属性

var o = {
	name: 'pihihi'		
    age: 66,
}
if (o['age']) {
	console.log('里面有该属性');
} else {
	console.log('里面没有该属性');
}

案例1 统计出现次数最多的字符

		var str ='abcoefoxyozzopp';
		var o = {};
		for (var i = 0; i < str.length; i++) {
			var chars = str.charAt(i);
			if (o[chars]) {
				o[chars]++;
			} else {
				o[chars] = 1;
			}
		}
		console.log(o);
//遍历对象
		var max = 0;
		for (var k in o) {
			if (o[k] > max) {
				max = o[k];
                 ch = k;
			}
		}
		console.log(max);
		console.log('出现最多的字符是：'+ch);

6.4 字符串操作方法

在这里插入图片描述

替换 replace

var str1 = 'abcoefoxyozzopp';
while (str.indexOf('o') !== -1) {
    str1 = str1.replace('o','*');
}
console.log(str1)

字符转换成数组 split(数组转换为字符串可以用join)

var str2 = 'red,pink,yellow';
console.log(str2.split(','));
var str3 ='red&pink&yellow&blue';
console.log(str2.split('&'));

转换大写 toUpperCase();
转换小写 toLowerCase();

javascript
var str1 = ‘abcoefoxyozzopp’;
while (str.indexOf(‘o’) !== -1) {
str1 = str1.replace(‘o’,’*’);
}
console.log(str1)
```

字符转换成数组 split(数组转换为字符串可以用join)

var str2 = 'red,pink,yellow';
console.log(str2.split(','));
var str3 ='red&pink&yellow&blue';
console.log(str2.split('&'));

转换大写 toUpperCase();
转换小写 toLowerCase();

Arina_Ke

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Javascript 基础语法-pink老师

Javascript 基础语法-pink老师视频笔记JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续Pink老师p1-p190一. 数组1.1 创建数组var arr = new Array(); //利用new 创建数组var arr1 = [1,2,'路臻', true] //利用字面量来创建，更为常用//数组元素没有类型限制；数组元素用逗号分割；1.2 访问数组元素
复制链接

扫一扫