写在前面

知识点：

Math数学函数

绝对值abs / 取整ceil|floor / 四舍五入round / 最值max / 幂pow、开方sqrt / 随机数random

数组

常用CRUD：

增：push / unshift / splice
删：shift / pop / splice
改：splice
查：splice
数组拼接：contact
数组和字符串相互转换：toString / join
索引/包含索引值：indexOf / lastIndexOf / includes

排序

倒序：reverse
正序：sort （注意添加参数）

遍历：forEach
数组去重

数组塌陷
优化性能
Set (ES6)

2.1.15 Math数学函数

math不是函数，是对象，对象存储操作数字属性方法

Math常用属性和方法

1、Math.abs([number value])

如果不是数字类型，先转换为数字类型（Number()转换）

2、Math.ceil/floor([number value])

把一个数向上取整/向下取整

Math.ceil(12.1) => 13

Math.ceil(-12.1) => -12

3、Math.round()四舍五入

Math.round(12.5) => 13

Math.round(-12.5) => -12

Math.round(-12.6) => -13

4、Math.max()

传递值是一堆数字

传递至是数组=> NaN

5、Math.sqrt()/pow()

开方

幂 Math.pow(2,10) => 1024

6、Math.random()

获取0-1之间随机小数

图片说明

//[m,n]之间
Math.round(Math.random()*(m-n)+n)

2.1.16 数组

2.1.16.1 数组常用方法

方法作用及含义
方法实参
方法返回值
原来数组是否会发生改变

实现数组CRUD方法

push 向数组末尾增加内容

@params

多个任意类型

@return

新增后数组长度

let ary=[10,20];
let res=ary.push(20,'1',{name:'xxx'});
console.log(res,ary);    => 5 [10,20,20,'1',{name:'xxx'}]

//基于原生JS操作键值对方法，也可以
ary[ary.length]=40;

unshift 向开始位置增加

let ary=[10,20];
let res=ary.unshift(20,'1',{name:'xxx'});
console.log(res,ary);    => 5 [20,'1',{name:'xxx'}，10,20]

ary[-1]=10; =>原生方法不能开头增加
//ES6展开运算符实现,克隆原有ary，在新数组创建第一项，实现开头增加效果
ary=[100,...ary];

shift 删除数组一项

@params

多个任意类型

@return

返回删除一项

let ary=[10,20,30,40];
let res=ary.shift();
console.log(res,ary); =>10 [20,30,40]

//基于原生JS的delete，把数组当普通对象，可以删除一项，但是不会影响数组本身结构特点（length长度不会跟着改变），真实项目杜绝这样使用
let ary=[20,30,40];
delete ary[0];
console.log(ary);

图片说明

pop 删除数组最后一项

@params

@return

返回删除一项

let ary=[10,20,30,40];
let res=ary.pop();
console.log(res,ary); =>40 [10,20,30]

//基于原生JS让数组长度减少一位，默认减少最后一项
ary.length--;
console.log(ary);

splice 实现数组的增加，删除，修改

删

@params

n,m数字，从索引n开始删除m个元素（m不写，删到末尾)

@return

把删除部分用新数组存起来返回

let ary=[10,20,30,40,50,60];

let res=ary.splice(2,3);
console.log(res,ary);//=>[30,40,50] [10,20,60]

//基于这种方法可以清空一个数组，把原始数组中的内容以新数组存储起来（有点类似克隆）
let res=ary.splice(0);
console.log(res,ary);//=>[10,20,30,40,50,60] []

//删除最后一项和第一项
ary.splice(ary.length-1);
ary.splice(0,1);

修改/增加

@params

n,m,x数字，从索引n开始删除m个元素,用x占用删除部分

n,0,x数字，从索引n开始,一个都不删，把x放到索引n前面

@return

把删除部分用新数组存起来返回

let ary=[10,20,30,40,50,60];
let res=ary.splice(1,2,'xxx','ddd');
console.log(res,ary);//=>[20,30] [10,'xxx','ddd',40,50,60]

//向数组末尾追加
let res=ary.splice(ary.length,0,'xxx');
//向数组开头追加
let res=ary.splice(0,0,'xxx');

slice 数组查询

查询

@params

n,m数字，从索引n开始找到索引为m的地方（不包括m)，m不写，查到末尾

@return

把找到内容以新数组的形式返回

let ary=[10,20,30,40,50,60];
let res=ary.slice(1,3);
console.log(res); //=>[20,30]

//数组克隆,参数0不写也可以
res=ary.slice(0);

//思考：如果n/m为负数/小数/非有效数字？

//思考：如果n/m为负数？


//思考：这种克隆是浅克隆，那么深度克隆怎么处理？

concat 数组拼接

@params

多个类型值

@return

拼接后的新数组（原数组不变）

let ary1=[10,20,30];
let ary2=[40,50,30];
let res =ary1.concat('111',ary2)
console.log(res); //=>[10,20,30,'111',40,50,30]

toString 数组转字符串

@params

@return

转换后字符串，每一项逗号分隔（原数组不变）

let ary1=[10,20,30];
let res =ary1.toString()
console.log(res); //=>'10,20,30'

join 把数组转换为字符串

@params

指定分隔符（字符串格式）

@return

转换后字符串,不指定分隔符，默认逗号（原数组不变）

let ary1=[10,20,30];
let res =ary1.join('|');
console.log(res); //=>'10|20|30'

let ary1=[10,20,30];
let res =ary1.join('+');
console.log(res); //=>'10+20+30'
console.log(eval(res)); //=>60 eval把字符串变为JS表达式执行

indexOf / lastIndexOf / includes 检测当前项在数组中第一次或最后一次出现的位置索引值(在IE6/7/8不兼容)

@params

要检索的这一项内容

@return

这一项出现的位置索引值（数字），如果数组中没有这一项，返回-1

includes 返回true/false

let ary=[10,20,30,10,20,30];
console.log(ary.indexOf(20));
console.log(ary.lastIndexOf(20));
console.log(ary.includes('xx'));=>false

2.1.16.2 排序/排列

reverse 把数组倒序排列

@params

@return

排列后的新数组，原来数组改变

let ary=[10,20,30];
console.log(ary.reverse()); => [30, 20, 10]

sort把数组排序

@params

可以没有，也可以是个函数

@return

排列后的新数组，原来数组改变

let ary=[10,8,30,21];
//sort方法不传递参数，无法处理10以上的数字排序（默认按照第一个字符排序）
console.log(ary.sort()); => [10, 21, 30, 8]

//想要实现多位数正常排序，需要sort传递一个函数，函数中返回a-b实现升序，返回b-a实现降序（原理需要先了解冒泡排序）
ary.sort((a,b)=> a-b );
console.log(ary); //=> [8, 10, 21, 30]

2.1.16.3 遍历数组中每一项方法

forEach 遍历数组每一项

@params

回调函数

@return

无

原数组不变

TIPS: 除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。

//基于原生JS循环实现遍历

//基于forEach
ary.forEach((item,index) => {
    //数组有多少项，函数就会被默认执行多少次
    //每一次执行函数：item是数组中当前要操作一项，index是当前项索引
});

Array.prototype在控制台查询数组中所有提供的方法（MDN）

map

filter

reduce

some

every

...

2.1.16.4 数组去重

//思路一：创建新数组，添加原数组数据，验证每一项是否存在
ary=[1,2,3,1,2,3,1,2,3];
let newAry=[];
for(let i=0;i<ary.length;i++){
    if(newAry.includes(ary[i])){continue;}
    newAry.push(ary[i]);
}

console.log(newAry);


let ary=[1,2,3,1,2,3,1,2,3];
let newAry=[];
ary.forEach(item=>{
    if(newAry.includes(item)) return;
    newAry.push(item);
})
console.log(newAry);=>[1, 2, 3]

//思路二：先分别拿出数组中的每一项，用这一项和它后面的每一项一次比较，如果遇到和当前项A相同的，则在原来数组中移除
var ary=[1,2,3,1,2,3,1,2,3];
for(let i=0;i<ary.length;i++){
    //item:当前项    i:当前项索引
    var item=ary[i];
    for(let j=i+1;j<ary.length;j++){
        var compare=ary[j];
        if (compare === item){
            ary.splice(j,1);
        }
    }
}
console.log(ary);=>[1, 2, 3, 3]

//没实现原因：数组塌陷
//数组塌陷后，为了不让i继续累加，我们先把i--
var ary=[1,2,3,1,2,3,1,2,3];
for(let i=0;i<ary.length;i++){
    //item:当前项    i:当前项索引
    var item=ary[i];
    for(let j=i+1;j<ary.length;j++){
        var compare=ary[j];
        if (compare === item){
            ary.splice(j,1);
            //数组塌陷:j后面的每一项索引都提起一位下一次比较应该还是j这个索引内容
            j--;
        }
    }
}

优秀去重方法

//方法1：
let ary = [1, 2, 3, 1, 2, 3, 1, 2, 3];
let newAry = {};
for (let i = 0; i < ary.length; i++) {
    newAry[ary[i]] === undefined ? newAry[ary[i]] = ary[i] : (ary.splice(i, 1),i--);
}
console.log(ary);
console.log(newAry);

//基于splice实现删除新跟那个不好,当前项被删除，后面每一项索引都要前提，如果后面内容过多，一定影响性能

图片说明

//方法2：解决splice性能差
let ary = [1, 2, 3, 1, 2, 3, 1, 2, 3];
let newAry = {};
for (let i = 0; i < ary.length; i++) {
    if(newAry[ary[i]] === undefined){
        newAry[ary[i]] = ary[i]
    }else{
        ary[i]=ary[ary.length-1]; //最后一项移到这个位置
        ary.length--;
        i--;
    }
}
console.log(ary);
console.log(newAry);

unique 数组去重方法

创建方法注释写法：

@params

ary[Array] 要去重数组

@return

[Array] 去重后数组

by xxx on 1172104024

function unique(ary) {
    let newAry = {};
    for (let i = 0; i < ary.length; i++) {
        let item=ary[i];
        if (newAry[item] !== undefined){
            ary[i] = ary[ary.length - 1];
            ary.length--;
            i--;
            continue;
        }
        newAry[item]=item;
    }
    return ary;
}

其他去重方法

//基于ES6,set方法
let ary =[12,23,12,15,25,23];
ary=[...new Set(ary)];
console.log(ary);

JavaScript学习笔记-5

写在前面

2.1.15 Math数学函数

2.1.16 数组

2.1.16.1 数组常用方法

实现数组CRUD方法

2.1.16.2 排序/排列

2.1.16.3 遍历数组中每一项方法

2.1.16.4 数组去重