➤JavaScript由三部分组成
- 核心 ECMAScript
- 文档对象模型 DOM
- 浏览器对象模型 BOM
ECMAScript
基础数据类型
导入js body的底部
<script src="./index.js"> </script>
console访问控制台
浏览器的检查中console里输出内容，不会出现在页面上
console.log("要输出的内容");
模版字符串
${变量名}
let firstName = "胡";
let lastName = "雪岩";
let say = `大家好，我姓${firstName}，名${lastName}，喜欢\`看书\``;
console.log(say);
转义符\
多行字符串拼接：用``包裹，可以不用\n就能够换行
变量
用let和const定义
let定义的变量可以被多次赋值，而const定义的变量只能赋值一次
let定义的时候可以不赋初值，const必须赋初值
数值类型
NaN: 非数值
浮点数的最高精度是17位小数
let bigNumber = 9.43e7; // 等于94300000
let smallNumber = 3e-7; // 等于0.0000003
//精度丢失现象
let number1 = 0.1;
let number2 = 0.2;
console.log(number1 + number2); // 0.30000000000000004
类型转换/字符串拼接
parselnt：将小数字符串、整数字符串或者小数转换为整数
parseFloat：将小数字符串转换为小数
运算符
==：相等 会隐式类型转换
let number1 = "45";
let number2 = 45;
console.log(number1 == number2); // true
===：全等 推荐使用全等
let number1 = "45";
let number2 = 45;
console.log(number1 === number2); // false
判断
let a = 12;
let b = 3;
console.log('a > b结果：' + (a > b)); // true
console.log('a >= b 结果：' + (a >= b)); // true
console.log('a < b 结果：' + (a < b)); // false
console.log('a <= b 结果：' + (a <= b)); // false
console.log('a !== b 结果：' + (a !== b)); // true
let c = a > b;
// 非,表示取反,如果变量值是true,取反后是false
console.log('!c 结果：' + !c); // false
数组
数组元素的增删改查
push方法：在数组的最后加
变量名.push('要添加的值');
unshift方法：在数组的开头加
pop方法：从后往前删除
shift方法：从前往后删除
splice方法：删除指定位置
一个参数
let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];
// 删除从下标为1的位置到结束位置的值
let deleteSchools = schools.splice(1);
// 删除之后，原数组中的剩余内容
console.log(schools); // ["清华大学"]
// 删除的内容
console.log(deleteSchools); // ["北京大学", "浙江大学", "同济大学"]
两个参数
let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];
// 从下标为0开始,往后数两个元素,删除
let deleteSchools = schools.splice(0, 2);
console.log(schools); // ['浙江大学', '同济大学']
console.log(deleteSchools); // ['清华大学', '北京大学']
三个参数 第一个参数是起始位置 第二个位置是步长 第三个内容替换包裹在步长里的数据
let schools = ['0清华大学', '1北京大学', '2浙江大学', '3同济大学'];
schools.splice(2, 1, '江西理工大学');
console.log(schools); // ["清华大学", "北京大学", "江西理工大学", "同济大学"]
let schools = ['0清华大学', '1北京大学', '2浙江大学', '3同济大学'];
schools.splice(2, 2, '江西理工大学');
console.log(schools); // ["清华大学", "北京大学", "江西理工大学"]
indexOf：查找元素
一个参数
let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];
let result = schools.indexOf('大连理工');
console.log(result); // -1
两个参数 第一个是要找的内容 第二个从此数组下标开始
let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];
let result = schools.indexOf('浙江大学', 3);
console.log(result); // -1
二维数组
[
[2, '第二名', false],
[2, '第二名', false],
[2, '第二名', false],
];
// 定义一个一维数组
let arr1 = [];
// 给一维数组里面添加数据
arr1[0] = '宇智波佐助';
arr1[1] = '男';
arr1[2] = '下忍';
arr1[3] = 12;
console.log(arr1); // ['宇智波佐助','男','下忍',12]
// 给一维数组里面添加数据
arr2 = [];
arr2[0] = '春野樱';
arr2[1] = '女';
arr2[2] = '下忍';
arr2[3] = 12;
console.log(arr2); // ['春野樱','女','下忍',12]
// 给一维数组里面添加数据
arr3 = [];
arr3[0] = '漩涡鸣人';
arr3[1] = '男';
arr3[2] = '下忍';
arr3[3] = 12;
console.log(arr3); // ['漩涡鸣人','男','下忍',12]
// 将一维数组添加到另一个数组中，形成二维数组
let arr = [];
arr[0] = arr1;
arr[1] = arr2;
arr[2] = arr3;
console.log(arr);
// [
// ['宇智波佐助', '男', '下忍', 12],
// ['春野樱', '女', '下忍', 12],
// ['漩涡鸣人', '男', '下忍', 12],
// ]
let arr = [];
arr.push([]);
arr[0].push('宇智波佐助');
arr[0].push('男');
arr[0].push('下忍');
arr[0].push(12);
arr.push([]);
arr[1].push('春野樱');
arr[1].push('女');
arr[1].push('下忍');
arr[1].push(12);
arr.push([]);
arr[2].push('漩涡鸣人');
arr[2].push('男');
arr[2].push('下忍');
arr[2].push(12);
console.log(arr);
循环
for循环
let peppaFamily = ["佩奇", "乔治", "猪妈妈", "猪爸爸"];
for (let i = 0; i < peppaFamily.length; i++) {
console.log(peppaFamily[i]);
}
// 输出:
// 佩奇
// 乔治
// 猪妈妈
// 猪爸爸
for…in 遍历的结果是数字
不但能循环数组，还能循环对象
let peppaFamily = ["佩奇", "乔治", "猪妈妈", "猪爸爸"];
for (let i in peppaFamily) {
console.log(peppaFamily[i]);
}
// 输出:
// 佩奇
// 乔治
// 猪妈妈
// 猪爸爸
for…of 遍历的对象是元素的值
item对应数组中的每一项
let peppaFamily = ["佩奇", "乔治", "猪妈妈", "猪爸爸"];
for (let item of peppaFamily) {
console.log(item);
}
// 输出:
// 佩奇
// 乔治
// 猪妈妈
// 猪爸爸
函数
Math.random(): [0, 1)的随机数
// num1 的范围是 [0.1, 1)
const num1 = Math.random() * 0.9 + 0.1;
Math.random(): 返回小于x的最大整数
自定义函数
-
function 函数名(){};
-
let 函数名 = function(){};
-
let 函数名 = ()=>{};
function命令声明：结尾不要加；
有返回值加return
内置函数-计时器
setTimeout () 延时计时 ：指定某个函数或代码在多少毫秒之后执行。
console.log(1);
/**
* 第一个参数是代码，注意代码需用引号包裹，否则会立即执行代码
* 第二个参数是 1000，即 1000ms 后执行 console.log(2)
*/
setTimeout('console.log(2)', 1000);
/**
* 第一个参数是匿名函数
* 第二个参数是 2000，即 2s 后执行 console.log(3)
*/
setTimeout(function () {
console.log(3);
}, 2000);
// 第一个参数是函数名，注意函数名后不要加小括号“()”，否则会立即执行 print4
setTimeout(print4, 3000);
console.log(5);
function print4() {
console.log(4);
}
60s倒计时
// 首先定义计时总秒数，单位 s
let i = 60;
// 定义变量用来储存定时器的编号
let timerId;
// 写一个函数，这个函数即每次要执行的代码，能够完成上述的 1、2、3
function count() {
console.log(i);
i--;
if (i > 0) {
timerId = setTimeout(count, 1000);
} else {
// 清除计时器
clearTimeout(timerId);
}
}
// 首次调用该函数，开始第一次计时
count();
setInterval 无限调用
对象
键值对 key-value
键值又称属性，当属性为函数时也称方法
创建对象
用字面量方法创建对象
let person = {
name: 'henry',
age: 18,
run: function() {
console.log('running');
}
}
person.run();
用构造函数创建对象
function Car(name, founder, gmtCreated, run) {
this.name = name;
this.founder = founder;
this.gmtCreated = gmtCreated;
this.run = run;
}
let benz = new Car('Benz', 'Karl Benz', '1886', function() {
console.log('Benz is running...');
});
属性读取 方法读取
.xxx 或 [xxx]
好像调用对象的方法只能用点
let person = {
name: 'henry',
age: 18
}
let variable = 'name';
console.log(person[variable]);
variable = 'age';
console.log(person[variable]);
链式引用
let person = {
name: 'henry',
age: 18,
parents: {
papa: 'jack',
mama: 'mary'
}
}
console.log(person.parents.papa);
console.log(person['parents']['mama']);
属性的查看，返回对象属性名
let person = {
name: 'henry',
age: 18
}
console.log(Object.keys(person));
删除属性
let person = {
name: 'henry',
age: 18
}
delete person.name;
console.log(person);
增加属性
let person = {
name: 'henry',
age: 18
}
person.gender = 'male';
对象的遍历
for…in
let person = {
name: 'henry',
age: 18,
}
for (let key in person) {
console.log('键名：' + key + '；键值：' + person[key]);
}
Object.keys: 可以返回一个由对象中所有的属性名组成的数组
let person = {
name: 'henry',
age: 18,
}
let keys = Object.keys(person);
for (let i = 0; i < keys.length; i++) {
console.log('键名：' + keys[i] + '；键值：' + person[keys[i]]);
}
对象的继承
创建对象
// 字面量
let o1 = {
name: 'alice',
};
// 构造函数
let o2 = new Object();
let o3 = new Object();
// 继承
funtion O4() {
};
O4.prototype = o1;
let o4 = new O4();
o4的创建继承自o1，o1是o4的原型
//in 自身属性+继承属性
console.log('name' in person);
console.log('toString' in person);
//.hasOwnProperty 自身属性
console.log(person.hasOwnProperty('name'));
console.log(person.hasOwnProperty('toString'))
内置对象
Math
Math.E // 常数e。
Math.LN2 // 2 的自然对数。
Math.LN10 // 10 的自然对数。
Math.LOG2E // 以 2 为底的e的对数。
Math.LOG10E // 以 10 为底的e的对数。
Math.PI // 常数π。
Math.SQRT1_2 // 0.5 的平方根。
Math.SQRT2 // 2 的平方根。
Math.abs() // 绝对值
Math.ceil() // 向上取整
Math.floor() // 向下取整
Math.round() // 四舍五入取整
Math.max() // 最大值
Math.min() // 最小值
Math.pow() // 指数运算
Math.sqrt() // 平方根
Math.log() // 自然对数
Math.exp() // e的指数
Math.random() // 随机数
Storage
Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口: window.sessionStorage 和 window.localStorage.
sessionStorage 保存的数据用于浏览器的一次会话(session)，当会话结束(通常是窗口关闭)，数据被清空;
localStorage 保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。
window.localStorage
数据的存入：setltem
开发者工具console里输入
window.localStorage.setItem('myLocalStorage', 'storage Value');
Application 的 Local Storage 会有对应的 key 和 value
读取数据：getItem
window.localStorage.getItem('myLocalStorage');
清除缓存数据：clear
window.localStorage.clear();
String
length：字符串长度
let len = 'here is an apple'.length;//16
indexOf()：所在下标
let str = 'here is an apple';
const index = str.indexOf('an');
console.log(index);//8
trim()：去掉字符串两端的空格
// 'here' 之前有一个空格，'apple' 之后有三个空格
let str = ' here is an apple ';
const trimedStr = str.trim();
console.log(str.length);
console.log(trimedStr.length);
substring/substr：截取字符串
let url = 'https://www.youkeda.com/userhome#collect';
// 首先找到 # 后第一个字母的下标
const index = url.indexOf('#') + 1;
// 有 hash 才能进行截取，没有就直接提示不存在
if (index) {
// 用 substring 截取字符串
const hash1 = url.substring(index, url.length);
// 计算 hash 的长度
const lenHash = url.length - index;
// 用 substr 截取字符串
const hash2 = url.substr(index, lenHash);
console.log(hash1);
console.log(hash2);
} else {
console.log('不存在 hash');
}
split：分割字符串
const splitedStr = 'a|b|c'.split('|');
console.log(splitedStr);
Array
join()：连接数组 与split作用相反 不改变原数组
let arr = [1, 2, 3, 4];
arr.join(" "); // '1 2 3 4'
arr.join(" | "); // "1 | 2 | 3 | 4"
arr.join(); // "1,2,3,4"
reverse()：倒序排列 改变原数组
let arr = ["a", "b", "c"];
arr.reverse(); // ["c", "b", "a"]
arr; // ["c", "b", "a"]
sort()：排序
默认按字典顺序排序 改变原数组
let arr = [
{ name: "jenny", age: 18 },
{ name: "tom", age: 10 },
{ name: "mary", age: 40 },
];
arr.sort(function (a, b) {
return a.age - b.age;
});
console.log(arr);
这里我们传入了一个函数，这个函数有两个参数，即进行比较的两个数组成员，原数组中a排在b之前。
这个函数有个返回值，当返回值大于0时，表示第一个成员应该排在第二个成员之后，否则排在第二个成员之前。就是一个升序
map/forEach :遍历
let arr = [
{ name: "jenny", age: 18 },
{ name: "tom", age: 10 },
{ name: "mary", age: 40 },
];
// elem: 数组成员
// index: 成员下标
// a: 整个数组
const handledArr = arr.map(function (elem, index, a) {
elem.age += 1;//数组所有的age加一
console.log(elem, index, a);
return elem.name;
});
console.log(arr);
console.log(handledArr);
forEach：与map的区别就是没有返回值
const handledArr = arr.forEach(function (elem, index, a) {
elem.age += 1;
console.log(elem, index, a);
return elem.name;
});
console.log(handledArr);//undefined
Date
当前时间
let now = new Date();
console.log(now);
// 传入表示“年月日时分秒”的数字 月份范围是0-11
let dt1 = new Date(2020, 0, 6, 0, 0, 0);
console.log(dt1);
// 传入日期字符串
let dt2 = new Date("2020-1-6");
console.log(dt2);
// 传入距离国际标准时间的毫秒数
let dt3 = new Date(1578240000000);
console.log(dt3);
两个时间对象是可以直接相减的，返回值为两者的毫秒数差
let dt1 = new Date(2020, 2, 1);
let dt2 = new Date(2020, 3, 1);
// 求差值
let diff = dt2 - dt1;
// 一天的毫秒数
let ms = 24 * 60 * 60 * 1000;
console.log(diff / ms); // 31
比较早晚
let dt1 = new Date(2020, 2, 1);
let dt2 = new Date(2020, 3, 1);
console.log(dt1 > dt2); // false
console.log(dt1 < dt2); // true
Date.parse()：解析日期字符串
Date.parse 方法用来解析日期字符串，返回该时间距离时间零点(1970年1月1日00:00:00)的毫秒数
let dt = Date.parse("2020-1-6");
console.log(dt); // 1578240000000
时间对象转时间字符串: to 方法
to 方法有很多，我们来看其中的 toJsoN()方法
let dt = new Date();//时间对象
let dtStr = dt.toJSON();//时间字符串
console.log(dtStr); // 2020-01-03T09:44:18.220Z
获取时间对象的年/月/日:get 方法
Date 对象提供了一系列 get 方法，用来获取实例对象某个方面的首
let dt = new Date();
console.log(dt.getTime()); // 返回实例距离1970年1月1日00:00:00的毫秒数。
console.log(dt.getDate()); // 返回实例对象对应每个月的几号（从1开始）。
console.log(dt.getDay()); // 返回星期几，星期日为0，星期一为1，以此类推。
console.log(dt.getFullYear()); // 返回四位的年份。
console.log(dt.getMonth()); // 返回月份（0表示1月，11表示12月）。
console.log(dt.getHours()); // 返回小时（0-23）。
console.log(dt.getMilliseconds()); // 返回毫秒（0-999）。
console.log(dt.getMinutes()); // 返回分钟（0-59）。
console.log(dt.getSeconds()); // 返回秒（0-59）。
设置时间对象的年/月/日:set 方法
set 方法和 qet 方法正好相反，它能够设置时间对象的某方面的值
let dt = new Date();
dt.setTime(ms); // 设置实例距离1970年1月1日00:00:00的毫秒数。
dt.setDate(date); // 设置实例对象对应每个月的几号（从1开始）。
dt.setFullYear(year); // 设置四位的年份。
dt.setMonth(month); // 设置月份（0表示1月，11表示12月）。
dt.setHours(hour); // 设置小时（0-23）。
dt.setMilliseconds(ms); // 设置毫秒（0-999）。
dt.setMinutes(min); // 设置分钟（0-59）。
dt.setSeconds(sec); // 设置秒（0-59）。
扫一扫
688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
