本文深入解析JavaScript的变量命名规则、函数应用、对象创建与遍历，涵盖arguments对象、匿名函数、自调用函数、Math与Date对象的使用，以及数组、字符串对象的常见方法。
javaScript的基础语法笔记
(一)变量的命名规则和规范
-
规则 - 必须遵守的，不遵守会报错
-
由字母、数字、下划线、$符号组成，不能以数字开头
-
不能是关键字和保留字，例如：for、while。
-
区分大小写
-
-
规范 - 建议遵守的，不遵守不会报错
- 变量名必须有意义
- 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword
(二)javascript中的函数的应用
- arguments属性的应用
JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参。arguments是一个伪数组，因此及可以进行遍历
示例：
function fun() {
console.log(arguments);
for(var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
}
fun(2,3,4);
效果图：
- 匿名函数的使用方式
//函数表达式 -- 后半部分 匿名函数
var fn = function () {
}
//自调用函数，函数书写完成之后便可自调用
(function () {
console.log()
})();
(三)javascript中的对象应用
- 对象的字面量
var dog = {
name : "tom",
age : 2,
type : "红毛犬",
eat : function () {
console.log(this.name +"啃骨头");
}
}
console.log(dog.name); //输出name值
console.log(dog["name"]); //输出name值
dog.eat(); //调用类中的方法
- 对象的动态创建new object()
// object 是一个构造函数
// new 的方式来调用构造函数
// new object() 调用构造函数 会在内存中创建一个对象
示例：
var dag = new Object(); //创建一个对象
dag.name = "obg";
dag.work = function () {
console.log(this.name + "正在工作");
}
- 对象的遍历与删除
- 自定义构造函数
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayHi = function(){
console.log('Hello,everyBody');
}
}
var p1 = new Person('张三', 22, 'actor');
- this 关键字的详解
this 出现在一下位置，分别代表：
1.在函数中： — this 指向window
2.在方法中： — this 指向这个方法所属的对象
3.在构造函数中： — this 指向构造函数创建的对象
- 对象的遍历与删除
- 对象的遍历：
var dog={
name : "zs",
age : 12,
say : function () {
console.log(this.name + "会说话");
}
};
for(var key in dog){
console.log(key + "---"+ dog[key]);
}
示例：
- 对象的属性的删除：
var dog={
name : "zs",
};
delete dog.name ; //删除属性
(四)javaScript中的内置对象
※ Math对象
Math对象不是构造函数，它具有数学常数和函数的属性和方法，都是以静态成员的方式提供
Math.PI // 圆周率
Math.random() // 生成随机数
Math.floor()/Math.ceil() // 向下取整/向上取整
Math.round() // 取整，四舍五入
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值
Math.sin()/Math.cos() // 正弦/余弦
Math.power()/Math.sqrt() // 求指数次幂/求平方根
※ Date对象
创建 Date 实例用来处理日期和时间。Date 对象基于1970年1月1日（世界标准时间）起的毫秒数。
// 获取当前时间，UTC世界时间，距1970年1月1日（世界标准时间）起的毫秒数
var now = new Date();
console.log(now.valueOf()); // 获取距1970年1月1日（世界标准时间）起的毫秒数
Date构造函数的参数
1. 毫秒数 1498099000356 new Date(1498099000356)
2. 日期格式字符串 '2015-5-1' new Date('2015-5-1')
3. 年、月、日…… new Date(2015, 4, 1) // 月份从0开始
- 获取日期的毫秒形式
var now = new Date();
// valueOf用于获取对象的原始值
console.log(date.valueOf())
// HTML5中提供的方法，有兼容性问题
var now = Date.now();
// 不支持HTML5的浏览器，可以用下面这种方式
var now = + new Date(); // 调用 Date对象的valueOf()
- 日期格式化方法
toString() // 转换成字符串
valueOf() // 获取毫秒值
// 下面格式化日期的方法，在不同浏览器可能表现不一致，一般不用
toDateString()
toTimeString()
toLocaleDateString()
toLocaleTimeString()
- 获取日期指定部分
getTime() // 返回毫秒数和valueOf()结果一样
getMilliseconds()
getSeconds() // 返回0-59
getMinutes() // 返回0-59
getHours() // 返回0-23
getDay() // 返回星期几 0周日 6周6
getDate() // 返回当前月的第几天
getMonth() // 返回月份，***从0开始***
getFullYear() //返回4位的年份 如 2016
案例
- 写一个函数，格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(d) {
//如果date不是日期对象，返回
if (!date instanceof Date) {
return;
}
var year = d.getFullYear(),
month = d.getMonth() + 1,
date = d.getDate(),
hour = d.getHours(),
minute = d.getMinutes(),
second = d.getSeconds();
month = month < 10 ? '0' + month : month;
date = date < 10 ? '0' + date : date;
hour = hour < 10 ? '0' + hour : hour;
minute = minute < 10 ? '0' + minute:minute;
second = second < 10 ? '0' + second:second;
return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
}
- 计算时间差，返回相差的天/时/分/秒
function getInterval(start, end) {
var day, hour, minute, second, interval;
interval = end - start;
interval /= 1000;
day = Math.round(interval / 60 / 60 / 24);
hour = Math.round(interval / 60 / 60 % 24);
minute = Math.round(interval / 60 % 60);
second = Math.round(interval % 60);
return {
day: day,
hour: hour,
minute: minute,
second: second
}
}
※ Array对象
- 创建数组对象的两种方式
- 字面量方式
- new Array()
// 1. 使用构造函数创建数组对象
var arr = new Array();
// 创建了一个数组，里面存放了3个字符串
var arr = new Array('zs', 'ls', 'ww');
// 2. 使用字面量创建数组对象
var arr = [1, 2, 3];
-
检测一个对象是否是数组
- instanceof
- Array.isArray() HTML5中提供的方法，有兼容性问题
函数的参数，如果要求是一个数组的话，可以用这种方式来进行判断
-
toString() / valueOf()
- ==toString()==把数组转换成字符串，逗号分隔每一项
- valueOf() 返回数组对象本身
-
数组常用方法
// 1 栈操作(先进后出)
>>==push()==<<
>>==pop()==<< //取出数组中的最后一项，修改length属性
// 2 队列操作(先进先出)
>>==push()==<<
>>==shift()==<< //取出数组中的第一个元素，修改length属性
>>==unshift()==<< //在数组最前面插入项，返回数组的长度
// 3 排序方法
>>==reverse()==<< //翻转数组
>>==sort()==<<; //即使是数组sort也是根据字符，从小到大排序
// 4 操作方法
>>==concat()==<< //把参数拼接到当前数组
>>==slice()==<< //从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
>>==splice()==<< //删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)
// 5 位置方法
>>==indexOf()、lastIndexOf()==<< //如果没找到返回-1
// 6 迭代方法 不会修改原数组(可选) html5
>>==every()、filter()、forEach()、map()、some()==<<
// 7 方法将数组的所有元素连接到一个字符串中。
>>==join()==<<
- 清空数组
// 方式1 推荐
arr = [];
// 方式2
arr.length = 0;
// 方式3
arr.splice(0, arr.length);
案例
- 工资的数组[1500, 1200, 2000, 2100, 1800],把工资超过2000的删除
var array = [1500, 1200, 2000, 2100, 1800];
array = array.filter(function (item, index) {
if (item < 2000) {
return true;
}
return false;
});
console.log(array);
- [“c”, “a”, “z”, “a”, “x”, “a”]找到数组中每一个a出现的位置
var array = ['c', 'a', 'z', 'a', 'x', 'a'];
do {
var index = array.indexOf('a',index + 1);
if (index != -1){
console.log(index);
}
} while (index > 0);
- 编写一个方法去掉一个数组的重复元素
var array = ['c', 'a', 'z', 'a', 'x', 'a'];
function clear() {
var o = {};
for (var i = 0; i < array.length; i++) {
var item = array[i];
if (o[item]) {
o[item]++;
}else{
o[item] = 1;
}
}
var tmpArray = [];
for(var key in o) {
if (o[key] == 1) {
tmpArray.push(key);
}else{
if(tmpArray.indexOf(key) == -1){
tmpArray.push(key);
}
}
}
return tmpArray;
}
console.log(clear(array));
※ String对象
-
字符串对象的常用方法
字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串
// 1 字符方法
charAt() //获取指定位置处字符
charCodeAt() //获取指定位置处字符的ASCII码
str[0] //HTML5，IE8+支持 和charAt()等效
// 2 字符串操作方法
concat() //拼接字符串，等效于+，+更常用
slice() //从start位置开始，截取到end位置，end取不到
substring() //从start位置开始，截取到end位置， end取不到
substr() //从start位置开始，截取length个字符
// 3 位置方法
indexOf() //返回指定内容在元字符串中的位置
lastIndexOf() //从后往前找，只找第一个匹配的
// 4 去除空白
trim() //只能去除字符串前后的空白
// 5 大小写转换方法
to(Locale)UpperCase() //转换大写
to(Locale)LowerCase() //转换小写
// 6 其它
search() //搜索，返回指定内容在字符串中的位置，支持正则表达式
replace() //替换字符
split() //分割字符
案例
- "abcoefoxyozzopp"查找字符串中所有o出现的位置
var s = 'abcoefoxyozzopp';
var array = [];
do {
var index = s.indexOf('o', index + 1);
if (index != -1) {
array.push(index);
}
} while (index > -1);
console.log(array);
- 把字符串中所有的o替换成!
var s = 'abcoefoxyozzopp';
var index = -1;
do {
index = s.indexOf('o', index + 1);
if (index !== -1) {
// 替换
s = s.replace('o', '!');
}
} while(index !== -1);
console.log(s);
- 把字符串中的所有空白去掉’ abc xyz a 123 ’
var s = ' abc xyz a 123 ';
var arr = s.split(' ');
console.log(arr.join(''));
- 判断一个字符串中出现次数最多的字符，统计这个次数
var s = 'abcoefoxyozzopp';
var o = {};
for (var i = 0; i < s.length; i++) {
var item = s.charAt(i);
if (o[item]) {
o[item] ++;
}else{
o[item] = 1;
}
}
var max = 0;
var char ;
for(var key in o) {
if (max < o[key]) {
max = o[key];
char = key;
}
}
console.log(max);
console.log(char);
- 获取url中?后面的内容，并转化成对象的形式。例如：http://www.itheima.com/login?name=zs&age=18&a=1&b=2
var url = 'http://www.itheima.com/login?name=zs&age=18&a=1&b=2';
// 获取url后面的参数
function getParams(url) {
// 获取? 后面第一个字符的索引
var index = url.indexOf('?') + 1;
// url中?后面的字符串 name=zs&age=18&a=1&b=2
var params = url.substr(index);
// 使用& 切割字符串 ，返回一个数组
var arr = params.split('&');
var o = {};
// 数组中每一项的样子 key = value
for (var i = 0; i < arr.length; i++) {
var tmpArr = arr[i].split('=');
var key = tmpArr[0];
var value = tmpArr[1];
o[key] = value;
}
return o;
}
var obj = getParams(url);
console.log(obj);
console.log(obj.name);
console.log(obj.age);
扫一扫
1133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
