1.日期
let date = new Date();
let date1 = Date();
console.log(date, date1);
/* 日期!!!
date date1 其实不一样!
date =>object date*1就返回unix时间戳 小技巧!!!还有几种方式
Number(date)/date.valueOf()/date.getTime() 都可以获得unix时间戳!
unix时间戳=>标准iso格式 new Date(unix时间戳);
date1 =>string date1*1 => NaN
*/
console.log(date * 1, date1 * 1);
/* console.log(date.now(), date1.now()); 会报错 要直接Date.now() 返回unix时间戳 */
console.log(Date.now());
/* 显示脚本执行时间两种方式
1. const begin = Date.now(){
for(){}
const end = Date.now();
console.log(end - begin /1000 +"秒"); 就可以得到for循环执行了多少秒
2. console.time('for');
for(){}
console.timeEnd('for');//同样得到for循环执行时间!!!单位ms
}
*/
/* 一个日期格式化函数 通过字符串替换实现*/
function dateformat(date, format = "YYYY-MM-DD HH:mm:ss") {
const Config = {
YYYY: date.getFullYear(),
MM: date.getMonth() + 1,
DD: date.getDate(),
HH: date.getHours(),
mm: date.getMinutes(),
ss: date.getSeconds(),
}
for (const key in Config) {
format = format.replace(key, Config[key]);
}
return format;
}
console.log(dateformat(new Date(), "YYYY/DD/MM HH:mm:ss"));
// moment.js 优秀的专门的时间处理js库
2. 数组
//const 定义引用类型【array/object】,可以修改,只要内存地址不变
/*
let array = [1,2,3];
array[6] = 5;//array只有三个元素,index 0 1 2,当直接设置index 6 的值为5时
系统默认会用undefined来填充 3 4 5 这个几个位置!!!
//两中 数组构造方法创建的区别
let array = new Array(1, 2, 3);
let array1 = Array.of(1, 2, 3);
console.log(array);
console.log(array1);
/* 但是new Array 创建只有一个参数的数组时 */
let array2 = new Array(6); //这里本意事项创建一个只有一个元素6的数组
//但其实时创建了一个长度为六,每个元素都是undefined的数组
console.log(array2.length, array2[2]); //=> 6 undefined
let array3 = Array.of(6); //创建一个只有一个元素6的数组,使用Array.of()可以解决构造方法创建一个数组时的问题
console.log(array3);
两个实用的函数:
.join(',/./?'),将数组元素以逗号、句号、?等符号连接成字符串
.toString() 将数组每个元素以逗号连接成字符串 / String([1,2,3]) => '1,2,3';!!!
Array.from();//转数组方法, 只要这个元素有.length 属性,不管是自带的【string,array 等都可以用length获取长度】,还是对象中加上的length属性【{length:3}】,
如果是对象,对象的key必须是数字类型索引,不然得到的数组中的元素全部是undefined!!!
let obj = {
0: 'a',
1: 18,
length: 3
//第三个元素为undefined 并且length值就是转数组后数组的元素个数!,索引小于length,不够的用undefined填充!!!
}
console.log(Array.from(obj));-》 ['a',18,undefined]
/* Array.from(el, function(item){
//可以接函数-会遍历转换后数组,并对每一项进行后续操作!!!!!! 打印item 为转换后的数组的每一项!
}) */
/* 数据操作
Array
.push(el) 尾追加元素 返回数组长度 ==| Array[array.length] = el; ==| array=array[...array,el];
.pop(el) 尾移除元素 返回弹出元素
.unshift() 首添加元素
.shift() 首移除元素 返回弹出元素
.fill(el, start , end) 从start 到 end 之间用 el 填充【替换】 包括 start end
.slice(start, end) 【不传参数默认从头截到尾】 起始截取数组 返回截取到的元素 不改变原数组
.splice(start, num, replacestr1, replacestr2 ...) 从start位置开始截取num个字符 返回截取到的元素数组,改变原数组,如果传递了replacestr 就会把截取走的字符用这个传递的字符替换掉
.splice(start ,0 ,replacestr1) 从某个位置开始 追加 replacestr1 字符!!!因为删除0个元素么
*/
/* 小例子 移动 数组元素到 指定位置 */
let aaa = [1, 2, 3, 4, 5, 6];
function move(arr, from, to) {
let newarr = [...arr]; //不希望改变原数组,这里新建一个数组
let item = newarr.splice(from, 1); //这里返回数组
console.log(item);
/* 展开语法小技巧 如果 ... 位于表达式左边,一般表示收集到一个变量里面,位于右边表示以逗号展开数组 */
newarr.splice(to, 0, ...item); //这里不写展开语法 就要用 item[0]
return newarr;
}
// console.table(move(aaa, 1, 3)); 把数组 aaa的索引1指向的元素移到第index 3
/*
清空数组n种方式
直接赋值[];【
let hd = [1,2,3,4,5];
let arr = hd;
hd = [];直接赋值如果有上面这种赋值操作
hd是为空了【其实是开辟一块值为空数组的内存空间,让hd指向它】,arr不会为空
】
arr.length = 0;
【 let hd = [1,2,3,4,5];
let arr = hd; arr hd 都指向一个内存空间
arr.length = 0; 这样 hd和arr都会清空,因为都指向一个内存空间,并且内存空间为空
】
arr.splice(0);//
循环弹出元素 pop() shift()
*/
/* 补 数组操作
Array
.concat(arr1,arr2 ...) 把arr1,arr2 合并到 array中
.copyWithin(target,start,end) 把 start 和 end 间的元素 复制【替换目标往后对应位数的元素】到 target位置,
.indexOf(target,begin) 指定从begin位置开始查找,默认begin ==0
.lastindexOf(target,begin) //右边开始查找 返回索引 找不到返回-1 严格类型匹配 查9的话 '9'不会被匹配到
.includes(),返回boolean 找到立即终止查找循环,
//高效查找
.find() 返回arr中你要查找的值 找到立即终止查找循环,【引申
引用类型【arr/obj】的比较,其实是比较内存地址
let b = []/{};
let a = []/{};
let c = a;
console.log( a == b )=>false
console.log( a == bc)=>true 地址一样!!
】
.findIndex() 返回索引 找到立即终止查找循环,
*/
let aarr = [1, 2, 3, 4, 5, 6];
// console.table(aarr.copyWithin(3,1,3));
/* 模拟find()方法 */
function find(arr, callback) {
for (const value of arr) {
if (callback(value)) return value;
}
return undefined;
}
let arra = [1, 2, 3, 4, 5, 6];
console.log(find(arra, function(item) {
return item == 2
}));
/* 排序
Array = Array.sort(function(a, b){
return a-b/b-a;
//a-b<0 从小到大 表示 a b 位置不变,大的在后面
//b-a>0 从大到小 表示 a b 位置改变 大的在前面
})
排序不仅限于纯数字数组!
*/
let arrr = [100, 1, 4, 44, 2, 101, 99, 1000, 55];
arrr = arrr.sort((a, b) => {
return b - a;
})
console.table(arrr);
let aaarr = [{
name: 'pc',
price: 8888
}, {
name: 'mobilephone',
price: 6666
}, {
name: 'bike',
price: 3344
}];
/* 排序不仅限于纯数字数组! */
aaarr = aaarr.sort((a, b) => { //这里的 a,b其实是aaarr的两个item
return a.price - b.price;
})
console.table(aaarr);
/* 模拟.sort()方法 */
function sort(arr, callback) {
for (const n in arr) {
for (const m in arr) {
if (callback(arr[n], arr[m]) < 0) {
let temp = arr[n];
arr[n] = arr[m]; //大的
arr[m] = temp;
}
}
}
return arr;
}
console.table(sort(arrr, (a, b) => {
return b - a;
}))
3 展开语法
/* 展开语法 */
let array4 = ['a', 'b'];
let array5 = ['c', 'd'];
array4 = [...array4, ...array5];
console.log(array4); //其实就把array5的每个元素都压入到array4中去了
/* 函数内应用 */
function sum(...args) {
//使用展开语法把参数都交给args这一个变量接收!!!这里实现多个数相加求和
return args.reduce((s, v) => {
return (s += v);
}, 0)
}
console.log(sum(1, 4, 6, 8, 9)); //=> 28
/* DOM节点应用 */
let divs = document.querySelectorAll('div');
console.log(divs);
/* divs.map(function(item){ //dom节点数组Nodelist 没办法使用map等方法 ,原型链上没有
console.log(item);
}) */
/* 展开语法 处理 dom节点数组Nodelist 后 就可以使用map方法便利数组啦 */
[...divs].map(item => {
console.log(item);
})
/* Array.from(divs).map() ok!
Array.prototype.map.call(divs, function(){}) ok!
三种方式都可,但是展开语法简单!!!
*/
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2022补充:
a= [{},{},{}] ,有这样一个数组,像循环数组中的对象改为 b= [{data:{}},{data:{}}, {data:{}}],
可以循环錒a = a.map(v=>{
v.data = {}
}),
但是这样会有一个问题,就是 当想 把 b 改为 :[{data:{a:1}},{data:{a:2}}, {data:{a:3}}]
你可能会 :
b.map((v, index) => {
v.data = {a:[index+1]},
})
但是其实最终结果是 [{data:{a:3}},{data:{a:3}}, {data:{a:3}}]
因为[{data:{}},{data:{}}, {data:{}}] 这里的 三个元素都是指向的同一个存储空间。改变一个其他都会改变。
这里可以使用:JSON.parse(JSON.stringify({})) 这种方式去操作,这样的插入的每个同样的对象的值,但是不是同一个地址。
补充2:
假设有一个函数: const func = () => {} ,想要这个函数延迟执行,而不是立马执行。新手(也就是我)可能会想到去使用定时器去实现。
但是还有一个方法,也是数组更高级的用法就是:
const arr:Function[] = [], 定义一个数组, 里面可以存放函数 【js 中 可以把一个函数, 闭包之类的东西丢到数组中】
==》 arr.push(() => func), 通过这种方式,函数不会立即执行
然后在另外一个 比如最可能的场景就是: 递归或者 requestAnimationFrame 这个帧动画中, 执行:{
const arr1 = [...arr]
arr1.foreach((fn) => fn()) 这样子去执行。 那么每一次的函数的递归调用或者帧动画调用就可以进行相应的处理。
}