JS知识点(5)-内置函数

今日天气

晴间多云

1.构造函数和创建对象

字面量创建数组、和对象就是正常常用的创建方法，在此省略

1-1.使用构造函数创建对象、数组

// 使用构造函数创建对象
var obj2 = new Object();
obj2.name = '李四';
obj2.age = 18;
console.log('obj2',obj2);

// 通过构造函数来创建数组
var arr2 = new Array();
arr2[0] = 'x';
arr2[1] = 'y';
arr2[2] = 'z';
console.log('arr2',arr2);

实例：声明一个用来创建猫的构造函数

// 声明一个用来创建猫的构造函数
function Cat(name, color) {
    this.name = name;
    this.color = color;
}
// 创建两只猫
var cat1 = new Cat('小花','black');
var cat2 = new Cat('小黑', 'white');
console.log('cat1', cat1);
console.log('cat2', cat2);

2.日期对象常用方法和插件

2-1.创建日期的方式

new Date()
括号内参数：
(1)没有参数时，得到当前时间的日期对象
(2)参数是确定的日期时，例'2000-09-01 12:00:00'，得到指定日期的日期对象
(3)参数为0, 计算机的起始时间1970年1月1日
(4)参数是毫秒数时，得到的是据1970年1月1日过了括号内的毫秒数得到的日期

// 创建日期对象

// 方式1: 得到当前时间的日期对象
var date = new Date();
console.log('date',date);

// 方式2: 得到指定日期的日期对象
var date2 = new Date('2000-09-01 12:00:00');
console.log('date2',date2);

// 方式3: 参数为0, 计算机的起始时间1970年1月1日
var date3 = new Date(0);
console.log('date3',date3);


// 方式4: 参数是毫秒数
var date4 = new Date(1663041444916);
console.log('date4',date4);

2-2.日期对象常用方法

new Date()
getFullYear() //年
getMonth() + 1 // 月份
getDate() // 日
getHours() // 时
getMinutes() // 分
getSeconds() // 秒
getDay() // 星期
getTime() // 前面要加上new Date()，得到的是1970到现在的毫秒数
Date.now() // 前面不需要加上new Date()，直接得到的是1970到现在的毫秒数

3.Math对象的常用方法

Math.round(x) // 四舍五入
Math.abs(x) // 取绝对值
Math.floor(x) // 向下取整
Math.ceil(x) // 向上取整
Math.random() // 取随机数默认区间[0,1),包前不包后
toFixed(x) // 保留x位小数 (类型是数字)
parseInt(x) // 把小数变整数

4.字符串常用方法

length // 检测字符串的长度
trim() // 去除字符串两端的空格
split() // 转数组，括号内为选择从哪个符号开始分割

截取字符串
substring(x，y) // 截取字符串,从下标2开始到下标为y, 不包括y ，一般不适用于负数
slice(2,-1) // slice可以使用负数, -1表示最后一个，里面参数是一个单独的数字，是从截取当前下标到最后，参数是一个单独的负数时，代表截取倒数几个字符串
substr(x,y) // 截取字符串,从下标x开始,截取y位
检测字符串
charAt(2) // 找出当前下标对应的字符
indexOf() // 找出当前字符对应的下标，从左边开始，只返回第一个符合条件的下标，不包括的时候返回-1
lastIndexOf() // 找出当前字符对应的下标，从右边开始，只返回第一个符合条件的下标，不包括的时候返回-1
includes() // 检测字符串是否包含某个字符串
toLowerCase() // 转小写
toUpperCase() // 转大写
match() // 检查是否跟括号内的字符串匹配，匹配的话存入下标，只检测第一个，参数可以是正则表达式
replace('my','you') // 把my替换成you，只替换第一个符合条件的字符串，如果换成replace(/my/g,'you')，则是替换所有的my为you

5.数组常用方法

(1) join() //将数组变为字符串，参数为空时，默认用“，”拼接，里面放什么，就用什么拼接。
(2)reverse() //翻转字符串，将字符串倒序排列，和原字符串一致
(3)pop() //删除数组最后一个元素，并返回删除的元素
(4)push() //在数组最后添加一个或多个元素，并返回长度
(5)shift() //删除数组第一个元素，并返回删除的元素
(6)unshift() //在数组前面添加一个或多个元素，并返回长度
(7)isArray() //参数为函数，判断是否为数组，输出为true or false
(8)includes() // 参数为函数，判断数组的所有元素是否包含某个元素，输出为true or false
(9)every() //参数为函数，判断数组的所有元素是否符合某个条件，输出为true or false
(10)some() // 参数为函数，判断数组是否有元素符合某个条件，输出为true or false
(11)find() //参数为函数，找到符合条件的成员, 只返回第一个
(12)findIndex() //参数为函数，找到符合条件的成员的下标，并输出第一个下标
(13)indexOf() //括号内输入要查找的元素，从左开始，输出只返回第一个符合条件的字符的下标
(14)lastIndexOf() //括号内输入要查找的元素，从右开始，输出只返回第一个符合条件的字符的下标
(15)map() // 改头换面

var arr = [
  { name: "张三", age: 18 },
  { name: "李四", age: 28 },
  { name: "王五", age: 13 },
  { name: "张三", age: 48 },
  { name: "陈六", age: 48 },
];

// 给数组每一个成员添加两个属性sex和address
var newArr = arr.map(function(item,index) {
    return  {
        name: item.name,
        age: item.age,
        sex: '男',
        address: '深圳'
    }
});
console.log('newArr',newArr);


// 生成一个新的数组, 数组成员只有一个age属性
var newArr2 = arr.map(function(item) {
    return {
        age: item.age
    }
});
console.log('newArr2',newArr2);

// 生成一个新的数组, 数组成员由年龄组成
var newArr3 = arr.map(function(item) {
    return item.age;
});
console.log('newArr3',newArr3);


// 生成一个新的数组, 数组成员全部为'aa', 此时得到的新数组跟原数组没有任何关系
var newArr4 = arr.map(function(item) {
    return 'aa';
});
console.log('newArr4',newArr4);

(16)filter() // 检测数组元素，并返回符合条件所有元素的数组。

// 成员是基本数据类型
var arr = [18, 28, 13, 48, 48];
// 找出大于20的成员
var newArr = arr.filter(function(item) {
    return item > 20;
});
console.log('newArr',newArr);


// 数组成员是引用数据类型
var arr = [
  { name: "张三", age: 18 },
  { name: "李四", age: 28 },
  { name: "王五", age: 13 },
  { name: "李三", age: 48 },
  { name: "陈六", age: 48 },
];
// 找出年龄大于20的成员
var newArr = arr.filter(function(item) {
    return item.age > 20;
});
console.log('newArr',newArr);


// 找出名字带"三"的成员
var newArr2 = arr.filter(function(item) {
    // return item.name.indexOf('三') > -1 ;
    return item.name.includes('三');
});
console.log('newArr2',newArr2);

(17)forEach() // 遍历数组

<script>
    var arr = [{
            name: "张三",
            age: 18
        },
        {
            name: "李四",
            age: 28
        },
        {
            name: "王五",
            age: 13
        },
        {
            name: "张三",
            age: 48
        },
        {
            name: "陈六",
            age: 48
        },
    ];

    // for循环遍历数组, 展示在网页上(略)
   

    // forEach遍历数组, 展示在网页上
    arr.forEach(function (item, index) {
        document.write(`<p>${item.name} -- ${item.age}</p>`);
    });
</script>

(18)slice() // 选取数组的成员，并返回一个由选取的成员组成的新数组,包前不包后

var arr = [
  {name:'张三',age:18},
  {name:'李四',age:28},
  {name:'王五',age:13},
  {name:'张三',age:48},
  {name:'陈六',age:48},
];

// 截取下标为1-3的数组成员
var newArr = arr.slice(1,3);
console.log(newArr);

(19)splice() // 可以删除数组中任意位置的成员, 还可以替换成员

// splice可以删除任意位置的成员(会改变原数组)
var arr = ['a','b','c','d','e'];
// 1. 删除成员:从位置1开始, 删除1个
// 第一个参数表示删除开始的下标, 第二个参数表示删除的个数
arr.splice(1,1);
console.log(arr);

// splice可以删除任意位置的成员(会改变原数组)
var arr = ['a','b','c','d','e'];
// 1. 删除成员:从位置1开始, 删除3个
// 第一个参数表示删除开始的下标, 第二个参数表示删除的个数
arr.splice(1,3);
console.log(arr);

var arr = ['a','b','c','d','e'];
// 3. 把下标为2的成员替换成'z'
// 三个参数, 第一个参数是开始的下标, 第二参数是被替换的个数
arr.splice(2,1,'z');
console.log(arr);

(20)sort()
对数组的元素进行排序。

数组成员是字符串, 直接调用 arr.sort();
数组成员是数字, 传入函数 function(a,b) {return a-b;}
数组成员是对象时, 详情请看下面的代码

// 字符串数组排序(会改变原数组)
var arr = ['ouzhixiang','chenjingyuan','chenpeipeng','tubobin','liuxinsu'];
// 按字母升序
arr.sort();
console.log(1, arr);

// 降序排序
arr.reverse();
console.log(2, arr);

// 数字数组排序
var arr = [1,3,4,345,7,8,33];
// 升序排列
arr.sort(function(a,b) {
    return a-b;
}); 
console.log(1, arr);

// 降序排列
arr.sort(function(a,b) {
    return b-a;
}); 
console.log(2, arr);

// 对象数组排序
var arr = [
  { username: "zhangsan", nickName: "张三", age: 18 },
  { username: "lisi", nickName: "李四", age: 28 },
  { username: "wangwu", nickName: "王五", age: 13 },
  { username: "lisan", nickName: "李三", age: 48 },
  { username: "chenliu", nickName: "陈六", age: 48 },
];
// 按年龄进行升序排序
arr.sort(function (a, b) {
  if (a.age > b.age) {
    return 1;
  } else if (a.age < b.age) {
    return -1;
  } else {
    return 0;
  }
});
console.log("按年龄进行排序");
console.log(arr);

// 封装函数, 让对象数组可以按任意属性进行排序
var arr = [
  {
    username: "zhangsan",
    nickName: "张三",
    age: 18,
  },
  {
    username: "lisi",
    nickName: "李四",
    age: 28,
  },
  {
    username: "wangwu",
    nickName: "王五",
    age: 13,
  },
  {
    username: "lisan",
    nickName: "李三",
    age: 48,
  },
  {
    username: "chenliu",
    nickName: "陈六",
    age: 48,
  },
];

function compare(attr) {
  arr.sort(function (a, b) {
    if (a[attr] > b[attr]) {
      return 1;
    } else if (a[attr] < b[attr]) {
      return -1;
    } else {
      return 0;
    }
  });
} 
compare('age');
console.log("按任意属性进行排列");
console.log(arr);

(21)reduce() // 数组累加器

var arr = [1,2,3,4];
var sum = 0;
arr.forEach(item=> {
    sum += item;
})
console.log('sum',sum);

// 使用reduce进行累加
// 第一个参数是个函数, 回调函数接收两个形参(第一个形参是上一次累加的结果, 第二个参是当前成员)
// 第二个参数是累加的初始值
// sum上一次累加结果, item是当前成员
var result = arr.reduce(function(sum, item) { 
    return sum + item;
},0);
console.log('result', result);

// 数组成员是对象
var arr = [
    { username: "zhangsan", nickName: "张三", age: 18 },
    { username: "lisi", nickName: "李四", age: 28 },
    { username: "wangwu", nickName: "王五", age: 13 },
    { username: "lisan", nickName: "李三", age: 48 },
    { username: "chenliu", nickName: "陈六", age: 48 },
  ];
  // 算出年龄的总和以及平均年龄
  var result2 = arr.reduce(function(sum, item) {
      return sum + item.age;
  }, 0);
  console.log('result2',result2);
  console.log('平均年龄', Math.round(result2/arr.length));