JS-ECMAScrip知识点总结
文章目录
- 1.基本输出方式和基本语法
- 2.js编写位置和断点调试:star2:
- 3.变量和标识符规范
- 4.数据类型
- 5.强制类型转换
- 6.运算符
- 7.流程控制
- 8.js中的基本循环:star:
- 9.coutinue和break关键字
- 10.数组:star:
-
- 检测是否为数组2种方法
- 数组的添加和删除
- 数组的排序和翻转
- 数组索引方法indexOf()
- 数组转换为字符串
- 11.函数:star2:
- 12.作用域
- 13.预解析
- 14.对象
-
- 14.2.对象的使用方法
- 15.网址合集
- 16.内置对象Math
- 17.内置对象Date
-
- Date的倒计时
- 18.字符串
- 19.简单类型和复杂类型传参
1.基本输出方式和基本语法
//基本输入输出方式
<script>
var a = prompt('请输入你的姓名');
alert(a)
alert('弹出一个对话框');
document.write('可以往body里面写入内容')
console.log('在控制台输出');
script>
//基本语法
<script>
// 单行注释
/* 多行注释 */
/*
1.js中严格区分大小写
2.js中的每一条语句以(;)结尾，最好写，不然有些时候容易出问题
3.js中会自动忽略多个空格和换行
*/
script>
2.js编写位置和断点调试
<script src="js文件/2.js">script>
<script>
alert('js是按从上到下执行的');
script>
<body>
<button onclick="alert('讨厌')">点我一下button>
<a href="javascript:alert('超链接')">你也点我一下a>
<a href="javascript:;">点我没用哦a>
body>
断点调试，控制台—>sources—>找到需要调试的文件–>在程序的某一行设置断点然后刷新
Watch,通过watch可以监视变量值的变化
F11：程序单步执行,有浅蓝色背景，这个时候可以通过watch观察变量的变化
3.变量和标识符规范
•变量必须以字母开头
•变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
•变量名称对大小写敏感（y 和 Y 是不同的变量）
•变量最好以字母开头
•变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
•变量名称对大小写敏感（y 和 Y 是不同的变量）
//我们自主命名的都可以称为标识符，例如变量，函数，属性名关键字或者保留字
不能是es中的
一般采用驼峰命名法————首字母小写，每个单词的开头字母大写，其余字母小写
也可以一条语句多个变量
var lastname="Doe", age=30, job="carpenter";
如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：
var carname="Volvo";
var carname;
如果只声明未给值则输出underfined
4.数据类型
6种类型String,number,boolean,null,undefined,object
基本数据类型前面5种
-
字符串string
-
/* 在字符串中可以\作为转义字符，当表示一些特殊符号时可以使用\进行转义 \"表示" \'表示' \n表示换行 \t制表符 \\表示\
-
-
number
-
Js中可以表示的数字最大值和最小值 Number.MAX_Aalue -Infinity负无穷 js整数运算基本可以保证精确，浮点数则可能会得到一个不精确的结果 -
boolean
-
var bool = true; console.log(typeof bool);
-
-
null和undefined
-
null这个值专门用来表示一个为空的对象，使用typeof检查null会返回object undefined（未定义）类型的值只有一个，就是undefined 1.当声明一个变量却不给变量赋值时，它的值就是undefined 2.使用typeof检查一个undefined时也会返回undefined
-
-
5.强制类型转换
-
toString()方法转换为字符串
-
字符串的不可变性，看上去改变内容，其实是地址变了，内存中新开辟了一个内存空间
-
// 字符串的不可变性 var str = 'andy'; console.log(str); str = 'red'; console.log(str); -
该方法不会影响到原变量，它会将转换的结果返回
null，undefined这两个值没有toString()方法，会报错
-
String()函数
-
b = 123; b = String(b) console.log(typeof b); 但是它会将null和undefined直接转换为'null'和'undefined'
-
-
Number()
-
字符串----》数字 1.如果是纯数字的字符串，则直接将其转为数字 2.如果字符串中有非数字的内容，则转为NaN 3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0 true-1，false-0;Null-0，undefined-NaN
-
-
parseInt()和parsefloat()只针对字符串
-
parseInt()可以将一个字符串中有效的整数内容取出来 c = '123456px'; c = parseInt(c); console.log(c);//123456
-
-
Boolean()
-
数字转为布尔，除了0和NaN，其余的都是true
字符串除了空串，其余都是true
null和undefined都会转为false
log(Boolean(‘’))//false
-
6.运算符
-
算术运算符
-
+号，可以对两个值进行加法运算，并将结果返回,如果对两个值进行加法运算，并将结果返回； 任何的值于字符串做加法运算，都会先转为字符串 result=1+2+'3';//33 result='1'+2+3;//123 -,*,/号，都是转换成number类型 reuslt=100-'1';//99 %，取余运算 result=9%3;//0 reslut=9%2;//1
-
-
一元运算符
-
+不变， var a=123;a=+a//123 a=-a//-123 对于非Number类型的值，它会将其先转为number，然后再运算， var result=1++'2'+3;//6
-
-
自增自减
var a=1; 无论是a++还是++a,都会立即使原变量的值自增1 a++的值等于原变量的值(自增前的值) ++a的值等于自增后的值 console.log(a++);//1 console.log(++a);//2 var d=20; console.log(++a);//21 console.log(++a);//22 var c=20; var result=d++ + ++d+d;//20+22+22var n1 = 10; n2 = 20; var n = n1++; console.log('n=' + n);//10 console.log('n1=' + n1);//11 n = ++n1; console.log('n=' + n);//12 console.log('n1=' + n1);//12 n = n2--; console.log('n=' + n);//20 console.log('n2=' + n2);//19 n = --n2; console.log('n=' + n);//18 console.log('n2=' + n2);//18 -
逻辑运算符
！非，&&短路与，||短路或； var a=false; a=!a; console.log('a='+a)//true 如果对非布尔值进行，则会将其转换为布尔值然后再取反 短路与如果第一个为false，那么就不会执行第2个了 false&&alert('看我出不出来') 短路或如果第一个为false，那么还会执行第2个了，如果第一个为true,那么就不执行第2个了 -
比较运算符和赋值运算符
==会转换 consloe.log(18=='18');//true consloe.log(18==='18');//false 如果将字符串与数字进行比较，那么在做比较时 JavaScript 会把字符串转换为数值。 if ('3' > 5) { console.log('对'); } else { console.log('错'); } 赋值运算符 var num=10; num=num+2;//num+=2
7.流程控制
if else if和swich语句可以互换，分支少用if,分支较多则用swich效率更高
-
if
-
var score = prompt('请输入的你成绩'); if (score >= 90) { alert('你的成绩为A') } else if (score >= 80) { alert('你的成绩为B') } else if (score >= 70) { alert('你的成绩为c') } else if (score >= 60) { alert('你的成绩为D') } else { alert('你的成绩为e') }
-
-
三元表达式
-
var num = 10; var result = num > 7 ? '对' : "错误";
var num = prompt('请输入数字'); var result = num < 10 ? '0' + num : num; alert(result)alert(result) var num = prompt('请输入数字'); var result = num < 10 ? '0' + num : num; alert(result)
-
-
swich
-
var age = parseInt(prompt('亲输入年龄')) switch (age) { case 18: alert('你成年了'); break; case 6: alert('回家吃奶去吧你'); break; case 65: alert('你该退休了'); break; default: alert('啥也不是') }var fruit = prompt(‘亲输入你要查询的水果’);
switch (fruit) {
case ‘苹果’:
alert(‘3.5块钱一斤’);
break;
case ‘葡萄’:
alert(‘5块钱一斤’);
break;default: alert('没有此水果'); }
-
8.js中的基本循环⭐️
当知道循环次数用for，否则用while
-
for循环✴️
-
执行顺序1243，243，243// for (1初始化变量; 2条件表达式; 3操作表达式) { // //4循环体 // } 双重for循环---------外层循环一次，内层循环全部
for (var i = 1; i < 5; i++) {
console.log(i);
}
倒3角
var str = ‘’;
for (var i = 1; i <= 5; i++) {//外层控制行数
for (var j = i; j <= 5; j++) {//里层循环打印的个数
str = str + ’ ♥’
}
str = str + ‘\n’;
}
console.log(str);/
//乘法口诀表
var str = ‘’;
for (var i = 1; i <= 9; i++) {//外层控制行数
for (var j = 1; j <= i; j++) {//里层循环打印的个数
str += i + '’ + j + ‘=’ + i * j + ‘\t’;
}
str = str + ‘\n’;
}
console.log(str);
-
-
while循环
-
/* var num = 1; while (num <= 100) { console.log('我' + num + '岁了'); num++; } */ // var sum = 0; // var j = 1 // while (j <= 100) { // sum += j; // j++; // } // console.log(sum); var message = prompt('你喜欢我吗？'); while (message !== '喜欢') { message = prompt('你喜欢我吗'); } alert('我也喜欢你呀') var str1 = 'abcoefoxyozzopp'; while (str1.indexOf('o') !== -1) { str1 = str1.replace('o', '*'); } console.log(str1);
function getRandom(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
}
var num2 = getRandom(1, 11)
//不给break将会一直循环
while (true) {
var num1 = parseInt(prompt(‘你来猜？请输入1-10之间的一个数字’));
if (num1 > num2) {
alert(‘数字大了，继续猜’)} else if (num1 < num2) { alert('数字小了，继续猜') } else { alert('恭喜，猜对了!') break; } } -
-
do…while循环
-
与while不同之处在于do while先执行一次循环体，在判断条件，如果条件为真，则继续执行循环体，否则退出循环 /* var i = 1; do { console.log('我' + i + "岁了"); i++; } while (i <= 100) var sum = 0; var i = 1; do { sum += i; i++; } while (i <= 100) console.log(sum);*/ do { var message = prompt('你喜欢我吗') } while (message !== '喜欢'); alert('我也喜欢你呀')
-
9.coutinue和break关键字
-
// continue关键字，退出当前循环，继续执行剩余次数循环 continue 语句只能应用在while for 或者do…… while 循环语句中。 for (var i = 1; i <= 10; i++) { if (i == 3) { continue; } console.log('我正在吃第' + i + '个饺子'); }
for (var i = 1; i <= 10; i++) {
if (i == 3) {
break;
}
console.log('我正在吃第' + i + '个饺子');
}
10.数组⭐️
-
数组及2种创建方式
// 1.利用new创建数组 /* var arr = new Array(1, 2, 3, 1); console.log(arr);*/ // 2.利用数组字面量创建数组[] var arr = [];//创建了一个空的数组 var arr1 = [1, 2, 'pink', true] // 数组里面的数据一定要用逗号分隔 // 数组的遍历 // arr.length动态监测数组元素的个数 // for (var i = 0; i < arr1.length; i++) { // console.log(arr1[i]); // } // 3.计算数组里面的和及平均值 // var sum = 0; // var average; // var arr1 = [1, 2, 5, 7]; // for (var i = 0; i < arr1.length; i++) { // sum += arr1[i]; // } // average = sum / arr1.length; // console.log(sum, average); // 冒泡排序 // var arr1 = []; var arr = [64, 87, 36, 65]; // 外层控制比较的轮数 for (var i = 0; i < arr.length - 1; i++) { // 每一轮两两相比 for (var j = 0; j < arr.length - 1 - i; j++) {//每一趟的交换次数 if (arr[j] < arr[j + 1]) { // 交换两个数 var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } console.log(arr); </script>
检测是否为数组2种方法
// 1.instanceof运算符，它可以用来检测是否为1数组
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
// 2.Array.isArray(参数)
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));
数组的添加和删除
var arr = [1, 2, 3];
//末尾添加push,删除pop
// arr.push('pink', 5)
console.log(arr.push('pink', 5));//返回的是数组的长度
console.log(arr);
arr.pop();
console.log(arr);
// 开头添加unshift，删除shift
arr.unshift(0);
console.log(arr);
---------------------------------------
案例
// 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
// newArr[newArr.length] = arr[i];
newArr.push(arr[i]);
}
}
console.log(newArr);
数组的排序和翻转
// 数组排序
// 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);
数组索引方法indexOf()
| 方法名 | 说明 | 返回值 |
|---|---|---|
| indexOf() | 数组中查找给定元素的第一个索引 | 存在则返回索引号，不存在则返回-1 |
| lastindexOf() | 在数组中的最后一个的索引 | 存在则返回索引号，不存在则返回-1 |
// 返回数组元素索引号
//找不到则返回-1
var arr = ['red', 'blue', 'green', 'blue'];
console.log(arr.indexOf('blue'));//1
console.log(arr.indexOf('white'));//-1
console.log(arr.lastIndexOf('blue'));//3
//数组去重案例
var oldarr = [2, 3, 4, 2, 6, 4, 9, 6]
function unique(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) == -1) {
newArr.push(arr[i])
}
}
return newArr
}
console.log(unique(oldarr));
数组转换为字符串
// 1.toString()
var arr = [1, 2, 3];
console.log(arr.toString());//1,2,3
// 2.join(分隔符)
var arr1 = ['green', 'blue', 'red'];
console.log(arr1.join());//green,blue,pink
console.log(arr1.join('-'));//green-blue-pink
console.log(arr1.join('&'));//green&blue&pink
11.函数
-
函数的基本使用
// 函数可以重复相同的代码 function cook() { console.log('酸辣土豆丝'); } cook(); cook(); function furit(a) {//形参 console.log(a); } furit('苹果');//实参 function getSums(start, end) { var sum = 0; for (var i = start; i <= end; i++) { sum += i; } console.log(sum); } getSums(1, 100)-
函数的参数问题
function add(num1, num2) {//形参 console.log(num1 + num2); } // 1.参数一致，正常输出 // 2.实参个数>形参个数时，会取到形参的个数 add(1, 2, 3);//实参 // 3.实参个数<形参个数时,多余的形参可以看作是不用声明的变量，undefined add(1);//NaN -
函数return关键字的使用
-
return后面的代码将不会被继续执行
// function getSums(num1, num2) { // return num1 + num2; // alert('return后面的代码将不会被继续执行') // } // console.log(getSums(1, 2)) ------------------------------------------------- function getMax(arr) { var max = arr[0]; for (var i = 1; i <= arr.length; i++) { if (arr[i] > max) { max = arr[i]; } } return max; } console.log(getMax([1, 2, 3, 4, 5])); -
return只能返回一个值
-
// 返回的结果是最后一个值 function fn(n1, n2) { return n1, n2; } console.log(fn(1, 2));//2 //没有返回值则返回undefined
-
-
当我们不知道用户要传几个参数的时候用arguments，每个函数都内置有
-
无法用在箭头函数里面
arguments伪数组，具有length属性，按照索引方式进行存储，但是它没有数组的方法。 function fn() { console.log(arguments);//[1,2,4,5] } fn(1, 2, 4, 5) //利用arguments求任意个数最大值 function fn() { var max = arguments[0]; for (var i = 1; i <= arguments.length; i++) { if (max < arguments[i]) { max = arguments[i] } } return max } console.log(fn(1, 2, 4, 5)); console.log(fn(13, 4, 5)); -
封装冒泡排序
// 冒泡排序 function mp(arr) { for (var i = 0; i < arr.length - 1; i++) { for (var j = 0; j < arr.length - i - 1; j++) { if (arr[j] > arr[j + 1]) { var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } return arr; } console.log(mp([2, 3, 87, 16, 21])); -
函数的两种声明方式
-
//------------------------------------------- // 函数的两种声明方式 function fn() {//自定义函数 console.log('方式1'); } fn(); var fun = function (art) {//也叫匿名函数 console.log('方式2'); console.log(art); } fun('') /*1.fun是变量名，不是函数名 2.函数表达式也可以传递参数*/
-
-
12.作用域
-
全局和局部作用域
/* 1.js作用域(es6)之前:全局作用域 局部作用域,减少命名冲突问题 2.全局作用域:整个script标签或者是一个单独的js文件 3.局部(函数)作用域:在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用 */ var num = 10;//全局 function fn() { var num = 20;//局部 console.log(num); } console.log(num); fn(); -
全局和局部变量
*/ // 全局和局部变量 /* 1.全局变量，在全局作用域下的变量，在全局下都可以使用 注意，函数内部没有声明直接赋值的变量也属于全局变量 2.局部变量，局部作用域下的变量，或者函数内部var声明的变量 注意，函数的形参可以看作是局部变量 */ //全局变量只有浏览器关闭才会销毁，局部变量程序执行完毕就销毁，节省内存资源 function fun() { var num1 = 10;//num1是局部变量，只能在函数内部使用 num2 = 20; } fun(); console.log(num2);//20 console.log(num1);//报错 -
作用域链
-
// 作用域链：内部函数访问外部函数变量，就是链式查找， //就近原则一层一层往上找 var num = 10; function fn() { var num = 20; function fun() { console.log(num);//20 } fun() } fn()
-
13.预解析
// 预解析js引擎会把js里面所有的var还有function提升到当前作用域的最前面
//然后按照代码书写顺序从上往下执行
//也叫变量预解析(变量提升)和函数提升
/*1.变量提升：就是把所有的变量声明提升到当前的作用域最前面，不提升赋值操作
2.函数提升:就是把所有的函数声明提升到当前作用域的最前面，不调用函数*/
/*
console.log(num);//undefined
var num = 10;
//上面变量提升了可以写为
var num;
console.log(num);
num = 10;*/
/* fn();
function fn() {
console.log('函数提升了');
}
// 上面可以写为
function fn() {
console.log('函数提升了');
}
fn();*/
fn();
var fn = function () {
console.log('发生了变量提升');
}//可以转为下面
var fun;
fun();
fun = function () {
console.log('发生了变量提升');
}
---------------------------------------------
// // 变量提升>函数提升
/*1. var num = 10;
fun();
function fun() {
console.log(num);//
var num = 20
}
// 预解析成下面
var num = 10;
function fun() {
var num;
console.log(num);//undefined
num = 20;
}
fun()*/
var num = 10;
function fn() {
console.log(num);//undefined
var num = 20;
console.log(num);//20
}
fn();
</script>
14.对象
- 1.字面量创建对象
// 字面量创建对象
/* 1.里面的属性方法采取键值对的形式，键(属性名) :值(属性值)
2.多个属性或者方法中间用逗号隔开的
3.方法冒号后面跟的是一个匿名函数
*/
/*
var obj = {
uname: '张三丰',
age: 18,
sex: '男',
sayHi: function () {
console.log('hi');
}
}
/*
使用对象
1.对象名.属性名
2.对象名['属性名']
obj.sayHi();//对象.方法
console.log(obj.uname);
*/
var dog = {
uname: '可可',
type: '阿拉斯加犬',
age: 5,
color: '棕红色',
bark: function () {
alert('汪汪汪')
},
showFilm: function () {
alert('超兽武装')
}
}
dog.bark();
console.log(dog.uname);
console.log(dog['type']);
</script>
</body>
-
2.new Object创建对象
var obj = new Object();//创建了一个空的对象 obj.uname = '刘哈哈'; obj.age = 18; obj.sex = '男'; obj.sayHi = function () { console.log('hi~~') } console.log(obj.uname); console.log(obj['sex']); obj.sayHi(); -
3.构造函数创建对象
注意属性和方法参数位置的不同
-
// 使用构造函数的原因:我们前面两种创建对象的方式一次只能创建一个对象就是抽象类对象的公共部分然后封装了起来 // function Star(uname, age, sex) { // this.uname = uname; // this.age = age; // this.sex = sex; // this.sing = function (song) { // console.log(song); // } // } // var lhh = new Star('刘哈哈', 22, '女'); // console.log(lhh.uname); // console.log(lhh['sex']); // lhh.sing('花海'); // var lw = new Star('lw', '22', '男'); // console.log(lw.uname); // console.log(lw['sex']); // 1.构造函数名字首字母要大写 //2.构造函数不需要return就可以返回结果，且调用函数返回的是一个对象 //3.调用构造函数必须使用new //4.我们只要new Star(),调用函数就创建一个对象ldh{} //5.我们的属性和方法前面必须添加this function Hero(name, type, blood, attack) { this.name = name; this.type = type; this.blood = blood; this.attack = attack; } var lp = new Hero('廉颇', "力量型", '500血量', "近战"); console.log(lp) var hy = new Hero('后裔', "射手型", '100血量', "远程"); -
new关键字在执行时会做的4件事
1.在内存中会创建一个新的空对象 2.让this指向这个新的对象 3.执行构造函数里的代码，给这个新对象添加属性和方法 4.返回这个新对象(所以不需要return) -
for in遍历对象
- 可以对数组或者对象的属性进行循环操作，用于数组有时候出Bug,对象不会
14.2.对象的使用方法
1.正常情况下 对象名.属性名 对象名['属性名'] 2.遍历for-in时 for (var k in obj) { console.log(k);//k变量输出得到的是属性名 console.log(obj[k]);//obj[k]得到的是属性值 } -
15.网址合集
前端学习路线 https://luxian.yupi.icu
https://es6.ruanyifeng.com/ es6
CSDN-------https://www.csdn.net/
字体图标下载 https://www.iconfont.cn/ https://icomoon.io/
https://www.bitbug.net/比特虫网站
https://blog.csdn.net/wangjiayi948/article/details/82794147品优购资源
http://www.eduiit.cn/ web前端
http://free.3v.do 免费的远程服务器
https://developer.mozilla.org/zh-CN/ MDN查阅js文档
https://vslc.ncb.edu.cn/csr-home证书
http://necolas.github.io/normalize.css 移动端官网地址 CSS初始化
https://github.com/ftlabs/fastclick 插件移动端点击延迟300ms GuiHub官网地址
https://www.swiper.com.cn/ 移动端常用Swiper插件,适用于轮播图
其他移动端常用插件
superslide: http://www.superslide2.com/
iscroll: https://github.com/cubiq/iscroll 英文版
前端框架1——Bootstrap https://www.bootcss.com/
https://v4.bootcss.com/docs/getting-started/introduction/
less中文网址 ： http://lesscss.cn/
简洁高效的rem适配方案flexible.js github地址： https://github.com/amfe/lib-flexible
慕客协作平台 https://www.mockplus.cn/
https://gitee.com/xiaoqiang001/html_css_material pink老师素材
https://app.mockplus.cn/app/zfzf-se58/specs/design/oPhLy1rM00 黑马妹妹
码云 https://gitee.com/
通过git上传到码云步骤
1.初始化仓库 git init 2.把本地文件放到暂存区 git add . 3.把本地文件放到本地仓库里面git commit -m '提交'
4.链接远程仓库git remote add origin 地址 5.把本地仓库的文件推送到远程仓库 git push -u origin master
本地储存 www.todolist.cn
https://jquery.com/ jquery
全屏滚动 https://github.com/alvarotrigo/fullPage.js 中文版 https://www.dowebok.com/demo/2014/77/
jquery插件网站 jquery之家 ://www.htmleaf.com/
jquery插件库 www.jq22.com 有些要收费
https://www.bootcdn.cn/ 前端cdn加速服务
更多严格模式参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode
正则表达式可以在线测试 https://c.runoob.com/
webpack英文版官网 https://webpack.js.org
webpack中文版官网 https://webpackjs.com
Vue CLI3地址： https://cli.vuejs.org/zh/
codewhy老师接口网址：http://152.136.185.210:7878/api/hy66
W3C:https://www.w3cschool.cn/javascript/
菜鸟果果 https://c.runoob.com/
es6入门 https://es6.ruanyifeng.com/#docs/async
在form表单请求提交中，只会提交具有name属性的数据
老师接口地址：http://152.136.185.210:7878/api/m5
老师接口地址后续：{
home/multidata;home/data?type=new&page=1;
}
局部滚动better-scroll适用移动端页面滚动：https://github.com/search?q=better-scroll&type=
兼容性：网站：https://caniuse.com
https://vuex.vuejs.org/ 插件vuex
jq文档https://jquery.cuishifeng.cn/
node笔记：https://lurongtao.gitee.io/felixbooks-gp19-node.js/basics/01-Node.js%E5%9F%BA%E7%A1%80.html
经典开源模块化前端框架组件库：https://www.layui.com/doc/
电商管理系统git网址：https://gitee.com/wBekvam/projects
element ui组件库地址：https://element.eleme.cn/#/zh-CN
https://www.npmjs.com/package/clean-webpack-plugin 可以在里面搜索npm包,找到对应插件及其用法
vue-router 的官方文档地址：https://router.vuejs.org/zh/
前端vant组件库：https://vant-contrib.gitee.io/vant-weapp/#/home
https://vant-contrib.gitee.io/vant/#/zh-CN/list
less: https://less.bootcss.com/
Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。：https://www.lodashjs.com/
https://v3.vuejs.org/guide/migration/introduction.html Vue3官方文档
Vue3中文文档 https://www.vue3js.cn/docs/zh/guide/instance.html#
https://v3.vuejs.org/guide/introduction.html Vue3中文文档
微信小程序接口文档地址：https://www.showdoc.cc/128719739414963?page_id=2612830563673346
小程序id:wx3773260633f1650a
小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html
https://www.funit.cn/?hmsq：趣it刷题
牛客网页版：https://hr.nowcoder.com/?from=baiduzc7795&bd_vid=8663373684575656497
Node.js笔记+代码：https://lurongtao.gitee.io/felixbooks-gp19-node.js/
https://zhuanlan.zhihu.com/p/84212558
https://cn.vuejs.org/v2/style-guide/#%E7%BB%84%E4%BB%B6%E5%90%8D%E4%B8%BA%E5%A4%9A%E4%B8%AA%E5%8D%95%E8%AF%8D%E5%BF%85%E8%A6%81
16.内置对象Math
js内置对象查阅文档
// Math数学对象不是一个构造函数，不需要new来调用
console.log(Math.PI);
console.log(Math.max(1, 3, 'pink'));//Nan出现了不是数字的
console.log(Math.max());//Infinity
// Math.PI 圆周率
// Math.floor()向下取整
//Math.ceil() 向上取整
//Math.round() 四舍五入
//Math.abs() 绝对值
//Math.max()/math.min
// Math.random(),默认[0),左闭区间，右边开区间
// console.log(Math.random());
//猜数字游戏
function getRandom(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
}
var num2 = getRandom(1, 11)
while (true) {
var num1 = parseInt(prompt('你来猜？请输入1-10之间的一个数字'));
if (num1 > num2) {
alert('数字大了，继续猜')
} else if (num1 < num2) {
alert('数字小了，继续猜')
} else {
alert('恭喜，猜对了!')
break;
}
}
17.内置对象Date
// Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象
var arr = new Array(); // 创建一个数组对象
var obj = new Object(); // 创建了一个对象实例
// 1. 使用Date 如果没有参数 返回当前系统的当前时间
var date = new Date();
console.log(date);
// 2. 参数常用的写法 数字型 2019, 10, 01 或者是 字符串型 '2019-10-1 8:8:8'
var date1 = new Date(2019, 10, 1);
console.log(date1); // 返回的是 11月 不是 10月
var date2 = new Date('2019-10-1 8:8:8');
console.log(date2);
// function getTimer() {
// var date = new Date();
// var year = date.getFullYear();
// var month = date.getMonth() + 1;
// var day = date.getDate()
// var week = date.getDay()
// var hour = date.getHours();
// hour = hour < 10 ? '0' + hour : hour
// var minutes = date.getMinutes();
// minutes = minutes < 10 ? '0' + minutes : minutes;
// var secondes = date.getSeconds();
// secondes = secondes < 10 ? '0' + secondes : secondes;
// var arr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
// return '今天是' + year + '年' + month + '月' + day + '日' + arr[week] + hour + ':' + minutes + ':' + secondes
// }
// var time = getTimer();
// console.log(time);
Date的倒计时
// //获取Date总的毫秒数(时间戳),就是距离1970年1月1日过来多少毫秒数
// // 1.通过valueOf(),getTime()
// var date = new Date();
// console.log(date.valueOf());
// console.log(date.getTime());
// // 简单的写法(也是最常用)
// var date1 = +new Date();
// console.log(date1);
// // 3.H5新增的获得总的毫秒数
// console.log(Date.now());
// 倒计时
var tian = document.querySelector('.a')
var fen = document.querySelector('.b')
var miao = document.querySelector('.c')
var s = document.querySelector('.d')
var inputTime = +new Date('2022-4-22 19:09:00');//用户输入的总的时间毫秒数
function countDown() {
var nowTime = +new Date();//当前时间总的毫秒数
var times = (nowTime - inputTime) / 1000;//剩余的秒数
var d = parseInt(times / 60 / 60 / 24);//天
d = d < 10 ? '0' + d : d;
tian.innerHTML = d + '天'
var h = parseInt(times / 60 / 60 % 24);//时
h = h < 10 ? '0' + h : h;
fen.innerHTML = h + '时'
var m = parseInt(times / 60 % 60);//分
m = m < 10 ? '0' + m : m;
miao.innerHTML = m + '分';
var ss = parseInt(times % 60);
ss = ss < 10 ? '0' + ss : ss;
s.innerHTML = ss + '秒';
}
countDown()
setInterval(countDown, 1000);
18.字符串
charAt,cancat,substr,indexOf,replace,split
当知道循环次数用for，否则用while
-
根据字符串返回位置indexOf()
// 字符串对象 根据字符返回位置 str.indexOf('要查找的字符', [起始的位置]) var str = '改革春风吹满地，春天来了'; console.log(str.indexOf('春'));//2 console.log(str.indexOf('春', 3)); // 从索引号是 3的位置开始往后查找 // 求red出现的次数及位置 var arr = ['red', 'blue', 'red', 'green', 'pink', 'red']; var one = arr.indexOf('red') var num = 0; while (one !== -1) { console.log(one); num++; one = arr.indexOf('red', one + 1) } console.log('red出现的次数为：' + num); -
根据位置返回字符charAt()
-
str也有复杂数据类型的属性和方法是因为js内部进行了基本类型包装
// 根据位置返回字符 // 1. charAt(index) 根据位置返回字符 var str = 'andy'; console.log(str.charAt(3)); // 遍历所有的字符 for (var i = 0; i < str.length; i++) { console.log(str.charAt(i)); } // 2. charCodeAt(index) 返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键 console.log(str.charCodeAt(0)); // 97 // 3. str[index] H5 新增的 console.log(str[0]); // a// 利用charAt统计出现次数最多的字符及其次数 var str = 'abcoefoxyozzopp'; var news = {}; for (var i = 0; i < str.length; i++) { var chars = str.charAt(i); if (news[chars]) { news[chars]++ } else { news[chars] = 1; } } console.log(news); var max = 0; var ch = ''; for (var k in news) { if (max < news[k]) { max = news[k]; ch = k; } } console.log(ch + ':' + max);-
其他方法
// substr;cancat;spilt,replace // 字符串操作方法 // 1. concat('字符串1','字符串2'....) var str = 'andy'; console.log(str.concat('red')); // 2. substr('截取的起始位置', '截取几个字符'); var str1 = '改革春风吹满地'; console.log(str1.substr(2, 2)); // 第一个2 是索引号的2 从第几个开始 第二个2 是取几个字符 // 1. 替换字符 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); // 2. 字符转换为数组 split('分隔符') 前面我们学过 join 把数组转换为字符串 var str2 = 'red, pink, blue'; console.log(str2.split(',')); var str3 = 'red&pink&blue'; console.log(str3.split('&'));
-
19.简单类型和复杂类型传参
-
简单类型传参
简单类型传参 function fn(a) { a++; console.log(a); } var x = 10; fn(x); console.log(x); -
复杂类型传参(函数和对象)
function Person(name) { this.name = name; } function f1(x) { // x = p console.log(x.name); // 2. 这个输出什么 ? 刘德华 x.name = "张学友"; console.log(x.name); // 3. 这个输出什么 ? 张学友 } var p = new Person("刘德华"); console.log(p.name); // 1. 这个输出什么 ? 刘德华 f1(p); console.log(p.name); // 4. 这个输出什么 ? 张学友