软件固定在任务栏 win + 数字 打开
08:43 29.06.2022
虽然 html 不区分大小写,但实体字符对大小写敏感
xml 区分
dom模型
f12查看网页元素
vscode设置快速生成html模板:
右侧编辑区域输入一个英文的“!”然后按Tab键。
seo搜索引擎优化
Search Engine Optimizatio
block
块级元素
行内元素
vscode
CTRL s 给<br>加/之类的
存盘会自动格式化
emmet语法
ul>li*4
模式框
不点掉就啥也干不了
js可以写也可以不写;
/^(\w|-|[\u4E00-\u9FA5])*$/
^ 以后面的为开头
$ 以前面的为结尾
\w 数字,字母,下划线,.
\u4E00-\u9FA5 中文
* 代表前面出现0次或多次
| 或者
所以整个的意思是匹配一个 数字,字母,下划线,-,.,中文组成的一个字串
#090
是
#009900
rgba
a是透明相关的
上层文件 ..
上右下左
没有值找对边
行内元素的宽度由内容决定
但可以转化为块级元素
float产生边框塌陷
09:12 04.07.2022
JavaScript:
js注释 <!-如果不支持js就当什么都没发生->
<script>...</script>可以包含在文档中的任何地方,只要保证这些代码在被使用前已读取并加载到内存即可
js中字符串可以用单或双引号
document.write('<h2>初学"Javascript</h2>');
或
document.write('<h2>初学\'Javascript</h2>');
alert
系统函数,直接拿来用就可以了
声明变量:
java:强类型的编程语言:得指定变量类型 int i = 0;
js:弱类型,声明变量时不能指定变量类型 var i;此时i的值是undefined...(es5)
变量可以不经声明而直接使用,但这种方法很容易出错,也很难查找排错,不推荐使用: i = 5;
eslint对js进行语法检查的,但它认为写;是错的
js区分大小写
;可选可不选
null = undefined
typeof运算符:检测变量的数据类型
lambda表达式 es6
箭头函数
js没有int float什么的
只有number
NaN: not an number
java里 /0 异常
js 里 infinity
js 形参有2 实参可以有1
另一个是undefined
argument实参
parameter形参
function foo(a, b) {
return a + b;
}
function foo(a){
return a*2;
}
console.log(foo(2,3));
javascript没有重载,后定义的同名函数覆盖以前的同名函数
ES5 var没有切级作用域,ES6用1et定义块级作用域
按Ctrl+/即可把选中的代码注释掉,或者按Ctrl+shift+/也可以进行块注释
DOM:Document Object Model
(文档对象模型)
node父类
element note的子类
脚本语言∶不需要编译,运行过程中由js解释器(js 引擎)逐行来进行解释并执行
浏览器分成两部分∶渲染引擎和JS引擎
https://developer.mozilla.org/
MDN 是 Mozilla基金会的开发者网络平台。提供了大量关于各种HTML、CSS和JavaScript功能的开放、详细的文档,以及广泛的Web API参考资料
<script src="my.js"><l script>
引用外部JS文件的script标签中间不可以写代码
js注释:
单行 CTRL /
多行 shift alt a (默认)
name不是关键字但在一些浏览器里有特殊含义
命名开头只能2种符号:_或$
不能数字开头
js弱类型语言
js的变量数据类型是只有程序在运行过程中,根据等号右边的值来确定的
js是动态语言变量的数据类型是可以变化的
JS把数据类型分为两类︰
简单数据类型(Number,String,Boolean,Undefined,Null)
复杂数据类型(object)
JavaScript数字类型既可以用来保存整数值,也可以保存小数(浮点数)
在JS中八进制前面加0,十六进制前面加0x
JS可以用单引号嵌套双引号,或者用双引号嵌套单引号(外双内单,外单内双)
js里换行不是<br/>标签
是\n (要写在引号里)
字符串的拼接:只要有字符串,后面不管是什么都会变成字符串
'pink' + true (pinktrue)
'12' + 12 (1212)
+号总结口诀:数值相加,字符相连
布尔型和数字型相加的时候,true的值为1 ,false的值为0。
undefined和null:
var variable = undefined;
console.log(variable + 'pink');// undefinedpink
console.log(variable + 1);// NaN undefined 和数字相加最后的结果是NaN
var space = null;
console.log(space + 'pink'); // nullpink
console.log(space + 1);// 1 (一个声明变量给null值,里面存的值为空)
typeof可用来获取检测变量的数据类型:(还可以通过chrome控制台里的颜色)
var num = 10;
console.log(typeof num); // number
// prompt取过来的值是字符型的
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);// String
字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
把数字型转换为字符串型:
// 1.变量.toString()
var num = 10;
var str = num.toString();
console.log(str);
console.log(typeof str);
// 2.String(变量)
console.log(String(num));
// 3.+拼接字符串(隐式转供)
console.log(num + '');
把字符串型转换为数字型:
// 1. parseInt(变量)可以把字符型的转换为数字型得到是整数
//console.log(parseInt(age));
console.log(parseInt( '3.14'));// 3 取整
console.log(parseInt( '3.94'));// 3 取整
console.log(parseInt('120px'));// 120会去掉这个px单位
console.log(parseInt('rem120px'));// NaN
// 2.
console.log(parseFloat( '3.14')); // 3.14
// 3.利用Number(变量)
var str = '123";
console.log(Number(str));
console.log(Number('12'));
// 4.利用了算数运算-*/隐式转换
console.log('12' - 0); // 12
转换为布尔型:
代表空、否定的值会被转换为false,如"、0、NaN、null、undefined
其余值都会被转换为true
解释型语言和编译型语言:
计算机不能直接理解任何除机器语言以外的语言,所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具,被称为翻译器。
翻译器翻译的方式有两种:一个是编译,另外一个是解释。两种方式之间的区别在于翻译的时间点不同
编译器是在代码执行之前进行编译,生成中间代码文件 java: Demo.java javac.exe Demo.class
解释器是在运行时进行及时解释,并立即执行(当编译器以解释方式运行的时候,也称之为解释器) js
标识(zhi4)符
//浮点数算数运算里面会有问题
console.log(0.1 + 0.2);// 0.30000000000000004
// 本身小数已经很小了,小数转换成二进制再进行算数运算就会有误差
console.log(0.07 * 100);// 7.000000000000001
// 3.我们不能直接拿着浮点数来进行相比较是否相等
var num = 0.1 +0.2;
console.log(num == 0.3);// false
// 1 +1 = 2
//在我们程序里面 2= 1 + 1把我们的右边表达式计算完毕把返回值给左边
var num = 1 + 1;
++ age;
// 类似于age = age + 1
先自加,后返回值
var e = 10;
var f = e++ + ++e;// 1.e++ = 10 e = 2.e= 12 ++e = 12
console.log(f);// 22
//后置自增:先表达式返回原值后面变量再自加1
开发时,大多使用后置递增/减,并且代码独占一行
比较运算符(关系运算符)是两个数据进行比较时所使用的运算符。比较运算后,会返回一个布尔值(true/false)作为比较运算的结果。
//赋值 = 把右边给左边
//等于 == 默认转换数据类型 会把字符串型的数据转换为数字型 只要求值
console.log(18 == '18');// true
//全等 === 要求两侧的值还有数据类型完全一致才true
console.log(18 === '18');// false
逻辑与 &&
两边都是true才返回true,否则返回false
除了0外所有的数字都是真的
短路运算(逻辑中断)
当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;
// 逻辑与的短路运算
如果表达式1结果为真则返回表达式2
如果表达式1为假那么返回表达式1
console.log(123 &8 456);// 456
console.log(0 && 456);// 0
var num=0;
console.log(123 || num++);
console.log(num); // 0
var num = 10;
num =num + 1; // num ++
num=num+2; // num += 2
运算符优先级:
先 && 后 ||
—元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高
逗号运算符优先级最低
console.log(4 >= 6 || '人' != '阿凡达' && !(12* 2 == 144) && true);
// f || t && t && t
// f || t
// t
var num = 10;
console.log ( 5 == num / 2 && (2 + 2 * num).tostring() == '22');
// t
流程控制主要有三种结构,分别是顺序结构、分支结构(if, switch)和循环结构(for, while, do while),这三种结构代表三种代码执行的顺序。
单分支 if
双分支 if else
多分支 if, else if, else
if里面的语句1和 else里面的语句2最终只能有一个语句执行―2选1
else if 后面有(条件表达式){执行语句;}
else后面直接跟{执行语句;},没有(条件表达式)
伪代码
三元表达式:
数字补0案例
var time = prompt('输入');
var result = time < 10 ? '0' + time : time;
alert(result);
switch语句和if else if 语句的区别:
一般情况下,它们两个语句可以相互替换
switch..case语句通常处理case为比较确定值的情况,而if..else...语句更加灵活,常用于范围判断(大于、
等于某个范围)
switch语句进行条件判断后直接执行到程序的条件语句,效率更高。而if..else语句有几种条件,就得判断多少次。
当分支比较少时,if...else语句的执行效率比switch语句高。
当分支比较多时,switch语句的执行效率比较高,而且结构更清晰。
for(初始化变量1;条件表达式2;操作表达式3){
//循环体4;
}// 1 2 4 3 2 4 3 2 4
var num = prompt(请输入星星的个数');
var str = '';
for (var i = 1; i <= num; i++){
str = str + '★';
}
console.log(str);
双重for循环:
外层循环循环一次,里面的循环执行全部
str = str + '\n';// 换行
continue关键字用于立即跳出本次循环,继续下一次循环(本次循环体中continue之后的代码就会少执行一次)。
for (var i = 1; i <= 5; i++) {
if (i == 3){
continue; // 只要遇见 continue就退出本次循环直接跳到i++
}
console.log('我正在吃第' + i +'个包子');
}
break关键字用于立即跳出整个循环(循环结束)。
JavaScript中数组长度是可以变化的,方法:1、通过改变数组length属性的值来改变数组长度,语法“arr.length=长度值”;2、利用unshift()、shift()、splice()等方法添加或删除数组元素来改变数组长度。
// 可以通过修改数组索引的方式追加数组元素
var arr =['red','green','blue'];
console.log(arr.length);
arr.length = 5; //把我们数组的长度修改为了5里面应该有5个元素
arr1 ="有点意思';
console.log(arr1);//不能直接给数组名赋值,否则会覆盖掉以前的数据
冒泡排序:一次比较两个元素,顺序错误就交换。
函数∶就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
函数在使用时分为两步:声明函数和调用函数。
函数是做某件事情,函数名一般是动词
function 函数名(形参1,形参2...){//在声明函数的小括号里面是形参(形式上的参数)
}
函数名(实参1,实参2...);//在函数调用的小括号里面是实参(实际的参数)
// 形参是接受实参的 形参类似于一个变量
// 函数的参数可以有,也可以没有个数不限
// 形参可以看做是不用声明的变量
// 函数可以带参数也可以不带参数
函数形参和实参个数不匹配问题:
实参个等于形参个数: 输出正确结果
实参个数多于形参个数: 只取到形参的个数
实参个数小于形参个数: 多的形参定义为undefined,结果为NaN
函数的返回值: return语句
return语句之后的代码不被执行。
return只能返回一个值。如果用逗号隔开多个值,以最后一个为准。
return [num1 + num2,num1 - num2,num1 * num2,num1 / num2];// 但可以以数组形式为整体返回多个值
函数没有return返回undefined
只要函数遇到return就把后面的结果返回给函数的调用者
函数名() = return后面的结果
function getResult(){
return 666;
}
getResult();// getResult() = 666
console.log(getResult());
break,continue,return的区别
break:结束当前的循环体(如for、while )
continue:跳出本次循环,继续执行下次循环(如for、while )
return:不仅可以退出循环,还能够返回return语句中的值,同时还可以结束当前的函数体内的代码
当我们不确定有多少个参数传递的时候,可以用arguments来获取。
在JavaScript中,arguments实际上它是当前函数的一个内置对象。
所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参。
arguments展示形式是一个伪数组,因此可以进行遍历。
伪数组具有以下特点:
具有length属性
按索引方式储存数据
不具有数组的push, pop等方法
// arguments的使用
// 只有函数才有arguments对象,而且是每个函数都内置好了这个arguments
function fn(){
console.log(arguments); // 里面存储了所有传递过来的实参
}
fn(1,2,3);
// Arguments(3) [1,2,3, callee: f, Symbol(Symbol.iterator): f]
// 可以按照数组的方式遍历arguments
//利用函数求任意个数的最大值
function getMax() { // arguments = [1,2,3]
var max = arguments[0];
for (var i = 1; i < arguments.length; i++)i
if (arguments[i] > max){
max = arguments[i];
}
}
return max;
}
console.log(getMax(1,2,3));
函数可以调用另外一个函数
//函数的2种声明方式
// 1.利用函数关键字自定义函数(命名函数)
function fn(){
}
fn();
// 2.函数表达式(匿名函数)
//var 变量名= function(){};
var fun = function(){
console.log('我是函数表达式');
}
fun();
// (1)fun是变量名不是函数名
// (2)函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值而函数表达式里面存的是函数
// (3)函数表达式也可以进行传递参数
表达式最终都会有一个结果,返回给我们,我们成为返回值
作用域:就是代码名字在某个范围内起作用和效果
提高程序可靠性 减少命名冲突
ecma 欧洲计算机制造商协会
European Computer Manufacturers Association
// js的作用域(es6)之前:全局作用域 局部作用域
// 全局作用域:整个script标签或者是一个单独的js文件
var num = 10;
// 局部作用域(函数作用域):在函数内部就是局部作用域这个代码的名字只在函数内部起效果和作用
function fn(){
//局部作用域
var num = 20;
}
// 在全局作用域下var声明的变量是全局变量
// 特殊情况下,在函数内不使用var声明的变量也是全局变量(不建议使用)
// 在函数内部var声明的变量是局部变量
// 函数的形参实际上就是局部变量
function fun() {
var num1 = 10; // num1就是局部变量只能在函数内部使用
num2 = 20; // 注意:如果在函数内部,没有声明直接赋值的变量也属于全局变量
}
fun();
// console.log( num1);
console.log(num2);
从执行效率来看全局变量和局部变量
(1)全局变量:只有浏览器关闭的时候才会销毁,比较占内存资源
(2)局部变量:当我们程序执行完毕就会销毁,比较节约内存资源
JS没有块级作用域
js的作用域:全局作用域 局部作用域
js 也是在 es6的时候新增的块级作用域
java:
if(xx){
int num = 10;
}
//外面的是不能调用num的
js:
if (3< 5){
var num = 10;
}
console.log(num); // 可以调用
作用域链:内部函数访问外部函数的变量,采取的是链式查找的方式来决定取那个值
这种结构我们称为作用域链
就近原则
function f1(){
var num = 123;
function f2(){
console.log(num);
}
f2();
}
var num = 456;
f1(); // 123
预解析:
JavaScript代码是由浏览器中的JavaScript解析器来执行的。
JavaScript解析器在运行JavaScript代码的时候分为两步:预解析和代码执行。
预解析:
js引擎会把js里面所有的 var 还有 function 提升到当前作用域的最前面
变量预解析(变量提升)和函数预解析(函数提升)
变量提升:把所有的变量声明提升到当前的作用域最前面,不提升赋值操作(var num; 和 num = 10;)
函数提升:把所有的函数声明提升到当前作用域的最前面,不调用函数
// 函数表达式调用必须写在函数表达式的下面
代码执行:
按照代码书写的顺序从上往下执行
console.log(num); // undefined
var num = 10;
fn(); // 可以调用
function fn() {
console.log(11);
}
fun(); // 报错
var fun = function() {
console.log(22);
}
// 案例
function f1()i
var b = 9;
console.log(a);
console.log(b);
var a= '123';
}
// 相当于
function f1(){
var b;
var a;
b = 9;
console.log(a);
console.log(b);
a='123';
}
// 输出: undefined 9
// 案例
f1();
console.log(c);
console.log(b);
console.log(a);
function f1(){
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
// 相当于
function f1(){
var a;
a = b = c = 9;
// 相当于: var a= 9; b = 9; c= 9; (b和c直接赋值,没有var声明当全局变量看)
// 集体声明是有逗号: var a = 9, b = 9, c = 9;
console.log(a);
console.log(b);
console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);
// 输出: 9 9 9 9 9 报错(因为后面a是局部变量了) // Uncaught ReferenceError: a is not defined
在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。
对象是由属性和方法组成的。
属性:事物的特征,在对象中用属性来表示(常用名词)
方法:事物的行为,在对象中用方法来表示(常用动词)
保存一个值时,可以使用变量
保存多个值(一组值)时,可以使用数组。
在JavaScript中,现阶段我们可以采用三种方式创建对象(object) :
1.字面量创建对象:
对象字面量:就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法。
// 小括号:运算符优先级; 中括号:数组字面量; 大括号:对象字面量
// var obj = {}; //1.创建了一个空的对象
var obj = {
uname:'张三疯',
age: 18,
sex: '男',
sayHi: function(){
console.log('hi~');
}
}
// (1)里面的属性或者方法我们采取键值对的形式键属性名:值属性值
// (2)多个属性或者方法中间用逗号隔开的
// (3)方法冒号后面跟的是一个匿名函数
使用对象:
// (1)调用对象的属性:对象名.属性名('.' 理解为 '的')
console.log(obj.uname);
// (2)调用属性还有一种方法: 对象名['属性名']
console.log(obj['age']);
// (3)调用对象的方法sayHi: 对象名.方法名 (别忘记加小括号)
obj.sayHi();
//变量、属性、函数、方法的区别
//变量和属性的相同的 他们都是用来存储数据的
var num = 10;
var obj = {
age: 18,
fn: function(){}
}
function fn(){}
console.log(obj.age);
//变量 单独声明并赋值使用的时候直接写变量名单独存在
//属性 在对象里面的不需要声明的使用的时候必须是 对象.属性
//函数和方法的相同点:都是实现某种功能做某件事
//函数 是单独声明并且调用的 函数名() 单独存在的
//方法 在对象里面调用的时候 对象.方法()
2.new Object创建对象:
var obj = new Object();//创建了一个空的对象
obj.uname = '张三疯';
obj.age = 18;
obj.sex ='男';
obj.sayHi = function(){
console. log('hi~');
}
// (1)我们是利用等号=赋值的方法添加对象的属性和方法
// (2)每个属性和方法之间用分号结束
console.log(obj.uname);
console.log(obj['sex']);
obj.sayHi();
3.构造函数创建对象:
因为前面两种创建对象的方式一次只能创建一个对象
可以利用函数的方法,重复这些相同的代码,把这个函数称为构造函数
构造函数里面封装的不是普通代码,而是对象
构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
// 1.构造函数:泛指的某一大类 类似于java 语言里面的类(class)
function Star(uname, age, sex){
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang){
console.log(sang);
}
}
var ldh = new Star('刘德华', 18, '男'); // 2.对象 特指 是一个具体的事物
console.log(typeof ldh);
cosole.log(ldh.age);
cosole.log(ldh['sex']);
ldh.sing('haha');
var zzz = new Star('啧啧啧', 17, '女');
// 1.构造函数名字首字母要大写
// 2.构造函数不需要return就可以返回结果
// 3.调用构造函数 必须使用 new
// 4.只要new star() 调用函数就创建一个对象ldh {}
// 5.属性和方法前面必须添加this
构造函数,如Stars(),抽象了对象的公共部分,封装到了函数里面,它泛指某一大类(class )
创建对象,如new Stars(),特指某一个,通过new关键字创建对象的过程我们也称为对象实例化
new在执行时会做四件事情:
1.在内存中创建一个新的空对象。
2.让this指向这个新的对象。
3.执行构造函数里面的代码,给这个新对象添加属性和方法。
4.返回这个新对象(所以构造函数里面不需要return)。
// 遍历对象
for...in语句用于对数组或者对象的属性进行循环操作。
for(变量 in 对象){}
var obj = {
name: "pink老师',
age: 18,
sex:'男',
fn: function(){}
}
for (var k in obj){
console.log(k); // k变量输出得到的是属性名
console.log(obj[k]); // obj[k]得到是属性值
}
// 我们使用 for in 里面的变量我们喜欢写 k 或者 key (就像Java里喜欢用 i index)
JavaScript中的对象分为3种:自定义对象、内置对象、浏览器对象
前面两种对象是JS基础内容,属于ECMAScript;第三个浏览器对象属于我们S独有的,我们JSAPI讲解
内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)
内置对象最大的优点就是帮助我们快速开发
JavaScript提供了多个内置对象:Math、Date 、 Array、string等(使用时要怀着感恩的心)
// Math数学对象 不是一个构造函数﹐不需要new来调用而是直接使用里面的属性和方法即可
console.log(Math.max(5, -1, -10));// -1
console.log(Math.max(1, 99, 'pink老师'));// NaN
console.log(Math.max());// -Infinity
console.log(Math.PI);//一个属性 圆周率
//利用对象封装自己的数学对象里面有PI最大值和最小值
var myMath = {
PI:3.141592653,
max: function() {
var max = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
},
min: function() {
var min = arguments[0];
for (var i = 1; i < arguments.length;i++) {
if (arguments[i] < min) {
min = arguments[i];
}
}
return min;
}
}
console.log(myMath.PI);
console.log(myMath.max(1,5,9));
console.log(myMath.min(1,5,9));
Math. PI
//圆周率
Math.floor ()
//向下取整
Math.ceil ()
//向上取整
Math.round ()
//四舍五入版就近取整 注意-3.5 结果是-3
// 其他数字都是四舍五入,但是 .5 特殊 往大了取
Math.abs ()
//绝对值
Math.max ()/Math.min()
//求最大和最小值
console.log(Math.abs('-1')); //隐式转换 会把字符串型-1转换为数字型
console.log(Math.abs('pink')); // NaN
// 1.Math对象随机数方法 random()返回一个随机的小数0 =< x < 1
// 2.这个方法里面不跟参数
// 3.代码验证
console.log(Math.random());
// 4.我们想要得到两个数之间的随机整数并且包含这2个整数
// Math.floor(Math.random()*(max - min + 1)) + min;
function getRandom(min,max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1,10));
// 5.随机点名
var arr =['张三','张三丰','张三疯子','李四','李思思', 'pink老师'];
console.log(arr[getRandom(0, arr.length - 1)]);
//抽奖就相当于把大奖放在数组第一个,范围从索引号1开始开始,所以第0个索引号的数你永远抽不到。所以大奖就抽不到了。
// 案例:猜数字
function getRandom(min,max){
return Math.floor(Math.random() *(max - min + 1)) + min;
}
var random = getRandom(1,10);
while (true) { //死循环
var num = prompt('你来猜?输入1~10之间的一个数字');
if (num > random){
alert('你猜大了');}
else if (num < random){
alert('你猜小了");}
else {
alert('你好帅哦,猜对了');
break; //退出整个循环结束程序
}
}
函数才用return 而且在alert后面用return的话 返回什么值?
限制猜的次数:在外面设置一个i = 10 每次错误就 - 1 记得设置 i = 0时 输入break 否则一直循环
- 短横杠
Date日期对象的使用:
看帮助文档,看到了构造函数:
Note:需要注意的是只能通过调用Date构造函数张实例化日期对象:以常规函数调用它(即不加new操作符)将会返回一个字符串,而不是一个日期对象。另外,不像其他JavaScript类型,Date对象没有字面量格式。
var arr = new Array();//创建一个数组对象
var obj = new object();//创建了一个对象实例
// 1.使用Date如果没有参数返回当前系统的当前时间
var date = new Date(); // wed May 01 2019 10:20:56 GMT+0800
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);
// Date对象和Math对象不一样,他是一个构造函数,需要实例化后才能使用!!!
getMonth()
获取当月(0-11)
dObj.getMonth()
// console.log(date.getMonth() + 1);
getDay()
获取星期几(周日0到周六6)
dObj.getDay()
// 注意周日返回0 其他正常
// 案例:我们写一个2019年5月1日星期三
var date = new Date();
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]);
// 案例:格式化日期时分秒
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());
毫秒数永远不会重复 时间戳 可以用来加密
// 获得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());
// 案例:倒计时
时间不好直接相加减,可以用时间戳来写
function countDown(time) {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // time是剩余时间总的秒数
var d = parseInt(times / 60/ 60 / 24); //天
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24); //时
h = h < 10 ? 'e' + h : h;
var m = parseInt(times / 60 % 60); //分
m= m < 10 ? 'O' + 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);
// 创建数组的两种方式
// 1.利用数组字面量
var arr = [1,2,3];console.log(arr[e]);
// 2.利用new Array()
// var arr1 = new Array(); //创建了一个空的数组
// var arr1 = new Array(2); //这个2表示数组的长度为里面有2个空的数组元素
var arr1 = new Array(2, 3); //等价于[2,3]这样写表示里面有2个数组元素是2和3
console.log(arr1);
// 案例:翻转数组
function reverse( arr) {
if (arr instanceof Array) {
var newArr = [];
for (var i = arr.length - 1; i >=0; i--)
{
newArrf newArr. length] = arr[i];
}
return newArr;
}else {
return 'error 这个参数要求必须是数组格式[1,2,3]'
}
}
console.log(reverse([1,2,3]));
console.log(reverse(1,2,3));
//检测是否为数组
//(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)); // t
console.log (Array.isArray(obj)); // f
//添加删除数组元素方法
// 1. push() 在我们数组的末尾添加一个或者多个数组元素 push推
var arr = [1, 2, 3];
// arr.push(4,"pink');
console.log(arr.push(4, "pink"));
console.log(arr);
// (1) push是可以给数组追加新的元素
// (2) push()参数直接写数组元素就可以了
// (3) push完毕之后,返回的结果是新数组的长度
// (4) 原数组也会发生变化
// 2. unshift 在数组的开头添加一个或者多个数组元素
console.log(arr.unshift('red', 'purple'));
console.log(arr);
// (1)unshift是可以给数组前面追加新的元素
// (2)unshift()参数直接写数组元素就可以了
// (3)unshift完毕之后,返回的结果是新数组的长度
// (4)原数组也会发生变化
// 3. pop()它可以删除数组的最后一个元素
console.log(arr.pop());
console.log(arr);
// (1)pop是可以删除数组的最后一个元素记住一次只能删除一个元素
// (2)pop() 没有参数
// (3)pop完毕之后,返回的结果是删除的那个元素
// (4)原数组也会发生变化
// 4. shift()它可以删除数组的第一个元素
console.log(arr.shift());
console.log(arr);
// (1) shift是可以删除数组的第一个元素记住一次只能删除一个元素
// (2)shift()没有参数
// (3)shift完毕之后,返回的结果是删除的那个元素
// (4)原数组也会发生变化
// 案例:筛选数组(工资)
//有一个包含工资的数组[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);
reverse()
颠倒数组中元素的顺序,无参数
该方法会改变原来的数组返回新数组
sort()
对数组的元素进行排序
该方法会改变原来的数组返回新数组
//数组排序
// 1.翻转数组
var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);
// 2.数组排序(冒泡排序)
var arr1 = [13,4,77,1,7];
arr1.sort();
console.log(arr1); // (5) [1, 13, 4, 7, 77] 超过1位数就单比较左边第一个了
// 2. 或者用 compareFunction
简单来说, a和b是数组内的两个元素, 如果函数的返回值是负数, 则a会被排到b的前面, 反之a会被排到b的后面
如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;
如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变。
如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。
compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。
//
var arr1 =[13,4,77,1,7];
arr1.sort(fungtion(a, b){
// return a - b; 升序的顺序排列
return b - a; //降序的顺序排列
});
console.log(arr1);
// 返回数组元素索引号方法
//返回数组元素索引号方法indexOf(数组元素) 作用就是返回该数组元素的索引号从前面开始查找
//它只返回第一个满足条件的索引号
//它如果在该数组里面找不到元素,则返回的是-1
// var arr = ['red', 'green', 'blue', 'pink', 'blue'];
var arr = ['red', 'green', 'pink'];
console.log(arr.indexOf('blue'));
// lastIndexOf(数组元素)作用就是 返回该数组元素的索引号 从后面开始查找
var arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr.lastIndexOf('blue')); // 4
// 案例: 数组去重
核心算法:遍历旧数组,拿旧数组元素去查询新数组,如果该元素在新数组里面没有出现过,就添加,否则不添加。
怎么知道该元素没有存在?
利用新数组.indexOf(数组元素) 如果返回时-1就说明新数组里面没有该元素
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;
}
var demo = unique([ 'blue ', 'green', "blue '])
console.log(demo);
// 数组转换为字符串
// 1. toString() 将我们的数组转换为字符串
var arr = [1,2,3];
console.log(arr.toString(); // 1,2,3
// 2. 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
浏览器中f12显示:
Array (5)
刷新一下:
(5) ["c", "a", "z", "x", "b"]
concat()
连接两个或多个数组不影响原数组
返回一个新的数组
slice()
数组截取slice(begin, end)
返回被截取项目的新数组
splice()
数组删除splice(第几个开始,要删除个数)
返回被删除项目的新数组注意,这个会影响原数组
// slice()和splice()目的基本相同,建议重点看下splice()
//基本包装类型:
为了方便操作基本数据类型,JavaScript还提供了三个特殊的引用类型:String、Number和Boolean,
var str ='andy';
console.log(str.length);
//对象才有属性和方法 复杂数据类型才有属性和方法
//简单数据类型为什么会有lenght属性呢?
// js 会把基本数据类型包装为复杂数据类型
//基本包装类型:把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法。
//1.生成临时变量,把简单类型包装翔复杂数据类型
var temp = new string ('andy');
//2.赋值给我们声明的字符变量
str = temp;
//3.销毁临时变量
temp = null;
字符串的不可变
指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间。
不要大量的对字符串进行重新赋值,也不要大量的进行字符串拼接。
var str = 'andy';
console.log(str);
str = 'red';
console.log(str);
//因为我们字符串的不可变所以不要大量的拼接字符串
var str = '';
for (var i = 1; i<= 100; i++){
str += i;
}
console.log(str);
JS是有GC机制的, 会自动清理没有标签指向的变量
字符串所有的方法,都不会修改字特串本身(字符串是不可变的),操作完成会返回一个新的字符串。
中括号里的也能表示 可选
[]
//字符串对象 根据字符返回位置 str.indexOf('要查找的字符',[起始的位置]);
var str ='改革春风吹满地,春天来了';
console.log(str.indexOf(春')); // 2
console.log(str.indexOf('春', 3)); //从索引号是 3的位置开始往后查找
// 案例:返回字符位置
查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
核心算法;
先查找第一个o出现的位置
然后只要indexOf返回的结果不是-1就继续往后查找
因为indexOf只能查找到第一个,所以后面的查找,利用第二个参数,当前索引加1,从而继续查找
var str = "abcoefoxyozzopp";
var index = str.indexOf('o');
var num = 0;
while (index !== -1){
console.log(index);
num++;
index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是: ' + num);
根据位置返回字符(重点):
charAt(index)
返回指定位置的字符(index字符串的索引号)
str.charAt(O)
charCodeAt(index)
获取指定位置处字符的ASCII码(index索引号)
str.charCodeAt(O)
str[index]
获取指定位置处字符
HTML5,IE8+支持和charAt()等效
// 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
// 案例:返回字符位置
判断一个字符串'abcoefoxyozzopp'中出现次数最多的字符,并统计其次数。
183