JavaScript学习笔记【DAY4(2020.8.20)周四】
数组(重要)
变量是装载一个数据的容器
数组是装载一组数据的容器
数组的定义
定义分两种方式：字面量 和 构造函数
1.字面量 var arr = [];
2.构造函数 var arr = new Array();
var arr = Array();
传参规则:
当没有参数时， 定义的是一个空数组
当参数只有一个并且是数字时，该数字表示数组的长度
当参数有多个时，参数就是每一个成员
数组的使用
存储数据:数据是以一定的顺序存储在内部 每一个数据都有一个序号 这个序号叫做下标 或者 索引
var arr = [];
arr[0] = 10; // 将数字10 存储在数组的下标0位置
访问数据:
arr[0]; // 10
arr[1]; // undefined
当该代码单独出现，就表示要使用数据。就会去读取对应的数据。如果数据存在，就得到. 如果不存在就读取不到，返回undefined。
数组属性
length 数组是一组数据，length属性表示这个数组中的内容的个数。也就是数组的长度
length可读可写
当设置它的时候，表示要修改该数组的长度。数组的长度会发生变化。
当读取时，会实时返回数组的当时的长度。
var arr = [1, 2, 3, 4];
console.log(arr.length); // 4
arr.length = 1; // 修改数组的长度
console.log(arr); // 输出 [1]
console.log(arr.length); // 1
循环数组(遍历数组)
当我们需要对数组中的每一个成员都执行同样的代码时，一个一个的获取并操作，略显繁琐。所以，应当使用循环。
for 循环
// 定义数组
var arr = [1, 2, , , , 6, , , , 10];
// 循环数组
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]); // 输出 1 2 u u u u 6 u u u 10
}
for in循环
// 定义数组
var arr = [1, 2, , , , 6, , , , 10];
// 循环数组
for (var i in arr) {
console.log(arr[i]);
}
// 输出 1 2 6 10 不会输出undefined
数组的方法
push(item) 该方法用于向数组的末尾增加一项
item 参数是数组的新成员
返回值是数组的长度
var arr = [1, 2, 3];
arr.push(123);
// arr => [1, 2, 3, 123]
pop() 该方法用于从数组的末尾移除一项
返回值是被移除的成员
var arr = [1, 2, 3, 4];
var item = arr.pop();
// item => 4
// arr => [1, 2, 3]
unshift(item) 该方法用于往数组的头部增加一项
item 参数是数组的新成员
返回值是数组的长度
var arr = [1, 2, 3, 4];
arr.unshift(0);
// arr => [0, 1, 2, 3, 4]
shift() 该方法用于从数组的头部移除一项
返回值是被移除的成员
var arr = [1, 2, 3, 4];
var item = arr.shift();
// item => 1
// arr => [2, 3, 4]
concat(arg1, arg2, arg3, ...) 拼接
参数个数不定 如果参数中有数组 会把数组拆开
返回值是新数组
不会改变原数组
var arr = [1, 2];
var arr1 = arr.concat(3, 4, 5, [6, 7, 8]);
// arr1 => [1, 2, 3, 4, 5, 6, 7, 8]
reverse() 将数组中的每一个成员逆序
返回值是原数组
会把原数组改变
var arr = [1, 2, 3, 4, 5, 6];
var arr1 = arr.reverse();
// arr1 => [6, 5, 4, 3, 2, 1]
// arr => [6, 5, 4, 3, 2, 1]
sort 排序方法 通常用于数字 参数是函数 函数中有a b
如果返回a -b 升序排列
如果返回 b - a 降序排列
如果不传递函数 则按照首位数字进行排序
var arr = [10, 23, 44, 6, 88, 22];
// 升序
var arr1 = arr.sort(function(a, b) {
return a - b;
});
// arr => [6, 10, 22, 23, 44, 88]
// arr1 = > [6, 10, 22, 23, 44, 88]
// 降序
var arr2 = arr.sort(function(a, b) {
return b - a;
});
// arr => [88, 44, 23, 22, 10, 6]
slice 用于截取数组中的一段
第一个参数是开始截取的位置
第二个参数是结束截取的位置(不包含该位置的成员)
如果参数是负数 则从后往前数
如果不传递第二个参数 则从第一个参数截取到最后
如果没有参数 就截取全部
var arr = [11, 22, 33, 44];
// 两个参数
var arr1 = arr.slice(0, 3);
// arr1 => [11, 22, 33]
// 一个参数
var arr2 = arr.slice(2);
// arr2 => [33, 44]
// 参数是负数
var arr3 = arr.slice(-1);
// arr3 => [44]
// 没有参数
var arr4 = arr.slice();
// arr4 => [11, 22, 33, 44]
splice 用于数组的增、删、改
第一个参数表示开始操作的位置
第二个参数表示删除的个数
之后的每一个参数都表示数组的新成员(如果是数组 不拆)
如果没有第二个参数 则默认从第一个参数截取到末尾
返回值是被删除的元素组成的数组
// 增
var arr = [1, 5];
var arr1 = arr.splice(1, 0, 2, 3, 4);
// arr => [1, 2, 3, 4, 5]
// arr1 => []
// 删
var arr = [1, 2, 3, 4, 5];
var arr1 = arr.splice(1, 3);
// arr => [1, 5]
// arr1 => [2, 3, 4]
join 用于将数组转为字符串
参数是拼接符号 默认为逗号 ,
返回值是拼接完毕的字符串
var arr = ["a", "b", "c", "d"];
var str = arr.join();
// str => "a,b,c,d"
var str1 = arr.join("&");
// str1 => a&b&c&d
indexOf 用于搜索数组中的成员所在位置
参数是成员
返回值是下标位置
如果找得到就是下标位置
如果找不到就是 -1
var arr = ["a", "b", "c"];
var idx = arr.indexOf("a");
// idx => 0
ES5的数组方法
(1)forEach :ES5中的迭代数组的方式 叫做迭代器方法 循环方法
forEach 接受一个函数作为参数 函数有三个参数
第一个表示数组的成员
第二个表示数组的索引
第三个表示数组本身
// 定义一个数组
var arr = ["张三", , , , null, "李四", "王五", "赵六"];
// for 循环
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
console.log(i);
// for in 循环
// for in 循环 只会循环数组中的非empty内容
for (var i in arr) {
console.log(arr[i]);
}
// forEach
arr.forEach(function(value, index, selfArr) {
console.log(value, index, selfArr, this);
})
(2)map:映射方法 会根据原数组生成一个新数组 新数组的每一个成员是map接受的函数的返回值 该函数会多次调用 用于循环数组，主要目的是根据老数组 生成新数组
var arr = [100, 200, 300, 400];
var arr1 = arr.map(function(value, index, selfArr) {
return value * 1.3;
});
console.log(arr1); // [130, 260, 390, 520]
(3)filter:过滤方法 会根据参数将符合一定条件的成员过滤出来
返回的是新数组 原数组不变
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr1 = arr.filter(function(value, index, selfArr) {
return value < 8;
});
console.log(arr1); // [1, 2, 3, 4, 5, 6, 7]
(4)some:判定方法 判定数组中是否有符合某种条件的成员 如果有就是true 如果没有就是false
var arr = [1, 2, 3, 4, 5];
var result = arr.some(function(value, index, selfArr) {
// 判定是否有字符串
return typeof value === "string";
});
console.log(result); // false
(5)every:判定方法 判定数组中是否都符合某一个条件 如果都符合 就是true 如果有任何一个不符合 就是false
var arr = [1, 2, "3", 4, 5];
var result = arr.every(function(value, index, selfArr) {
// 判定是否都是number类型
return typeof value === "number";
});
console.log(result); // false
(6)fill:填充方法 用于将数组的指定成员统一填充为新值
var arr = [];
(7)indexOf:查询方法 用于查询数组中是否存在某一个值 如果存在 就返回该值所在的下标 如果不存在 就返回-1
var arr = ["a", "b", "c"];
arr.indexOf("a");
(8)reduce:
(9)trim方法去除字符串两端的空格
var str = ' hello '
console.log(str.trim()） //hello 去除两端空格
var str1 = ' he l l o '
console.log(str.trim()） //he l l o 去除两端空格
(10)获取对象的属性名
Object.keys(对象) 获取到当前对象中的属性名 ，返回值是一个数组
var obj = {
id: 1,
pname: '小米',
price: 1999,
num: 2000
};
var result = Object.keys(obj)
console.log(result)//[id，pname,price,num]
(11)Object.defineProperty
Object.defineProperty设置或修改对象中的属性
Object.defineProperty(对象，修改或新增的属性名，{
value:修改或新增的属性的值,
writable:true/false,//如果值为false 不允许修改这个属性值
enumerable: false,//enumerable 如果值为false 则不允许遍历
configurable: false //configurable 如果为false 则不允许删除这个属性 属性是否可以被删除或是否可以再次修改特性
})
检测是否为数组
1、nstanceof 运算符 可以判断一个对象是否是某个构造函数的实例
var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
2、Array.isArray() 用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法
var arr = [1, 23];
var obj = {};
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(obj)); // false
二维数组(了解)
一维数组中的每一位都是数组 这样的数组叫做二维数组
// 二维数组
var arr = [
[],
[],
[],
...
];
! 选择排序
对象: 在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象
对象与数组类似，都是用来装载大量的数据。
对象允许使用 key: value作为一组 键值对, 简称 kv对
k表示对象的属性名, 最好符合变量的命名规范
v表示对象的属性值, 是具体的数据,可以是任何类型的数据
对象可以由多个kv对组成, 每一个kv对之间使用逗号,隔开
最后一个kv对后的逗号可选(推荐不加)
对象是由属性和方法组成的:
属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）
定义对象:
与数组类似，对象的定义也有两种方式: 字面量 和 构造函数
1.字面量 (推荐方式)
var obj = {}; // 字面量定义对象
// 定义对象并设置属性
var obj1 = {
name: "张三"
};
2.构造函数
调用格式↓
// 带new的构造函数
var obj = new Object();
// 不带new的构造函数
var obj = Object();
封装格式↓
function 构造函数名(形参1,形参2,形参3) {
this.属性名1 = 参数1;
this.属性名2 = 参数2;
this.属性名3 = 参数3;
this.方法名 = 函数体;
}
对象的属性操作:
读取属性
点语法
var obj = {
name: "张三"
}
console.log(obj.name); // 张三
方括号语法
var obj = {
name: "张三"
}
console.log(obj["name"]); // 张三
设置属性
点语法
var obj = {
name: "张三"
}
obj.age = 12;
console.log(obj); // {name: "张三", age: 12}
方括号语法
var obj = {
name: "张三"
}
obj["age"] = 13;
console.log(obj); // {name: "张三", age: 13}
删除属性:delete该关键字只能用来删除对象的属性 而不可以用来删除变量
var obj = {
name: "张三"
}
delete obj["name"];
console.log(obj); // {}
对象的循环遍历
for (var i in obj) {}
var obj = {
name: "小明",
age: 13,
sex: "男",
married: false
}
// 使用for in 循环遍历对象
for (var i in obj) {
// i 是对象的属性名
// obj[i] 是对象的属性值
}
注: obj.i 这种方式，是在读取 obj的 i 这个属性 而不是读取i变量所保存的值属性
方括号语法与点语法的区别
方括号语法:
[] 之间是一个JS的执行环境，可以使用变量，表达式
[] 最终需要的是一个字符串，如果不是字符串，会转为字符串（调用toString方法）
[] 只要内容是字符串，不论是否符合变量命名规范，都可以成功
点语法:
点什么，就是什么
必须符合变量的命名规范
var a = "name";
var obj = {
name: "张三",
a: 123
}
// 点语法:
console.log(obj.name); // "张三"
console.log(obj.a); // 123
// 方括号语法:
console.log(obj[a]); // "张三"
console.log(obj["a"]); // 123
JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象
前面两种对象是JS 基础 内容，属于 ECMAScript； 第三个浏览器对象属于 JS 独有的， JS API 讲解内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是**最基本而必要的功能**（属性和方法），内置对象最大的优点就是帮助我们快速开发
冒泡排序
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);
Math对象:JS中有许多的内置对象。其中，Math对象封装了许多常用的数学函数。
Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。
Math.random该方法用于生成一个随机数0~1 包含0 不包含1
// 获取一个从0到9的随机整数数字
var r = Math.random();
var num = parseInt(Math.random() * 10);
console.log(num);
Math.abs 该方法用于获取一个数的绝对值
// 定义一个负数
var num = -10;
// 获取它的绝对值
var abs = Math.abs(num);
// 输出
console.log(abs); // 10
Math.ceil 向上取整
var num = 1.1;
var result = Math.ceil(num);
console.log(result); // 2
Math.floor 向下取整
var num = 1.1;
var result = Math.floor(num);
console.log(result); // 1
Math.round 四舍五入
var num = 1.4;
var num1 = 1.5;
console.log(Math.round(num)); // 1
console.log(Math.round(num1)); // 2
Math.pow 用于求一个数的几次方 第一个参数是底数 第二个参数是指数
var num = Math.pow(2, 8);
console.log(num); // 256
Math.max 求所有参数中的最大值
var max = Math.max(1, 2, 56, 78, 99, 0, 46, 23);
console.log(max); // 99
Math.min 求min参数中的最小值
var min = Math.min(1, 2, 56, 78, 99, 0, 46, 23);
console.log(min); // 1
额外说明: ...语法是ES6中的语法 可以将数组的每一个成员拆解成参数传递给函数
额外说明: apply方法是所有函数都有的方法 作用是改变函数中的this指向并以数组的形式传递参数
Date对象:负责日期方面的内容。(其实是构造函数)
注意: 以后 只要出现new关键字 它就是引用类型
初始化日期
不传递参数
var date = new Date(); // 当直接通过new调用Date时 并且不传递参数时 得到的时当前的系统时间
console.log(date); // 当前时间 Tue Aug 27 2019 16: 43: 49 GMT+0800 (中国标准时间)
传递一个参数:Date可以接受一个字符串作为参数 要求是符合系统时间的字符串
var date = new Date("2019-10-10 19: 00: 00")
传递两个参数:Date可以接受参数 接受两个参数 第一个表示年份 第二个表示月份（0表示1月） 0 ~ 11
var date = new Date(2019, 2);
传递三个参数:前两个同上 第三个表示天数 这个不是从0开始 写几就是几号 1 ~ 31
var date = new Date(2019, 1, 20);
传递四个参数:前三个同上 第四个表示小时 值0 ~ 23
var date = new Date(2019, 1, 20, 1);
传递五个参数:前四个同上 第五个表示分钟 0 ~ 59
var date = new Date(2019, 1, 20, 1, 5);
传递六个参数:前五个同上 第六个表示秒 0 ~ 59
var date = new Date(2019, 1, 20, 1, 5, 45);
获取日期部分内容
获取年 getFullYear()
获取月 getMonth()
获取天数 getDate()
获取小时 getHours()
获取分钟 getMinutes()
获取秒数 getSeconds()
获取毫秒值getMillionseconds()
获取星期几getDay()
注: 0 是星期天 周一到周六 1 ~ 6
获取从1970年1月1日0点0分0秒至日期的毫秒值 getMillions()
设置日期
设置年 setFullYear()
设置月 setMonth()
设置天 setDate()
设置小时 setHours()
设置分钟 setMinutes()
设置秒数 setSeconds()
