学习目标：
学完js
学习内容：
1.循环
for
for (var i = 1; i <= 100; i++) {
console.log('你好吗');
}
switch：
switch (1) {
case 1:
console.log('这是1');
break;
九九乘法表案例
<script>
// 九九乘法表
// 一共有9行，但是每行的个数不一样，因此需要用到双重 for 循环
// 外层的 for 循环控制行数 i ，循环9次 ，可以打印 9 行
// 内层的 for 循环控制每行公式 j
// 核心算法：每一行 公式的个数正好和行数一致， j <= i;
// 每行打印完毕，都需要重新换一行
var str = '';
for (var i = 1; i <= 9; i++) { // 外层循环控制行数
for (var j = 1; j <= i; j++) { // 里层循环控制每一行的个数 j <= i
// 1 × 2 = 2
// str = str + '★';
str += j + '×' + i + '=' + i * j + '\t';
}
str += '\n';
}
console.log(str);
</script>
while
// while循环案例
// 1. 打印人的一生，从1岁到100岁
var i = 1;
while (i <= 100) {
console.log('这个人今年' + i + '岁了');
i++;
}
do while
do {
// 循环体
} while (条件表达式)
continue 关键字 退出本次（当前次的循环） 继续执行剩余次数循环
// break 退出整个循环
数组
利用 new 创建数组
var 数组名 = new Array() ；
var arr = new Array(); // 创建一个新的空数组
利用数组字面量创建数组
//1. 使用数组字面量方式创建空的数组
var 数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白','小黑','大黄','瑞奇'];
数组中的类型
数组中可以存放任意类型的数据，例如字符串，数字，布尔值等
数组的长度
var arrStus = [1,2,3];
alert(arrStus.length); // 3
此处数组的长度是数组元素的个数 ，不要和数组的索引号混淆。
当我们数组里面的元素个数发生了变化，这个 length 属性跟着一起变化
通过长度新增数组元素
检测是否为数组 instanceof
nstanceof 运算符，可以判断一个对象是否属于某种类型
Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法
var arr = [1, 23];//数组
var obj = {};//对象
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false
添加删除数组元素的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<script>
// 添加删除数组元素方法
// 1. push() 在我们数组的末尾 添加一个或者多个数组元素
var arr = [1, 2, 3];
arr.push(4, 5);
console.log(arr); //1,2,3,4,5
console.log(arr.push(6, 7));//7
// (1) push 是可以给数组追加新的元素
// (2) push() 参数直接写数组元素就可以了
// (3) push完毕之后，返回的结果是 新数组的长度
// (4) 原数组也会发生变化
// 2. unshift 在我们数组的开头 添加一个或者多个数组元素
arr.unshift(1,2);
console.log(arr);//1,2,1,2,3,4,5,6,7
// (1) unshift是可以给数组前面追加新的元素
// (2) unshift() 参数直接写数组元素就可以了
// (3) unshift完毕之后，返回的结果是 新数组的长度
// (4) 原数组也会发生变化
// 3. pop() 它可以删除数组的最后一个元素
arr.pop();
console.log(arr);//1,2,1,2,3,4,5,6
console.log(arr.pop());//6
// (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
// (2) pop() 没有参数
// (3) pop完毕之后，返回的结果是 删除的那个元素
// (4) 原数组也会发生变化
// 4. shift() 它可以删除数组的第一个元素
arr.shift();
console.log(arr);//2,1,2,3,4,5
console.log(arr.shift());//2
// (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素
// (2) shift() 没有参数
// (3) shift完毕之后，返回的结果是 删除的那个元素
// (4) 原数组也会发生变化
// 总结删除返回的是删除的元素，添加返回的是数组的长度
</script>
</body>
</html>
注意光写sort不会像java或c++那样排序
var array=new Array(1,13,7,77,5);
array.sort();
console.log(array);
//结果为[1, 13, 5, 7, 77]，他会把第一个数字相同的排在一起
------------------------
var array = new Array(1, 13, 7, 77, 5);
array.sort(function (a, b) {
return a - b;//a-b是从小到大排，b-a是从大到小排
});
console.log(array);
数组索引方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// indexOf(数组元素) 返回该数组元素索引号 从前面开始查找
var arr = ['red', 'blue', 'green', 'blue','red'];
console.log(arr.indexOf('blue'));//1
console.log(arr.indexOf('black'));//-1
//indexOf(数组元素)总结：
// 它只返回第一个满足条件的索引号
// 它如果在该数组里面找不到元素，则返回的是 -1
// lastIndexOf(数组元素) 返回该数组元素的索引号 从后面开始查找
console.log(arr.lastIndexOf('red'));//4
console.log(arr.indexOf('black'));//-1
</script>
</body>
</html>
数组转换为字符串
<script>
// 数组转换为字符串
// 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,red
console.log(arr1.join('-')); // green-blue-red
console.log(arr1.join('&')); // green&blue&red
</script>
字符串的不可变
指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
当重新给 str 赋值的时候，常量'abc'不会被修改，依然在内存中
重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
由于字符串的不可变，在大量拼接字符串的时候会有效率问题
replace(被替换的字符串， 要替换为的字符串)；
split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组
var str = 'a,b,c,d';
console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]
函数
函数：
就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
函数在使用时分为两步：声明函数和调用函数。
unction 是声明函数的关键字,必须小写
由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词，比如 getSum
参数的作用
在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。
在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。
形参实参不匹配
return
return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准
函数都是有返回值的
如果有return 则返回 return 后面的值
如果没有return 则返回 undefined
break ,continue ,return 的区别
break ：结束当前的循环体（如 for、while）
continue ：跳出本次循环，继续执行下次循环（如 for、while）
return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码
当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。
arguments
arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：
具有 length 属性
按索引方式储存数据
不具有数组的 push , pop 等方法
函数表达式方式(匿名函数）
// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();
作用域
在JavaScript中，根据作用域的不同，变量可以分为两种：
全局变量 局部变量
全局变量
在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。
全局变量在代码的任何位置都可以使用
在全局作用域下 var 声明的变量 是全局变量
特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用
局部变量
在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
局部变量只能在该函数内部使用
在函数内部 var 声明的变量是局部变量
函数的形参实际上就是局部变量
总结
全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间
只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
预解析
JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。
预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
代码执行： 从上到下执行JS语句。
预解析只会发生在通过 var 定义的变量和 function 上。
预解析也叫做变量、函数提升。
变量提升： 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。
// 案例
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 = b = c = 9;
//var a = b = c = 9等价于 var a=9,b=9,c=9;
//b和c只赋值没声明所以两个是全局变量
console.log(a);//结果为9
console.log(b);//结果为9
console.log(c);//结果为9
}
f1();
console.log(c);//结果为9
console.log(b);//结果为9
console.log(a);//报错，没有这个变量
对象
对象是由属性和方法组成的。
属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）
创建对象的三种方法
在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：
利用字面量创建对象
利用 new Object 创建对象
利用构造函数创建对象
对象字面量
对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。
{ } 里面采取键值对的形式表示
键：相当于属性名
值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）
利用字面量创建对象
var star = {
name : 'dyk',
age : 18,
sex : '男',
sayHi : function(){
alert('大家好啊~');
}
};
对象的方法属性的调用
对象里面的属性调用 : 对象.属性名 ，这个小点 . 就理解为“ 的 ”
对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号，我们后面会用
对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号
console.log(star.name) // 调用名字属性
console.log(star['name']) // 调用名字属性
star.sayHi(); // 调用 sayHi 方法,注意，一定不要忘记带后面的括号
利用new Object创建对象
var andy = new Obect();
andy.name = 'dyk';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
alert('大家好啊~');
}
注意：
Object() ：第一个字母大写
new Object() ：需要 new 关键字
使用的格式：对象.属性 = 值;
利用构造函数创建对象
构造函数 ：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
在 js 中，使用构造函数要时要注意以下两点：
构造函数用于创建某一类对象，其首字母要大写
构造函数要和 new 一起使用才有意义
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
this.sayHi = function() {
alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex);
}
}
var bigbai = new Person('大白', 100, '男');
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
console.log(smallbai.name);
注意
1. 构造函数约定首字母大写。
2. 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
3. 构造函数中不需要 return 返回结果。
4. 当我们创建对象的时候，必须用 new 来调用构造函数。
new关键字
在执行时会做四件事情：
在内存中创建一个新的空对象。
让 this 指向这个新的对象。
执行构造函数里面的代码，给这个新对象添加属性和方法。
返回这个新对象（所以构造函数里面不需要return）
对象的遍历
for…in 语句用于对数组或者对象的属性进行循环操作
内置对象
JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象
前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于我们JS 独有的， 我们JS API 讲解
内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
内置对象最大的优点就是帮助我们快速开发
JavaScript 提供了多个内置对象：Math、 Date 、Array、String等
Math
Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员
Math.PI // 圆周率
Math.floor() // 向下取整
Math.ceil() // 向上取整
Math.round() // 四舍五入版 就近取整 注意 -3.5 结果是 -3 如果是.5会向大的取
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值
随机数方法 random()
random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1
得到一个两数之间的随机整数，包括两个数在内
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
data
Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
Date 实例用来处理日期和时间
获取当前时间必须实例化
var now = new Date();
console.log(now);
Date() 构造函数的参数
如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写成new Date('2019-5-1') 或者 new Date('2019/5/1')
如果Date()不写参数，就返回当前时间
如果Date()里面写参数，就返回括号里面输入的时间
日期格式化
获取日期的总的毫秒形式
Date 对象是基于1970年1月1日（世界标准时间）起的毫秒数
// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf())
console.log(date.getTime())
// 2. 简单写可以这么做
var now = + new Date();
// 3. HTML5中提供的方法，有兼容性问题
var now = Date.now();
倒计时
核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
转换公式如下：
d = parseInt(总秒数/ 60/60 /24); // 计算天数
h = parseInt(总秒数/ 60/60 %24) // 计算小时
m = parseInt(总秒数 /60 %60 ); // 计算分数
s = parseInt(总秒数%60); // 计算当前秒数
2283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
