ES6
ES6:是一个泛指，指的是es2015以及后续的迭代版本。完善Javascript功能。
let const var
let
let 特点：
1. 块级作用域
2.不存在变量提升
3.暂时性死区：
只要块级作用域存在let命令，变量所绑定的区域，不再受外部的影响。
块级作用域
if(true){
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
for循环的计数器，就很合适使用let命令。
i只在循环体内部使用，外部使用会报错。
for (let i = 0; i < 10; i++) {
// ...
}
console.log(i);// ReferenceError: i is not defined
暂时性死区
var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}
// 上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，
// 导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。
const
const的特点：
1.声明的是一个常量，且必须赋值，且后续值不能更改【可提升优性能，不再检测该数据】
2.块级作用域--参考let
3.不存在变量提升--参考let
使用场景：
声明的常量值不会发生变化，jsvascript引擎不需要实时监测，因此const关键字声明的常量效率高。
值不需要变化，就使用const关键字。
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.
const本质
const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。
对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。
但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。
因此，将一个对象声明为常量必须非常小心。
let const var的区别
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TeoAuw85-1675264831470)(images/5.jpg)]
经典面试题
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kfIMfwIq-1675264831470)(images/2.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sXMOobiy-1675264831471)(images/3.jpg)]
结构赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
分为数组和对象
数组的结构
let [a, b, c] = [1, 2, 3];
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
对象的结构
变量必须与属性同名，才能取到正确的值
取不到值的话为undefined
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined
如果变量名与属性名不一致，必须写成下面这样
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
箭头函数
this关键字：丢失自己的this，指向箭头函数定义位置的this
function fn(){
console.log('fn内部的this',this);
return ()=>{
console.log('箭头函数内部的this',this)
}
}
fn()()//必须执行才会打印
箭头函数面试题
var age = 100
var obj = {
age:20,
say:()=>{
console.log(this,age) //打印结果：100 ----对象不能产生作用域
}
}
obj.say()
模版字符串 ${sayHello()} ``,${}
模版字符串中可以调用函数
剩余参数
将接受到的不定量的参数放置到一个数组中–剩余参数
const sum=(name,...args)=>{
console.log('接收的参数',name,args); //name:'张三', arg:[20,30]
let totalMoney=0
args.forEach(item=>{
total+=item
})
return totalMoney
}
console.log(sum('张三',10,20,30))
扩展运算符 …展开–可用于合并数组
let arr1=[1,2,3]
let arr2=[4,5,6]
let newArr = [...arr1,...arr2]
Array扩展方法
Array.from()–将伪数组转换成真数组
// 1. 伪元素 2. 可迭代对象
let json ={
'0':'11',
'1':'22',
'2':'33',
length:3
}
let arr = Array.from(json);
console.log(arr); // ["11", "22", "33"]
Array.of()
将一组值转换为数组
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
实例方法
find
findIndex
includes
find
数组实例的方法
用于找到第一个符合条件的数组成员
参数是一个回调函数，数组中的每一个成员依次执行该回调函数，找到返回该成员
未找到，返回undefined
find可以接受三个参数
[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
findIndex
与find类似
返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
includes 替代indexOf（晦涩难懂）
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true
该方法的第二个参数表示搜索的起始位置，默认为0。
如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
字符串新增方法
repeat:将原字符串重复n次
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
includes,startWith ,endsWith
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
新增对象方法
Object.is
它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。
不同之处只有两个：一是+0不等于-0，二是NaN等于自身。
Object.is('foo', 'foo')
// true
Object.is({}, {})
// false
Object.assign()方法用于对象的合并
Object.assign()方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);///
target // {a:1, b:2, c:3}
Object.keys（）方法，返回一个数组
var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"]
Object.values（）方法返回一个数组
const obj = { foo: 'bar', baz: 42 };
Object.values(obj)
// ["bar", 42]
Object.entries()方法返回一个数组
const obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]
运算符的扩展
指数运算符
链判断运算符
Null判断运算符
// ES2020 引入了一个新的 Null 判断运算符??。它的行为类似||，但是只有运算符左侧的值为null或undefined时，才会返回右侧的值。
逻辑赋值运算符
Set数据结构 Map数据结构
set是新增的数据结构,类似数组
数组中的成员具有唯一性
本身是一个构造函数,用来生成 Set 数据结构。
接受的参数：数组
const s = new Set();//创建
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
for (let i of s) {
console.log(i);
}
// 2 3 5 4
const arr= new Set(['a','b','c'])
// 去除数组的重复成员
[...new Set(array)]
//去除字符串里面的重复字符。
[...new Set('ababbc')].join('')
// "abc"
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5BJVyNSp-1675264831471)(images/1.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zxtYHS3Q-1675264831471)(images/4.jpg)]
symbol
表示独一无二的值
let s = Symbol();
typeof s
// "symbol"
函数参数默认值
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
module模块化
在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。
import * as xxx from ‘xxx’: 会将若干export导出的内容组合成一个对象返回；
import xxx from ‘xxx’：只会导出这个默认的对象作为一个对象
模块化语法
① export 命令：用于规定模块的对外接口
② import 命令：用于输入其他模块提供的功能
export暴露方式3种
- 分别暴露
// 1. 分别暴露, m1.js, m1.js
export let school = 'gc';
export function teach() {
console.log("m1--我们可以教给你很多东西！");
};
- 统一暴露
// 2. 统一暴露, m2.js
let school = 'gc';
function findJob() {
console.log("m2---我们可以帮助你找工作!!");
};
export {school, findJob};
- 默认暴露
// 3. 默认暴露, m3.js
export default {
school: 'ATLUCA',
change: function(){
console.log("m3---我们可以改变你!!");
}
}
import 的导入方式
- 通用的导入方式
// 1. 通用的导入方式
// 引入 m1.js 模块内容
import * as _m1 from "js/m1.js";
_m1.teach();
// 引入 m2.js 模块内容
import * as _m2 from "js/m2.js";
_m2.findJob();
console.log(_m2.school);
- 结构赋值方式
// 2. 解构赋值形式
// 引入 m1.js 模块内容
import {school, teach} from "js/m1.js";
console.log(school);
- 简便形式，只针对于默认暴露
// 3. 简便形式, 只针对于默认暴露
import _m3 from "js/m3.js";
console.log(_m3);
常用数组方法：
检测是否为数组：
1. arr.instanceOf Array()
2. Array.isArray(arr)
push pop
unshift shift
获取数组索引：indexOf
数组中是否包含：includes
数组转换字符串： 1. toString 2. join('-')
数组合并：concat
数组截取：slice
数组删除：splice
数组排序：sort
数组翻转：reverse
es5新增数组遍历：
forEach map some every filter reduce
将伪数组转换为真数组：Array.from
将一组值转换为数组：Array.of
Array.isArray()
includes
find:找到数组中符合特定条件的数值
arr.find(function(value, index, arr) {
return value > 9;
}) // 10
findIndex:与find类似
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
数组排序
数组翻转：
数组去重复:new Set(['1','2','5','2'])
求数组中的最大值
数组截取
将数组转换成字符串
常用字符串方法：
字符串不可变，一般指的是里面的值不可变，虽然看上去可以改变内容，但是里面的值变了，内存中新开辟了一个内存空间。
一般不要大量拼接字符串，
根据字符返回位置：indexOf
判断用户按下了哪个键：charCodeAt(index)
获取指定位置的字符：str[index]，charAt(index)
字符串截取：substr(start, length) slice(start,end) 都是索引号，但是end取不到
替换字符串：replace
字符串转换数组：split()
toUpperCase 转换大写
toLowerCase 转换小写
es6新增：
includes,startWith ,endsWith repeat
字符串练习
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zbpD7VZl-1675264831471)(images/6.jpg)]
解答：
1. str.length
2.str[0] 或 str.charAt(0)
3.str.includes() 或 str.indexOf()
4. str.replace('g',22)
5. str.substr(1,5)
*** 找出字符串中出现次数最多的字符和出现的次数 ***
// 参考--Javascript笔记 183
对象常用方法
Object.is()
Object.entries
Object.keys
Object.values
Object.assign(target, source1, source2);//用于对象的合并,浅拷贝
Object.create()
Object.defineProperty()
上述牵扯到深浅拷贝
扩展运算符：...
Object.assign:浅拷贝
for…of与for…in
for…in :用来遍历对象
for(let k in obj){
console.log(k) //键
console.log(obj[k]) //值
}
for…of
它是ES6中新增加的语法，用来循环获取一对键值对中的值
// 1.循环一个数组
let arr = ['China', 'America', 'Korea']
for(let o of arr){
console.log(o) //China,America,Korea
}
// 2.循环一个字符串
let str = 'love'
for (let o of str) {
console.log(o) // l,o,v,e
}
// 3.循环一个Map
// 4.循环一个Set
// 5.循环一个obj--报错
其他：
Promise
async/await
扩展运算符…
函数默认参数
es6数组方法
forEach map some every filter
for…of与for…in
596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
