JavaScript 8.15日学习笔记

最新推荐文章于 2024-10-01 20:12:28 发布

年糕吃不腻

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量35

点赞数

文章标签： javascript 学习笔记

本文链接：https://blog.csdn.net/m0_72365258/article/details/132303010

版权

一：内置对象——数组

Fill方法

在 JavaScript 中，fill 是数组对象的一个内置方法。它用于将数组中的所有元素替换为指定的值。

fill 方法接受一个参数，即要用来替换数组元素的值。它还可以接受两个可选参数，用于指定替换的起始索引和结束索引。如果不指定起始索引和结束索引，则 fill 方法会替换整个数组。

var numbers = [1, 2, 3, 4, 5];

numbers.fill(0);
console.log(numbers); // 输出 [0, 0, 0, 0, 0]

var fruits = ['apple', 'banana', 'cherry', 'date'];

fruits.fill('orange', 1, 3);
console.log(fruits); // 输出 ['apple', 'orange', 'orange', 'date']

flat方法

在 JavaScript 中，flat 是数组对象的一个内置方法。它用于将多维数组（嵌套数组）转换为一维数组。

flat 方法接受一个可选的参数，用于指定要展开的嵌套层数。如果不指定参数，默认值为 1，即只展开一层嵌套数组。如果指定参数为一个大于等于 0 的整数，则会展开指定层数的嵌套数组。如果指定参数为一个负数，则会展开所有嵌套数组。

var numbers = [1, [2, 3], [4, [5, 6]]];

var flattened = numbers.flat();
console.log(flattened); // 输出 [1, 2, 3, 4, [5, 6]]

var deeplyNested = numbers.flat(2);
console.log(deeplyNested); // 输出 [1, 2, 3, 4, 5, 6]

var deeplyNestedAll = numbers.flat(Infinity);
console.log(deeplyNestedAll); // 输出 [1, 2, 3, 4, 5, 6]

flatMap方法

在 JavaScript 中，flatMap 是数组对象的一个内置方法。它结合了 map 和 flat 两个方法的功能，用于对数组中的每个元素执行一个映射操作，并将结果展开为一维数组。

flatMap 方法接受一个回调函数作为参数，该回调函数用于对数组中的每个元素进行映射操作。回调函数接受三个参数：当前元素的值、当前元素的索引和数组本身。回调函数应该返回一个数组，表示对当前元素的映射结果。

var numbers = [1, 2, 3, 4, 5];

var doubled = numbers.flatMap(function(number) {
  return [number, number * 2];
});

console.log(doubled); // 输出 [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

includes方法

在 JavaScript 中，includes 是数组对象的一个内置方法。它用于判断数组中是否包含指定的元素，并返回一个布尔值。

includes 方法接受一个参数，即要检查的元素。它会遍历数组，查找是否存在与指定元素相等的元素。如果找到了相等的元素，则返回 true，否则返回 false。

var numbers = [1, 2, 3, 4, 5];

console.log(numbers.includes(3)); // 输出 true
console.log(numbers.includes(6)); // 输出 false

var fruits = ['apple', 'banana', 'cherry'];

console.log(fruits.includes('banana')); // 输出 true
console.log(fruits.includes('orange')); // 输出 false

lastindexof方法

在 JavaScript 中，lastIndexOf 是字符串和数组对象的一个内置方法。它用于返回指定元素在字符串或数组中最后一次出现的索引位置。

lastIndexOf 方法接受一个参数，即要搜索的元素。它会从字符串或数组的末尾开始向前搜索，找到最后一次出现指定元素的位置，并返回该位置的索引值。如果没有找到指定元素，则返回 -1。

var str = 'Hello, world!';

console.log(str.lastIndexOf('o')); // 输出 8
console.log(str.lastIndexOf('l')); // 输出 9
console.log(str.lastIndexOf('z')); // 输出 -1

var numbers = [1, 2, 3, 4, 5, 2, 3];

console.log(numbers.lastIndexOf(2)); // 输出 5
console.log(numbers.lastIndexOf(3)); // 输出 6
console.log(numbers.lastIndexOf(6)); // 输出 -1

reverse方法

reverse()方法用于颠倒数组中元素的顺序。并返回元素顺序反转后的数组。
reverse()函数的返回值为Array类型，返回元素顺序被反转后的数组对象。
reverse()函数将一个当前数组对象中的元素按所在位置进行反转。在执行过程中，此函数并不创建新的Array对象，直接在当前对象上进行反转。返回的数组对象就是经过顺序反转后的当前对象。

var fruitsA = ["Banana", "Orange", "Apple", "Mango"];
var fruitsB = fruitsA.reverse();
console.log(fruitsB);
//输出 Mango,Apple,Orange,Banana

foreach方法

forEach 是数组对象的一个内置方法，用于对数组中的每个元素执行一个指定的操作。它接受一个回调函数作为参数，该回调函数用于对数组中的每个元素执行操作。回调函数接受三个参数：当前元素的值、当前元素的索引和数组本身。forEach 方法没有返回值，它只是对数组中的每个元素执行指定的操作。如果需要返回一个新的数组或对数组中的每个元素进行转换操作，可以使用 map 方法。在 forEach 方法的回调函数中，可以使用 break 或 return 语句来提前结束循环，但只会中断当前的回调函数执行。

var numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
});

// 输出：
// 1
// 2
// 3
// 4
// 5

map方法

map 是数组对象的一个内置方法，用于对数组中的每个元素执行一个指定的操作，并返回一个新的数组，该数组包含操作后的结果。它接受一个回调函数作为参数，该回调函数用于对数组中的每个元素执行操作。回调函数接受三个参数：当前元素的值、当前元素的索引和数组本身。回调函数应该返回一个新的值，表示对当前元素的操作结果。map 方法会创建一个新的数组，并将每个元素的操作结果放入新数组中。它不会修改原始数组。如果原始数组中的元素是 null 或 undefined，会跳过这些元素，并在新数组中保留 null 或 undefined。

var numbers = [1, 2, 3, 4, 5];

var doubled = numbers.map(function(number) {
  return number * 2;
});

console.log(doubled); // 输出 [2, 4, 6, 8, 10]

filter方法

在 JavaScript 中，filter 是数组对象的一个内置方法。它用于筛选数组中满足指定条件的元素，并返回一个新的数组，该数组包含满足条件的元素。

filter 方法接受一个回调函数作为参数，该回调函数用于对数组中的每个元素进行条件判断。回调函数接受三个参数：当前元素的值、当前元素的索引和数组本身。回调函数应该返回一个布尔值，表示当前元素是否满足条件。

var numbers = [1, 2, 3, 4, 5];

var evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // 输出 [2, 4]

every方法

在 JavaScript 中，every 是数组对象的一个内置方法。它用于检测数组中的所有元素是否满足指定的条件，如果所有元素都满足条件，则返回 true，否则返回 false。

every 方法接受一个回调函数作为参数，该回调函数用于定义对数组元素的测试条件。回调函数接受三个参数：当前元素的值、当前元素的索引和数组本身。回调函数应该返回一个布尔值，表示当前元素是否满足条件。

var numbers = [1, 2, 3, 4, 5];

var allEven = numbers.every(function(number) {
  return number % 2 === 0;
});

console.log(allEven); // 输出 false

遍历器

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。

迭代器模式可以把迭代的过程从业务逻辑中分离出来，在使用迭代器模式之后，即使不关心对象的内部构造，也可以按顺序访问其中的每个元素。

for...in

for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

    Object.prototype.writeBlog = function () {
        console.log("hello world");
    }
    let obj = {
        age: 22,
        name: 'been'
    };
    for ( key in obj) {
        console.log(key);
    }//age name writeBlog

for...of

for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

    let arr = ['hello','been'];
    for (let val of arr) {
        console.log(val);
    }
    //输出：
    // hello
    // been
 
    let set = new Set();
    set.add('hello');
    set.add('been');
    for (let val of set) {
        console.log(val);
    }
    //输出：
    // hello
    // been

二：内置对象——字符串

split方法

在 JavaScript 中，split 是字符串对象的一个内置方法。它用于将一个字符串分割成一个字符串数组，根据指定的分隔符进行分割。

split 方法接受一个参数，即分隔符。分隔符可以是一个字符串或一个正则表达式。它会将原始字符串根据分隔符进行分割，并返回一个字符串数组，其中包含分割后的子字符串。

var str = 'Hello, world!';

var words = str.split(' '); // 使用空格作为分隔符

console.log(words); // 输出 ["Hello,", "world!"]

var csv = 'John,Doe,30';

var values = csv.split(','); // 使用逗号作为分隔符

console.log(values); // 输出 ["John", "Doe", "30"]

slice方法

在 JavaScript 中，slice 是字符串和数组对象的一个内置方法。它用于从字符串或数组中提取指定范围的元素，并返回一个新的字符串或数组。

slice 方法接受两个参数，即起始索引和结束索引（可选）。起始索引表示要提取的元素的起始位置，结束索引表示要提取的元素的结束位置（不包含在提取的结果中）。如果省略结束索引，则 slice 方法会提取从起始索引到字符串或数组的末尾的所有元素。

var str = 'Hello, world!';

var slicedStr = str.slice(7, 12);

console.log(slicedStr); // 输出 "world"

var numbers = [1, 2, 3, 4, 5];

var slicedNumbers = numbers.slice(1, 4);

console.log(slicedNumbers); // 输出 [2, 3, 4]

tolowercase，touppercase

toLowerCase 方法用于将字符串中的所有字符转换为小写字母，并返回转换后的新字符串。

toUpperCase 方法用于将字符串中的所有字符转换为大写字母，并返回转换后的新字符串。

var str = 'Hello, World!';

var lowerCaseStr = str.toLowerCase();

console.log(lowerCaseStr); // 输出 "hello, world!"


var str = 'Hello, World!';

var upperCaseStr = str.toUpperCase();

console.log(upperCaseStr); // 输出 "HELLO, WORLD!"

startswith，endswith方法

startsWith 方法用于检查字符串是否以指定的子字符串开头，并返回一个布尔值。

endsWith 方法用于检查字符串是否以指定的子字符串结尾，并返回一个布尔值。

var str = 'Hello, World!';

var startsWithHello = str.startsWith('Hello');

console.log(startsWithHello); // 输出 true


var str = 'Hello, World!';

var endsWithWorld = str.endsWith('World!');

console.log(endsWithWorld); // 输出 true

padstart，padend方法

padStart() 方法用另一个字符串填充当前字符串（重复，如果需要的话），以便产生的字符串达到给定的长度。填充从当前字符串的开始（左侧）应用的。padEnd() 填充从当前字符串的末尾（右侧）应用的。

  var str = "66"
     var scr = str.padStart(10, "啦啦啦")
     var re = str.padEnd(3, "元")
     console.log(re)//66元
     console.log(scr)//啦啦啦啦啦啦啦啦66

三：内置对象——Math

Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。

与其他全局对象不同的是，Math 不是一个构造器。Math 的所有属性与方法都是静态的。引用圆周率的写法是 Math.PI，调用正余弦函数的写法是 Math.sin(x)，x 是要传入的参数。Math 的常量是使用 JavaScript 中的全精度浮点数来定义的。

Math.LN2

2 的自然对数，约等于 0.693。

Math.PI

圆周率，一个圆的周长和直径之比，约等于 3.14159。

Math.SQRT2

2 的平方根，约等于 1.414。

Math.floor()

返回小于一个数的最大整数，即一个数向下取整后的值。

Math.Random()

返回一个 0 到 1 之间的伪随机数。

Math.max()

返回零到多个数值中最大值。

Math.min()

返回零到多个数值中最小值。

Math.sin()

返回一个数的正弦值。

Math.ceil()

向上取整

四：内置对象——object

在JavaScript中，Object是一个内置的基础对象，它是所有其他对象的起源。Object构造函数可以用来创建一个新的对象，或者可以用来为对象定义属性和方法。

以下是Object对象的一些常用方法和属性：

1. Object.create(proto, [propertiesObject])：创建一个新对象，以指定的原型对象proto作为新对象的原型，并可选地传入描述新对象的属性及属性特性的对象propertiesObject。

2. Object.defineProperty(obj, prop, descriptor)：定义或修改对象的属性，可以指定属性名称、属性值、以及属性的特性（如可写、可枚举等）。

3. Object.defineProperties(obj, properties)：定义或修改对象的多个属性，传入一个包含多个属性的对象。

4. Object.getPrototypeOf(obj)：返回指定对象的原型对象。

5. Object.keys(obj)：返回一个由对象自身的可枚举属性组成的数组。

6. Object.values(obj)：返回一个由对象自身的可枚举属性值组成的数组。

7. Object.entries(obj)：返回一个由对象自身的可枚举属性键值对组成的数组。

8. Object.assign(target, ...sources)：将一个或多个源对象的属性复制到目标对象中。

9. Object.hasOwnProperty(prop)：判断对象自身是否具有指定属性。

keys，values：

// 基本用法
const person = {
    name: 'Alex',
    age: 18
};
// 返回键数组
console.log(Object.keys(person));		// [ 'name', 'age' ]
// 返回值数组
console.log(Object.values(person));		// [ 'Alex', 18 ]
// 返回键值二维数组
console.log(Object.entries(person));	// [ [ 'name', 'Alex' ], [ 'age', 18 ] ]


// 与数组类似方法的区别
console.log([1, 2].keys());			// Object [Array Iterator] {}
console.log([1, 2].values());		// Object [Array Iterator] {}
console.log([1, 2].entries());		// Object [Array Iterator] {}
// 数组的 keys()、values()、entries() 等方法是实例方法，返回的都是 Iterator
// 对象的 Object.keys()、Object.values()、Object.entries() 等方法是构造函数方法，返回的是数组


// 应用（使用 for...of 循环遍历对象）
const person = {
    name: 'Alex',
    age: 18
};
for (const key of Object.keys(person)) {
    console.log(key);		
}
// name
// age
for (const value of Object.values(person)) {
    console.log(value);		
}
// Alex
// 18
for (const entries of Object.entries(person)) {
    console.log(entries);	
}
// [ 'name', 'Alex' ]
// [ 'age', 18 ]
for (const [key, value] of Object.entries(person)) {
    console.log(key, value);
}
// name Alex
// age 18

// Object.keys()/values()/entires() 并不能保证顺序一定是你看到的样子，这一点和 for in 是一样的
// 如果对遍历顺序有要求那么不能用 for in 以及这种方法，而要用其他方法

hasOwnProperty

它用于检查一个对象是否具有指定的属性（即自身属性，不包括继承的属性）。

const obj = {
  name: 'John',
  age: 30
};

console.log(obj.hasOwnProperty('name')); // 输出：true
console.log(obj.hasOwnProperty('address')); // 输出：false