JavaScript基础==＞ES6扩展

JavaScript
阮一峰的ES6
ES6的新增的特性及扩展
前端必须掌握的JavaScript基础知识
js 数组操作大集合
es6常用方法总结
ES6大合集
JavaScript（ES6）逻辑判断条件优化

一、JS

1、数组操作

1.1、数组元素的添加

JS Array数组的方法（大全）实例详解

 push([item1 [item2 [. . . [itemN ]]]]); //  将一个或多个新元素添加到数组结尾，并返回数组新长度 

unshift([item1 [item2 [. . . [itemN ]]]]); //  将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度 

splice(insertPos, 0 ,[item1[, item2[, . . . [,itemN]]]]); // 将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回""。

const a= []
const b = []
a.push(...[1,2,3,4])等价于b.push.apply(b,[1,2,3,4])

1.2、数组元素的删除

pop();  // 移除最后一个元素并返回该元素值 

shift();  // 移除最前一个元素并返回该元素值，数组中元素自动前移 

splice(deletePos,deleteCount);  // 删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素

1.3、数组的截取和合并

slice(start, [end]);  // 以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素 

concat([item1[, item2[, . . . [,itemN]]]]);  // 将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组

1.4、数组的拷贝

slice( 0 );  // 返回数组的拷贝数组，注意是一个新的数组，不是指向 

concat();  // 返回数组的拷贝数组，注意是一个新的数组，不是指向

copyWithin()  //浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

1.5、数组元素的排序

reverse();  // 反转元素（最前的排到最后、最后的排到最前），返回数组地址 

sort();  // 对数组元素排序，返回数组地址

1.6、数组元素的字符串化

join(separator);  // 返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。 

//toLocaleString 、toString 、valueOf：可以看作是join的特殊用法，不常用

1.7、数组的遍历

Array.foreach()

1.8、数组的连接

• concat() 数组连接返回连接后的新数组

let arr = [1,2,3],
	arr1 = [4,5,6]
let result = arr.concat(arr1);
console.log(result)   //[1,2,3,4,5,6]

• join() 将数组的每个元素以指定分隔符(默认为“,”)连接成字符串

1.9、数组转换字符串

toString()

1.10、递归遍历数组

• flat() 按照指定的深度递归遍历数组返回值是遍历到的所有元素集合。

flat()

1.11、数组对象的属性（length、prototype 、constructor ）

• prototype 属性
  返回对象类型原型的引用。
  prototype 属性是 object 共有的。

• 说明：用 prototype 属性提供对象的类的一组基本功能。 对象的新实例“继承”赋予该对象原型的操作。

prototype 属性的用途：

给数组对象添加返回数组中最大元素值的方法。要完成这一点，声明一个函数，将它加入 Array.prototype， 并使用它。

• constructor 属性
  表示创建对象的函数。

1.12、获取数组最后一个元素

const arr = [1,2,3]
console.log(arr.at(-1))

2、对象操作

Object.assign.(obj, objitem)

• Object.assgin() //es6方法 将源对象合并到目标对象
• Object.assign 在 对象只有一层时为深度克隆 否则 为浅克隆

Object.assign(newObj,a,b,c)
// 第一个参数是个对象后面都是源对象也就是被合并的对象

3、字符串操作

3.1、substring(start,end) 、slice(start,end)、substr(start,length) 截取字符串

• substring(start,end)

1.substring(start,end) -> 

2.substring(start,end),end > start -> 会自动进行掉换，但是start和end必须要都为正数。如果start和end都为空返回原字符串

3.substring(start) -> 相当于[start,最后一个字符]

• slice(start,end)
  相对于substring(start,end)只有一点区别

如果是负数的话，将按照：字符串的长度和赋值相加，替换掉这个值。

1.slice(start,end) -> start大于end，不交换，返回空字符串

2.slice()如果是负数的话，将按照：字符串的长度和赋值相加，替换掉这个值。

• substr(start,length)

1.substr(start,length) -> 从start开始，包含start往后算length个字符

2.substr(start) -> [start,最后一个字符]

3.2、split()分割字符串

• 用于把一个字符串分割成字符串数组

split(separator,howmany) 
/*separator参数：必需填。字符串或正则表达式，从该参数指定的地方分割对象。 

howmany参数：可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。*/

3.3、replace()替换字符串

replace(searchValue，replaceValue) 
1.对string进行查找和替换操作，并返回一个新的字符串。

2.参数searchValue可以是一个字符串或者一个正则表达式对象。

3.如果searchValue是一个字符串，那么searchValue只会在第1次出现 的地方被替换

3.4、toLowerCase()、toUpperCase()大小写

toLowerCase()// 返回一个新的字符串，全小写
toUpperCase()// 返回一个新的字符串，全大写

3.5、concat（string…）大小写

concat（string…）//用于连接两个或者多个字符串。
一般（+）更方便
新版本有模板拼接就好一点了

3.10、indexOf(char,index) 和 lastIndexOf(char,index)

1.indexOf()//是从左往右搜索，

2.lastIndexOf()//是从右往左搜索；

3.搜索字符char，从index开始

4.它们的返回值都是搜到char所在的位置序号，如果没搜到，返回-1

3.11、charAt(index) 和 charCodeAt(index)

charAt(index) //返回index位置的字符

charCodeAt(index)返回index位置的字符Unicode码 

4、正则表达式

正则表达式是构成搜索模式的字符序列。
该搜索模式可用于文本搜索和文本替换操作。

语法
/这里写模式/这里写修饰符;

4.1、使用字符串方法

• 正则表达式常用于两个字符串方法：search() 和 replace()。
  search() 方法使用表达式来搜索匹配，然后返回匹配的位置。
  replace() 方法返回模式被替换处修改后的字符串。

4.2、修饰符（可用于大小写不敏感的更全局的搜素）

• i -------- 执行对大小写不敏感的匹配。
• g -------- 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
• m -------- 执行多行匹配。

4.3、模式

• 括号用于查找一定范围的字符串：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x|y)	查找由 | 分隔的任何选项。

• 元字符（Metacharacter）是拥有特殊含义的字符：

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

• Quantifiers 定义量词：

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

4.4、使用 RegExp 对象

RegExp 对象是带有预定义属性和方法的正则表达式对象。

4.5、使用 test()

• test() 是一个正则表达式方法。
• 它通过模式来搜索字符串，然后根据结果返回 true 或 false。

4.6、使用 exec()

• exec() 方法是一个正则表达式方法。

• 它通过指定的模式（pattern）搜索字符串，并返回已找到的文本。

• 如果未找到匹配，则返回 null。

二、ES6

let 作用域
const 常量

1、变量的解构赋值：（即解构+赋值）

1.1、数组的解构赋值

let [a, [b, c], d, e = "cc"] = [1, [2], 3, undefined];

1.2、对象的解构赋值

<!-- 对象是按照key值解构的 -->
let { fo, bar } = { fo: 'cc', bar: 'wd' } 

1.3、字符串的解构赋值：

// 字符串的解构赋值和数组的解构赋值几乎一样。
        let [a,b,c,d,e] = "hello";
        console.log(a,b,c,d,e);  //h e l l o

1.4、数值和布尔值的解构赋值

• 解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

1.5、函数参数的解构赋值（[x，y]）

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

1.6、圆括号容易导致解构歧义（所以只要有可能就不要在模式中使用圆括号）

• 不能使用圆括号的以下三种情况
  （1）变量声明语句

// 全部报错
let [(a)] = [1];

let {x: (c)} = {};
let ({x: c}) = {};
let {(x: c)} = {};
let {(x): c} = {};

let { o: ({ p: p }) } = { o: { p: 2 } };

注意！它们都是变量声明语句，模式不能使用圆括号。
（2）函数参数（也属于变量声明）

// 报错
function f([(z)]) { return z; }
// 报错
function f([z,(x)]) { return x; }

（3）赋值语句的模式

// 全部报错
({ p: a }) = { p: 42 };
([a]) = [5];

• 可以使用圆括号的情况（只有一种）
  赋值语句的非模式部分，可以使用圆括号。

[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确

1.7、变量的解构赋值用途

（1）交换变量的值
（2）从函数返回多个值
（3）函数参数的定义
（4）提取 JSON 数据
（5）函数参数的默认值
（6）遍历 Map 结构
（7）输入模块的指定方法

2、运算符

2.1对象扩展运算符

<!-- 参数不确定个数时候 -->
function cc(...arg) {
}
let arr2 = [...arr1];

2.2rest扩展运算符 rest译为剩余

3、字符串扩展 （拼接字符串）

模板字符串

模板字符串
let cc = "AA"
let blog = `字符串拼接 ${cc}`
console.log(blog) //字符串拼接 AA

4、字符串的新增方法

1. String.fromCodePoint()
2. String.raw()
3. 实例方法：codePointAt()
4. 实例方法：normalize()
5. 实例方法：includes(), startsWith(), endsWith()
6. 实例方法：repeat()
7. 实例方法：padStart()，padEnd()
8. 实例方法：trimStart()，trimEnd()
9. 实例方法：matchAll()
10. 实例方法：replaceAll()

4.1支持html标签${aa}

let aa = 'json'
let blog = `<b>非常高兴你能看到这篇文章</b>，我是你的老朋友${aa}。<br/>这节课我们学习字符串模版。`;
document.write(blog);

4.2对运算的支持${a+b}

let a=1;
let b=2;
let c=`AA${a+b}`;
document.write(c);

4.3字符串查找indexOf(),includes()

console.log(blog.indexOf(cc)); //ES5的方法是 返回的是6
console.log(blog.includes(cc)) //直接返回true

4.4判断开头startsWith()、结尾endsWith()是否存在：

blog.startsWith(cc);

blog.endsWith(cc);

4.5复制字符串repeat()

document.write('cc,'.repeat(3));

4.11、at(index)

5、数值的扩展

1. 二进制和八进制表示法
2. Number.isFinite(), Number.isNaN()
3. Number.parseInt(), Number.parseFloat()
4. Number.isInteger()
5. Number.EPSILON
6. 安全整数和 Number.isSafeInteger()
7. Math 对象的扩展
8. 指数运算符
9. BigInt 数据类型

5.1、数字判断和转换

• 使用Number.isFinite( )来进行数字验证，只要是数字，不论是浮点型还是整形都会返回true，其他时候会返回false。

• Number.isNaN(NaN)验证

• 判断是否为整数Number.isInteger(xx)

• 整数转换Number.parseInt(xxx)和浮点型转换Number.parseFloat(xxx)

• 最大Number.MAX_SAFE_INTEGER、最小Number.MIN_SAFE_INTEGER安全整数

• 安全整数判断isSafeInteger( )

6、函数的扩展

1. 函数参数的默认值
2. rest 参数
3. 严格模式
4. name 属性
5. 箭头函数
6. 尾调用优化
7. 函数参数的尾逗号
8. Function.prototype.toString()
9. catch 命令的参数省略

7、数组的扩展

1. 扩展运算符
2. Array.from()
3. Array.of()
4. 数组实例的 copyWithin()
5. 数组实例的 find() 和 findIndex()
6. 数组实例的 fill()
7. 数组实例的 entries()，keys() 和 values()
8. 数组实例的 flat()，flatMap()
9. 数组的空位
10. Array.prototype.sort() 的排序稳定性

7.1、扩展运算符（...）

7.2、Array.from()

7.3、Array.of()

7.3、数组实例的 copyWithin()

7.5、find()和findIndex()实例方法：

• 什么是实例方法：是已经实例出来对象的方法，不需要调用Array对象

7.6、fill( )实例方法：

<!-- 数组填充 它接收三个参数，第一个参数是填充的变量，第二个是开始填充的位置，第三个是填充到的位置 -->
var arr4 = [0, 1, 2, 3, 4, 5, 6];
arr4.fill('cc', 1, 2);
document.write(arr4) //输出 [0, "cc", 2, 3, 4, 5, 6]

7.7、数组实例的 entries()，keys() 和 values()

1.使用keys()遍历。

keys()返回的是数组元素索引号的遍历器。

const arr1 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k']
for (let index of arr1.keys()) {
  console.log(index);// 结果是每个数组元素的index。
}

2.使用values()遍历。

values()返回的是数组元素值的遍历器。

for (let val of  arr1.values()) {
  console.log(val);// 每个数组元素的值
}

3.使用entries()遍历。

配合解构使用，可以拿到元素的index和value。

for (let [index, val] of arr1.entries()) {
  console.log(index, val);// 索引和值
}

4.使用Iterator.next()遍历。

基于entries()返回的遍历器，调用遍历器的next()的方法可以获取每一个元素的访问入口，该入口有一个done属性可以表明是否便利结束。通过入口可以拿到value属性，其就是元素的索引和值的数组。

let arrEntries=arr1.entries();
let entry=arrEntries.next();
while(!entry.done){
  console.log(entry.value);// 这个value中是索引和值
  entry=arrEntries.next();
}

ES6 entries()，keys()，values() 数组遍历

7.8、数组实例的 flat()，flatMap()

7.9、数组的空位

7.10、Array.prototype.sort() 的排序稳定性

7.11、JSON数组格式转换

<!-- json数组格式 -->
let  json = {
    '0': 'jspang',
    '1': '技术胖',
    '2': '大胖逼逼叨',
    length:3
}
let arr = Array.from(json);//json字符串转换为数组

<!-- 数组转换为字符串 -->
arr.toString() 
arr.join('|') //改变数组或者字符串的分隔符

7.12、字符串转数组

<!-- 字符串转数组 -->
let arr1 = Array.of(3, 4, 5, 6);

7.13、map和reduce方法

• map方法的作用不难理解，即“映射”，也就是原数组被“映射”成对应新数组。

// map  自带的循环	（return的作用）并且会把处理的值回填到map
var newarr = [1,2,3,4,5]
var newarr2 = arr .map(ele=> ele * 2
);
console. log(newarr2);

//return在没有逻辑体的时候是能删除的（即传入ele，返回ele不算逻辑体）
----------------------------------------------
callback需要有return值，如果没有，就像下面这样：
var data = [1, 2, 3, 4];
var arrayOfSquares = data.map(function() {});
 
arrayOfSquares.forEach(console.log);
数组所有项都被映射成了undefined：

//map操作对象
var users = [
  {name: "张XX", "email": "zhang@email.com"},
  {name: "江XX",   "email": "jiang@email.com"},
  {name: "李XX",  "email": "li@email.com"}
];
 
var emails = users.map(function (user) { return user.email; });
 
console.log(emails.join(",")); // zhang@email.com, jiang@email.com, li@email.com

• reduce() 方法对数组中的每个元素执行一个由我们提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
• 即数列的累加
  ES6中的数组reduce()方法详解

---

/* 
      forEach((item, index, arr) => {}) //遍历获取设置值
      map	//统计并把返回值放到新数组
      filter // 过滤获取
      some //根据条件判定其中的一部分
      every	//根据条件判定全部
      reduce	//数列累加之和
      find	//查找
      findIndex	//查找下标

      
      大家经常使用的可能有这些
        map filter some find
    */

高级数组方法去重，查找（新人不得不看）

8、Promise 对象

1. Promise 的含义
2. 基本用法
3. Promise.prototype.then()
4. Promise.prototype.catch()
5. Promise.prototype.finally()
6. Promise.all()
7. Promise.race()
8. Promise.allSettled()
9. Promise.any()
10. Promise.resolve()
11. Promise.reject()
12. 应用
13. Promise.try()

9、async和aiwit

9.1、什么是async和aiwit

• async用于声明一个函数是异步的。
• await用于等待异步完成，并且 await只能在async函数中使用 。

9.2、async语法

（1）async函数返回一个promise
aysnc函数内部设置的return返回的值，会自动成为then方法回调函数的参数。 要想使用async函数的回调then，async必须有个return，不然回调的是“undefined”。 。

（2）async函数内部报错了，返回的promise对象会变成reject状态，抛出的错误对象会被catch方法回调函数接收到。

（3）async函数返回的promise对象，必须等到内部所有的await命令的promise对象执行完毕后，才会发生状态改变。也就是说async函数内部所有的异步操作执行完毕，才会执行其then方法指定的回调函数。

9.3、await语法

（1）正常情况下，await命令后是一个promise对象，如果不是，会被自动转成一个立即resolve的promise对象。也就是说await可以是任何类型的。

（2）awiat命令后面的promise对象如果报错了，返回reject状态，则reject参数会自动被catch方法的回调函数接收，即使不用return。
只要有一个await语句后的promise变成了reject，那么整个async函数都会中断。

（3）多个await命令，可以统一放在try…catch结构中

（4）await命令后面是promise对象，运行结果可能是rejected，所以最好把await命令放到try…catch结构中。

（5）多个await命令后面的异步操作，如果不存在依赖关系，是独立的，就会按照顺序进行执行。（这样比较耗时间，最好可以写成同时触发）
（6）多个独立await同时执行

// 写法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
 
// 写法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;
 
//会同时执行，这样比较省时间

10、对象的简写规则

• 简写对象

如果key和value相同，那么直接写一个就可以
如果:value是函数，可以把:function全部去掉，只剩下()

• 箭头函数的简写方式

省略（），如果有且只有一个参数的时候可以省略
省略（）和{}，如果有且仅有一条语句时，并且是return语句