前端学习——JavaScript对象

一. JavaScript对象

1.1 创建对象

• 创建对象遵循规则

  • 对象中单个属性的属性名和属性值使用冒号隔开
  • 多个属性之间用逗号隔开
  • 最后一个属性或函数后不加逗号
  • 对象的属性名可以不遵守变量命名规则
  • 不遵守命名规则的属性名必须使用单引号或者双引号包裹（符合变量名要求的属性名也可以使用引号包裹）

• 创建对象方式一

/*创建JS字面量对象*/
let stu = {
    name: '柳园',
    sex: '🚺',
    age: 18,
    show: function () {
    	console.log("大家好,我是" + stu.name + ",今年" + stu.age + "岁");
    }
};
console.log(stu);

输出结果

• 创建对象方式二

基本语法：

/*这种方式只能创建出空对象,需要自己再单个属性取赋值*/
let obj = new Object();
obj.name = 'eason';
obj.age = 18;
obj.sex = '男';
obj.show = function () {
    console.log("我是" + obj.name + ",今年" + obj.age + "岁");
}
/*增加一个不符合规命名规范的属性名*/
obj['my-info'] = '我是不符合规范的属性名';

console.log(obj['my-info']);
console.log(obj)

这样就是创建了一个空对象，然后再对空对象进行赋值

其他操作都差不多的

1.2 对象属性操作

• 追加对象属性

/*添加属性*/
stu.descript = '一位阳光大男孩';
/*修改属性*/
stu.name = 'eason';

输出结果

• 当变量名不符合规范的时候

如果变量名不符合变量的命名规则，则使用[]里面加上单引号或者双引号选中

那么在后面调用的时候需要加上[]单引号或者双引号

/*如果变量属性名不符合变量的命名规则,则使用[]里面加上单引号或者双引号选中*/
let myInfo = stu['my-info'];
console.log(myInfo);

如果需要用变量名来表示属性名时，也是需要使用中括号来获取

/*如果需要用变量名来表示属性名时,也是需要使用中括号来获取*/
let n = "name";
console.log(stu[n]);

• 删除属性

使用delete关键字来删除属性

基本语法

delete obj.name; //删除obj对象里面的name属性

注意：删除属性(delete不是对象专用,任何变量都可以使用delete来删除)

1.3 大批量快速创建对象

let stu = new Object();
stu.name = '张三';
stu.sex = '男';
stu.age = 20;
stu.study = function () {
console.log(stu.name + "正在学习web前端!");
}
stu.eat = function () {
console.log(stu.name + "正在吃饭!");
}
let stu2 = new Object();
stu2.name = '李四';
stu2.age = 18;
stu2.sex = '男';
stu2.study = function () {
console.log(stu.name + "正在学习web前端!");
}

为了解决以上问题，大批量创建对象，代码重复过多的问题

使用工厂函数创建对象，其实说白了就是将创建对象的过程放在函数里面，然后我们需要的时候进行调用即可

这样就可以减少了大量的重复代码书写

/*工厂函数创建对象*/
function createObject(name,sex,age) {
    /*采购原材料*/
    let stu = new Object();
    stu.name = name;
    stu.sex = sex;
    stu.age = age;
    stu.study = function () {
    console.log(stu.name + "正在学习web前端!");
    }
    stu.eat = function () {
    console.log(stu.name + "正在吃饭!");
    }
    /*输出产品*/
    return stu;
}
let stu1 = createObject('eason','男',18);
let stu2 = createObject('杨千嬅','女',18);
let stu3 = createObject('刘德华','男',20);
let stu4 = createObject('周润发','男',20);
console.log(stu1);
console.log(stu2);
console.log(stu3);
console.log(stu4);

这样就可以大量创建对象了

输出结果

但是这样创建对象的时候，比如我们创建多个工厂函数，工厂函数里面的对象无法区分，也就是说我们并没有真正创建出属于学生自己的对象，他和其他工厂对象创建的对象类型都是一样的，无法区分，也就是这样创建的所有对象都属于Object对象，而不是单独属于他们自身的对象

1.4 window对象

window这个对象是相当于一个浏览器的窗口，这个对象下有许多的方法包括我们常用的alert，console等等一些基本方法

那么this定义就是该对象的方法

我们可以尝试着在输出this

console.log(this);/*这里打印的this打印的结果为window对象,这个是浏览器窗口对象,不同于windows,windows是操作系统,window是浏览器窗口*/

输出结果：

我们同时也可以在window窗口下创建属性，属于window这个对象下的属性

不过我们需要使用var关键字才可以创建，使用let关键字无法在window下创建对象属性

例如：

var ashuxing = 100;
var asb = function () {
    console.log("123");
}

这个时候在window对象下就可以找到这个属性了

这就是window对象下创建属性

1.5 this关键字

this关键字的意思就是指向当前的自身对象，在最外层使用就是指向当前的window对象

如果this关键字在函数里面，就是函数自身的对象指向

如下的方法里面

function Student(name,age,sex) {
    /*在构造函数中,this表示的是该构造函数自身对象*/
    /*如果调用该方法时没有使用new关键字,那么他就是普通函数,普通函数中this指向window*/
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.show = function () {
        console.log("我是Student对象的函数");
    }
    // console.log("sss");
}

这里面的this指向的时Student这个对象

这上面的代码就是创建一个对象的一种方法，相当于Java里面的构造函数，this是用来指向当前对象的属性，并且可以通过传参进行赋值

这样子就可以解决使用工厂函数创建对象的对象类型都属于Object类型的问题了

这样子创建的对象每个对象类型都是属于Student的，这样可以区分各个对象之间的区别

构造函数的作用

• 在内存中开辟了一个空间存放对象
• this指向自身对象
• 返回自身对象

调用Student对象函数

• 调用方法错误代码

let stu1 = Student('张小花',22,'女');
console.log(stu1);
console.log(stu1 instanceof Student);

这里面输出的stu1是一个undefined

类型不属于Student对象

• 调用方法正确代码

let stu = new Student('eason',18,'男');
console.log(stu);
console.log(stu instanceof Student);

这里面输出的stu是Student对象

返回的是true，说明stu属于Student对象

在调用该方法的时候必须要使用new关键字，如果不使用new关键字，那么他就i是普通的函数，普通函数中的this指向的是window对象

构造函数相关代码

<script>
    /*
    *
    * */
    /*this(js的难点之一)*/
    var ashuxing = 100;
    var asb = function () {
        console.log("123");
    }
    console.log(this);/*这里打印的this打印的结果为window对象,这个是浏览器窗口对象,不同于windows,windows是操作系统,window是浏览器窗口*/
    // this.alert(123);
    // window.alert(456);

    /*
    * 在JS中,默认情况下,window对象可以省略不写,可以使用this关键字表示
    *
    * this的指向是会动态发生改变的
    * */

    /*
    * JS中声明构造函数要求函数名大写(可遵循可不遵循,一个规范)
    * JS中一个函数是否是构造函数是由调用时决定
    * 使用new关键字调用就是构造函数,否则就是普通函数
    * 构造函数被调用一定会返回表示自己的对象
    * */
    /*构造函数首字母需要大写*/

    /*
    *
    * 构造函数做了什么事情:
    *   1. 在内存中开辟了一个空间存放对象
    *   2. this指向自身对象
    *   3. 返回自身对象
    *
    * */
    function Student(name,age,sex) {
        /*在构造函数中,this表示的是该构造函数自身对象*/
        /*如果调用该方法时没有使用new关键字,那么他就是普通函数,普通函数中this指向window*/
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.show = function () {
            console.log("我是Student对象的函数");
        }
        // console.log("sss");
    }

    let stu = new Student('eason',18,'男');
    console.log(stu);
    console.log(stu instanceof Student);

    let stu1 = Student('张小花',22,'女');
    console.log(stu1);
    console.log(stu1 instanceof Student);

</script>
</html>

二. JavaScript内置对象

这边给大家介绍一个网站，前端程序员的一个网站

可以直接百度搜索MDN或者进入以下网站

https://developer.mozilla.org/zh-CN/

这个网站上面相当于一个最为规范的一份官方文档

里面不论对于JavaScript，HTML，CSS还是一些关于前端的知识都会有很好的记录

2.1 Math内置对象

基本语法

Math.属性;
或者
Math.方法;

属性有以下几种

这里面都可以链接到MDN网站上面对应的属性

1. Math.E
2. Math.LN10
3. Math.LN2
4. Math.LOG10E
5. Math.LOG2E
6. Math.PI
7. Math.SQRT1_2
8. Math.SQRT2

方法有以下几种

1. Math.abs()
2. Math.acos()
3. Math.acosh()
4. Math.asin()
5. Math.asinh()
6. Math.atan()
7. Math.atan2()
8. Math.atanh()
9. Math.cbrt()
10. Math.ceil()
11. Math.clz32()
12. Math.cos()
13. Math.cosh()
14. Math.exp()
15. Math.expm1()
16. Math.floor()
17. Math.fround()
18. Math.hypot()
19. Math.imul()
20. Math.log()
21. Math.log10()
22. Math.log1p()
23. Math.log2()
24. Math.max()
25. Math.min()
26. Math.pow()
27. Math.random()
28. Math.round()
29. Math.sign()
30. Math.sin()
31. Math.sinh()
32. Math.sqrt()
33. Math.tan()
34. Math.tanh()
35. Math.trunc()

这里面的方法就不一一解释了，比较重要的有以下几点

• Math.abs 绝对值
• Math.max 最大值
• Math.min 最小值
• Math.pow 求次方或者平方
• Math.ceil 向上取整
• Math.floor 向下取整
• Math.round 四舍五入
• Math.random 随机数

console.log("Π的值:" + Math.PI);
console.log("3.14的绝对值:" + Math.abs(3.14));
console.log("-3.14的绝对值:" + Math.abs(-3.14));
console.log("3和5的最大值:" + Math.max(3,5));
console.log("3,4,8,2,6的最大值:" + Math.max(3,4,8,2,6));
console.log("3和5的最小值:" + Math.min(3,5));
console.log("3,4,8,2,6的最小值:" + Math.min(3,4,8,2,6));
console.log("3的5次方" + Math.pow(3,5));

console.log("3.0000001向上取整:" + Math.ceil(3.0000001));
console.log("3.9999999向下取整:" + Math.floor(3.9999999));
console.log("3.4四舍五入:" + Math.round(3.4));
console.log("3.6四舍五入:" + Math.round(3.6));

最重要的是随机数

Math.random()函数返回一个浮点数, 伪随机数在范围从0到小于1，也就是说，从0（包括0）往上，但是不包括1（排除1），然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法；它不能被用户选择或重置

随机数有一个公式

比如我要生成1-100的随机数

随机数的公式是：Math.random()*(max - min + 1) + min;

生成1-100的随机数就是：Math.random()*(100-1+1) + 1;

这样就能够得到1-100之间的随机数了

当然我们还可以加上一个**向下取整Math.floor()**将上面的随机数包裹起来，这个时候得到的随机数就都是整数了

下面是一些随机数的案例

• 随机数任意范围的公式

/*
* 随机数任意范围的公式
* Math.random()*(max-min+1)+min;
* */
function getRandom(start,end) {
    if (start>end) {
        let temp = end;
        end = start;
        start = temp;
    }
    return Math.floor(Math.random()*(end - start + 1) + start);
}

console.log("6-84的随机数是多少:" + getRandom(6,84));

• 生成一个随机颜色的div框

let d1 = document.getElementById("d1");

let r = Math.random()*256;
let g = Math.random()*256;
let b = Math.random()*256;
let a = Math.random();
d1.style.width = '400px';
d1.style.height = '400px';
d1.style.background = 'rgba('+ r + ',' + g + ',' + b + ',' + a + ')';

绑定到id值为d1的div框，然后设置0-255之间的随机数就好

• 随机生成15个10-50之间的数字并计算他们的和是多少

/*
    * 随机生成15个10-50之间的数字并计算他们的和是多少
* */
let sum = 0;
for (let i = 0; i < 15; i++) {
    let ran = Math.floor((Math.random() * 41) + 10);
    console.log(ran);
    sum += ran;
}
console.log(sum);

• 随机生成50个1-5的随机数，统计每个数组出现的次数（主要考点是对象）

/*
* 随机生成50个1-5的随机数,统计每个数组出现的次数
*
* 考点:对象的属性是无序的且不可重复的
* */
let obj = new Object();
for (let i = 0; i < 50; i++) {
	let r = Math.floor(Math.random()*5 + 1);
	// console.log(r);
	/*判断r是否作为key存在于obj对象中*/
	if (obj[r] == null) {
		obj[r] = 1;
	}else {
		/*如果存在就让它的值自增*/
		obj[r] += 1;
	}
}
console.log(obj);

• 生成一个四位数的短信验证码(纯数字的短信验证码)

let n1 = Math.floor(Math.random()*10).toString();
let n2 = Math.floor(Math.random()*10).toString();
let n3 = Math.floor(Math.random()*10).toString();
let n4 = Math.floor(Math.random()*10).toString();
let s = n1 + n2 + n3 + n4;
console.log(s);

let sum3 = "";
for (let i = 0;i < 4; i++) {
	let n = Math.floor(Math.random()*10).toString();
	sum3+=n;
}
console.log(sum3);

• 随机生成六位的验证码(英文大小写和数字)

let str = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
console.log(str.length);
/*ES6新写法*/
// console.log(str[0]);
let code = "";
for (let i = 0; i < 6; i++) {
    code += str[Math.floor(Math.random()*str.length)];
}
console.log(code);

2.2 字符串对象

String全局对象是一个用于字符串或一个字符序列的构造函数。

String 里面有很多方法

下面讲一些比较常用的函数

• 获取字符串长度

语法：str.length;

let str = "my name is eason";
console.log("字符串长度为:" + str.length);

• 获取字符串下标值

两种方式可以获取到下标值

let str = "my name is eason";
console.log("获取字符串中下标为3的值(ES6的方式):" + str[3]);
console.log("获取字符串中下标为3的值(ES5的方式):" + str.charAt(3));

• 获取字符首次出现下标

let str = "my name is eason";
console.log("获取字符a在字符串中首次出现的位置:" + str.indexOf('a'));
console.log("获取字符a在字符串中最后出现的位置:" + str.lastIndexOf('a'));

• 字符串内容大小写转换

let str = "my name is eason";
console.log("字符串内容全部转换为大写:" + str.toUpperCase());
console.log("字符串内容全部转换为小写:" + str.toLowerCase());

• 字符串拼接

let str = "my name is eason";
console.log("把字符串abc拼接到str后面:" + str + 'abc');
console.log("把字符串abc拼接到str后面:" + str.concat('abc'));//concat和加号没有区别
console.log("把字符串abc、字符串qwer拼到str后面:" + str.concat('abc','qwer'));

• 截取字符串

let str = "my name is eason";
console.log("截取字符串中下标从5-9的内容:" + str.substring(5,9));
console.log("截取字符串中下标从5-9的内容:" + str.slice(5,9));
console.log("从下标5开始截取6个字符的长度:" + str.substr(5,10));

• 替换字符串

let str = "my name is eason";
console.log("把字符串中所有的小写字母a替换为大写字母:" +  str.replaceAll('a','A'));
console.log("把字符串中首个的小写字母a替换为大写字母:" +  str.replace('a','A'));

• 拆分字符串

/*根据给定的规则拆分字符串*/
let ss = str.split(' ');
console.log(ss);

• 清除字符串两端空白

let name = ' abc def ';
console.log('name的值是:' + name + ',长度是:' + name.length);
    /*trim函数清除的是字符串两端的空白*/
let name2 = name.trim();
console.log('name2的值是:' + name2 + ',长度是:' + name2.length);

字符串案例

<script>
    /*获取字符串末尾的拼接值*/
    let fileName = 'a.b.c.d.e.f.g.txt.png.rar.java.js';
    let fs = fileName.split('.');
    console.log(fs[fs.length - 1]);


    /*截取指定范围内文字后拼接内容*/
    let titles = '凯华BOX轴在市场一直颇受不少玩家青睐，在刚刚过去的2020年，为了满足众多玩家的日益增长的需求，凯华也发售了天空蓝、玫瑰红和流沙金三款新的BOX轴体。而一直被玩家戏称“亲儿子”的黑峡谷（Hyeku）也率先在自家的X3无线双模机械键盘上搭载了这三款轴体，更是带来了多款复古时髦的配色方案，接下来就让笔者带来这款键盘的评测吧。';
    let t = titles.substr(0,13).concat('...');
    console.log(titles);
    console.log(t);


    /*
    *
    * let str = 'woqijklasdjlkasasdioujaskldhjhsad';
    * 计算str这个变量中每个字母出现的次数
    *
    * */
    let str = 'woqijklasdjlkasasdioujaskldhjhsad';
    let obj = new Object();
    for (let i = 0; i < str.length; i++) {
        if (obj[str[i]] == null) {
            obj[str[i]] = 1;
        }else {
            obj[str[i]] += 1;
        }
    }
    console.log(obj);

    for (let key in obj) {
        console.log("字母" + key + "出现了" + obj[key] + "次");
    }

    /*遍历*/
    /*
    *
    * let name = 'my name is eason';
    * 把name变量的每个单词的首字母变为大写
    * */
    let name = 'my name is eason';
    let sss = name.split(' ');
    let newName = "";
    console.log(name);
    for (let i = 0; i < sss.length; i++) {
        let s = sss[i].charAt(0);
        let m = sss[i].replace(s,sss[i].charAt(0).toUpperCase());
        newName = newName + m + ' ';
    }
    name = newName;
    console.log(name);
</script>

2.3 Date对象

Data对象在JS中表示的是获取时间的对象

创建一个 JavaScript Date 实例，该实例呈现时间中的某个时刻。Date 对象则基于 Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数。

• 获取日期时间

let d = new Date();
console.log(d);
console.log(d.toLocaleString());
console.log(d.toDateString());

• 获取时间戳的两种方式

console.log(d.getTime()); //时间戳 1970年1月1日0点0分0秒到现在经过的毫秒数
console.log(d.valueOf());

两种方式的区别

1. valueOf是所有对象都拥有的能力，不是时间对象所拥有的
2. valueOf中调用的就是getTime方法

所以建议使用getTime()来获取时间戳

• 根据时间戳初始化日期对象

/*根据时间戳初始化日期对象*/
let d3 = new Date(13451411234744);
console.log(d3.toLocaleString());

根据时间戳来获取日期的对象

• 获取四位数年份

/*获取四位数年份*/
let year = d.getFullYear();
console.log(year);

• 获取月份，范围是0-11

/*获取月份,范围是0-11*/
let month = d.getMonth() + 1;
console.log(month);

• 获取日期

/*获取日期*/
let date = d.getDate();
console.log(date);

• 获取星期，范围是0-6，周日是0，老外喜欢将周日设置为第一天

/*获取星期,范围是0-6,周日是0,外国人喜欢将周日为第一天*/
let day = d.getDay();
console.log(day);

• 获取小时，范围是0-23

/*获取小时,范围是0-23*/
let hours = d.getHours();
console.log(hours);

• 获取分钟，范围是0-59

/*获取分钟,范围是0-59*/
let minutes = d.getMinutes();
console.log(minutes);

• 获取秒

let second = d.getSeconds();
console.log(second);

• 自定义日期的格式

let dataTime = year + '-' + formatterNumber(month) + '-' + formatterNumber(date) + ' ' + formatterNumber(hours) + ':' + formatterNumber(minutes) + ':' + formatterNumber(second);
console.log(dataTime);

/*该函数的作用是判断数值是否小于10，如果小于10则在数字前面拼接一个0*/
function formatterNumber(number) {
    return number < 10 ? "0" + number : number;
}

• Date对象案例

/*计算d1和d2相差多少天*/
let d1 = new Date(2025,2,18);
let d2 = new Date(2022,4,18);
let time1 = d1.getTime();
let time2 = d2.getTime();
let t3 = time2 - time1;
let day = t3/1000/60/60/24;
day = Math.abs(day);
console.log(d1.toLocaleString() + "和" + d2.toLocaleString() + "相差" + day + "天");

2.4 Array对象

JavaScript的 Array 对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。

• 创建数组

字面量创建数组

/*字面量方式创建数组*/
let arr1 = [1,2,3,5,7,8,9];
console.log(arr1);

使用new关键字创建数组

let arr2 = new Array();
arr2[0] = 1;
arr2[1] = 2;
arr2[2] = 4;
arr2[3] = 5;
arr2[4] = 7;
arr2[5] = 8;
console.log(arr2);

• 判断某个变量是否为数组

/*判断某个变量是否是数组*/
/*typeof判断中数组属于对象类型,不能作为判断依据*/
let num = 10;
console.log(typeof num);
console.log(typeof arr1);
console.log(typeof arr2);

/*instanceof关键字可以用来判断某个变量是否属于Array对象*/
console.log(num instanceof Array);
console.log(arr1 instanceof Array);
console.log(arr2 instanceof Array);

/*ES6中isArray专门用来判断是否是数组*/
console.log(Array.isArray(num));
console.log(Array.isArray(arr1));
console.log(Array.isArray(arr2));

• 数组转换

/*数组转换*/
console.log(arr1.toString());/*把数组中每一项按顺序拼接,使用逗号分隔*/
console.log(arr1.join());/*把数组中每一项按顺序拼接,默认使用逗号分隔*/
console.log(arr1.join('.'));/*把数组中每一项按顺序拼接,使用.分隔*/
console.log(arr1.join(' '));/*把数组中每一项按顺序拼接,使用空格分隔*/

• 操作数组

1. 在数组末尾追加内容

/*在数组末尾追加内容*/
arr1.push(11);
console.log(arr1);
arr1.push(13,15,17);/*push可以一次拼接多个值*/
console.log(arr1);

2. 取出数组末尾的内容

/*取出数组末位的内容*/
let pop = arr1.pop();
console.log(pop);
console.log(arr1);

3. 在数组首位添加内容

/*在数组首位增加内容*/
let len = arr1.unshift('abc');
console.log(len);
console.log(arr1);

4. 取出数组首位的内容

/*取出数组首位内容*/
let sh = arr1.shift();
console.log(sh);
console.log(arr1);

其中需要注意的是

push和unshift函数都是给数组增加内容，返回值都是增加后的数组长度

pop和shift函数是取出数组内容，返回值是取到的值，也会改变数组长度

5. 拼接数组

/*拼接数组,将arr1和arr2拼接到一起,然后放在arr3数组里面*/
let arr3 = arr1.concat(arr2);
console.log(arr3);

6. 截取数组

/*截取数组,参数用法和截取字符串时一致,含头不含尾*/
let arr4 = arr3.slice(1,4);
console.log(arr4);

7. 在指定为是删除数组或替换内容

/*在指定位置删除数组或替换内容*/
console.log(arr1);
let num2 = arr1.splice(3,1);
console.log(num2);
console.log(arr1);
/*在arr1中从下标3开始截取2个长度的内容替换为100,只会替换一次*/
let num3 = arr1.splice(3,2,100);
console.log(num3);
console.log(arr1);

8. 查找数组值的下标

/*查找值的下标*/
console.log(arr1.indexOf(3));
console.log(arr1.lastIndexOf(100));

9. 旋转数组

/*旋转数组本身发生的变化*/
console.log(arr1.reverse());

• 数组排序 sort函数

**sort()**方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的

由于它取决于具体实现，因此无法保证排序的时间和空间复杂性。

排序需要记住的是sort函数里面需要传入一个函数来判断，然后再判定排序的顺序

值得一提的是里面的比较函数第一个值代表的是数组的后一个值，第二个值代表的是数组的前一个值

比如一个数组

arr = [2,4,5,6,7,8];

函数为compare(a,b);

第一次比较的时候 a = 4 ，b = 2；

如果比较函数里面返回值大于等于0就不会调换位置，保持原样

如果返回值小于0的话就会调换位置

let arr = [2,9,4,6,8,16,54,2,5,4];
console.log("原数组:" + arr);
/*数组排序*/
arr.sort();
console.log("排序后的数组:" + arr);

/*
* compare比较器中a表示数组中后一个数,b表示数组中前一个数
* */
function compare(a,b) {
    /*后面的数字大于前面的数字*/
    if (a > b) {
        return 1;
    }
    if (a < b) {
        return -1;
    }
    if (a === b) {
        return 0;
    }
}
arr.sort(function (a,b) {
    //返回a-b的时候是从小到大排序
    //因为a代表的是数组的后一个值,b代表的是数组中的前一个值,
    //如果两个值相减大于0的话,说明a>b,b排在a的前面,也就是说位置不变
    return a - b;
    //返回b-a的时候是从大到小排序
    //return b - a;
});
console.log(arr);

sort函数案例

对一个对象进行排序，对年龄进行从小到大排序，如果年龄相同就按照学生编号进行倒叙排序

/*初始化对象*/
function Student(name, age, stuNo) {
    this.name = name;
    this.age = age;
    this.stuNo = stuNo;
}
let stu1 = new Student('张三丰',25,5);
let stu2 = new Student('张四丰',14,6);
let stu3 = new Student('张五丰',12,7);
let stu4 = new Student('张六丰',24,8);
let stu5 = new Student('张七丰',26,9);
let stu6 = new Student('张八丰',14,3);
let stu7 = new Student('张九丰',35,20);

let stuArr = [stu1,stu2,stu3,stu4,stu5,stu6,stu7];
console.log(stuArr);

/*根据对象属性来排序*/
/*对学生按照年龄排序*/
stuArr.sort(function (s1,s2) {
    return s1.age - s2.age;
});
console.log(stuArr);

/*对学生年龄排序,如果年龄相同,则按照学号倒序排序*/
stuArr.sort(function (s1,s2) {
    //判断数组中第二个值是否大一第一个值
    let age = s1.age - s2.age;
    if (age === 0) {
        return s2.stuNo - s1.stuNo;
    }
    return age;
})

• 数组检验

数组检验有两种方法，同上面sort函数一样，需要有回调函数

1. some函数，这个函数是判定一个数组中是否含有符合条件的值

这个他会整个数组，如果条件之不满足会一直遍历，如果条件满足之后就会直接返回

只要有一个满足的就会返回true

/*检验数组中是否存在偶数*/
/*
* 回调函数的参数列表
*   item    遍历得到的数组中的每项的值
*   index   每次遍历的到的下标
*   array   参与计算的数组
* */
/*
* 只要有一个符合条件的都为true
* */
let arr = [1,3,5,7];
let bool = arr.some(function (item,index,array) {
    console.log(item % 2 === 0);
    return item % 2 === 0;
});
console.log(bool);

2. every函数，这个函数是判定一个数组中是否全部都满足条件

这个他会遍历整个数组，来判断整个数组所有的值都满足条件，如果全部都满足就返回true，只要有一个不满足就会返回false

/*必须全部符合条件结果才为true*/
let bool1 = arr.every(function (item) {
    return item % 2 !== 0;
});
console.log(bool1);

/*
* 随机生成10个5-50之间的数字,并判断本次结果中是否包含20
* */
let arr3 = [];
for (let i = 0; i < 10; i++) {
    arr3[i] = Math.floor(Math.random()*46 + 5);
}
let b = arr3.some(function (item) {
    return item === 20;
});
console.log(arr3);
console.log(b ? '包含20' : '不包含20');

这里面需要注意的是some和every的区别，一个是部分满足则成立，一个是全部满足则成立

• 数组遍历

遍历数组有三种方式，下面来介绍这三种遍历数组的方式

1. 直接for循环遍历

这个方法简单实用，比较容易理解

let arr = [1,3,5,7,9];
/*for循环方式遍历数组*/
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

2. 使用for…in…循环遍历

/*for in 循环遍历数组*/
for (let i in arr) {
    console.log(i);
    console.log(arr[i]);
}

这个也和上面那个一样

3. forEach循环

这个需要传入参数才可以使用

/*forEach循环遍历数组:
    1. 对于未定义的内容不会进行输出
    2. continue和break关键字对其无效(意思就是forEach循环只要执行了就必须会走完)
*/
arr.forEach(function (item,index,array) {
	// console.log(item);
});

• 清空数组

1. 方式一

/*方式一,直接将arr重新赋值未空*/
arr = [];
console.log(arr);

2. 方式二

/*方式二,直接让数组长度变成0,也是清空*/
arr.length = 0;

3. 方式三

/*方式三*/
arr.splice(0,arr.length);
console.log(arr);

这个使用的是splice用来将0-arr.length的值替换为空的方法将数组清空

• 筛选数组

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

这个有回调函数

• callback

用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：

• element

  数组中当前正在处理的元素。

• index可选

  正在处理的元素在数组中的索引。

• array可选

  调用了 filter 的数组本身。

thisArg可选

执行 callback时，用于 this的值。

案例代码

    /*筛选出数组中所有的偶数组成新数组*/
    let arr = [1,2,3,4,5,6,7,8,9,10];
    let arr2 = [];
    let index = 0;
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] % 2 == 0) {
            arr2[index] = arr[i];
            index++;
        }
    }
    console.log(arr2);

    /*
    * filter的回调函数中返回true则保留该数据到新数组中
    * */
    let arr3 = arr.filter(function (item,index,array) {
        return item % 2 === 0;
    })
    console.log(arr3);

    /*
    * 将学生数组中所有的男生取出
    * */
    function Student(name,age,sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    let stuArr = [
        new Student('张三丰',20,'男'),
    new Student('张思',22,'女'),
    new Student('王哥',34,'男'),
    new Student('刘姐',15,'女')];
    console.log(stuArr);

    let stuArr2 = stuArr.filter(function (item) {
        return item.sex === '女';
    });
    console.log(stuArr2);

    let stuArr3 = stuArr.filter(function (item) {
        return item.age <= 18;
    });
    console.log(stuArr3);