构造函数&数据常用函数
这篇总结主要讲解了构造函数&数据常用函数，讲解了对象与数组的多种方法
1.创建对象三种方式
字面量创建对象：let 对象名 = { }
利用new object 创建对象
let 对象名 = new Object();
对象名.uname = 'pink'
对象名.sayHi = function(){输出对象} 利用构造函数创建对象
function 构造函数名（属性值1,属性值2） {
this.属性1 = 值；
this.属性2 = 值；
this.方法 = function() {}
}
const a = new 构造函数名（属性值1,属性值2）;
const b = new 构造函数名（属性值1,属性值2）;
const c = new 构造函数名（属性值1.属性值2）;
//这里的this指向a，b，cfunction Goods(name,price,count) {
this.name= name;
this.price= price;
this.count= count
}
const xm = new Goods('小米',1999,20)
const hw = new Goods('华为',3999,59)
const vivo = new Goods('vivo',1888,100)
console.log(xm);
console.log(hw);
console.log(vivo);2.构造函数
是什么？是一种特殊的函数，主要用来初始化对象，可以快速创建多个类似的对象
返回值是新创造的对象
new关键字调用函数的行为称为实例化
规范：
1.命名首字母大写
2.只能用new操作符来执行实例化执行过程:
你先写了一个函数，但是这个函数没有被调用,你在下方写了一个 let a = new obj()，然而此时会调用此函数，但是调用此函数之前，这个‘new’ 会先一步为obj()创建了一个新对象，之后才会调用函数，由于创建了一个新对象，this指向就会指向于obj这个新对象，然后就开始执行这个函数的代码，new obj(实参1，实参2)传入这个构造函数中，function(形参1，形参2) {this.name=name},传入后，进行赋值，最终返回一个新对象
原型链：
/*为什么要用原型链？
一切的起源是因为你创建了一个普通函数，此时普通函数中的this指向是window，
同时拥有多个属性与方法，同时你又想要使用这些属性与方法，于是你通过new关
键字创建了一个实例对象，此时的this指向则不是指向window，而是指向这个实例
对象，然而函数中的方法是引用数据类型，每次声明的实例对象里面的方法都会在
堆空间重新开辟了一个新的空间，因此你创建n个实例对象，就开辟了n个堆空间，
这就容易造成内存浪费。
此时你又不想每创建一个实例对象，就开辟一个新的方法的堆空间，你就寻思着
让所有实例对象里面的方法地址指向同一个方法的地址，于是，你将构造函数里的
方法在外面封装成一个函数，同时将这个函数赋值给构造函数里面的方法，由于
函数是值数据类型，赋值的是地址，即让所有的实例对象里面的方法都指向这一
个地址，因此就只会在创建函数(这个函数就是实例对象的方法)时，创建一个堆
内存，并且将地址给到以后每个使用这个方法的实例对象，在此，又出现了一个
新的问题，如果你实例对象里面有n个方法呢？你再去外面封装n个函数，那么就
容易出现全局变量名的污染
此时你又不想造成变量污染，那怎么办呢？此时你就可以利用面向对象中的封装性，
将这n个方法封装在一个对象里面，此时暴露在全局的变量就只会是一个对象名，
因此，就避免了变量污染*/3.实例成员&静态成员
实例成员
构造函数创造的对象称为实例对象实例对象的属性和方法就称为实例成员(实例属性和实例方法)
说明：1.两个实例化对象给构造函数传入参数，创建的结构相同，但是不是同一个对象2.构造函数创建的实例对象彼此独立，互不影响3.this指向实例化对象
静态成员
构造函数的属性和方法称为静态成员（静态属性和静态方法）this指向构造函数
内置构造函数
1.引用类型
Object
静态方法1.获取对象的键值对
1.Object.keys(对象) 获得所有的键
2.Object.values(对象) 获得所有的值
3.返回的是一个数组2.拷贝对象Object.assign(拷贝对象给谁,被拷贝的对象)
const o = {name:'pink',age:6}
const obj = {}
Object.assign(obj,o)3.给实例化对象新增属性Object.assign(给哪个对象添加,{实例属性：值})
const o = {name:'pink',age:6}
Object.assign(o,{sex:'女'})Array
实例方法（实例化对象只能用实例化方法）
1.forEach（一般用于全选框）
筛选数组,将满足条件的元素放入新数组中，返回筛选之后的新数组,如果没有符合条件的元素则返回空数组
注意：
1.除了抛出异常以外，没有办法中止或跳出 循环
2.无法 break ，可以用 try/catch 中 throw new Error 来停止
3.Error对象：js的内置对象,表示错误的对象const arr = [45, 60, 88, 90, 20]
try{
arr.forEach((item,index)=>{
if(item === 60) {
throw index
}
})
}catch(error) {
console.log(error)
}语法：forEach(function(item,index,arr) { })
场景：
1.改变数组的某个属性，例如一点击全选，单选框为true
2.给对象数组添加或删除某个属性，例如新增假期属性，工资奖励属性，删除假期属性
let arr = [
{name:'a',age:16,sex:'男',select:false},
{name:'b',age:16,sex:'男',select:false},
{name:'c',age:16,sex:'男',select:false},
{name:'d',age:18,sex:'男',select:false},
]
//修改
arr.forEach(item=>item.select = true)
//添加
arr.forEach(item=>item.price = 100)
//删除
arr.forEach(item=>delete item.age)
console.log(arr)2.map迭代数组，返回新数组
创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。语法：map(function(item,index,arr) { })
实际应用场景：映射数组（需要使用新数组）
通过map方法渲染，需要和join(‘’)配合使用
示例：
必须使用新数组时
应用：有一个对象数组里面是商品信息。如果原价就不变，如果vip用户则88折
forEach和map最大的区别
foreach只会修改原来的数组，不会产生新的堆地址
map需要得到一个新的堆地址
let arr = [
{name:'食品',price:188},
{name:'手机',price:2888},
{name:'家具',price:588},
{name:'玩具',price:99},
]
let arr1 = JSON.parse(JSON.stringify(arr))
let arr2 = arr1.map(item=>item.price*=0.88)
//map方法
// let arr1 = arr.map(item=>{
// return {
// name:item.name,
// price:item.price*0.88
// }
// })
console.log(arr,arr2)3.filter过滤数组，返回新数组
创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。
返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组
语法：filter(function(item,index,arr) { })注意点:
(1)filter()方法不会对空数组进行检测
(2)filter()方法不会改变原始数组4.every（小选框）
语法：every(function(item,index,arr) { })若收到一个空数组，此方法在任何情况下都会返回 true，有一项返回 false ，则整体为 false
示例：
function isBigEnough(element, index, array) {
return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true5.some（非空判断）
语法：some(function(item,index,arr) { })有一项返回 true ，则整体为 true
示例：
const array = [1, 2, 3, 4, 5];
// Checks whether an element is even
const even = (element) => element % 2 === 0;
console.log(array.some(even));
6.find
返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
语法：find(function(item,index,arr) { })
示例：
用对象的属性查找数组里的对象
const inventory = [
{name: 'apples', quantity: 2},
{name: 'bananas', quantity: 0},
{name: 'cherries', quantity: 5}
];
function isCherries(fruit) {
return fruit.name === 'cherries';
}
console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }
使用箭头函数和解构赋值
const inventory = [
{name: 'apples', quantity: 2},
{name: 'bananas', quantity: 0},
{name: 'cherries', quantity: 5}
];
const result = inventory.find(({ name }) => name === 'cherries');
console.log(result) // { name: 'cherries', quantity: 5 }7.findIndexfindIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。语法：findIndex(function(item,index,arr) { })
示例：
const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber));
// Expected output: 3
// 箭头函数
findIndex((element) => { /* … */ } )
findIndex((element, index) => { /* … */ } )
findIndex((element, index, array) => { /* … */ } )
// 回调函数
findIndex(callbackFn)
findIndex(callbackFn, thisArg)
// 内联回调函数
findIndex(function(element) { /* … */ })
findIndex(function(element, index) { /* … */ })
findIndex(function(element, index, array){ /* … */ })
findIndex(function(element, index, array) { /* … */ }, thisArg)
callback
针对数组中的每个元素，都会执行该回调函数，执行时会自动传入下面三个参数：
element
当前元素。
index
当前元素的索引。
array
调用findIndex的数组。
thisArg
可选。执行callback时作为this对象的值。8.reduce累计器
经常用于求和
语法：arr.reduce(function(sum,item,index){},初始值始值)
没写初始值的话，就只算数组的和
写了初始值，算完数组还得加上初始值
let arr = [
{name:'食品',price:188,select:true},
{name:'手机',price:2888,select:false},
{name:'家具',price:588,select:true},
{name:'玩具',price:99,select:true}
]
console.log(arr.reduce((sum,item)=>item.select?sum+item.price:sum,0))9.join
将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。用于把数组中的所有元素转换为一个字符串 语法：数组.join('间隔字符')a.实现字符串的翻转
const str = '加油，奥里给!'
let a = str.split('').reverse().join('')
console.log(a)示例：
const a = ['Wind', 'Water', 'Fire'];
a.join(); // 'Wind,Water,Fire'
a.join(', '); // 'Wind, Water, Fire'
a.join(' + '); // 'Wind + Water + Fire'
a.join(''); // 'WindWaterFire'10.concat
用于合并两个或多个数组，返回一个新数组,不会改变原数组
语法：arr1.concat(arr2,arr3)
示例：
连接2个数组
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// Expected output: Array ["a", "b", "c", "d", "e", "f"]
连接3个数组
以下代码将三个数组合并为一个新数组：
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];
const numbers = num1.concat(num2, num3);
console.log(numbers);
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]
将值连接到数组
const letters = ['a', 'b', 'c'];
const alphaNumeric = letters.concat(1, [2, 3]);
console.log(alphaNumeric);
// results in ['a', 'b', 'c', 1, 2, 3]11.slice
截取slice（begin,end） 返回截取的新数组
截取以begin开头，但取不到end
返回一个新的数组，不改变原数组
示例：
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]
12.sort
对数组元素排序 数组名.sort();
解决sort()不能对多个两位数与个位数排序问题
arr.sort(function(a,b)) {
return a - b; //升序顺序排列 反之 b-a 则是降序的顺序排列
}对象数组排序，形参a,b,都会拿到数组元素的每项数据，会改变原数组
示例：
// arr.sort() 对数组进行排序（会改变原数组）
const arr = [80, 90, 50, 20, 77, 88]
arr.sort(function(a,b) {
return a - b
})
console.log(arr)
对象数组排序
const arr1 = [
{name:1,price:2355},
{name:3,price:5355},
{name:5,price:6154},
{name:2,price:2755},
{name:4,price:6355},
]
arr1.sort((a,b)=>b.price - a.price)
console.log(arr1)
出生排序
const arr2 = [
{name:1,data:'2000-12-08'},
{name:3,data:'2003-11-08'},
{name:5,data:'1998-10-08'}
]
arr2.sort((a,b)=>+new Date(a.data) - +new Date(b.data))
console.log(arr2)13.reverse
颠倒数组元素 无参数 数组名.reverse();
返回值：颠倒后的数组
改变原数组如果你希望reverse不改变原数组，请使用toReversed()方法
14.splice
删除或替换，会改变原数组
返回的是被删除/修改的值语法：splice（第几个开始，要删除的个数，修改的值）
如果要删除的个数是 0 或者负数，则不移除元素，这种情况下，至少应添加一个新元素。
15.数组.flat(深度) 进行数组降维
复杂的嵌套数组（三维数组）
let arr = [1, 2, [3, 4, [5, 6]]]
console.log(arr.flat(1))//[1, 2, 3, 4, [5, 6]]
console.log(arr.flat(2)) //[1, 2, 3, 4, 5, 6]
console.log(arr[2][2][0])没有返回值，修改数组本身
16.toString()
返回一个字符串，表示指定的数组及其元素
示例：
const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString());
// Expected output: "1,2,a,1a"17.Array.isArray()
用于确定传递的值是否是一个 Array语法：Array.isArray(数组) 返回值是布尔值
18.indexOf(要查找的元素，从哪里开始)
返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回 -1
示例：
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// Expected output: 1
// Start from index 2
console.log(beasts.indexOf('bison', 2));
// Expected output: 4
console.log(beasts.indexOf('giraffe'));
// Expected output: -1静态方法
let 真数组 = Array.from(伪数组)
伪数组转换为真数组，伪数组的本质是对象
2.包装类型
String
1.字符串恒定性
(1)字符串类似于数组，也有长度和下标
(2)字符串不可以被直接修改
(3)字符串所有的方法都不会修改字符串本身，而是得到新的字符串2.length获取字符串长度
字符串.split('分隔符')
用分隔符切割字符串，得到切割之后的数组语法：字符串名.split()
主要用于切割网址，得到参数对象
示例
let url = 'http://www.baidu.com?name=张三&age=20'
console.log(url.split()) // ['http://www.baidu.com?name=张三&age=20']
console.log(url.split('?'))//["http://www.baidu.com","name=张三&age=20"]
console.log(url.split('&'))//["http://www.baidu.com","name=张三","age=20"]3.字符串.substring(截取第一个字符串的索引号,结束的索引号)
用于字符串截取4.start位置开始，end结束，但是end取不到，与slice基本相同，但不接受负值
应用场景：截取部分字符串，进行替换
let phone = '13512345678'
let a = phone.replace(phone.substring(3,7),'')
console.log(a)5.startsWith(检测的字符串[,检测的位置索引号])
检测是否以某字符串开头，返回true和false
示例：
const str = '传智播客传递知识'
// 1. startsWith(检测字符，[检测位置])
// 检测是否以某个字符开头，返回布尔值
console.log(str.startsWith('传')) // true
console.log(str.startsWith('智')) // false
console.log(str.startsWith('传', 1)) // false
console.log(str.startsWith('传', 4)) // true6.includes(搜索的字符串[,检测位置索引号])判断一个字符串是否包含在另一个字符串中
返回值true和false
搜索的字符串严格区分大小写
示例：
const str1 = "To be, or not to be, that is the question."
// 3. includes(搜索的字符，[检测位置])
// 判断一个字符串是否 包含 在另外一个字符串中，返回布尔值
console.log(str1.includes('to be')) // true
console.log(str1.includes('to be or')) // false
console.log(str1.includes('To be')) // true
console.log(str1.includes('To be', 1)) // false7.字符串.indexOf('查找字符串')
检测查找字符串在字符串中的首字母下标
返回在字符串中可以找到给定元素的第一个索引，如果不存在，则返回 -1
查找字符串不仅仅可以写一个字的字符串，还可以去查找多个字的字符串
8.字符串.trim() 去字符串首尾空格
Number
toFixed(保留几位)
设置保留小数位的长度
