JavaScript基础

1、javascript集合类：

1.1 Array类型有那些API，请归类和列举，部分API可结合项目中对代码讲解

1.1.1 添加数据：

let arr = [];

1.1.1.1 push

从末尾添加数据

arr.push(1, 2);  // [1, 2]

1.1.1.2 unshift

从首位添加

arr.unshift(3, 4); // [3, 4, 1, 2]

1.1.1.3 splice(start, deteleNumber, …arg)

start: 起始位置
deteleNumber：删除个数。
arg：添加参数。添加元素的位置从删除的位置开始添加

arr.splice(1, 1); // [3, 1, 2]
arr.splice(3, 0, 3, 4, 5); // [3, 1, 2, 3, 4, 5]

1.1.2 删除数据：

1.1.2.1 pop

从末尾删除数据

arr.pop(); // [3, 1, 2, 3, 4]

1.1.2.2 shift()

从首位删除

arr.shift(); // [1, 2, 3, 4]

1.1.3 排序：

1.1.3.1 reverse()

反转

arr.reverse(); // [4, 3, 2, 1]

1.1.3.2 sort()

// 升序
arr.sort((a, b) => a - b); // [1, 2, 3, 4]
// 降序
arr.sort((a, b) => b - a); // [4, 3, 2, 1]

1.1.4 连接数组：

1.1.4.1 concat()

let concatArr;
let elseArr = [5, 6];

数组连接，返回连接后的数组，不改变愿数组

concatArr = arr.concat(elseArr); // [4, 3, 2, 1, 5, 6]

1.1.4.2 join()

将元素数组连接成字符串返回，默认使用逗号连接各元素，如果使用其他符号，传参

let joinStr1 = arr.join(); // '4,3,2,1,5,6'
let joinStr2 = arr.join('key'); // '4key3key2key1key5key6'
// 常用
let joinStr3 = arr.join(''); // '432156'

1.1.5 截取：

1.1.5.1 slice(start, end)

start：起始索引
end：终止索引（不包含）
end可省略，标识到最后；start和end都可以是负数，表示从后往前截取

let sliceArr = arr.slice(1, 2); // [3]

1.1.6 转换：

1.1.6.1 toString()

使用逗号连接数组元素,返回字符串

toStringStr = arr.toString(); // '4,3,2,1'

tostring和join和toLocaleString的区别？

1.1.7 遍历：

// 回调函数
callbac(item, index){}; //item 数组中遍历到的当前值。index 当前遍历到元素在数组中的下标。
// 打印参数
function consoleParams (params) {
    console.log(params);
}
// number翻倍
function doubleNumber (number) {
    return number * 2;
}

1.1.7.1 forEach()

对数组的每个元素执行一次提供的函数callbac。

arr.forEach((item, index, curArr) => {
    // 打印item
    consoleParams(item);
    // 打印inde
    consoleParams(inde);
    curArr[index]++; // [5, 4, 3, 2]
})
console.log(arr); // [5, 4, 3, 2]

1.1.7.2 map()

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

const mapArr = arr.map((item, index, curArr) => {
    // 打印item
    consoleParams(item);
    // 打印inde
    consoleParams(index);
    curArr[index]--;
    return doubleNumber(curArr[index]);
);
console.log(arr); // [4, 3, 2, 1]
console.log(mapArr); // [8, 6, 4, 2]

1.1.7.3 some()

测试数组中的某些元素是否通过由提供的函数实现的测试。

const someBool = arr.some(item => item > 2); // true

1.1.7.4 every()

测试数组的所有元素是否都通过了指定函数的测试。

const everyBool = arr.every(item => item > 2); // false

1.1.7.5 filter()

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

const filterArr = arr.filter(item => item > 2); // [4, 3]

1.1.8 查找：

1.1.8.1 indexOf(seachValue, formIndex)

返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1;
searchValue：要查的值
fromIndex：查找开始位置

let indexOfNumber3 = arr.indexOf(1); // 3
let indexOfNumber2 = arr.indexOf(2, 3); // -1
let indexOfNumber3 = arr.indexOf(5); // -1

1.1.8.2 lastIndexOf(seachValue, formIndex)

从后往前查 返回的还是从首位开始的索引值

let lastIndexOfNumber1 = arr.lastIndexOf(1); // 3
let lastIndexOfNumber2 = arr.lastIndexOf(2, 2); // 2
let lastIndexOfNumber3 = arr.lastIndexOf(5); // -1

1.1.9 归并：

1.1.9.1 arr.reduce((total, curValue) => {}, sum)

total：回调函数返回的值，若sum有值，初始total = sum；若sum没有值，默认为arr[0]
curValue：调用回调的当前值
sum：首次调用回调函数的初始值，选填
对累加器和数组中的每个元素（从左到右）应用一个函数

const reduceNumber = arr.reduce((total, currentValue) => a + currentValue, 10); // 20

1.1.9.2 arr.reduceRight((total, curValue) => {}, sum)

total：回调函数返回的值，若sum有值，初始total = sum；若sum没有值，默认为arr[arr.length - 1]
curValue：调用回调的当前值
sum：首次调用回调函数的初始值，选填
对累加器和数组中的每个元素（从右到左）应用一个函数

const reduceRightNumber = arr.reduceRight((total, currentValue) => total + currentValue, 10); // 20

1.1.10 es6新增：

1.1.10.1 Array.form(similarArr, callbac)

similarArr：类似数组或可迭代对象
callbac：回调函数（选添）
从一个类似数组或可迭代对象中创建一个新的数组。

// similarArr为Set
let fromSet = new Set(arr);
const fromArr = Array.from(fromSet, item => 2 * item); // [8, 6, 4, 2]
// similarArr为Map
let formMap = new Map([['name', 'xsy'], ['age', 18]]);
const fromArr2 = Array.from(formMap, item => item.join(': ')); // ['name: xsy', 'age: 18']
// similarArr为字符串
let fromString = 'string';
const fromArr3 = Array.from(fromString, item => item + ',' + item); // ['s,s', 't,t', 'r,r', 'i,i', 'n,n', 'g,g']

1.1.10.2 array.fill(valeu, start, end)

value：填充值
start：起始索引
end：终止索引（不包含）
用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。
注意：若起始索引大于数组的长度，不会填充数据;若起始索引大于终止索引，也不会填充数据

arr.fill(10, 0, 2); // [10, 10, 2， 1]
arr.fill(10, 6, 8); // [10, 10, 2， 1]
arr.fill(10, 8, 6); // [10, 10, 2， 1]

1.2 Map类型对使用，可结合项目中的代码讲解；

1.2.1 Map类型介绍：

Map类型是键值对的集合。键值可以是任意类型

1.2.2 Map类型使用：

let map = new Map([['键1', '值1']]); // {'键1' => '值1'}
let map1 = new Map(); // Map(0)

1.2.3 Map的属性和方法：

1.2.3.1 size

返回Map结果的成员总数

let mapSize = map.size; // 2

1.2.3.2 set(key, value)

设置键名key对应的键值value，返回整个Map结构

map.set('键2', '值2'); // {'键1' => '值1', '键2' => '值2'}
// 若结构中键名已有，则覆盖原来的键值
map.set('键1', '新值1'); // {'键1' => ‘新值1', '键2' => '值2'}
// 若不传参数，则添加键名undefined，键值undefined
map.set(); // {'键1' => '新值1', '键2' => '值2', undefined => undefined}
// 可使用链式写法
map1.set('键1', '值1').set('键2', '值2); // {'键1' => '值1', '键2' => '值2'}

get(key)

读取键key对应的键值value，若找不到，则返回value；

const value = map.get('键1'); // ‘新值1'

has(key)

判断某个键是否在当前map对象值中，返回一个布尔值；

const mapHasBool = map.has('键1'); // true

keys()

返回一个引用的 Iterator 对象。它包含按照顺序插入 Map 对象中每个元素的key值。

const mapKeys = map.keys(); // MapIterator {'键1', '键2', undefined}

values()

返回一个新的Iterator对象。它包含按顺序插入Map对象中每个元素的value值。

const mapValues = map.values(); // MapIterator {'新值1', '值2', undefined}

formEach()

按照插入顺序依次对Map中每个键/值对执行一次给定的函数

map.forEach((value, key) => {
    if(key === '键2' ){
        console.log(key + ': ' + value); // '键2: 值2'
    }
});

delete(key)

删除某个键，删除成功返回true，失败返回false

const mapDeleteBool = map.delete('键2'); // true
console.log(map); //{'键1' => '新值1', undefined => undefined}
// 若不传参，会删除key值为undefined的键值对
let map2 = new Map();
map2.set(undefined, 'undefined').set(NaN, NaN).set(null, null); // {undefined => 'undefined', NaN => NaN, null => null}
map2.delete(); // {NaN => NaN, null => null}

clear()

移除Map结构中的所有元素

map.clear(); // Map(0)

1.3 Set类的使用

Set对象介绍：

Set对象是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的。

Set对象的使用：

let set = new Set(1, 2, 3); // {1, 2, 3}
let set1 = new Set(); // Set(0)

Set对象的属性和方法：

size

返回Set对象中元素的个数。

let setSize = set.size; // 3

add()

向一个 Set 对象的末尾添加一个指定的值。

set.add(4); // {1, 2, 3, 4}
// 若Set对象中已经有了该值，因为Set的唯一性，不会继续添加。
set.add(1); // {1, 2, 3, 4}
// 可使用链式写法
set1.add(1).add(2); // {1, 24}

has()

const setHasBool = set.has(1); // true

values()

const setValues = set.values(); // SetIterator {1, 2, 3, 4}

detele()

set.detele(4); // {1, 2, 3}
// 若不传参，会删除undefined
let set2 = new Set([undefined, NaN, null]); // {undefined, NaN, null}
set2.delete(); // {NaN, null}

clear()

set.clear(); // Set(0)

2、字符串处理：

2.1 字符串API

let strString = 'xsy';

2.1.1、String.length

获取字符串的长度

strString.length; // 3

2.1.2、String.charAt(index)

返回下表所在index的cha值

let str = strString.charAt(2); // 'y'

2.1.3、String.indexOf(string)

返回字串第一次出现的位置，没出现则返回-1

let number = strString.indexOf('y'); // 2

2.1.4、toUpperCase()

返回字符串的大写形式

let toUpperCaseStr = strString.toUpperCase(); // 'XSY'

2.1.5、String.toLowerCase()

返回字符串的小写形式

let toLowerCaseStr = strString.toLowerCase(); // 'xsy'

2.1.6、substring（startindex, endindex)

startindex：起始索引
endindex：终止索引（不包含）
返回从startindex开始到endindex结束的字串

let substringStr = strString.substring(0, 1); // 'x'

2.1.7、concat(str)

字符串拼接

let concatStr = strString.concat(': hello'); // 'xsy: hello'

2.1.8、replaceAll(oldSrt, newSrt)

替换原有字符串中的字串为目标字串

let replaceAllStr = strString.replaceAll('x', 'hello, x'); // 'hello, xsy'

2.1.9、split(str)

以指定字符串分割后返回字符串数组

let splitStr = strString.split('s'); // ['x', 'y']

2.1.10、trim()

返回字符串两边消除空格后的字符串

'   hello, xsy  '.trim(); // 'hello, xsy'