JavaScript基础
js语言特点：
- 检查我们的js有没有语法错误
- 预解析 将变量和函数名进行提升
- 一行一行执行代码 发现错误 报错，阻止下面代码的继续执行
- js依赖于宿主环境
变量命名规范
由字母，数字，下划线，美元符号$组成
- 不能以数字开头
- 不能是关键字
- 遵守驼峰命名法（首字母小写，后面单词的首字母要大些）
1.数据变量
1.1数据类型
- 简单的数据类型
| 简单数据类型 | 说明 | 默认值 |
|---|---|---|
| Number | 数字型，包含整型值和浮点型值，如21，0.21 | 0 |
| Boolean | 布尔值类型，如true、false、，等价于1和0 | false |
| String | 字符串类型，如”张三“注意咱们js里面，字符串都带引号 | “” |
| Undefined | var a;声明了变量a但是没有给值，此时a=undefined | Undefined |
| Null | var a = null;声明了变量a为空值 | null |
- 字符串转义符
| 转义符 | 解释说明 |
|---|---|
| \n | 换行符，n 是 newline 的意思 |
| \ \ | 斜杠 \ |
| ’ | ’ 单引号 |
| " | ”双引号 |
| \t | tab 缩进 |
| \b | 空格 ，b 是 blank 的意思 |
-
字符串长度
var strMsg = "我是帅气多金的程序猿！"; alert(strMsg.length); // 显示 11 -
字符串拼接
- 数值相加，字符相连
- 引引加加
- `${}`
1.2获取变量数据类型
- typeof
var num = 18;
console.log(typeof num) // 结果 number
1.3数据类型转换
-
转换为字符串
- toString var num = 1;alert(num.toString())
- String var num = 1;alert(String(num))
- 加号拼接字符串 varnum = 1;alert(num + ‘’)
-
转换为数字型
- parseInt(变量) 只能得到整数
- parseFloat(变量) 可以得到小数
- Number(字符串) 字符串里只能是数字
- 利用数字运算
-
转换为布尔型
所有的数字全为真，0为假
所有的字符串全为真，’'为假
其余全为假
2.运算符
2.1递增运算符
- ++num 先自加，后返回值
- num++ 先返回值，后自加
2.2逻辑运算符
- && 简称“与” and 两边都是true，才返回true //（找假）
- || 简称“或” or 两边都是false，才返回false //（找真）
- ！ 简称“非” not
2.3运算符优先级
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++ – ! |
| 3 | 算数运算符 | 先 * / % 后 + - |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先&& 后|| |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
3.containue，break, return的区别
- containue：跳出本次循环，继续执行剩余次数循环
- break：跳出整个循环，循环结束
- return: 不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码
4.函数
4.1冒泡排序
<script>
// 冒泡排序
// var arr = [5, 4, 3, 2, 1];
var arr = [4, 1, 2, 3, 5];
for (var i = 0; i < arr.length - 1; i++) { // 外层循环管趟数
for (var j = 0; j < arr.length - i - 1; j++) { // 里面的循环管 每一趟的交换次数
// 内部交换2个变量的值 前一个和后面一个数组元素相比较
if (arr[j] < arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
</script>
4.2构造函数
- 构造函数名字首字母要大写
- 我们构造函数不需要return 就可以返回结果
- 我们调用构造函数 必须使用 new
- 我们只要new Star() 调用函数就创建一个对象 ldh {}
- 我们的属性和方法前面必须添加 this
4.3new关键字执行过程
- 在内存中创建了一个空的对象
- this 就会指向刚才创建的空对象
- 执行构造函数里面的代码 给这个空对象添加属性和方法
- 返回这个对象
- 内部原型_proto_指向构造函数的原型
4.4自调用函数
开启一个新的作用域，防止命名冲突
连续写自调用函数每个自调用函数要写；（建议前面）
写上window, undefined，方便代码压缩
(function() {
function() {
*****
}
window.Food = Food;
})();
var food = new Food();
5.Math对象
| 属性，方法名 | 功能 |
|---|---|
| Math.PI | 圆周率 |
| Math.floor() | 向下取整 |
| Math.ceil() | 向上取整 |
| Math.round() | 四舍五入版；就近取整(-3.5,结果是-3) |
| Math.abs() | 绝对值 |
| Math.max()/Math.min() | 最大值/最小值 |
| Math.random() | 获取范围在[0,1)内的随机值 |
5.1获取指定范围内的随机整数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 10));
// 5. 随机点名
var arr = ['张三', '张三丰', '张三疯子', '李四', '李思思', '王五'];
// console.log(arr[0]);
console.log(arr[getRandom(0, arr.length - 1)]);
6.日期对象
6.1格式化日期年月日
<script>
// 格式化日期 年月日
var date = new Date();
console.log(date.getFullYear()); // 返回当前日期的年 2019
console.log(date.getMonth() + 1); // 月份 返回的月份小1个月 记得月份+1 呦
console.log(date.getDate()); // 返回的是 几号
console.log(date.getDay()); // 3 周一返回的是 1 周六返回的是 6 但是 周日返回的是 0
// 我们写一个 2019年 5月 1日 星期三
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
</script>
6.2格式化日期时分秒
<script>
// 格式化日期 时分秒
var date = new Date();
console.log(date.getHours()); // 时
console.log(date.getMinutes()); // 分
console.log(date.getSeconds()); // 秒
// 要求封装一个函数返回当前的时分秒 格式 08:08:08
function getTimer() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
console.log(getTimer());
</script>
6.3获得Date的总毫秒数
<script>
// 获得Date总的毫秒数(时间戳) 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数
// 1. 通过 valueOf() getTime()
var date = new Date();
console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数
console.log(date.getTime());
// 2. 简单的写法 (最常用的写法)
var date1 = +new Date(); // +new Date() 返回的就是总的毫秒数
console.log(date1);
// 3. H5 新增的 获得总的毫秒数
console.log(Date.now());
</script>
6.4倒计时效果
<script>
function countDown(time) {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var d = parseInt(times / 60 / 60 / 24); // 天
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24); //时
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60); // 分
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60); // 当前的秒
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2019-5-1 18:00:00'));
var date = new Date();
console.log(date);
</script>
6.5 padStart 获取2019-05-01 18:00:00的字符串方法
//padStart(长度, 要填充的字符串)
<script>
function countDown(time) {
var dt = new Date();
var y = dt.getFullYear();
var m = (dt.getMonth() + 1).toString().padStart(2, '0');
var d = dt.getDate().toString().padStart(2, '0');
var hh = dt.getHours().toString().padStart(2, '0');
var mm = dt.getMinutes().toString().padStart(2, '0');
var ss = dt.getSeconds().toString().padStart(2, '0');
return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss;
}
</script>
7.数组对象
7.1创建数组的两组方法
- 字面量方式
var arr = [1, 2, 3];
- new Array()
// var arr1 = new Array(); // 创建了一个空的数组
// var arr1 = new Array(2); // 这个2 表示 数组的长度为 2 里面有2个空的数组元素
var arr1 = new Array(2, 3); // 等价于 [2,3] 这样写表示 里面有2个数组元素 是 2和3
console.log(arr1);
7.2检测是否为数组方法
// (1) instanceof 运算符 它可以用来检测是否为数组
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
// (2) Array.isArray(参数); H5新增的方法 ie9以上版本支持
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));
7.3添加删除数组元素方法
-
push() 推 在数组末尾添加
-
pop() 删除数组的最后一个元素
-
splice(a,b,3) 删除数组(开始删除位置的索引，删除的数目，原数组补位(可以不写))
const arr = [4,5,6,7,8,9]; console.log(arr.splice(1,2,3));//[5,6] console.log(arr);//[4,3,7,8,9] -
unshift() 在数组的开头添加
-
shift() 删除数组的第一个元素
7.4数组排序
<script>
// 数组排序
// 1. 翻转数组
var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);
// 2. 数组排序（冒泡排序）
var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function(a, b) {
// return a - b; 升序的顺序排列
return b - a; // 降序的顺序排列
});
console.log(arr1);
</script>
7.5获取数组元素索引号方法(indexOf，lastIndexOf)
- indexOf(数组元素) 作用就是返回该数组元素的索引号 从前面开始查找
- 只返回第一个满足条件的索引号
- 如果在该数组里面找不到元素，则返回的是 -1
- lastIndexOf(数组元素) 作用就是返回该数组元素的索引号 从后面开始查找
7.6伪数组转为数组
Array.from(伪数组)
var arguments = {
0: 1,
1: 2,
2: 3,
length: 3,
}
//把伪数组转为数组
var arr = Array.from(arguments);
//var arr = Array.prototype.slice.call(arguments);
//var arr = arr.slice.call(arguments);
arr.push(2);
console.log(arr)
7.7求数组最大值
(…arr)
var arr = [1, 2, 3, 7, 8, 9];
console.log(Math.max(...arr));
7.8 some(有一条条件满足返回true)
const arr = [1,2,3,4];
const i = 3;
const res = arr.some((item)=>{
return item == i
})
7.9 every(条件都满足返回true)
const arr = [1,2,3,4];
const i = 3;
const res = arr.every((item)=>{
return item > i
})
7.10 过滤数组filter() (返回一个满足条件的新数组)
const arr = [1,2,3,4];
const newArr = arr.filter((item)=>{
return item > 2//[3,4]
})
7.11 拼接数组concat() (返回一个新数组)
const arr = [1,2,3];
const arr1 = [4,5,6];
console.log(arr.concat(arr1))//[1,2,3,4,5,6]
7.12 删除数组slice() (返回一个新数组)
const arr = [9,8,7,6]
console.log(arr.slice(0,3))//[9,8,7](返回的是一个新数组，0开始位置索引，3结束位置索引，不包括3)
7.13 数组去重
const arr = [1, 1, 2, 3, 4, 3];
const newArr = Array.from(new Set(arr));
//新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值，Array.from()把伪数组转成数组
console.log(newArr); //[ 1, 2, 3, 4 ]
7.14 map遍历
let arr = [
{title:'aaa',read:50},
{title:'bbb',read:50}
];
let newArr = arr.map((item, index, arr)=>{
let json = {}
json.t = `${item.title}`;
json.r = item.read+100；
return json
});
//[
// {t:'aaa',r:150},
// {t:'bbb',r:150}
//]
//map方法给数组添加属性
res.data = res.data.map(({...item},i) => ({
...item,
supperId: i
}))
8.字符串
8.1数组转换为字符串
-
toString() 将我们的数组转换为字符串
var arr = [1, 2, 3]; console.log(arr.toString()); // 1,2,3 -
join(分隔符)
var arr1 = ['green', 'blue', 'pink']; console.log(arr1.join()); // green,blue,pink console.log(arr1.join('-')); // green-blue-pink console.log(arr1.join('&')); // green&blue&pink
8.2根据位置返回字符
- charAt(index) 根据位置返回字符
var str = 'andy';
console.log(str.charAt(3));
// 遍历所有的字符
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i));
}
- charCodeAt(index) 返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键
console.log(str.charCodeAt(0)); // 97
- str[index] H5 新增的
console.log(str[0]); // a
8.3字符串操作方法
- concat(‘字符串1’,‘字符串2’…) 连接两个或多个字符串，拼接字符串
var str = 'andy';
console.log(str.concat('red')); //andyred
- substr(‘截取的起始位置’, ‘截取几个字符’);
var str1 = '改革春风吹满地';
console.log(str1.substr(2, 2)); // 第一个2 是索引号的2 从第几个开始 第二个2 是取几个字符
- substring(start,stop);
var str1 = 'Hello world!';
console.log(str1.substring(3)); // lo world!(从index = 3到后面的所有字符串)
console.log(str1.substring(3,7)); // lo w(从index = start 处到index = stop-1 处的所有字符，其长度为 stop 减 start。)
- 替换字符 replace(‘被替换的字符’, ‘替换为的字符’) 它只会替换第一个字符
var str = 'andyandy';
console.log(str.replace('a', 'b'));
// 有一个字符串 'abcoefoxyozzopp' 要求把里面所有的 o 替换为 *
var str1 = 'abcoefoxyozzopp';
while (str1.indexOf('o') !== -1) {
str1 = str1.replace('o', '*');
}
console.log(str1);
- 字符转换为数组 split(‘分隔符’)
var str2 = 'red, pink, blue';
console.log(str2.split(','));
var str3 = 'red&pink&blue';
console.log(str3.split('&'));
-
字母大小写
-
小写变大写 toUpperCase
-
大写变小写 toLowCase
驼峰命名法
-
<script>
function Name(str) {
var arr = str.split('-');
var newStr = arr[0];
for (var i = 1; i < arr.length; i++) {
newStr += arr[i][0].toUpperCase() + arr[i].substr(1);
}
return newStr;
}
var str = 'get-element-by-id';
console.log(Name(str));
</script>
9.判断基本数据类型
Object.prototype.toString.call( )
扫一扫
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
