没事的时候学习一下吧。欢迎加我技术交流QQ群 ：811956471
该笔记会持续更新..........
特别注意：JavaScript 引擎会将 "{} "理解成一个代码块，千万不要将大括号写在行首；
有时候不得不写在首行，变通的做法是 ：（{}）
一 . let 和 const 命令：
let 总结：不存在变量提升，不允许重复声明，相同作用域不存在变量覆盖，具有块级作用域特性，只在let命令所在的代码块内有效。
let 声明的变量不属于window
eg:function f1() {let n = 5;if (true) {let n = 10;}console.log(n); // 5}
const总结：const声明一个只读的常量。一旦声明，常量的值就不能改变，旦声明变量，就必须立即初始化，不能留到以后赋值。
二、变量的解构赋值
（一）数组的解构赋值
1. 可以这样给变量赋值：let [a, b, c] = [1, 2, 3]; console.log(a)//1
2. ... 运算符 let [a,...b] = [1, 2, 3];console.log(a)//1;console.log(b)//[2,3]
3. 可以给默认值：let [a=1,b]=[,2] console.log(a)//1 console.log(b)//2
4.默认值可以是一个表达式、可以是引用解构赋值的其他变量
（给默认值需要注意：如果有默认值且赋值是 null、undefined时：则赋值无效，还是默认值；原因：ES6 内部使用严格相等运算符（===），判断一个位 置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效）
（二）对象的解构赋值
1. let{foo,bar}={foo:'aaa',bar:'bbb'}; foo // "aaa" ; bar // "bbb" //对象的属性没有次序，变量必须与属性同名，才能取到正确的值
2.如果变量名和属性名不一致：let { first: f, last: l } = { first: 'hello', last: 'world' }; console.log(f) //hello console.log(l)//world
3.对象解构实际是简写：let{foo:baz}={foo:'aaa',bar:'bbb'};console.log(foo) //undefined console.log(baz) //aaa ; foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。
（三）字符串的解构赋值
1.let [a,b,...c]="hellow" ; console.log(a) //h ; console.log(b) //e ; console.log(c) //剩余的
2. 可以将length属性解构赋值：let {length:lng}="hellow" //console.log(lng) // 6
（四）解构赋值的其他用途
1.交换变量的值：let x=1;let y=2; [x,y]=[y,x]
2.从函数返回多个值：
(1)返回一个数组: function re_fn(){ return [1,2,3] } let [a,b,c]=re_fn(); console.log(a)
(1)返回一个对象: function re_fn(){ return {a:1,b:2,c:3} } let {a,b,c}=re_fn(); console.log(a)
三、字符串的扩展
（一）字符串的遍历器接口
1. for....of 语法：for (let str of 'abc') { console.log(str) // a b c } ;
2.模板字符串语法：之接动态创建html 只能用 + 配合引号去使用 ，现在：`模板${变量}内容` 支持换行 模板字符串中嵌入变量，需要将变量名写在${}之中；这个变量可以是一个函数
四、字符串新增方法
1、includes(), startsWith(), endsWith()
includes()：返回布尔值，表示是否找到了参数字符串。startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
let str ="hellow";
console.log( str.includes("p") )// false str中是否包含 p字符串
console.log( str.startsWith("h") )// true str中是否是h开头的
console.log( str.endsWith("w") )// true str中是否是h结尾的
//以上方法 都支持第二个参数:即 查找匹配的位置
//endsWith的行为与其他两个方法有所不同,其他查找下标从0开始 ,endsWith从1开始
console.log( str.startsWith("o",4) ) //表示从第5位开始搜索
console.log( str.endsWith("o",5) ) //表示从第5位开始搜索
2、repeat 将一个字符串重复N 次
'x'.repeat(3) // "xxx" ; 'hello'.repeat(2) // "hellohello" ; 'na'.repeat(0) // ""
3、padStart()，padEnd()
字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。
console.log(str.padStart(4,"abc") )//astr
console.log(str.padStart(10,"abc") )//abcabcastr
console.log(str.padEnd(4,"abc") )//stra
4、trimStart()，trimEnd()
trimStart()和trimEnd()这两个方法。它们的行为与trim()一致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串
五、数值的扩展
1、Number.isNaN()
用来检查一个值是否为NaN。 如果参数类型不是NaN，Number.isNaN一律返回false。
注意：console.log(Number.isNaN("asds"))//新方法 false ；console.log(isNaN("asds"))// 传统方法 true，个人理解：Number.isNaN 在判断的时候 属于绝对判断 即 ===关系 而 isNaN方法是 ==关系 存在隐式转换number后再判断类型的一个过程
2、Number.isInteger() 用来判断一个数值是否为整数。
注意： console.log(Number.isInteger(3.0000000000000002) )// true 数的精度达到了小数点后16个位，导致最后的那个2被丢弃。也就是说小数点15后以后的会自动舍弃掉；对数据精度的要求较高，不建议使用Number.isInteger()判断一个数值是否为整数。
3、Math.trunc方法用于去除一个数的小数部分，返回整数部分。 同：parseInt
六、箭头函数
注意：箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。只有多去使用才能发现它的好处哦
下面是几个基础例子: 原文地址
var elements = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium' ];
elements.map(function(element) { return element.length; }); // 返回数组：[8, 6, 7, 9]
// 上面的普通函数可以改写成如下的箭头函数 elements.map((element) => { return element.length; }); // [8, 6, 7, 9]
// 当箭头函数只有一个参数时，可以省略参数的圆括号 elements.map(element => { return element.length; }); // [8, 6, 7, 9]
// 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号 elements.map(element => element.length); // [8, 6, 7, 9]
// 在这个例子中，因为我们只需要 `length` 属性，所以可以使用参数解构 // 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称，而 `lengthFooBArX` 则只是个变量名， // 可以替换成任意合法的变量名 elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]
七、数组的扩展
(一)、扩展运算符 ...
1、序列化数组： console.log(...[1,2,3]) // 1 2 3
2、用于函数调用：
function add(x, y) {return x + y;}const numbers = [4, 38];console.log(add(...numbers)) // 42
3.代替 apply方法：
（1）.将数组转为函数的参数：
// ES5 的写法function f(x, y, z) { // ...}
var args = [0, 1, 2];
f.apply(null, args);
// ES6的写法
function f(x, y, z) { // ...}let args = [0, 1, 2];f(...args);
（2）.应用Math.max方法，简化求出一个数组最大元素的写法：
es5 方法： console.log(Math.max.apply(null, [14, 3, 77])) // 77
es6方法：console.log(Math.max(14, 3, 77)) //77 ;或者：Math.max(...[14, 3, 77])
（3）.将一个数组添加到另一个数组的末尾：
let arr1 = [0, 1, 2];let arr2 = [3, 4, 5]; arr1.push(...arr2);
4.扩展运算符在数组中的运用：
（1）复制数组：const a1 = [1, 2]; const a2 = [...a1];
（2）合并数组：onst arr1 = ['a', 'b'];const arr2 = ['c']; [...arr1, ...arr2] //["a", "b", "c"]
(二)、Array.from() 将一个类数组对象或者可遍历对象转换成一个真正的数组、将字符串转换成数组
1、 要将一个类数组对象转换为一个真正的数组，必须具备以下条件：
（1）该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。
（2）该类数组对象的属性名必须为数值型或字符串型的数字
let array = { 0: 'name', 1: 'age', 2: 'sex', 3: ['user1','user2','user3'], 'length': 4}
let arr = Array.from(array )console.log(arr) // ['name','age','sex',['user1','user2','user3']]
如果对象名不是数字类型：
let array = { 'name': 'name', 'age': 'age', 'sex': 'sex', 'length': 4}
let arr = Array.from(array )console.log(arr) // [ undefined, undefined, undefined ]
2.将字符串转换为数组：
let str = 'world!'; console.log(Array.from(str)) // ["w", "o", "r", "l", "d", "!"]
(三)、Array.of() 用于将一组值，转换为数组
console.log(Array.of(3, 11, 8)) // [3, 11, 8] ; console.log(Array.of(3, 8).length) // 2
(四)、 find() 和 findIndex()
（1）、find:let arr = [1, 4, -5, 10] let eq= arr.find((n) =>n>0) console.log(eq) //1
该方法用于从数组第一位开始查找符合回调函数条件的成员，未找到时返回undefined
回调函数有三个参数。value：当前的数组元素。index：当前索引值。arr：被查找的数组
（2）、findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
（五） fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去
['a', 'b', 'c'].fill(7) // [7, 7, 7] new Array(3).fill(7) // [7, 7, 7]
可以接受三个参数：
['a', 'b', 'c','e','d'].fill("要填充的内容","填充开始位置下标从0开始","填充结束位置下标从1开始")
感觉有点像：splice(2,1,'aa'); 第几处开始 替换个数 替换内容
(六）数组实例的 entries()，keys() 和 values() 只能用于 for( item of 数组.方法){}
eg: let arr = ["a", "b", "c"];
1.entries（）方法循环数组的每个键值对
for (let item of arr.entries()) { console.log(item)//[0, "a"] [1, "b"] [2, "c"] }
2.keys（）方法循环数组的每个键
for (let item of arr.keys()) { console.log(item)//0,1,2 }
3.values（）方法循环数组的每个值 也是默认情况
for (let item of arr.values()) { console.log(item)//a,b,c }
(七）数组实例的 includes() 返回布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似 判断是否包含给定值时 是绝对等于关系，即值的类型必须一样才返回true
eg: let arr = ["a", "b", "c",0];
console.log(arr.includes(88)) //false
console.log(arr.includes("0")) //false
console.log(arr.includes(0)) //true 类型必须一样才返回true
console.log(arr.includes("a")) //true
注意：该方法还有第二个参数：arr.includes("a",开始查找的位置--从0开始)
（八）数组实例的 flat()，flatMap()
（1）flat() 方法将多维数组变成一维数组 ，flat(参数) ，该参数表示展开数组层级数量 默认1
（2）flatMap() eg: [2, 3, 4].flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8]
八、对象的扩展
（一）对象的简洁表达
（1）、属性的简写
const foo='bar';
const baz={foo}; console.log(baz)// {foo: "bar"} 等同于const baz={foo:foo};
（2）、对象内部函数的简写（省略 :function 这部分）
const o={method(){return"Hello!";}}; 同 ：const o={method:function(){return"Hello!";}};
用于函数的返回值:
let birth = '2000/01/01';
const Person = {
name: '张三',
birth,
hello() {
return "我的名字是", this.name
}
};
console.log(Person.hello())//张三
（二）属性表达式
let obj={};
let b="B";
obj['a' + b] = 123;
console.log(obj)
es6 支持属性名是一个表达式，动态参数值
九、对象新增方法
1、Object.is() 比较两个值是否相等：类似于 === 绝对等于的关系；
2、合并对象：如果合并对象中有属性名相同的、则后者会覆盖前者
let obj1 = { a: "a" } ; let obj2 = { b: "B", a: "A" } console.log(Object.assign(obj1,obj2))//Object {a: "A", b: "B"}
3、遍历对象方法：Object.keys()，Object.values()，Object.entries() 用法同数组方法
（1）、Object.keys()，遍历对象的键名，返回一个数组：
var obja = { foo: 'bar', baz: 42 };
console.log("keys:", Object.keys(obja)) //keys: (2) ["foo", "baz"]
（2）、Object.values()，遍历对象的键值，返回一个数组：
var obja = { foo: 'bar', baz: 42 };
console.log("values:", Object.values(obja))//values: (2) ["bar", 42]
注意：如果键名是数值，遍历后的键值是按照 键名从小到大的顺序排列
var obja = { "3": 'bar', "5": 42, "1": 410 };
console.log("values:", Object.values(obja)) // [410, "bar", 42]
（3）、Object.entries()，遍历对象的键值对，返回一个数组：
var obja = { foo: 'bar', baz: 42 };
console.log("entries:", Object.entries(obja)) //entries: 0: (2) ["foo", "bar"] 1: (2) ["baz", 42]
（4）、还可以用 for...of..语法进行遍历对象
let obj = { a: 1, b: 2, c: 3 };
遍历键名：for (let key of Object.keys(obj)) { console.log(key); // 'a', 'b', 'c' }
遍历键值：for (let values of Object.values(obj)) { console.log(values); // 1, 2, 3 }
遍历键值对：for (let entries of Object.entries(obj)) { console.log(entries); // ['a', 1], ['b', 2], ['c', 3] }
（5）、Object.fromEntries() Object.fromEntries()方法是Object.entries()的逆操作，用于将一个键值对数组转为对象
let arr1 = ['foo', 'bar']; let arr2 = ['baz', 42];
let arr = Object.fromEntries([ arr1, arr2 ]) console.log(arr)//{foo: "bar", baz: 42}
十、Set 和 Map 数据结构
（一）Set
注意：set 是一种全新的数据结构 类似数组缺不是数组 可用Array.from 转换成数组；Set 结构的键名就是键值（两者是同一个值）
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items); console.log(array)
1、可以用来数组去重：返回一个对象和一个数组
let arr=[1,1,2,3,4,3] let s=new Set(arr) console.log(s)//1, 2, 3, 4
2、用于对字符串的去重：返回一个对象和一个数组
let srt="aabacadd" let s=new Set(srt) console.log(Array.from(s))//["a", "b", "c","d"]
3、add(value)：添加某个值，返回 Set 结构本身; delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。has(value)：返回一个布尔值，表示该值是否为Set的成员。clear()：清除所有成员，没有返回值。
let srt = "aabc"; let s = new Set(srt);
console.log(s.add("a"). add("d") )//"a", "b", "c" , "d"
console.log(s.add("d"))//"a", "b", "c", "d"
console.log(s.has("m"))//false
console.log(s.has("a"))//true
console.log(s.delete("a"))//true
console.log(s.clear())//undefined
4、可以用 keys()，values()，entries() 进行遍历
由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致
5、可以用 forEach()遍历
let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value)) // 1 : 1 4 : 4 9 : 9
6、Set 可以很容易地实现并集（Union）、交集（Intersect）和差集（Difference）
let a = new Set([1, 2, 3]); let b = new Set([4, 3, 2]);
// 并集
let union = new Set([...a, ...b]);console.log(union)
// 交集
let intersect = new Set([...a].filter(x => b.has(x)));console.log(intersect)
// 差集
let difference = new Set([...a].filter(x => !b.has(x))); console.log(difference)
（一）Map:解决传统对象中只能用字符串作为键名的问题；转换数组可用：...和Array.from()，可以转换成数组、对象、json
set(key, value) 添加 ; get(key)获取；has(key);判断里面是否有某值，返回布尔值；size：返回数据长度；delete() 删除某个值；lear方法清除所有成员，没有返回值
const m = new Map(); const o = { p: 'Hello World' };
首先定义一个 m为Mpa()对象类型和一个传统的o对象,接着：
m.set(o, 'content')
console.log(m) // key: {p: "Hello World"} value: "content"
也可以set进去一个数组：
const m = new Map(); const o = [ ['name', '张三'], ['title', 'Author'] ] m.set(o) console.log(m)
1.前面会覆盖后面:键名不可以重复，值可以重复
const map = new Map();
map.set(1,'aaa').set(2,'bbb').set(2,'ccc');
console.log(map) //0: {1 => "aaa"} 1: {2 => "ccc"}
网友评论