JS中常用类型Object，Array，String，Number，Date的方法及属性
整理出适合刚入前端的我们，搭建项目中JS中常用Object，Array，String，Number，Date这些对象方法和属性，适合处理接口数据，业务逻辑，以及交互。这些基本上都是我们常用的以及相关方法属性。所以应当全部记住，如果记不住一定要记住有这些方法可以使用，尽量查百度也能解决你遇到的问题。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference【javascript 参考网站】
Object 方法属性
1. 创建对象
// 1. 直接创建
const name = { value: 'join', age: 18 } // 相当于 new Object({ value: 'join', age: 18 }) 前面的相当于简写
// 2. Object.create() 方法用于创建一个新对象，使用现有的对象来作为新创建对象的原型（prototype）。
const nameNew = Object.create(name);
// 等同于 const nameNew = { ...name }; es 解构赋值
// 如果 const nameNew = name; 属于浅复制，他们都指向同一个对象，即一个更改另一个也会更改
nameNew.value = 'tom';
console.log(nameNew) // Object { value: "tom", age: 18 }
// 3. Object.assign() 属性从一个或多个源对象复制到目标对象，返回修改后的对象。
// 这个属性不要轻易用，因为他不仅创建一个新对象，还会跟源对象绑定，即修改新对象源对象会改变
const retrunName = Object.assign(name, nameNew);
console.log(retrunName); // Object { value: "tom", age: 18 }
retrunName.age = 20;
console.log(retrunName === name); // expected output: true
console.log(retrunName, name); // Object { value: "tom", age: 20 } Object { value: "tom", age: 20 }
2. 向对象中添加属性
// 1. 直接修改
name.color = 'red'; // 等同于 name['color'] = 'red';
name['say'] = 'hello';
console.log(name) // // { value: "tom", age: 20, color: "red", say: 'hello'}
// 【不常用】2. Object.defineProperties() 方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。
// @value：属性值 @writable：是否可写
Object.defineProperties(name, { vehicle: { value: 'car', writable: false }, vehicle2: { value: 'motorcycle' } })
console.log(name) // {value: "tom", age: 20, color: "red", vehicle: "car", vehicle2: "motorcycle"}
// 【不常用】3. Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
Object.defineProperty(name, 'residence', {
value: 1,
writable: false
});
console.log(name) // {value: "tom", age: 20, color: "red", residence: 1}
3. 删除对象中的属性和方法
// 使用 delete 运算符可以删除对象的属性。
/*
- delete操作符移除对象指定属性，删除成功返回true，否则返回false。
- 删除的属性不存在，delete不会起任何作用，但是仍会返回true。
- 如果原型链有同名属性，只会删除自身的属性。
- delete不能删除全局作用域函数以及作用域中用let或const声明的属性。
- delete可以删除对象的函数。
- 不可设置属性不能被删除。比如Math、Array、Object内置对象属性以及使用
Object.defineProperty()、Object.defineProperties()方法设置的属性。
*/
delete name.age
delete name.residence
console.log(name) // {value: "tom", color: "red", vehicle: "car", vehicle2: "motorcycle", residence: 1}
4. 获取对象指定属性值是否存在
// 1. 直接获取
console.log(name.age) // 等同于 console.log(name['age']) 都会返回 undefined
/* 2. Object.hasOwn() / Object.hasOwnProperty
如果指定的对象自身有指定的属性，则静态方法返回 true。如果属性是继承的或者不存在，该方法返回 false。
语法：hasOwn(instance, prop) 暂时老版本要用 hasOwnProperty，新版规范使用 hasOwn
@instance 要测试的 JavaScript 实例对象。
@prop 要测试属性的 String 类型的名称或者 Symbol。
*/
console.log(Object.hasOwnProperty(name, 'age')) // false
// 3. in 运算符检查对象是否具有给定名称的属性：
console.log('name' in name, 'color' in name) // false true
5. 判断两个变量是否是一个对象
// Object.is() 方法判断两个值是否为同一个值。【并不常用】
const foor = {name: 1}
const foor2 = {name: 1}
const foor3 = foor;
console.log(Object.is(foor,foor2)) // false
console.log(Object.is(foor,foor3)) // true
6. 遍历对象的方法
1. Object.keys() 是ES5新增的一个对象方法，该方法返回对象自身属性名组成的数组，
他会自动过滤掉原型链上的属性，然后可以通过数组的forEach()方法来遍历，等同于 Object.getOwnPropertyNames()。
2. for in 会将对象的属性和原型上的属性一块遍历出来，顺序是先对象属性然后是原型链上的属性
/* 1. Object.keys() 、Object.getOwnPropertyNames() 是ES5新增的一个对象方法，该方法返回对象自身属性名组成的数组，
他会自动过滤掉原型链上的属性，然后可以通过数组的forEach()方法来遍历。
语法：Object.keys(obj)、 Object.getOwnPropertyNames(obj)
@obj： 要返回其枚举自身属性的对象。
*/
const object1 = {
a: 'somestring',
b: 42,
c: false
};
Object.keys(object1).forEach((key) => {
console.log(object1[key])
})
// somestring
// 42
// false
// 创建一个对象并指定其原型，bar 为原型上的属性
// baz 为对象自身的属性并且不可枚举
const obj = Object.create({
bar: 'bar'
}, {
baz: {
value: 'baz',
enumerable: false
}
})
obj.foo = 'foo'
// 不包括不可枚举的 baz 属性
Object.keys(obj).forEach((key) => {
console.log(obj[key]) // foo
})
// 包括不可枚举的 baz 属性
Object.getOwnPropertyNames(obj).forEach((key) => {
console.log(obj[key]) // baz, foo
})
// 2. for in会将对象的属性和原型上的属性一块遍历出来,顺序是先对象属性然后是原型链上的属性
// name 和 age 是属于对象的属性
const person = Object.create({
// sex 和 height 是原型链上的属性
sex:'male',
height:168
});
//name和age是属于对象的属性
person.name = 'sunny';
person.age = 28;
// sex和 height 出现在了原型链上而不是对象属性中
console.log(person);
// for in会将对象的属性和原型上的属性一块遍历出来, 顺序是先对象属性然后是原型链上的属性
for(let key in person){
console.log(person[key]);//sunny 28 male 168
}
// 如果需要过滤掉原型链上的属性，可以使用 hasOwnProperty() 方法
for(let key in person){
if (person.hasOwnProperty(key)) {
console.log(person[key]) //sunny 28
}
}
Array 方法属性
属性
- length 是 Array 的实例属性。返回或设置一个数组中的元素个数。该值是一个无符号 32-bit 整数，并且总是大于数组最高项的下标。
// length 是 Array 的实例属性。返回或设置一个数组中的元素个数。该值是一个无符号 32-bit 整数，并且总是大于数组最高项的下标。
const sentence = '这是一个像盒子盒子的屋子';
console.log(sentence.length) // 12
1. 创建数组
// 1. 创建数组
const name = ['join', 'tom', 'tonay'] // 相当于 new Array(['join', 'tom', 'tonay']) 前面的相当于简写
// 2. 使用es6 结构 / Array.of() 方法通过可变数量的参数创建一个新的 Array 实例，而不考虑参数的数量或类型。
const name2 = [...name, 'momo'] // 等同于 Array.of(...name, 'momo)
// 重点：创建新数组的时候一定不能直接用变量名直接给需要用这里的方法实现，例如：
const name3 = name;
// 这样name3 与 name 是一个数组，又叫做浅拷贝，实际上堆栈中的对象是同一个，即修改其中一个值另外一个值也会改变
name.push('momo');
console.log(name, name3) // ["join", "tom", "tonay", "momo"] , ["join", "tom", "tonay", "momo"]
/* 3. 【不常用】Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
查看更多 Array.from() 用法
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
*/
console.log(Array.from('foo')); // Array ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x)); // Array [2, 4, 6]
2. 操作数组的方法
- join() 方法将一个数组的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。
- pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。
- push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
- shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
- unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。
- slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
- splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。
- sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的
- reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。
// 1. join(separator) @separator 指定一个字符串来分隔数组的每个元素。
// join() 方法将一个数组的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。
// 如果数组只有一个元素，那么将返回该元素而不使用分隔符。
const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join()); // "Fire,Air,Water"
console.log(elements.join('')); // "FireAirWater"
console.log(elements.join('-')); // "Fire-Air-Water"
// 2. pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。
elements.pop() // ['Fire', 'Air']
// 3. push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
// 语法：push(element0, element1, /* … ,*/ elementN)
elements.push('app', 'pc');
console.log(elements) // ["Fire", "Air", "app", "pc"]
// 4. shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
elements.shift();
console.log(elements) // ["Air", "app", "pc"]
// 5. unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。
// 语法：unshift(element0, element1, /* … ,*/ elementN)
elements.unshift('car', 'color');
console.log(elements) // ["car", "color" , "Air", "app", "pc"]
// 6. slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。
// 原始数组不会被改变。slice(begin, end) 索引值都是从0 开始
const arrSlice = elements.slice(0,1);
console.log(arrSlice) // ["car"]
// 7. splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。
// 语法：splice(start, deleteCount, item1, item2, itemN)
elements.splice(2, 2, 'car', 'color'); // 从第三个索引开始，删除后面两个，加入两个新元素，改变原数组。
console.log(elements) // ["car", "color", "car", "color", "pc"]
/* 8. sort() 排序的简单用法
语法：sort(compareFn(a,b)) a 第一个比较元素 ， b 第二个比较元素
这里排序是比较两个值差值 与 0 比较
> 0 a 在 b 后
< 0 a 在 b 前
=== 0 保持 a 和 b 的顺序
另外sort 可以排序汉字，利用汉字编码顺序，有兴趣可以百度搜一下汉字排序方式
*/
// 更多用法：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1); // [1, 100000, 21, 30, 4]
array1.sort((a, b) => a - b); // 从小到大排序 如果 b - a 就是从大到小
console.log(array1); // [1, 4, 21, 30, 100000]
array1.sort((a, b) => b - a); // 如果 b - a 就是从大到小
console.log(array1); // [100000, 30, 21, 4, 1]
// 9. reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，
// 数组的最后一个元素变成第一个。该方法会改变原数组。
const array1 = ['one', 'two', 'three'];
console.log('array1:', array1); // "array1:" Array ["one", "two", "three"]
const reversed = array1.reverse();
console.log('reversed:', reversed); // "reversed:" Array ["three", "two", "one"]
console.log('array1:', array1); // "array1:" Array ["three", "two", "one"]
3. 验证判断数组的方法
- includes() 方法用来判断一个数组是否包含一个指定的值
- Array.isArray() 用于确定传递的值是否是一个 Array。
- some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。
- every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
// 1. includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。
// 语法：includes(searchElement【需要查找的元素值】, fromIndex【索引处开始】) 。
const a = {val:'1'}
const array1 = [a, 1, 2, 3];
console.log(array1.includes(a));
// expected output: true
// 2. Array.isArray() 用于确定传递的值是否是一个 Array。
Array.isArray([1, 2, 3]); // true
Array.isArray({foo: 123}); // false
// 3. some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。
// 语法：some(callback【(element, index, array) => { /* … */ }】) 返回 布尔值
const array = [1, 2, 3, 4, 5];
const even = (element) => {
console.log(element % 2)
return element % 2 === 0
};
// 等同于 const even = (element) => element % 2 === 0; 上面为了查看除余条件一旦有满足的立即就会返回结果
console.log(array.some(even)); // true
// 4. every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
// 若收到一个空数组，此方法在任何情况下都会返回 true。
// 这个方法一般跟some() 用处差不多 some查询不满足的条件只要不满足就会返回true，
// every 是测试所有的是否都满足，我个人理解应该是一个意思，
// 语法：every((element, index, array) => { /* … */ } )
4. 查询数组及索引值
- indexOf() 方法返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回 -1。
- find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
- findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。
- findLast() 方法返回数组中满足提供的测试函数条件的最后一个元素的值。如果没有找到对应元素，则返回 undefined。
- findLastIndex() 方法返回数组中满足提供的测试函数条件的最后一个元素的索引。若没有找到对应元素，则返回 -1。
- filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。
// 1. indexOf() 方法返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回 -1。
// 语法：indexOf(searchElement, fromIndex)
// searchElement【查询目标】| fromIndex【默认 0，索引 -1：倒数第一个开始，-2： 倒数第二个开始】
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison')); // 1
console.log(beasts.indexOf('giraffe')); // -1
// 2. find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
// 语法：find((element, index, array) => { /* … */ } )
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// 3. findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。
// 语法：findIndex((element, index, array) => { /* … */ } )
const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber)); // 3
// 4. findLast() 方法返回数组中满足提供的测试函数条件的最后一个元素的值。如果没有找到对应元素，则返回 undefined。
// 5. findLastIndex() 方法返回数组中满足提供的测试函数条件的最后一个元素的索引。若没有找到对应元素，则返回 -1。
// 像 4 和 5 都是跟 2 和 3 是反向来的用法也是一样的，所以不过多介绍
// 6. filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。
// 语法：filter((element, index, array) => { /* … */ } )
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
result[0] = 'abc'
console.log(result); // ["abc", "destruction", "present"]
console.log(words) // ["spray", "limit", "elite", "exuberant", "destruction", "present"]
// 虽说是浅拷贝但是修改 filter过滤后的数组并不会影响新数组的值
5. 遍历数组
- forEach() 方法对数组的每个元素执行一次给定的函数。
- map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
- reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
- reduceRight() 方法接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。
// 1. forEach() 方法对数组的每个元素执行一次给定的函数。
// 语法：forEach((element, index, array) => { /* … */ })
// 2. map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
// 语法：map(function(element, index) { /* … */ })。
const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);
console.log(map1); // Array [2, 8, 18, 32]
// 3. reduce() 语法 reduce((previousValue, currentValue, currentIndex, array) => { /* … */ }, initialValue)
// callback - previousValue 初始值是 initialValue
// callback - currentValue 遍历数组的第一个值
// callback - currentIndex 遍历数组的第一个值的索引
// callback - array 遍历的数组
// initialValue【可选】 初始值
const initialValue = 0;
const sumWithInitial = array1.reduce(
(accumulator, currentValue) => accumulator + currentValue,
initialValue
);
console.log(sumWithInitial);
// reduce() 可以常用毕竟他返回新数组，减少对数组操作的代码，callback 参数顺序是上面的，变量名可以自定义修改
// 下面的例子如果你发现 arr 中含有 Air 就将本身的去掉，把Air加入到 arrNew 中
const arr = ["Fire", "Air", "app", "pc"];
const arrNew = arr.reduce((pVal, cVal, index) => {
if(cVal=== 'Air'){
arr.splice(index,1)
pVal.push(cVal)
}
return all
}, [])
console.log(arr, arrNew) // ["Fire", "app", "pc"] , ["Air"]
// 4. reduceRight() 这个不太常用需要的看的去这里
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight
String 方法属性
属性
- length 字符串的 length 只读属性包含字符串的长度（以 UTF-16 代码单元表示）。
// 字符串的 length 只读属性包含字符串的长度（以 UTF-16 代码单元表示）。
const sentence = '这是一个像盒子盒子的屋子';
console.log(sentence.length) // 12
1. 创建字符串
const string1 = "A string primitive";
const string2 = "Also a string primitive";
const string3 = `Yet another string primitive`; // `abc ${name} cba` 字符串模板 使用${} 中可以插入表达式返回值必须是字符串
const string4 = new String("A String object");
2. 操作字符串的方法
- repeat() 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本。
- replace() 方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串，则仅替换第一个匹配项。
- replaceAll() 方法返回一个新字符串，新字符串所有满足 pattern 的部分都已被replacement 替换。pattern可以是一个字符串或一个 RegExp， replacement可以是一个字符串或一个在每次匹配被调用的函数。
- slice() 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。
- split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。
- substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集，或从开始索引直到字符串的末尾的一个子集。
- trim() 方法从字符串的两端清除空格，返回一个新的字符串，而不修改原始字符串。此上下文中的空格是指所有的空白字符（空格、tab、不换行空格等）以及所有行终止符字符（如 LF、CR 等）。
// 1. repeat() 构造并返回一个新字符串，该字符串包含被连接在一起的指定数量的字符串的副本。
// 语法: str.repeat(count) count 只接受正整数
const s = '屋子'
console.log(s.repeat(2)) // 屋子屋子
// 2. replace() 方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。
// 模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。
// 如果pattern是字符串，则仅替换第一个匹配项。
const sentence = '这是一个像盒子盒子的屋子';
console.log(sentence.replace('盒子', '苹果')); // 这是一个像苹果盒子的屋子
const regex = /盒子/i;
console.log(sentence.replace(regex, '苹果')); // 这是一个像苹果盒子的屋子
// 3. replaceAll() 方法返回一个新字符串，新字符串所有满足 pattern 的部分都已被replacement 替换。
// pattern可以是一个字符串或一个 RegExp， replacement可以是一个字符串或一个在每次匹配被调用的函数。
console.log(sentence.replaceAll('盒子', '苹果')); // 这是一个像苹果苹果的屋子
const regex2 = /盒子/ig;
console.log(sentence.replaceAll(regex2, 'ferret')); // 这是一个像ferretferret的屋子
// 4. slice() 方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。
// 语法：str.slice(beginIndex[, endIndex]) [, endIndex] 这种类型就是可选的意思
const str = 'The quick brown fox jumps over the lazy dog.';
console.log(str.slice(31)); // "the lazy dog."
console.log(str.slice(4, 19)); // "quick brown fox"
console.log(str.slice(-4)); // "dog."
console.log(str.slice(-9, -5)); // "lazy"
// 5. split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。
// 语法：str.split([separator[, limit]])
const str = 'The quick brown fox jumps over the lazy dog.';
const words = str.split(' '); // 以空格为分割单位将上述单词变为数组
console.log(words[3]); // "fox"
const chars = str.split(''); // 将字符串的所有字符字母空格都装进数组
console.log(chars[3]); // " "
console.log(chars[8]); // "k"
const strCopy = str.split(); //啥也不给 就是字符串变成一个数组
console.log(strCopy);// ["The quick brown fox jumps over the lazy dog."]
// 6. substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集，或从开始索引直到字符串的末尾的一个子集。
// 语法：str.substring(indexStart[, indexEnd]) 这个方法和 slice 相似也不会改变原字符串
const sentence = '这是一个像盒子盒子的屋子';
console.log(sentence.substring(2), sentence) // 一个像盒子盒子的屋子，这是一个像盒子盒子的屋子
// 7. trim() 方法从字符串的两端清除空格，返回一个新的字符串，而不修改原始字符串。
// 此上下文中的空格是指所有的空白字符（空格、tab、不换行空格等）以及所有行终止符字符（如 LF、CR 等）。
const greeting = ' Hello world! ';
console.log(greeting); // " Hello world! "
console.log(greeting.trim()); // "Hello world!"
// trimEnd() 方法会删除字符串末尾的空白字符。trimRight() 是这个方法的别名。
// trimStart() 方法会删除字符串开头的空白字符。trimLeft() 是此方法的别名。
3 字符串的查询、验证、索引值方法
- includes() 方法执行区分大小写的搜索，以确定是否可以在另一个字符串中找到一个字符串，并根据情况返回 true 或 false。
- indexOf() 方法，给定一个参数：要搜索的子字符串，搜索整个调用字符串，并返回指定子字符串第一次出现的索引。给定第二个参数：一个数字，该方法将返回指定子字符串在大于或等于指定数字的索引处的第一次出现。
- match() 方法检索返回一个字符串匹配正则表达式的结果。
- search() 方法执行正则表达式和 String 对象之间的一个搜索匹配。
// 1. includes() 方法执行区分大小写的搜索，以确定是否可以在另一个字符串中找到一个字符串，并根据情况返回 true 或 false。
// 语法：includes(searchString, position【开始查询位置，默认0】)
const sentence = '这是一个像盒子的屋子';
const word = '盒子';
console.log(`上面句子中${sentence.includes(word) ? '有' : '没有'}出现过"${word}"`);
// 上面句子中有出现过"盒子"
// 2. indexOf() 方法，给定一个参数：要搜索的子字符串，搜索整个调用字符串，并返回指定子字符串第一次出现的索引。
// 给定第二个参数：一个数字，该方法将返回指定子字符串在大于或等于指定数字的索引处的第一次出现。
// 语法：indexOf(searchString, position)
const searchTerm = '盒子';
const indexOfFirst = sentence.indexOf(searchTerm);
console.log(`"${searchTerm}" 出现的位置是 ${indexOfFirst}`);
// "盒子" 出现的位置是 5
// 3. match() 方法检索返回一个字符串匹配正则表达式的结果。
// 语法：str.match(regexp)
const paragraph = 'The quick brown fox jumps over the lazy dog. It barked.';
const regex = /[A-Z]/g;
const found = paragraph.match(regex);
console.log(found); // ["T", "I"]
// 4. search() 方法执行正则表达式和 String 对象之间的一个搜索匹配。
// 语法：str.search(regexp)
const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';
const regex = /[^\w\s]/g;
console.log(paragraph.search(regex)); // 43
console.log(paragraph.search('fox')); // 16
console.log(paragraph[paragraph.search(regex)]); "."
Number 方法属性
1. 操作数字
- parseFloat() 函数解析一个参数（必要时先转换为字符串）并返回一个浮点数。
- toFixed() 方法使用定点表示法来格式化一个数值。
- parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数，radix 是 2-36 之间的整数，表示被解析字符串的基数。
// 1. parseFloat() 函数解析一个参数（必要时先转换为字符串）并返回一个浮点数。
// 当解析的字符串不是数字或者小数点时终止解析，返回终止钱的数字
// Number.parseFloat() 与上面一样用法
function circumference(r) {
return parseFloat(r) * 2.0;
}
console.log(circumference(4.567)); // 9.134
console.log(circumference('4.567abcdefgh')); // 9.134
console.log(circumference('abcdefgh')); // NaN
// 2. toFixed() 方法使用定点表示法来格式化一个数值。
function financial(x) {
return Number.parseFloat(x).toFixed(2);
}
console.log(financial(123.456)); // "123.46"
console.log(financial(0.004)); // "0.00"
console.log(financial('1.23e+5')); // "123000.00"
// 3. parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数，radix 是 2-36 之间的整数，表示被解析字符串的基数。
console.log(parseInt('321.123asdf321')); // 321
2. Math 处理 Numer 【Math 更多内容点这里】
Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。
- Math.ceil() 函数总是四舍五入并返回大于等于给定数字的最小整数。
- Math.floor() 函数总是返回小于等于一个给定数字的最大整数。
- Math.max() 函数返回作为输入参数的最大数字，如果没有参数，则返回 -Infinity。
- Math.min() 函数返回作为输入参数的数字中最小的一个，如果没有参数，则返回 Infinity。
- Math.random() 函数返回一个浮点数，伪随机数在范围从0 到小于1，也就是说，从 0（包括 0）往上，但是不包括 1（排除 1），然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。
- Math.round() 函数返回一个数字四舍五入后最接近的整数。
// 1. Math.ceil() 函数总是四舍五入并返回大于等于给定数字的最小整数。
console.log(Math.ceil(7.004)); // 8
console.log(Math.ceil(-7.004)); // -7
// 2. Math.floor() 函数总是返回小于等于一个给定数字的最大整数。
console.log(Math.floor(5.95)); // 5
console.log(Math.floor(5.05)); // 5
// 3. Math.max() 函数返回作为输入参数的最大数字，如果没有参数，则返回 -Infinity。
console.log(Math.max(1, 3, 2)); // 3
console.log(Math.max(-1, -3, -2)); // -1
const array1 = [1, 3, 2];
console.log(Math.max(...array1)); // 3
// 4. Math.min() 函数返回作为输入参数的数字中最小的一个，如果没有参数，则返回 Infinity。
console.log(Math.min(2, 3, 1)); // 1
console.log(Math.min(-2, -3, -1)); // -3
const array1 = [2, 3, 1];
console.log(Math.min(...array1)); // 1
// 5. Math.random() 函数返回一个浮点数，伪随机数在范围从0 到小于1，也就是说，
// 从 0（包括 0）往上，但是不包括 1（排除 1），然后您可以缩放到所需的范围。
// 实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。一般用于随机生成一个数
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
console.log(getRandomInt(3)); // 随机一个 0, 1 or 2
console.log(getRandomInt(1)); // 0
console.log(Math.random()); // 随机 0 to <1 ，其中 例子 0.47389077677079183
// 6. Math.round() 函数返回一个数字四舍五入后最接近的整数。
x = Math.round(20.49); //20
x = Math.round(20.5); //21
x = Math.round(-20.5); //-20
x = Math.round(-20.51); //-21
Date 时间日期 方法属性
现在一般我们很少使用date对象来处理时间格式
一般使用第三方插件 moment.js 和 day.js，day.js 相对更方便实用
所以下面的方法尽量以第三方插件为主
1. 操作 Date 【Date 更多内容点这里】
目前使用dayjs最多，用法momentjs 几乎一样的。 dayjs文档，momentjs文档
这里处理时间的方式一般也是不多 我举一两个常用的例子，然后剩下的可以去查看文档。
// 1. 新建 Date
new Date(); // 获取当前时间
new Date(value); // 根据 时间戳[1671540497768] 创建date对象
new Date(dateString); // '01 Jan 1970 00:00:00 GMT' 这样格式的字符串
// 使用dayjs 获取当前时间
dayjs().format() // 默认返回的是 ISO8601 格式字符串 '2020-04-02T08:02:17-05:00'
// fromat() 格式化 根据传入的占位符返回格式化后的日期。
dayjs().format('YYYY-MM-DD') // 2022-12-21
dayjs().format('YYYY-MM-DD hh:mm:ss') // 2022-12-21 09:44:48
// 一般用于展示当前时间，或者提交表单时使用
// 使用dayjs 解析时间，时间字符串 时间戳
dayjs('2019-12-20 08:48:17').format('YYYY-MM-DD') // 2019-12-20
dayjs(1671540497768).format('YYYY-MM-DD hh:mm:ss') // 2022-12-20 08:48:17
// 一般用于列表展示时间，时间都是服务端返回的存储格式
// 使用dayjs 增或减时间
// 增加 7 天
dayjs().add(7, 'day').format('YYYY-MM-DD')) // 2022-12-28
// 减去 7 年
dayjs().subtract(7, 'year').format('YYYY-MM-DD')) // 2015-12-21
// dayjs 特别全面完全可以满足我们日常所需，更多内容请移步文档官网查看
总结
上面介绍了都是在开发项目中常用的部分，以及相关介绍，也算是一个初级前端应该掌握的知识，都是js的基础内容主要是方便给一些还在前端奋斗初级小伙伴们一点帮助。你有啥意见就提，看完觉得还可以点个赞，谢谢啦！
537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
