11- set map 对象 数组 字符串 的常用方法整理

92 阅读4分钟

一、字符串

1、slice

slice(start,end) 提取字符串的一部分,并返回一个新字符串

'JIRONGLIANG'.slice(2,3)   								// R

2、substr

substr(start,length) 提取字符串的一部分,并返回一个新字符串

'JIRONGLIANG'.substr(2,4)                // RONG

3、split

split(separator, limit) 按照分隔符讲字符串拆分为数组

'J,I,R,O,N,G,L,I,A,N,G'.split(',',3) 			// ['J', 'I', 'R']

4、replace

replace(regexp|substr,newSubstr|function)用来替换字符串中的子串

'JIRONGLIANG'.replace('LIANG','HAHA')			// JIRONGHAHA

"JIRONGLIANG".replace(/N/g,(match)=>{
    console.log(match) // 两次N
    return "H"
})																				// JIROHGLIAHG

5、chartAt

chartAt(index) 返回指定位置的字符

'JIRONGLIANG'.charAt(0)    								// J

6、indexOf

`indexOf('LI') 方法返回字符串中指定文本首次出现的索引(如果没有找到该子字符串,则返回 -1)

'JIRONGLIANG'.indexOf('JI') 							// 0

7、includes

includes('LI')返回布尔值,表示是否找到了参数字符串

'JIRONGLIANG'.includes('LI')             	// true

8、遍历器接口

ES6 为字符串添加了遍历器接口,使得字符串可以由 for…of 循环遍历

for (let codePoint of 'foo') {
    console.log(codePoint)
}
// "f"
// "o"
// "o"

二、数组(容易搞混的方法)

1、slice

slice(start,end)

  • 返回创建新数组。
  • 它不会从源数组中删除任何元素。
["Banana", "Orange", "Lemon", "Apple", "Mango"].slice(1)
// ['Orange', 'Lemon', 'Apple', 'Mango']

2、splice

splice(位置 , 删除几个 , 其余参数添加什么就写几个)。

  • 会改变元素组
  • 返回被删除的元素
["Banana", "Orange", "Apple", "Mango"].splice(2, 2, "Lemon", "Kiwi"); 
// ['Banana', 'Orange', 'Lemon', 'Kiwi']

3、join

join(seperator) 把数组转成字符串。

['Banana', 'Orange', 'Lemon', 'Kiwi'].join('')
// 'BananaOrangeLemonKiwi'

4、Arrary.from

将伪数组转化成真数组

// NodeList 对象
let ps = document.querySelectorAll('p')
Array.from(ps).forEach(function (p) { // 只有转换为真正的数组才能使用数组方法
  console.log(p)
})

// arguments对象
function foo () {
  var args = Array.from(arguments)
  // ...
}

5、find() 和 findIndex()

找出数组中第一个符合条件的参数

// 找出数组中第一个大于 9 的成员
// 回调函数可接受 3 个参数:当前的值,当前的位置,原数组
[1, 5, 10, 15].find(function (value, index, arr) {
  return value > 9
}) // 10

[1, 5, 10, 15].findIndex(function (value, index, arr) {
  return value > 9
}) // 2

// 这两个方法可以发现 NaN,弥补了数组的 IndexOf 方法的不足
[NaN].indexOf(NaN) // -1
[NaN].findIndex(y => Object.is(NaN, y)) // 0

6、flat()

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 作为深度,展开任意深度的嵌套数组
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]

7、迭代器(数组和字符串都有 对象没有)

三、对象

1、 Object.keys(对象)

得到所有的健

var obj = {a:'html',b:'css',c:'js'}

var keyValue = Object.keys(obj)

console.log(keyValue)    //['a','b','c']

2、 Object.values(对象)

得到所有的值

let arr = {name:'张三',age:{a:'list1',b:'list2'}}

var keyValue = Object.keys(arr).map(key => arr[key])

console.log(keyValue);  //['张三',{a:'list1',b:'list2'}]

3、Object.entries(obj)

const school = {
    name: '张三',
    age: 21,
    subject: ['数据结构','安卓','数据库']
}
console.log(Object.entries(school));

// [['name', '张三'],['age', 21],['subject', Array(3)]]

四、Map

可以存储任意类型的健值对

Map方法 描述
Map()构造函数
set(key, value)设置 key 所对应的键值,然后返回整个 Map 结构。如果 key 已经有值,则键值被更新,否则新生成该键
get(key)读取 key 对应的键值,若未找到 key 则返回 undefined
has(key) 返回一个布尔值表示某个键是否存在于 Map 结构中
delete(key)删除某个键,返回 true;删除失败返回 false
clear()清除所有成员,没有返回值
values()返回键值的遍历器
keys()返回键名的遍历器
entries()返回键值对的遍历器
forEach()使用回调函数遍历每个成员,用法:map.forEach(function (value, key, map){ })
size这个是属性 返回元素计数。

五、Set

set类似于数组 set中的值是唯一的

Set方法描述
Set()构造函数,可以接受一个数组,或者具有 iterable 接口的其他数据结构作为参数
add(value)添加某个值,返回 Set 结构本身
delete(value)删除某个值,返回布尔值,表示是否删除成功
has(value)返回布尔值,表示参数是否为 Set 的成员
clear()清除所有成员,没有返回值
keys()返回键名的遍历器,用法:for (let item of set.keys())
values()返回键值的遍历器
entries()返回键值对的遍历器
forEach()使用回调函数遍历每个成员
size这个是属性 返回元素计数。