JavaScript中的Object方法、Array方法、String方法

个人主页：学习前端的小z

个人专栏：JavaScript 精粹

本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

文章目录

• 🔥Object方法
• • 🌞1 Object.is()
  • 🌞2 Object.freeze()
  • 🌞3 Object.assign()
  • 🌞4 Object.keys()
• 🔥Array方法
• • 🌞1 forEach()
  • 🌞2 sort()
  • 🌞3 map()
  • 🌞4 filter()
  • 🌞5 reduce()
  • 🌞6 lastIndexOf()
  • 🌞7 reverse()
  • 🌞8 splice()
  • 🌞9 includes()
  • 🌞10 flat()
  • 🌞11 方法汇总
• 🔥String方法
• • 🌞1 charCodeAt()
  • 🌞2 replace()
  • 🌞3 slice()
  • 🌞4 方法汇总
  • • 🌟4.1 案例

🔥Object方法

🌞1 Object.is()

方法判断两个值是否为同一个值

Object.is() 方法判断两个值是否为同一个值。如果满足以下条件则两个值相等:

都是 undefined
都是 null
都是 true 或 false
都是相同长度的字符串且相同字符按相同顺序排列
都是相同对象（意味着每个对象有同一个引用）
都是数字且
都是 +0
都是 -0
都是 NaN
或都是非零而且非 NaN 且为同一个值
与== 运算不同。  == 运算符在判断相等前对两边的变量(如果它们不是同一类型) 进行强制转换 (这种行为的结果会将 "" == false 判断为 true), 而 Object.is不会强制转换两边的值。

与=== 运算也不相同。 === 运算符 (也包括 == 运算符) 将数字 -0 和 +0 视为相等 ，而将Number.NaN 与NaN视为不相等.

参数

Object.is(value1, value2);


value1
被比较的第一个值。
value2
被比较的第二个值。

返回值

一个 Boolean 类型标示两个参数是否是同一个值。 true or false

🌞2 Object.freeze()

方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

var obj = {
  prop: 42
};

Object.freeze(obj);

obj.prop = 33;
// Throws an error in strict mode

console.log(obj.prop);
// 42

参数

Object.freeze(obj)


obj
要被冻结的对象。

返回值

被冻结的对象。

🌞3 Object.assign()

方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

var target = { a: 1, b: 2 };
var source = { b: 4, c: 5 };

var returnedTarget = Object.assign(target, source);

console.log(target);
//  { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
//  { a: 1, b: 4, c: 5 }


如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

参数

Object.assign(target, ...sources)



target
目标对象。

sources
源对象。

返回值

目标对象。

🌞4 Object.keys()

方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

Object.keys({a:1,b:2,c:3,d:5});
// ["a", "b", "c", "d"]

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr));
//  ['0', '1', '2']



Object.keys 返回一个所有元素为字符串的数组，其元素来自于从给定的object上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。

参数

Object.keys(obj)

obj
要返回其枚举自身属性的对象。

返回值

一个表示给定对象的所有可枚举属性的字符串数组。

🔥Array方法

🌞1 forEach()

方法对数组的每个元素执行一次给定的函数。

var items = ['item1', 'item2', 'item3'];
var copy = [];

// for写法
for (var i=0; i<items.length; i++) {
  copy.push(items[i]);
}

// forEach方法
items.forEach(function(item){ //function匿名函数作为实参
  copy.push(item);
});

参数

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

callback
为数组中每个元素执行的函数，该函数接收一至三个参数：
    currentValue
    数组中正在处理的当前元素。
    index 可选
    数组中正在处理的当前元素的索引。
    array 可选
    forEach() 方法正在操作的数组。
thisArg 可选
可选参数。当执行回调函数 callback 时，用作 this 的值。

**返回值

undefined

🌞2 sort()

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

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
//  ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
//  [1, 100000, 21, 30, 4]

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);
// [1, 2, 3, 4, 5]

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return b - a;
});
console.log(numbers);
// [5, 4, 3, 2, 1]

如果没有指明 排序函数 ，那么元素会按照转换为的字符串的诸个字符的Unicode位点进行排序。例如 "Banana" 会被排列到 "cherry" 之前。当数字按由小到大排序时，9 出现在 80 之前，但因为（没有指明 排序函数），比较的数字会先被转换为字符串，所以在Unicode顺序上 "80" 要比 "9" 要靠前。

参数

arr.sort( [,compareFunction(firstEl,secondEl)])

compareFunction 可选
用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。
    firstEl
    第一个用于比较的元素。
    secondEl
    第二个用于比较的元素。

返回值

排序后的数组。请注意，数组已原地排序，不会产生新数组。

🌞3 map()

方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

var originArr =  [1,2,3,4,5];
var newArr = originArr.map(function(current,index,array){
    return current * 2;
});
console.log(newArr);
//[2,4,6,8,10]

---------------------------------------------------
var kvArray = [{key: 1, value: 10}, 
               {key: 2, value: 20}, 
               {key: 3, value: 30}];

var reformattedArray = kvArray.map(function(obj) { 
   var rObj = {};
   rObj[obj['key']] = obj.value;
   return rObj;
});
console.log(reformattedArray);
// [{1: 10}, {2: 20}, {3: 30}], 

map 方法会给原数组中的每个元素都按顺序调用一次  callback 函数。callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。

callback 函数会被自动传入三个参数：数组元素，元素索引，原数组本身。

map 不修改调用它的原数组本身（当然可以在 callback 执行时改变原数组）

参数

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])


callback
生成新数组元素的函数，使用三个参数：
    currentValue
    callback 数组中正在处理的当前元素。
    index可选
    callback 数组中正在处理的当前元素的索引。
    array可选
    map 方法调用的数组。
thisArg可选
执行 callback 函数时值被用作this。

返回值

一个由原数组每个元素执行回调函数的结果组成的新数组。

🌞4 filter()

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

var arr = [
  { id: 15 },
  { id: -1 },
  { id: 0 },
  { id: 3 },
  { id: 12.2 },
  { },
  { id: null },
  { id: NaN },
  { id: 'undefined' }
];

function isNumber(obj) {
  return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
}

var arrByID = arr.filter(function(item) {
    return isNumber(item.id) && item.id !== 0;
});

console.log(arrByID); 
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]


filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。

callback 被调用时传入三个参数：

元素的值
元素的索引
被遍历的数组本身
如果为 filter 提供一个 thisArg 参数，则它会被作为 callback 被调用时的 this 值。否则，callback 的 this 值在非严格模式下将是全局对象，严格模式下为 undefined。callback 函数最终观察到的 this 值是根据通常函数所看到的 "this"的规则确定的。

filter 不会改变原数组，它返回过滤后的新数组。

filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。如果已经存在的元素被改变了，则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。

参数

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

callback
用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：
    element
    数组中当前正在处理的元素。
    index可选
    正在处理的元素在数组中的索引。
    array可选
    调用了 filter 的数组本身。
thisArg可选
执行 callback 时，用于 this 的值

返回值

一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

🌞5 reduce()

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

var originArr = [3,4,5,6,7,8];
var sum = originArr.reduce(function(acc,current,idx,arr){
    return acc + current;
});
console.log(sum);
//33 数组中每项累加和

var str = 'jfkldsajgklasjkhlgjefaklhjaerkl';
var statistics = str.split('').reduce(function(acc,current){
    if(acc[current]){
        acc[current]++;
    }else {
        acc[current] = 1;
    }
    return acc;
},{});
console.log(statistics);
// {a: 4, d: 1, e: 2, f: 2, g: 2, h: 2, j: 5, k: 5, l: 5, r: 1, s: 2} 字符串统计后的对象结果


reduce为数组中的每一个元素依次执行callback函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：

    accumulator 累计器
    currentValue 当前值
    currentIndex 当前索引
array 数组
回调函数第一次执行时，accumulator 和currentValue的取值有两种情况：如果调用reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值；如果没有提供 initialValue，那么accumulator取数组中的第一个值，currentValue取数组中的第二个值。

参数

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

callback
执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数，包含四个参数：
    accumulator
    累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。
    currentValue
    数组中正在处理的元素。
    index 可选
    数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则从索引1起始。
    array可选
    调用reduce()的数组

initialValue可选
作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

返回值

函数累计处理的结果

🌞6 lastIndexOf()

方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3

lastIndexOf 使用严格相等（strict equality，即 ===）比较 searchElement 和数组中的元素。

参数

arr.lastIndexOf(searchElement[, fromIndex])

searchElement
被查找的元素。
fromIndex 可选
从此位置开始逆向查找。默认为数组的长度减 1(arr.length - 1)，即整个数组都被查找。如果该值大于或等于数组的长度，则整个数组会被查找。如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。

返回值

数组中该元素最后一次出现的索引，如未找到返回-1。

🌞7 reverse()

方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

var array1 = ['one', 'two', 'three'];
console.log( array1);
//  ["one", "two", "three"]

var reversed = array1.reverse();
console.log( reversed);
// ["three", "two", "one"]

console.log(array1);
//  ["three", "two", "one"]

reverse会对原数组造成修改影响

参数

 arr.reverse()

返回值

颠倒后的数组。

🌞8 splice()

方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// 在下标1的位置新增了1项
console.log(months);
// ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// 在下标4的位置 修改了 1项
console.log(months);
//["Jan", "Feb", "March", "April", "May"]

splice会修改原数组

参数

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

start
    指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。

deleteCount 可选
    整数，表示要移除的数组元素的个数。
    如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。
    如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。
	如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
    
item1, item2, ... 可选
	要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

返回值

由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

🌞9 includes()

方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

var array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

var pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

参数

valueToFind
需要查找的元素值。

Note:  使用 includes()比较字符串和字符时是区分大小写。

fromIndex 可选
从fromIndex 索引处开始查找 valueToFind。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜 （即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。

返回值

返回一个布尔值 Boolean ，如果在数组中找到了（如果传入了 fromIndex ，表示在 fromIndex 指定的索引范围中找到了）则返回 true 。

🌞10 flat()

方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]


//二维展开替代方案
var arr = [1, 2, [3, 4]];

var flatArr = arr.reduce(function(acc,curr){
    return acc.concat(curr);
},[]);

console.log(flatArr);
//[1, 2, 3, 4]

参数

var newArray = arr.flat([depth])

depth 可选
指定要提取嵌套数组的结构深度，默认值为 1。

返回值

一个包含将数组与子数组中所有元素的新数组。

🌞11 方法汇总

toString()		把数组转换成字符串，逗号分隔每一项
valueOf()         返回数组对象值本身
// 1 栈操作(先进后出)
push()
pop() 		//取出数组中的最后一项，修改length属性
// 2 队列操作(先进先出)
push()
shift()		//取出数组中的第一个元素，修改length属性
unshift() 	//在数组最前面插入项，返回数组的长度
// 3 排序方法
reverse()	//翻转数组
sort(); 	//即使是数组sort也是根据字符，从小到大排序
// 带参数的sort是如何实现的？
// 4 操作方法
concat()  	//把参数拼接到当前数组
slice() 	//从当前数组中截取一个新的数组，不影响原来的数组，参数start从0开始,end从1开始
splice()	//删除或替换当前数组的某些项目，参数start, deleteCount, options(要替换的项目)
// 5 位置方法
indexOf()、lastIndexOf()   //如果没找到返回-1
// 6 迭代方法 不会修改原数组(可选)
every()、filter()、forEach()、map()、reduce()、some()
// 7 方法将数组的所有元素连接到一个字符串中。
join()

🔥String方法

🌞1 charCodeAt()

方法返回 0 到 65535 之间的整数，表示给定索引处的 UTF-16 代码单元

var str = '如果';
var u16 = str.charCodeAt(0);
console.log(u16); //22914

console.log(u16.toString(16)); //5982

UTF-16 编码单元匹配能用一个 UTF-16 编码单元表示的 Unicode 码点。如果 Unicode 码点不能用一个 UTF-16 编码单元表示（因为它的值大于0xFFFF），则所返回的编码单元会是这个码点代理对的第一个编码单元) 。如果你想要整个码点的值，使用 codePointAt()。

参数

str.charCodeAt(index)

index
一个大于等于 0，小于字符串长度的整数。如果不是一个数值，则默认为 0

返回值

指定 index 处字符的 UTF-16 代码单元值的一个数字；如果 index 超出范围，charCodeAt() 返回 NaN。

🌞2 replace()

方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串，则仅替换第一个匹配项。

var str = '如果你是春天，就请融化冰雪，让小草破土而出。如果你是夏天，就请用用各种各样的风，谱写快乐的乐章如果你是秋天，就让枫叶似火，洋溢丰收的喜悦；，如果你是冬天，就请做一位时装设计师，为大地披上雪白霓裳。';

var regex = /\u5982\u679c/gi; 

console.log(str.replace(regex, '假如'));


console.log(str.replace('如果', '假如'));


/* 汉子转换 unicode编码方法 */
function toUnicode(str){
    return escape(str).toLocaleLowerCase().replace(/%u/gi,'\\u');
}

function string2unicode(str){
　　var ret ="";
　　for(var i=0; i<str.length; i++){
       ret += "\\u" + str.charCodeAt(i).toString(16);
      }
   	return ret;
}

参数

str.replace(regexp|substr, newSubStr|function)


regexp (pattern)
一个RegExp 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。
substr (pattern)
一个将被 newSubStr 替换的 字符串。其被视为一整个字符串，而不是一个正则表达式。仅第一个匹配项会被替换。
newSubStr (replacement)
用于替换掉第一个参数在原字符串中的匹配部分的字符串。该字符串中可以内插一些特殊的变量名。参考下面的使用字符串作为参数。
function (replacement)
一个用来创建新子字符串的函数，该函数的返回值将替换掉第一个参数匹配到的结果。参考下面的指定一个函数作为参数。

返回值

一个部分或全部匹配由替代模式所取代的新的字符串。

🌞3 slice()

方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。

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"

参数

str.slice(beginIndex[, endIndex])


beginIndex
	从该索引（以 0 为基数）处开始提取原字符串中的字符。如果值为负数，会被当做 strLength + beginIndex 看待，这里的strLength 是字符串的长度（例如， 如果 beginIndex 是 -3 则看作是：strLength - 3）
    
endIndex
	可选。在该索引（以 0 为基数）处结束提取字符串。如果省略该参数，slice() 会一直提取到字符串末尾。如果该参数为负数，则被看作是 strLength + endIndex，这里的 strLength 就是字符串的长度(例如，如果 endIndex 是 -3，则是, strLength - 3)。

返回值

返回一个从原字符串中提取出来的新字符串

🌞4 方法汇总

// 1 字符方法
charAt()    	//获取指定位置处字符
charCodeAt()  	//获取指定位置处字符的ASCII码
str[0]   		//HTML5，IE8+支持 和charAt()等效
// 2 字符串操作方法
concat()   		//拼接字符串，等效于+，+更常用
slice()    		//从start位置开始，截取到end位置，end取不到
substring() 	//从start位置开始，截取到end位置，end取不到
substr()   		//从start位置开始，截取length个字符
// 3 位置方法
indexOf()   	//返回指定内容在元字符串中的位置
lastIndexOf() 	//从后往前找，只找第一个匹配的
// 4 去除空白   
trim()  		//只能去除字符串前后的空白
// 5 大小写转换方法
to(Locale)UpperCase() 	//转换大写
to(Locale)LowerCase() 	//转换小写
// 6 其它
search()
replace()
split()
fromCharCode() //unicode转字符串
// String.fromCharCode(101, 102, 103);	

🌟4.1 案例

• 截取字符串”我爱中华人民共和国”，中的”中华”

var s = "我爱中华人民共和国";
s = s.substr(2,2);
console.log(s);

---------------------
    
function padLeft(num){
    num = num || 0;
    return ('00'+num).substr(-2);
}

• “abcoefoxyozzopp”查找字符串中所有o出现的位置

var s = 'abcoefoxyozzopp';
var array = [];
do {
  var index = s.indexOf('o', index + 1);
  if (index != -1) {
    array.push(index);
  }
} while (index > -1);
console.log(array);

• 把字符串中所有的o替换成!

var s = 'abcoefoxyozzopp';
do {
  s = s.replace('o', '');
} while (s.indexOf('o') > -1);
console.log(s);

console.log(s.replace(/o/ig, ''));

• 判断一个字符串中出现次数最多的字符，统计这个次数

var s = 'abcoefoxyozzopp';
var o = {};

for (var i = 0; i < s.length; i++) {
  var item = s.charAt(i);
  if (o[item]) {
    o[item] ++;
  }else{
    o[item] = 1;
  }
}

var max = 0;
var char ;
for(var key in o) {
  if (max < o[key]) {
    max = o[key];
    char = key;
  }
}

console.log(max);
console.log(char);

文章中用到的取色器：链接

参考 : http://bclary.com/log/2004/11/07/#a-11.9.3