总结|ES6知识点大总结总结|ES6知识点总结

-----------------------------------小知识--------------------------
先预习下热热身-------------------------------------------------
给变量赋值 var a=110.
解构赋值：把数组或对象中的数据拿出来赋给变量。
解构赋值需要保证等号两侧有相同的解构
ES6的写法可以通过bable（http://www.babeljs.cn/）转换成ES5的写法.
一数组的解构赋值 1）数组解构赋值的基本使用（把数组中某些元素拿出来赋给某些变量）

例子：let [a,s,c]=[1,2,3]; //a,b,c是三个变量
consol..log(a,b,c)//1,2,3

ES5的写法（“use strict” ； var a=1,b=2,c=3; ）
2)数组的解构赋值=两侧的数据不相等的情况

let [a,b,c,d] = [1,2,3];
console.log(a,b,c)//1,2,3给了a,b,c
console.log(d) //d没有赋值就是 undefined
let [a,b] = [1,2,3];
console.log(a,b) // a,b,从原数组中去了两数，第一个和第二个就是打印出1,2
let [a, ,b] = [1,2,3];
console.log(a,b) // 打印出第一个和第三个数，不需要第二个弄个可以跳过去打印出1,3

3）没赋值情况下，设置默认值，

let [a,b,c,d = 110] = [1,2,3];
console.log(a,b,c,d)//再解构赋值时给里面的d没有赋值，就直接设置了默认值，打印出来的是1，2，3，110
如果赋值了，设置了默认值，就不会使用默认值了！
// let [a,b=110] = [1,2,3];
// console.log(a,b) // 在设置默认值时已经给a,b,赋值1,2了，所以给b设置的默认值无效，直接忽略。

4）关于嵌套解构赋值

let [a,b,c,[m,n,k]]=[1,2,3,["a","b","c"]]
console.log(m)//a
console.log(n)//b
console.log(k)//c
//这里普及一点小知识，拓展运算符如果在这里使用只能放在最后一位，因为它会取当前这一位一致到最后作为一个数组

二对象的解构赋值（键和名一致可以简写） 1）对象的解构赋值的基本使用：相当于把对象中的属性值拿出来，付给某些变量

例子：let wc={name:"wangcai",age:100}
let {name:name,age:age}=wc;
console.log(name,age)//这里的name和age是指键值对的值

2）对象的解构赋值一定要保持声明的变量和对象中的键同名，就是按属性名的一一对应关系来进行赋值。

例子 let wc = {name:"wangcai",age:100};
let {name1,age1} = wc;
console.log(name1,age1); // 这里不同名，找不到就undefined undefined

3）对象是属性的无序集合，只需要保证变量的名和对象的键同名就OK。

例子：let wc = {name:"wangcai",age:100};
let {age, name} = wc;
console.log(name,age); //只要保证名字对应正确，顺序无所谓。
键和值相同时，可以省略属性值。{}里面只能放键值对。

4）对于对象的解构赋值，必须保证键一样，值对应的可以和键不一样
例子：

let wc = {name:"wangcai",age:100};
let {name:xx,age:yy} = wc;
console.log(name,age)//键一样，这里不能打印出键， ReferenceError: age is not defined
console.log(xx,yy); //永远记住这里打印的是值不是键。wangcai 100

例子二：

let wc = {name:"wangcai",age:100};
let {xx:name,yy:age} = wc; //不能打印出键。记住打印的是值。
console.log(xx,yy); //这个键对应不一致，直接报错ReferenceError: xx is not defined
注意：值的名字可以随便起，打印出来的是值

5）默认值
如果有赋值操作了，就不会要默认值，直接忽略

let wc = {name:"wangcai",age:100};
let {name,age=110} = wc;
console.log(name,age)//wangcai100

在没有值的情况下才可以给属性设置默认值。

let wc = {name:"wangcai",age:100};
let {name,age,age1=110} = wc; //我们没有给age1进行赋值操作，所以应该打印出默认值
console.log(name,age,age1)//wangcai100 110

三解构赋值的补充与应用 1)拓展运算符
...叫拓展运算符，把剩下的内容存储到z中，z是一个数组，这个运算符只能出现在最后

let [x,y,...z] = ["a","b","c","d","e","f"]
console.log(x)//把a赋值给x
console.log(y)//把b赋值给y
console.log(z)//把剩下的组成一个单独的数组给z，这个数组只能出现在最后

2）忽略一些数据，来得到我们想要的数据

[1,2,[3,4,[5]]]只想得到5这个值，怎么写？
let[, ,[,,[a]]]=[1,2,[3,4,[5]]]
console.log(a)

3）组合使用数组和对象解构赋值

let obj = {
name:"wangcai",
age:110,
hobby:["篮球","足球","双色球"]
}//想拿到双色球怎么写？
let{hobby:[, ,a]};
console.log(a)

4）解构赋值补充，快速得到一个对象的方法
Math 里面有 max min abs

let {max ,min, abs}=Math
let {max,min,abs} = Math;
let r = max(1,2,3,4,5)//拿着max就可以直接使用喽
console.log(r)//5

快速得到push方法，这个方法是在数组对象的原型对象上

let {push} = []; // []里面没有，会沿着原型链去找ok的
console.log(push)
console.log(push === Array.prototype.push); // true
let{length}=[1,2,3]
console.log(length)//3

5）函数参数的解构赋值

function fn({name,age}){
console.log(name,age)
}
let obj = {name:"wangcai",age:100}
fn(obj)

6）解构赋值应用
交换两个数
借助第三方变量 t

let a = 1; let b = 2;
let t = a; a = b; b = t;

console.log(a,b)//这是以前的方法
通过解构赋值：

let不允许重复声明
var a = 1; var b = 2；
var [b,a] = [a,b];
console.log(a,b)

快速的得到函数中返回的多个值

function fn(){
var min , max;
min = Math.floor(3.9);
max = Math.ceil(3.1);
--------------------------------------------// return min, max; // JS中默认只能返回一个值，但是有的语言（GO）中可以返回多个值
--------------------------------------------// 在JS，要返回多个值，可以把多个值放到数组或对象中
//return {min:min,max:max}//对象中
return {min,max}
}
let {min,max} = fn()//解构赋值用对象接收
console.info(min,max)

快速得到服务器返回的JSON数据中的某些数据

let json = {
"status": 0,
"data": {
"films": [
{
"filmId": 4991,
"name": "误杀",
}
],
"total": 46
},
"msg": "ok"
}
得到name：
let {
data:{
films:[
{
name
}
]
}
} = json;
console.log(name)

四字符串的拓展 trim 去除字符串左右的空格
trimLeft 去除字符串左边的空格
trimRight去除字符串右边的空格
例子：

var str = " hello wangcai "
console.log("-----------")
console.log(str)
console.log(str.trim())
console.log(str.trimLeft())
console.log(str.trimRight())

模板字符串
模板字符串${} 里面放变量 ${} 里一个对象的属性${} 里放表达式

console.log("今天是"+year+"年"+month+"月"+day+"日");
console.log("我是"+name+",今年"+age+"了");

自己转换试试
${} 里面放变量

let name = "xxx";
let age = 100;
console.log(`我是${name}，今年${age}岁了`)

${} 里一个对象的属性

let obj = {
name:"xxx",
age:11}
console.log(`我是${obj.name}，今年${obj.age}岁了`)

${} 里放表达式

let obj = {
name:"xxx",
age:1100 }
console.log(`我是${obj.name}，今年${obj.age-100}岁了`)

repeat 重复

let str = "hello"
console.log(str.repeat(10))

includes查看一个字符串中是否包含某个子串

let str = "hello world~"
console.log(str.includes("hello")) // true
console.log(str.includes("world")) // true
console.log(str.includes("he")) // true
console.log(str.includes("h")) // true
console.log(str.includes("x")) // false
// 多个字母需要连着才为ture
console.log(str.includes("ho")) // false

startsWith 是否以子串开始

let str = "hello world~"
console.log(str.startsWith("h")) // true
console.log(str.startsWith("he")) // true
console.log(str.startsWith("hello")) // true
console.log(str.startsWith("ello")) // false

endsWith 是否以子串结束

let str = "hello world~"
console.log(str.endsWith("~")) // true
console.log(str.endsWith("d~")) // true
console.log(str.endsWith("d")) // false

padStart 在字符串的前面进行填充，以达到指定的长度

let str = "wangcai";
console.log(str.padStart(10,"*")) // ***wangcai
console.log(str.padEnd(10,"*")) // wangcai***

padEnd的第1个参数如果小于字符串的长度，不起作用

console.log(str.padEnd(5,"*")) // wangcai

五.forEach方法的使用与细节数组中其他的方法：
push, unshift, pop, shift,
join 把数组拼接成字符串，以指定的字符连接
slice 从已有数组中截取一个新数组
reverse 数组的倒置
concat 合并多个数组，返回一个新数据
splice 删除，插入
sort 排序
indexOf 查找元素，找到返回元素的索引，找不到，返回-1
toString 转字符串
================= Array.isArray() 判断是否是一个数组

console.log(Array.isArray(arr)) // true
Array.isArray如果是一个伪数组，得到false
console.log(Array.isArray(arguments)) // false
args是一个真实的数组
console.log(Array.isArray(args)) // true

================= forEach() 对数组进行遍历 let arr = ["a","b","c","d"];
// forEach() 参数是函数
// item表示数组中的每一个元素
// index表示数组中每一个元素的索引
// arr表示遍历的数组

arr.forEach(function(item, index, arr){
console.log(item+"---"+index+"---"+arr)
console.log(Array.isArray(arr))
})

1）当item是基本数据类型的数据时，修改Item不会影响原数组
2）如果item是引用数据类型的数据，修改item会影响原数组
3）forEach方法没有返回值
4）forEach中不能写break，会报错
5）for和forEach有什么区别？
for可以修改数组中的元素
如果想修改数组中的元素，使用for循环，如果仅仅是遍历，不修改元素，使用forEach更简洁一点。

let arr = ["a","b","c"];
for(var i=0; i arr[i] = 110; }
console.log(arr)

六.map方法的基本使用 map()方法逐一对原数组中的元素处理（通过一个函数处理），得到一个新数组
学习react时，map用的比较多
（1）map的参数是一个函数
（2）函数有三个形参，item表示数组中的每一个元素，index表示索引，arr表示老数组
（3）map有遍历的功能
（4） map得到的肯定是数组，数组中的元素需要通过函数进行处理，如果不处理，数组中的元素都是undefiend

let res = arr.map(function(item,index,arr){
console.log(item,index,arr)
});
console.log(res)// [undefined, undefined, undefined]

（5）使用return可以给新数组中放数据

let arr = [1,2,3];
let res = arr.map(function(item,index){
return item*2;
})
console.log(res) // [2, 4, 6]

（7）对老数组(数组中有对象)中的元素处理

let arr = [
{name:"z1",score:60},
{name:"z2",score:50},
{name:"z3",score:70},
{name:"z4",score:40}
];
// 需要给上面每一个同学的分数加10分
let res = arr.map(function(item,index){
// item表示上面的每一个同学 {}
item.score = item.score + 10;
return {name:item.name,score:item.score};
})
console.log(res)

七.filter过滤方法的基本使用：返回一个新数组 新数组中的元素是通过函数进行过滤
1）return后面跟上一个布尔值，与if里面的条件表达式结合使用
2）返回true放到新数组中，返回false则把它过滤掉
3）return后面直接跟上一个true，则老数组中全部元素全部都放到新数组
4）return后面直接跟上一个false，则老数组中一个也不放到新数组中
八：reduce方法：不断地让前一项和后一项进行运算，返回一个运算的值语法：运算的规则有函数提供。
let arr=[1,2,3]
arr.reduce(function(prev,next){}

// ================ 使用reduce求和
let arr = [1,2,3];
let i = 1;
let res = arr.reduce(function(prev,next){
console.log(`第${i++}轮：前一项${prev}, 后一项${next}`)
console.log(`本轮的运算结果是:${prev+next}`)
return prev+next;
})
console.log(res) // 6

// ================ 带初值
let arr = [1,2,3];
let i = 1;
// 100是初值，第1次prev的值是100
let res = arr.reduce(function(prev,next){
console.log(`第${i++}轮：前一项${prev}, 后一项${next}`)
console.log(`本轮的运算结果是:${prev+next}`)
return prev+next;
},100)
console.log(res)

// ================ 求所有学生的总成绩下面的写法OK
let arr = [
{name:"z1",score:60},
{name:"z2",score:50},
{name:"z3",score:70},
{name:"z4",score:40}
];
let {score} = arr.reduce(function(prev,next){
// 1）return必须返回一个对象
// 2）对象中的键要和原数组中的键一样
return {score:prev.score + next.score};
})
console.log(score) // 220

九.some方法：相当于|| 数组中的方法：表示只要数组中的某一个元素符合条件，整体返回true，否则返回false ，在function中指定条件

// ================ 指定条件
let arr = [1,2,3,4,5,6,7]
// 检测数组中有没有元素大于5的元素，只要有一个大于5那么结果就是true
let res = arr.some(function(item){
return item>5;
})
console.log(res) // true

十.every方法：相当于&& 数组中的方法：表示只要数组中的所有元素都要符合条件，返回true，有一个不满足就返回false ，在function中指定条件

// 表示数组中的所有的元素都要满足某个条件
let arr = [1,2,3,4,5,6,7]
let res = arr.every(function(item){
return item>5;
})
console.log(res) // false

// 表示数组中的所有的元素都要满足某个条件
let arr = [1,2,3,4,5,6,7]
let res = arr.every(function(item){
return item>0;
})
console.log(res) // true

十一.ES6.数组新增的方法： 1.Array.from:把伪数组转换为真实的数组
Array.from（arguments）。
把一个元素的集合转换为一个真实的数组
2.Array.of方法：创建数组的，创建数组的几种方式：字面量，new Array创建，let arr=new Array(5)表示长度。
let arr=Array.of(5)//表示数组元素
let arr=Array.of("5")//表示数组元素
3.find方法基本使用：用来找到第一个符合条件的元素，找不到返回undefined
find里面放的函数，只要找到第一个就返回，要全部找到就用filter
4.findIndex：查找第一个满足条件的元素索引
5.includes（）：判断某个元素是否属于数组中的元素，如果有返回true，否则返回false。
6.indexof：查找某个元素在数组中的位置，返回第一个索引，找不到就是-1
对NaN判断不对，即使存在也对NaN返回-1
7.fill()方法：填充：用来给数组填充指定值的，多用于对空数组进行初始化，已有数据会覆盖。设置具体位置时包前不包后
8.扩展运算符（用的比较多，好好看看）
（1）数据的复制，对于基本类型的数据
例子：let arr=[1,2,3,3,4]
letnewArr=[...arr]; //把数组arr展开，分解开一个个的元素
（2）对于引用类型来说，相当于浅copy
let arr = [1,2,["a","b"]]
let newArr = [...arr];
arr[2][0] = "ok";
console.log(arr) // [1,2,["ok","b"]]
console.log(newArr) // [1,2,["ok","b"]]
（3）把一个伪数组转化为真实的数组【...伪数组】
function fn(){
let arr = [...arguments]
console.log(Array.isArray(arr)) // true
}
fn(1,2,3)
（4）可以把一个字符串转成字符数组
let str = "hello"
let arr = [...str];
console.log(arr) // ["h", "e", "l", "l", "o"]
(5)... 合并数组
let arr1 = ["a","b"]
let arr2 = ["c","d"]
console.log(arr1.concat(arr2)) //["a", "b", "c", "d"]
console.log(arr2.concat(arr1)) //["c", "d", "a", "b"]
let newArr = [...arr1, ...arr2];
console.log(newArr) // ["a", "b", "c", "d"]
(6)...需要使用容器包起来
let arr = ["a","b"]
let m = ...arr; // SyntaxError: Unexpected token '...'
（5）三个点可以合并数组let newArr=[...arr1,...arr2]//快速合并
(6)三个点需要容器包起来，不包起来就报错。
注意：把一个伪数组变成真正·的数组，三种方式：

function fn(){
let arr = [...arguments]
console.log(Array.isArray(arr)) // true
}
fn(1,2,3)

// 总结：JS中把一个伪数组变成真实数组有哪些方法

// Array.from()

// [...伪数组]

// Array.prototype.slice.call()

十一.ES6.函数的扩展： 1，对函数的参数指定默认值
Function fn(a,b){}在函数内部，不能再使用let或const再次声明的局部变量。
赋值了就不用默认值，没赋值可以用默认值。
定义默认值时应该从后向前定义默认值，从前向后不合理
2，rest参数，只能放最后（...args）,如果不是就报错。rest参数拿到的是一个真实的数组
十二.ES6.的箭头函数：不能当做类，在箭头函数内没有arguments，可以使用rest参数，箭头函数中没有this。用来美化和简化js函数中的书写
十三.ES6.对于对象的一个扩展 definProperty():精细化设置configurable,writable,enumerable,value
definPropertys()；精细化设置多个属性
getOwnPropertyDescriptor()得到某对象某属性的特征
getOwnPropertyNames（）获得自己对象中的私有属性，可以获取不可枚举的属性，放到数组中
key：获得自己对象中的所有属性，包括原型对象，不可以获取不可枚举的属性，放到数组中
value：获得自己对象中的所有值
creat：创建一个新对象来继承这个对象的属性当做自己的公有属性
getPropertyOf：创建这个对象的类的原型对象
assign：将原对象中所有可枚举的属性复制到新对象中。
例子：
1，第一个参数，表示目标对象，从第二个参数起都是源对象。
2，如果多个源对象中有同名的属性，后面的将覆盖前面的。
3，只能复制可枚举的属性。
4，复制的时候复制的是地址，也可以说是一个浅copy。
防篡改保护：（1）preventExtensions()不能新增（2）seal不能新增，不能删除（3）freeze不能新增，不能删除，不能修改
判断防篡改保护：
1）ispreventExtensions()不能新增（2）isseal不能新增，不能删除（3）isfrozen不能新增，不能删除，不能修改
属性的简写：属性值是一个变量，变量的名和键名一样，这样才能简写
方法的简写：把function和：删除掉了。就成为简写方法，也是正确的。
对象上的扩展运算符...:也是浅copy
取出对象中所有可以枚举的属性，copy到当前的对象中，等同于assign作用。
// ============== 对象上的扩展运算符 ...
// 取出对象中所有可以遍历属性，copy到当前的对象，等同于Object.assgin方法。

let obj = {
name:"wangcai",
age:100
}
let newObj = {...obj}
// let newObj = Object.assign({},obj)
console.log(newObj)

// ============== 合并对象 ...也是浅copy

let obj1 = {
name:"wangcai",
}
let obj2 = {
age:100,
arr:[1,2,3]
}
let newObj = {...obj1, ...obj2}
console.log(newObj)
obj2.arr[0] = 666;
console.log(newObj)

十四.ES6.对于类的一个扩展 // ============ class JS慢慢地向主流的面向对象编程语言靠拢，提出class声明一个类

function Dog(name,age){
this.name = name;
this.age = age;
}

公有属性

Dog.prototype.say = function(){
【总结|ES6知识点大总结】console.log("say...")
}

下面看类的写法：

class Dog{
constructor(name,age){
this.name = name;
this.age = age;
}

静态属性，也是通过类来调用

static xxx = "yyy"

私有方法：

say(){
console.log("say...")}

公有方法：静态方法通过类来访问

static jump(){
console.log("jump...")}}

创建对象

let wc = new Dog("wangcai",100)
console.log(wc.name)
console.log(wc.age)
console.log(wc.say())

使用对象来调用静态方法不OK

// console.log(wc.jump()) // wc.jump is not a function
Dog.jump(); // jump...
// console.log(wc.xxx) // undefined
console.log(Dog.xxx)

十五.set map容器 set：也是容器，set中的值都是唯一的，没有重复的值
============== set 也是容器，类似于数组，与数组不同的是，set中的值都是唯一的，没有重复的值
// Set也是一个类 new

let s1 = new Set();
console.log(s1)

// 添加数据

s1.add(1)
s1.add("hello")
s1.add(true)
console.log(s1)

// ============== 遍历set容器

let s1 = new Set();

// 添加数据

s1.add(1)
s1.add("hello")
s1.add(true)

// 使用for of进行遍历 for of针对迭代器进行一遍历方案

for(let p of s1){
// p就代表容器中每一个值
console.log(p)
}

// ============== 删除 delete

let s1 = new Set();
s1.add(1)
s1.add("hello")
s1.add(true)
console.log(s1)
s1.delete("hello")
console.log(s1)

// ============== set中不允许有重复的值

let s1 = new Set();
s1.add(1)
s1.add("hello")
s1.add("hello")
s1.add(true)
console.log(s1) // {1, "hello", true}

// ============== 利用set实现数组的去重
let arr = [1,2,3,3,2,1]
// 把数组转成set

let s1 = new Set(arr);
console.log(s1) // {1, 2, 3}

// 把set转成数组 ... 可以把set展开

let newArr = [...s1]
console.log(newArr)

// ============== 利用set实现数组的去重

let arr = [1,2,3,3,2,1]
let newArr = [...(new Set(arr))]
console.log(newArr) // [1, 2, 3]

map：
// ============= 什么是 Map
Set类似于数组，Map类似于对象
Map也是键值对的集合。在对象中键一般是字符串，但是在map中，它的键不限于字符串，各种类型的值都可以作为键，
甚至对象也可以作为键。或者这样理解，对象中是：字符串---值
Map中的键可以是任何值，Map中是：值---值

let obj = {
name:"wangcai",
age:100
}

// ============= 创建Map
// 通过new Map可以创建一个Map

// let m = new Map();
// console.log(m)

// 创建Map时初始化

// let m = new Map([["name","wangcai"]]);
// console.log(m) // {"name" => "wangcai"}
// let m = new Map([
// ["name","wangcai"],
// ["age",100]
// ]);
// console.log(m) // {"name" => "wangcai", "age" => 100}

// ============= Map的值可以是任何数据类型

let m = new Map([
["name","wangcai"],
["age",100],
["isOk",true],
["arr",[1,2,3]],
["obj",{xx:"xx"}],
["func",function f(){}],
]);
console.log(m)

// ============= Map的键可以是任何数据类型

let m = new Map([
["name","wangcai"],
[100,100],
[true,true],
[[1,2,3],[1,2,3]],
[{xx:"xx"},{xx:"xx"}],
[,function f(){}],
]);
console.log(m)

// ============= 添加

let m = new Map([
["name","wangcai"],
]);
m.set(1,2)
m.set([1],true)
console.log(m)

// ============= 获取 get(引用数据类型) ？？？

let m = new Map([
["name","wangcai"],
[1,2],
[[1,2,3],true]
]);
console.log(m.get("name")) // wangcai
console.log(m.get(1)) // 2
// ????
console.log(m.get([1,2,3])) // undefined

// ============= 有重复的键会覆盖