对象,数组,字符串常用方法一点通

292 阅读22分钟

前言

本文是对数组,字符串,对象常用方法的汇总。参考文章在文末。

数组

创建数组

字面量创建

// 字面量方式:
// 这个方法也是我们最常用的,在初始化数组的时候 相当方便
var a = [3, 11, 8];  // [3,11,8];

构造函数创建

 // 构造器:
 // 实际上 new Array === Array,加不加new 一点影响都没有。
var a = Array(); // [] 
var a = Array(3); // [,,] 
var a = Array(3,11,8); // [ 3,11,8 ]

ES6 Array.of

定义:返回由所有参数值组成的数组,如果没有参数,就返回一个空数组。

目的:Array.of() 出现的目的是为了解决上述构造器因参数个数不同,导致的行为有差异的问题

let a = Array.of(3, 11, 8); // [3,11,8]
let a = Array.of(3); // [3]   

ES6 Array,from

定义:用于将两类对象转为真正的数组(不改变原对象,返回新的数组)。

参数:

第一个参数(必需):要转化为真正数组的对象。

第二个参数(可选): 类似数组的map方法,对每个元素进行处理,将处理后的值放入返回的数组。

第三个参数(可选): 用来绑定this。

 // 1. 对象拥有length属性
let obj = {0: 'a', 1: 'b', 2:'c', length: 3};
let arr = Array.from(obj); // ['a','b','c'];
//  2. 部署了 Iterator接口的数据结构 比如:字符串、Set、NodeList对象
let arr = Array.from('hello'); // ['h','e','l','l','o']
let arr = Array.from(new Set(['a','b'])); // ['a','b']   

改变原数组

let a = [1,2,3];
ES5:
 a.splice()/ a.sort() / a.pop()/ a.shift()/  a.push()/ a.unshift()/ a.reverse()
ES6:
a.copyWithin() / a.fill

对于这些能够改变原数组的方法,要注意避免在循环遍历中改变原数组的选项,比如: 改变数组的长度,导致遍历的长度出现问题。

pop() 删除数组最后一个元素

定义: pop() 方法删除一个数组中的最后的一个元素,并且返回这个元素。

参数: 无

let  a =  [1,2,3];
let item = a.pop();  // 3
console.log(a); // [1,2]

shift() 删除数组第一个元素

定义: shift()方法删除数组的第一个元素,并返回这个元素。

参数: 无。

let  a =  [1,2,3];
let item = a.shift();  // 1
console.log(a); // [2,3]

push() 数组尾部添加元素

定义:push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

参数: item1, item2, ..., itemX ,要添加到数组末尾的元素

let  a =  [1,2,3];
let item = a.push('末尾');  // 4
console.log(a); // [1,2,3,'末尾']

unshift()数组首部添加元素

定义:unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

参数: item1, item2, ..., itemX ,要添加到数组开头的元素

let  a =  [1,2,3];
let item = a.unshift('开头');  // 4
console.log(a); // ['开头',1,2,3]

splice() 添加删除元素

定义: splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目 语法: array.splice(index,howmany,item1,.....,itemX) 参数:

index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。 howmany:可选。要删除的项目数量。如果设置为 0,则不会删除项目。 item1, ..., itemX: 可选。向数组添加的新项目。

返回值: 如果有元素被删除,返回包含被删除项目的新数组。

eg1:删除元素

let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0, 3); // [1,2,3]
console.log(a); // [4,5,6,7]
// 从数组下标0开始,删除3个元素
let item = a.splice(-1, 3); // [7]
// 从最后一个元素开始删除3个元素,因为最后一个元素,所以只删除了7

eg2: 删除并添加

let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0,3,'添加'); // [1,2,3]
console.log(a); // ['添加',4,5,6,7]
// 从数组下标0开始,删除3个元素,并添加元素'添加'
 let b = [1, 2, 3, 4, 5, 6, 7];
let item = b.splice(-2,3,'添加1','添加2'); // [6,7]
console.log(b); // [1,2,3,4,5,'添加1','添加2']
// 从数组最后第二个元素开始,删除3个元素,并添加两个元素'添加1'、'添加2'

eg3: 不删除只添加:

let a = [1, 2, 3, 4, 5, 6, 7];
let item = a.splice(0,0,'添加1','添加2'); // [] 没有删除元素,返回空数组
console.log(a); // ['添加1','添加2',1,2,3,4,5,6,7]
let b = [1, 2, 3, 4, 5, 6, 7];
let item = b.splice(-1,0,'添加1','添加2'); // [] 没有删除元素,返回空数组
console.log(b); // [1,2,3,4,5,6,'添加1','添加2',7] 在最后一个元素的前面添加两个元素

从上述三个栗子可以得出:

数组如果元素不够,会删除到最后一个元素为止 操作的元素,包括开始的那个元素 可以添加很多个元素 添加是在开始的元素前面添加的

reverse() 翻转数组

定义: reverse() 方法用于颠倒数组中元素的顺序。

参数: 无

let  a =  [1,2,3];
a.reverse();  
console.log(a); // [3,2,1]

sort() 数组排序

定义: sort()方法对数组元素进行排序,并返回这个数组。

参数可选: 规定排序顺序的比较函数。

默认情况下sort()方法没有传比较函数的话,默认按字母升序,如果不是元素不是字符串的话,会调用toString()方法将元素转化为字符串的Unicode(万国码)位点,然后再比较字符。

// 字符串排列 看起来很正常
var a = ["Banana", "Orange", "Apple", "Mango"];
a.sort(); // ["Apple","Banana","Mango","Orange"]
// 数字排序的时候 因为转换成Unicode字符串之后,有些数字会比较大会排在后面 这显然不是我们想要的
var	a = [10, 1, 3, 20,25,8];
console.log(a.sort()) // [1,10,20,25,3,8];

ES6 fill() 填充数组

定义: 使用给定值,填充一个数组。

参数:

第一个元素(必须): 要填充数组的值

第二个元素(可选): 填充的开始位置,默认值为0

第三个元素(可选):填充的结束位置,默认是为this.length

MDN浏览器兼容

['a', 'b', 'c'].fill(7)
// [7, 7, 7]
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

ES6 CopyWithin 指定位置元素复制到其他位置

定义: 在当前数组内部,将指定位置的成员复制到其他位置,并返回这个数组。

语法:

array.copyWithin(target, start = 0, end = this.length)

数: 三个参数都是数值,如果不是,会自动转为数值.

target(必需):从该位置开始替换数据。如果为负值,表示倒数。 start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示倒数。 end(可选):到该位置前停止读取数据,默认等于数组长度。使用负数可从数组结尾处规定位置。

浏览器兼容(MDN): chrome 45,Edge 12,Firefox32,Opera 32,Safari 9, IE 不支持 eg:

// -2相当于3号位,-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
var a=['OB1','Koro1','OB2','Koro2','OB3','Koro3','OB4','Koro4','OB5','Koro5']
// 2位置开始被替换,3位置开始读取要替换的 5位置前面停止替换
a.copyWithin(2,3,5)
// ["OB1","Koro1","Koro2","OB3","OB3","Koro3","OB4","Koro4","OB5","Koro5"] 

从上述栗子:

第一个参数是开始被替换的元素位置 要替换数据的位置范围:从第二个参数是开始读取的元素,在第三个参数前面一个元素停止读取 数组的长度不会改变 读了几个元素就从开始被替换的地方替换几个元素

不改变原数组

join() 数组转字符串

定义: join() 方法用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串,返回生成的字符串。

语法:

array.join(str)

参数:

str(可选): 指定要使用的分隔符,默认使用逗号作为分隔符

let a= ['hello','world'];
let str=a.join(); // 'hello,world'
let str2=a.join('+'); // 'hello+worl

使用join方法或者下文说到的toString方法时,当数组中的元素也是数组或者是对象时会出现什么情况?

let a= [['OBKoro1','23'],'test'];
let str1=a.join(); // OBKoro1,23,test
let b= [{name:'OBKoro1',age:'23'},'test'];
let str2 = b.join(); // [object Object],test
// 对象转字符串推荐JSON.stringify(obj

所以,join()/toString()方法在数组元素是数组的时候,会将里面的数组也调用join()/toString(),如果是对象的话,对象会被转为[object Object]字符串。

toLocaleString() 数组转字符串

定义: 返回一个表示数组元素的字符串。该字符串由数组中的每个元素的 toLocaleString() 返回值经调用 join() 方法连接(由逗号隔开)组成。

语法:

array.toLocaleString()

参数:无。

let a=[{name:'OBKoro1'},23,'abcd',new Date()];
let str=a.toLocaleString(); // [object Object],23,abcd,2018/5/28 下午1:52:20 

如上述栗子:调用数组的toLocaleString方法,数组中的每个元素都会调用自身的toLocaleString方法,对象调用对象的toLocaleString,Date调用Date的toLocaleString。

toString() 数组转字符串

定义: toString() 方法可把数组转换为由逗号链接起来的字符串。

array.toString()

参数: 无。

该方法的效果和join方法一样,都是用于数组转字符串的,但是与join方法相比没有优势,也不能自定义字符串的分隔符,因此不推荐使用。

值得注意的是:当数组和字符串操作的时候,js 会调用这个方法将数组自动转换成字符串

let b= [ 'toString','演示'].toString(); // toString,演示
let a= ['调用toString','连接在我后面']+'啦啦啦'; // 调用toString,连接在我后面啦啦啦

slice() 浅拷贝数组元素

定义: 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象,且原数组不会被修改。

注意:字符串也有一个slice() 方法是用来提取字符串的,不要弄混了。

语法:

array.slice(begin, end);

参数:

begin(可选): 索引数值,接受负值,从该索引处开始提取原数组中的元素,默认值为0。

end(可选):索引数值(不包括),接受负值,在该索引处前结束提取原数组元素,默认值为数组末尾(包括最后一个元素)。

let a= ['hello','world']; 
let b=a.slice(0,1); // ['hello'] 
a[0]='改变原数组'; 
console.log(a,b); // ['改变原数组','world'] ['hello'] 
b[0]='改变拷贝的数组'; 
console.log(a,b); // ['改变原数组','world'] ['改变拷贝的数组']

如上:新数组是浅拷贝的,元素是简单数据类型,改变之后不会互相干扰

如果是复杂数据类型(对象,数组)的话,改变其中一个,另外一个也会改变

    let a= [{name:'OBKoro1'}];
    let b=a.slice();
    console.log(b,a); // [{"name":"OBKoro1"}]  [{"name":"OBKoro1"}]
    // a[0].name='改变原数组';
    // console.log(b,a); // [{"name":"改变原数组"}] [{"name":"改变原数组"}]
    // b[0].name='改变拷贝数组',b[0].koro='改变拷贝数组';
    //  [{"name":"改变拷贝数组","koro":"改变拷贝数组"}] [{"name":"改变拷贝数组","koro":"改变拷贝数组"}]

原因在定义上面说过了的:slice()是浅拷贝,对于复杂的数据类型浅拷贝,拷贝的只是指向原数组的指针,所以无论改变原数组,还是浅拷贝的数组,都是改变原数组的数据。

concat() 数组连接

定义: 方法用于合并两个或多个数组,返回一个新数组。

语法:

var newArr =oldArray.concat(arrayX,arrayX,......,arrayX)

参数:

arrayX(必须):该参数可以是具体的值,也可以是数组对象。可以是任意多个。 eg1:

 let a = [1, 2, 3];
 let b = [4, 5, 6];
 //连接两个数组
 let newVal=a.concat(b); // [1,2,3,4,5,6]
 // 连接三个数组
 let c = [7, 8, 9]
 let newVal2 = a.concat(b, c); // [1,2,3,4,5,6,7,8,9]
 / 添加元素
 let newVal3 = a.concat('添加元素',b, c,'再加一个'); 
 // [1,2,3,"添加元素",4,5,6,7,8,9,"再加一个"]
 // 合并嵌套数组  会浅拷贝嵌套数组
 let d = [1,2 ];
 let f = [3,[4]];
 let newVal4 = d.concat(f); // [1,2,3,[4]]

ES6扩展运算符...合并数组:

因为ES6的语法更简洁易懂,所以现在合并数组我大部分采用...来处理,...运算符可以实现cancat的每个栗子,且更简洁和具有高度自定义数组元素位置的效果。

let a = [2, 3, 4, 5]
let b = [ 4,...a, 4, 4]
console.log(a,b); //  [2, 3, 4, 5] [4,2,3,4,5,4, 

更多关于扩展符的详细内容移步阮一峰大神的ECMAScript 6 入门

indexOf() 查找指定元素下标

定义: 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

语法:

array.indexOf(searchElement,fromIndex)

参数: searchElement(必须):被查找的元素 fromIndex(可选):开始查找的位置(不能大于等于数组的长度,返回-1),接受负值,默认值为0。 严格相等的搜索: 数组的indexOf搜索跟字符串的indexOf不一样,数组的indexOf使用严格相等===搜索元素,即数组元素要完全匹配才能搜索成功。 注意:indexOf()不能识别NaN

eg:

let a=['啦啦',2,4,24,NaN]
console.log(a.indexOf('啦'));  // -1 
console.log(a.indexOf('NaN'));  // -1 
console.log(a.indexOf('啦啦')); // 

使用场景:

数组去重 根据获取的数组下标执行操作,改变数组中的值等。 判断是否存在,执行操作。

lastIndexOf() 查找指定元素下标

定义: 方法返回指定元素,在数组中的最后一个的索引,如果不存在则返回 -1。(从数组后面往前查找)

语法:

arr.lastIndexOf(searchElement,fromIndex)

参数: searchElement(必须): 被查找的元素 fromIndex(可选): 逆向查找开始位置,默认值数组的长度-1,即查找整个数组。 关于fromIndex有三个规则:

1.正值。如果该值大于或等于数组的长度,则整个数组会被查找。

2.负值。将其视为从数组末尾向前的偏移。(比如-2,从数组最后第二个元素开始往前查找)

3.负值。其绝对值大于数组长度,则方法返回 -1,即数组不会被查找。

let a=['OB',4,'Koro1',1,2,'Koro1',3,4,5,'Koro1']; // 数组长度为10
// let b=a.lastIndexOf('Koro1',4); // 从下标4开始往前找 返回下标2
// let b=a.lastIndexOf('Koro1',100); //  大于或数组的长度 查找整个数组 返回9
// let b=a.lastIndexOf('Koro1',-11); // -1 数组不会被查找
let b=a.lastIndexOf('Koro1',-9); // 从第二个元素4往前查找,没有找到 返回-1

ES7 includes() 查找数组是否包含某个元素

定义: 返回一个布尔值,表示某个数组是否包含给定的值

语法:

array.includes(searchElement,fromIndex=0)

参数: searchElement(必须):被查找的元素 fromIndex(可选):默认值为0,参数表示搜索的起始位置,接受负值。正值超过数组长度,数组不会被搜索,返回false。负值绝对值超过长数组度,重置从0开始搜索。 includes方法是为了弥补indexOf方法的缺陷而出现的:

indexOf方法不能识别NaN indexOf方法检查是否包含某个值不够语义化,需要判断是否不等于-1,表达不够直观

eg:

   let a=['OB','Koro1',1,NaN];
// let b=a.includes(NaN); // true 识别NaN
// let b=a.includes('Koro1',100); // false 超过数组长度 不搜索
// let b=a.includes('Koro1',-3);  // true 从倒数第三个元素开始搜索 
// let b=a.includes('Koro1',-100);  // true 负值绝对值超过数组长度,搜索整个数组

兼容性(MDN): chrome47, Firefox 43,Edge 14,Opera 34, Safari 9,IE 未实现。

遍历数组

js中遍历数组并不会改变原始数组的方法总共有12个:

ES5:
forEach、everysomefilter、map、reduce、reduceRight、
ES6:
find、findIndex、keys、values、entries

关于遍历: 关于遍历的效率,可以看一下这篇详解JS遍历 尽量不要在遍历的时候,修改后面要遍历的值 尽量不要在遍历的时候修改数组的长度(删除/添加)

forEach

定义: 按升序为数组中含有效值的每一项执行一次回调函数。

语法:

array.forEach(function(currentValue, index, arr), thisValue)

参数:

function(必须): 数组中每个元素需要调用的函数。

// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象

thisValue(可选): 当执行回调函数时this绑定对象的值,默认值为undefined

关于forEach()你要知道:

  • 无法中途退出循环,只能用return退出本次回调,进行下一次回调。
  • 它总是返回 undefined值,即使你return了一个值。

下面类似语法同样适用这些规则

1. 对于空数组是不会执行回调函数的
2. 对于已在迭代过程中删除的元素,或者空元素会跳过回调函数
3. 遍历次数再第一次循环前就会确定,再添加到数组中的元素不会被遍历。
4. 如果已经存在的值被改变,则传递给 callback 的值是遍历到他们那一刻的

eg

 let a = [1, 2, ,3]; // 最后第二个元素是空的,不会遍历(undefined、null会遍历)
 let obj = { name: 'OBKoro1' };
 let result = a.forEach(function (value, index, array) { 
   a[3] = '改变元素';
   a.push('添加到尾端,不会被遍历')
   console.log(value, 'forEach传递的第一个参数'); // 分别打印 1 ,2 ,改变元素
   console.log(this.name); // OBKoro1 打印三次 this绑定在obj对象上
   // break; // break会报错
   return value; // return只能结束本次回调 会执行下次回调
   console.log('不会执行,因为return 会执行下一次循环回调')
 }, obj);
 console.log(result); // 即使return了一个值,也还是返回undefined
 // 回调函数也接受接头函数写法

every 检测数组所有元素是否都符合判断条件

定义: 方法用于检测数组所有元素是否都符合函数定义的条件 语法:

array.every(function(currentValue, index, arr), thisValue)

参数:(这几个方法的参数,语法都类似)

function(必须): 数组中每个元素需要调用的函数。

// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身

thisValue(可选): 当执行回调函数时this绑定对象的值,默认值为undefined 方法返回值规则:

如果数组中检测到有一个元素不满足,则整个表达式返回 false,且剩余的元素不会再进行检测。 如果所有元素都满足条件,则返回 true。=

eg:

function isBigEnough(element, index, array) { 
  return element >= 10; // 判断数组中的所有元素是否都大于10
}
let result = [12, 5, 8, 130, 44].every(isBigEnough);   // false
let result = [12, 54, 18, 130, 44].every(isBigEnough); // true
// 接受箭头函数写法 
[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

some 数组中的是否有满足判断条件的元素

定义:数组中的是否有满足判断条件的元素

语法:

array.some(function(currentValue, index, arr), thisValue)

参数:(这几个方法的参数,语法都类似)

function(必须): 数组中每个元素需要调用的函数。

// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身

thisValue(可选): 当执行回调函数时this绑定对象的值,默认值为undefined

方法返回值规则:

如果有一个元素满足条件,则表达式返回true, 剩余的元素不会再执行检测。

如果没有满足条件的元素,则返回false。

 function isBigEnough(element, index, array) {
   return (element >= 10); //数组中是否有一个元素大于 10
 }
 let result = [2, 5, 8, 1, 4].some(isBigEnough); // false
 let result = [12, 5, 8, 1, 4].some(isBigEnough); // true

filter 过滤原始数组,返回新数组

定义: 返回一个新数组, 其包含通过所提供函数实现的测试的所有元素。

语法:

let new_array = arr.filter(function(currentValue, index, arr), thisArg)

参数:(这几个方法的参数,语法都类似)

function(必须): 数组中每个元素需要调用的函数。

 // 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象

thisValue(可选): 当执行回调函数时this绑定对象的值,默认值为undefined

eg:

 let a = [32, 33, 16, 40];
 let result = a.filter(function (value, index, array) {
   return value >= 18; // 返回a数组中所有大于18的元素
 });
 console.log(result,a);// [32,33,40] [32,33,16,40]

map 对数组中的每个元素进行处理,返回新的数组

定义:创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

语法:

let new_array = arr.map(function(currentValue, index, arr), thisArg)

参数:(这几个方法的参数,语法都类似)

function(必须): 数组中每个元素需要调用的函数。

// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象

thisValue(可选): 当执行回调函数时this绑定对象的值,默认值为undefined

eg:

let a = ['1','2','3','4'];
let result = a.map(function (value, index, array) {
  return value + '新数组的新元素'
});
console.log(result, a); 
// ["1新数组的新元素","2新数组的新元素","3新数组的新元素","4新数组的新元素"] ["1","2","3","4"]

reduce 为数组提供累加器,合并为一个值

定义:reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,最终合并为一个值。

语法:

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数:

function(必须): 数组中每个元素需要调用的函数。

// 回调函数的参数
1. total(必须),初始值, 或者上一次调用回调返回的值
2. currentValue(必须),数组当前元素的值
3. index(可选), 当前元素的索引值
4. arr(可选),数组对象本身

initialValue(可选): 指定第一次回调 的第一个参数。 回调第一次执行时:

如果 initialValue 在调用 reduce 时被提供,那么第一个 total 将等于 initialValue,此时 currentValue 等于数组中的第一个值;

如果 initialValue 未被提供,那么 total 等于数组中的第一个值,currentValue 等于数组中的第二个值。此时如果数组为空,那么将抛出 TypeError。

如果数组仅有一个元素,并且没有提供 initialValue,或提供了 initialValue 但数组为空,那么回调不会被执行,数组的唯一值将被返回。

eg:

// 数组求和 
let sum = [0, 1, 2, 3].reduce(function (a, b) {
  return a + b;
}, 0);
// 6
// 将二维数组转化为一维 将数组元素展开
let flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  (a, b) => a.concat(b),
  []
);
 // [0, 1, 2, 3, 4, 5]

reducerRight

这个方法除了与reduce执行方向相反外,其他完全与其一致,请参考上述 reduce 方法介绍。

ES6 find(),findIndex()根据条件查找数组元素

find()定义:用于找出第一个符合条件的数组成员,并返回该成员,如果没有符合条件的成员,则返回undefined。

findIndex()定义:返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1。

这两个方法

语法:

let new_array = arr.find(function(currentValue, index, arr), thisArg)
let new_array = arr.findIndex(function(currentValue, index, arr), thisArg)

参数:(这几个方法的参数,语法都类似)

function(必须): 数组中每个元素需要调用的函数。

// 回调函数的参数
1. currentValue(必须),数组当前元素的值
2. index(可选), 当前元素的索引值
3. arr(可选),数组对象本身

thisValue(可选): 当执行回调函数时this绑定对象的值,默认值为undefined

这两个方法都可以识别NaN,弥补了indexOf的不足.

eg:

// find
let a = [1, 4, -5, 10].find((n) => n < 0); // 返回元素-5
let b = [1, 4, -5, 10,NaN].find((n) => Object.is(NaN, n));  // 返回元素NaN
// findIndex
let a = [1, 4, -5, 10].findIndex((n) => n < 0); // 返回索引2
let b = [1, 4, -5, 10,NaN].findIndex((n) => Object.is(NaN, n));  // 返回索引4

浏览器兼容(MDN):Chrome 45,Firefox 25,Opera 32, Safari 8, Edge yes,

ES6 keys()&values()&entries() 遍历键名、遍历键值、遍历键名+键值

定义:三个方法都返回一个新的 Array Iterator 对象,对象根据方法不同包含不同的值。

语法:

array.keys()
array.values()
array.entries()

参数:无。

遍历栗子(摘自ECMAScript 6 入门):

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

在for..of中如果遍历中途要退出,可以使用break退出循环。

如果不使用for...of循环,可以手动调用遍历器对象的next方法,进行遍历:

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c

entries()浏览器兼容性(MDN):Chrome 38, Firefox 28,Opera 25,Safari 7.1

keys()浏览器兼容性(MDN):Chrome 38, Firefox 28,Opera 25,Safari 8,

注意:目前只有Safari 9支持,,其他浏览器未实现,babel转码器也还未实现

字符串方法

indexOf(substr, [start])

indexOf方法搜索并(如果找到)返回字符串中搜索到的字符或子字符串的索引。如果没有找到,则返回-1。Start是一个可选参数,指定字符串中开始搜索的位置,默认值为0。

//indexOf(char/substring)
var sentence="Hi, my name is Sam!"
if (sentence.indexOf("Sam")!=-1)
alert("Sam is in there!")

lastIndexOf(substr, [start])

lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引, 如果未找到,则返回-1。 “Start”是一个可选参数,指定字符串中开始搜索的位置, 默认值为string.length-1。

//lastIndexOf(substr, [start])
var myString = 'javascript rox';
console.log(myString.lastIndexOf('r'));
//output: 11

charAt(x)

charAt(x)返回字符串中x位置的字符,下标从 0 开始。

//charAt(x)
var myString = 'jQuery FTW!!!';
console.log(myString.charAt(7));
//output: F

charCodeAt(x)

charCodeAt(x)返回字符串中x位置处字符的unicode值。

//charCodeAt(position)
var message="jquery4u"
//alert "113"
alert(message.charCodeAt(1)

concat(v1,v2..)

concat() 方法用于连接两个或多个字符串,此方法不改变现有的字符串,返回拼接后的新的字符串。

//concat(v1, v2,..)
var message="Sam"
var final=message.concat(" is a"," hopeless romantic.")
//alerts "Sam is a hopeless romantic."
alert(final)

match(regexp)

根据正则表达式在字符串中搜索匹配项。如果没有找到匹配项,则返回一个信息数组或null。

//match(regexp) //select integers only
var intRegex = /[0-9 -()+]+$/;  
 
var myNumber = '999';
var myInt = myNumber.match(intRegex);
console.log(isInt);
//output: 999
 
var myString = '999 JS Coders';
var myInt = myString.match(intRegex);
console.log(isInt);
//output: null

replace(regexp/substr, replacetext)

replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

//replace(substr, replacetext)
var myString = '999 JavaScript Coders';
console.log(myString.replace(/JavaScript/i, "jQuery"));
//output: 999 jQuery Coders
 
//replace(regexp, replacetext)
var myString = '999 JavaScript Coders';
console.log(myString.replace(new RegExp( "999", "gi" ), "The"));
//output: The JavaScript Coders

slice(start, [end])

slice() 方法可提取字符串的某个部分,返回一个新的字符串。包括字符串从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。

//slice(start, end)
var text="excellent"
text.slice(0,4) //returns "exce"
text.slice(2,4) //returns "ce"

split(delimiter, [limit])

split() 方法用于把一个字符串分割成字符串数组,返回一个字符串数组返回的数组中的字串不包括 delimiter自身。 可选的“limit”是一个整数,允许各位指定要返回的最大数组的元素个数

substr(start, [length])

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。返回一个新的字符串,包含从 start(包括 start 所指的字符) 处开始的 length 个字符。如果没有指定 length,那么返回的字符串包含从 start 到该字符串的结尾的字符。

//substr(from, to)
var text="excellent"
text.substr(0,4) //returns "exce"
text.substr(2,4) //returns "cell"

substring(from, [to])

substring() 方法用于提取字符串中介于两个指定下标之间的字符,方返回的子串包括 start 处的字符,但不包括 stop 处的字符,to 可选,如果省略该参数,那么返回的子串会一直到字符串的结尾。

//substring(from, [to])
var myString = 'javascript rox';
myString = myString.substring(0,10);
console.log(myString)
//output: javascript

toLowerCase()

toLowerCase() 方法用于把字符串转换为小写。

//toLowerCase()
var myString = 'JAVASCRIPT ROX';
myString = myString.toLowerCase();
console.log(myString)
//output: javascript rox

toUpperCase()

toUpperCase() 方法用于把字符串转换为大写。

//toUpperCase()
var myString = 'javascript rox';
myString = myString.toUpperCase();
console.log(myString)
//output: JAVASCRIPT ROX

includes()

includes() 方法用于检查字符串是否包含指定的字符串或字符。

//includes()
var mystring = "Hello, welcome to edureka";
var n = mystring.includes("edureka");
//output: True

repeat()

repeat() 构造并返回一个新字符串,该字符串包含被连接在一起的指定数量的字符串的副本。

//repeat()
var string = "Welcome to Edureka";
string.repeat(2);
//output: Welcome to Edureka Welcome to Edureka

valueOf()

valueOf() 方法返回一个String对象的原始值(primitive value),该值等同于String.prototype.toString()。

//valueOf()
var mystr = "Hello World!";
var res = mystr.valueOf();
//output: Hello World!

trim()

trim() 方法会从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符(如 LF,CR)

//trim()
var str = "     Hello Edureka!     ";
alert(str.trim());

对象方法

·

创建对象

  • 字面量创建
  • 内置对象Object创建
  • 构造函数创建
  • 工厂模式创建
  • 原型模式创建
  • 组合模式创建
  • 寄生组合模型创建

Object.is()

Object.is(value1, value2)用于判断两个值是否相等,与===大致作用相等,除了以下两点

NaN是否等于自身

Object.is(NaN,NaN) // true
console.log(NaN === NaN) //false

+0是否等于-0

Objcet.is(+0, -0) // false
console.log(+0 === -0) // true

Object.assign()

Object.assign(target, ...sources)用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,它将返回目标对象。

参数:

target:目标对象;

sources:源对象;返回值:目标对象。

(1)用来复制一个新对象,并不会影响原对象

let obj = { a: 1 };
let copy = Object.assign({}, obj);
console.log(copy);    // { a: 1 }

(2)用来合并对象属性,将源对象的所有可枚举属性,复制到目标对象。

//object.assign(obj, obj2)  obj2是源对象,obj 是目标对象,返回目标对象
 
let obj = { a: 1 };
let obj2={b:2};

console.log(Object.assign(obj,obj2)===obj);  //true,返回目标对象
console.log(obj);       //{a:1,b:2} obj的值已被更改

(3)如果目标对象和源对象中有相同的键,则属性将被源对象的属性覆盖,后面的源属性会覆盖之前的相同键的源属性。

let obj = { a: 1 };
let obj2 = {a:5,b:2};
let obj3 = {b:1,d:0};
Object.assign(obj,obj2,obj3);

console.log(obj);       // {a: 5, b: 1, d: 0}

(4)当assign只有一个对象时,则直接返回这个对象,不做任何操作;

let obj = { a: 1 }
Object.assign(obj);
console.log(obj);        //{a:1}

(5)Object.assign()方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。

let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
obj1.b.c=5;

console.log(obj2)       //{a:0,b:{c:5}};

(6)给当前的对象添加新的属性

const a = {};
Object.assign(a, { x: 3 });  // a => x:3

Object.hasOwnProperty()

hasOwnProperty()方法会返回一个布尔值,指示对象是否具有指定的属性作为自身(不继承)属性。 obj.hasOwnProperty(prop)

参数

prop:要检测的属性 字符串 名称或者 Symbol。

返回值:用来判断某个对象是否含有指定的属性的 Boolean 。

所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性;和 in 运算符不同,该方法会忽略掉那些从原型链上继承到的属性。

let obj=new Object();
    obj.a=5;
    
console.log(obj.hasOwnProperty('a’))       // true
delete obj.a;
console.log(obj.hasOwnProperty(‘a’)).     //false 

Object.defineProperty()

Object.defineProperty()用于对对象的属性做一些操作。

语法: Object.defineProperty(obj, prop, descriptor)

参数说明:

obj:必需。目标对象 
prop:必需。需定义或修改的属性的名字
descriptor:必需。目标属性所拥有的特性

针对对象到属性,我们可以给这个属性设置一些特性,属性的值是否可以被重写?比如是否只读?;是否可以被for..in或Object.keys()遍历,是否可以删除目标属性或是否可以再次修改属性的特性?

举几个例子

  1. value :属性对应的值,可以使任意类型的值,默认为undefined
let obj = {}
//第一种情况:不设置value属性
Object.defineProperty(obj,"newKey",{

});
console.log( obj.newKey );  //undefined

------------------------------

//第二种情况:设置value属性
Object.defineProperty(obj,"newKey",{
    value:"hello"
});
console.log( obj.newKey );  //hello
  1. writable :属性的值是否可以被重写(默认为false)。设置为true可以被重写;设置为false,不能被重写。
let obj = {}
//第一种情况:writable设置为false,不能重写。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false
});

//更改newKey的值
obj.newKey = "change value";
console.log( obj.newKey );  //hello
------------------------------------
//第二种情况:writable设置为true,可以重写
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true
});

//更改newKey的值
obj.newKey = "change value";
console.log( obj.newKey );  //change value
  1. enumerable :此属性是否可以被枚举(使用for...in或Object.keys())。设置为true可以被枚举;设置为false,不能被枚举。(默认为false)。
var obj = {}
//第一种情况:enumerable设置为false,不能被枚举。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false
});

//枚举对象的属性
for( var attr in obj ){
    console.log( attr );  
}
//第二种情况:enumerable设置为true,可以被枚举。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:true
});

//枚举对象的属性
for( var attr in obj ){
    console.log( attr );  //newKey
}

4.configurable :是否可以删除目标属性或是否可以再次修改属性的特性(writable, configurable, enumerable)。设置为true可以被删除或可以重新设置特性;设置为false,不能被可以被删除或不可以重新设置特性。默认为false。 这个属性起到两个作用:

目标属性是否可以使用delete删除 目标属性是否可以再次设置特性

//-----------------测试目标属性是否能被删除------------------------
var obj = {}
//第一种情况:configurable设置为false,不能被删除。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false
});
//删除属性
delete obj.newKey;
console.log( obj.newKey ); //hello

//第二种情况:configurable设置为true,可以被删除。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true
});
//删除属性
delete obj.newKey;
console.log( obj.newKey ); //undefined

//-----------------测试是否可以再次修改属性/特性------------------------
var obj = {}
//第一种情况:configurable设置为false,不能再次修改属性/特性。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false
});

//重新修改属性/特性
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true
});
console.log( obj.newKey ); //报错:Uncaught TypeError: Cannot redefine property: newKey

//第二种情况:configurable设置为true,可以再次修改属性/特性。
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true
});

//重新修改属性/特性
Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true
});
console.log( obj.newKey ); //hello

除了可以给新定义的属性设置属性/特性,也可以给已有的属性设置属性/特性.

//定义对象的时候添加的属性,是可删除、可重写、可枚举的。
var obj = {
    test:"hello"
}

//改写值
obj.test = 'change value';

console.log( obj.test ); //'change value'

Object.defineProperty(obj,"test",{
    writable:false
})


//再次改写值
obj.test = 'change value again';

console.log( obj.test ); //依然是:'change value'

提示:一旦使用Object.defineProperty给对象添加属性,那么如果不设置属性的特性,那么configurable、enumerable、writable这些值都为默认的false

var obj = {};
//定义的新属性后,这个属性的特性中configurable,enumerable,writable都为默认的值false
//这就导致了neykey这个是不能重写、不能枚举、不能再次设置特性
//
Object.defineProperty(obj,'newKey',{

});

//设置值
obj.newKey = 'hello';
console.log(obj.newKey);  //undefined

//枚举
for( var attr in obj ){
    console.log(attr);
}

Object.keys()

Object.keys()方法返回一个由一个给定对象的自身可枚举属性组成的数组,数组的属性的排列顺序和使用for..in循环遍历该对象时返回的顺序一致两者的主要区别是 一个 for-in循环还会枚举其原型链上的属性

Object.keys(obj)

参数

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

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

1)数组Array对象(返回索引值)

let arr=[1,2,3];            
Object.keys(arr)         //  ["0", "1", "2”]

(2)object对象(返回key值)

let obj = { foo: "bar", baz: 42 };
Object.keys(obj)        //  ["foo", "baz”]

(3)类数组,对象

let obj = { 0 : "a", 1 : "b", 2 : "c”};
Object.keys(obj)       // ["0", "1", "2"]

(4)类数组对象 随机key排序

let Obj = { 100: 'a’, 2: 'b’,7: 'c’ };
console.log(Object.keys(Obj));     // ['2', '7', '100’]. 返回从小到大排序后的结果

Object.values()

Object.value()方法返回一个给定对象自己的所有可枚举属性值的数组,值的顺序与使用for..in循环相同,返回的对象的value值,与Object.key()相反

例: (1)正常对象

let obj={a:1,b:2,c:3};
console.log(Object.values(obj))         //  [1, 2, 3]

(2)类数组对象

let obj ={0:'a',1:'b',2:'c'};
console.log(Object.values(obj)).       //  a,b,c

(3) key值为无序number

let obj={100:'a',10:'b',1:'1'};
console.log(Object.values(obj)).   // ["1", "b", "a"]

Object.entries()

Object.entries()返回一个数组,其元素是与直接在object上找到的可枚举属性键值对相对应的数组。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。

例: (1)当键值为正常字符时,返回的键的值为字符串

let obj1 = {a:1,b:2};
let obj2 = Object.entries(obj1);
console.log(obj2) ;       //  [ ["a":1],["b":2] ] 

(2)当键值为数字时,返回的键的值也是字符串

let obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj));     // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] 

(3)当键值的数字错乱无序时,它会将其排序后返回

let anObj = { 100: 'a', 2: 'b', 9: 'c' };
console.log(Object.entries(anObj));   //[["2","b"],["9","c"],["100","a"]]

(4)展开对象

const object1 = {
 a: 'somestring',
 b: 42
};

for (let [key, value] of Object.entries(object1)) {
 console.log(`${key}: ${value}`);
}
//     "a: somestring"
//     "b: 42"

参考文章

学习笔记——对象方法整理

【干货】js 数组详细操作方法及解析合集

JS 前20个常用字符串方法及使用方式

快速掌握JavaScript字符串方法