ES6学习笔记
1.解构赋值
//数组解构
let [a,b,c] = [1,2,3]
console.log(a) //1;
console.log(b) //2;
console.log(c) //3
//对象解构
let {foo,bar} = {foo:"test",bar:"try"}
console.log(foo) //test
console.log(bar) //try
//字符串解构
let [a,b,c,d] = "test";
console.log(a) // t
console.log(b) // e
console.log(c) // s
console.log(d) // t
2.扩展运算符 ...
// 1.
function test(...arg){
console.log(arg[0]) // 1
console.log(arg[1]) // 2
console.log(arg[2]) // 3
console.log(arg[3]) //undefined
}
test(1,2,3)
// 2. 深拷贝
let arr1 = [1,2,3];
//let arr2 = arr1;
// arr2.push(4);
// console.log(arr1); // [1,2,3,4]
let arr2 = [...arr1];
arr2.push(4)
console.log(arr1) // [1,2,3]
console.log(arr2) // [1,2,3,4]3.字符串
// 1.判断字符串是否存在某个字符 includes()
let str = "hello world"
console.log(str.includes("hello")) // true
//2.判断开头有没有 startsWith()
console.log(str.startsWith("hello")); // true
// 3.判断结尾有没有 endsWith()
console.log(str.endsWith("hello")); // false
// 4.字符串复制 repeat()
console.log("hello|".repeat(3)) // hello|hello|hello|
4.数字
// 1. 判断是否是数字 Number.isFinite()
let a = 11/4;
console.log(Number.isFinite(a)); // true
// 2. 判断是否是NaN Number.isNaN()
console.log(Number.isNaN(NaN)); // true
// 3. 判断是否是整数 Number.isInteger()
console.log(Number.isInteger(1.1)) // false
// 4.判断是否是浮点型 !Number.isInteger()
// 5. 转换为整型 Number.parseInt()
console.log(Number.parseInt(1.1)) // 1
// 6.转换为浮点型 Number.parseFloat()
console.log(Number.parseFloat(2)) // 2
console.log(Number.parseFloat(2.2)) // 2.2
// 7.最大、最小安全整数
//注意：整型的数值范围 ± 2的53次方-1
let max = Math.pow(2,53)-1 //es5
//es6 提供的最大安全整数 Number.MAX_SAFE_INTEGER
console.log(Number.MAX_SAFE_INTEGER)
// es6提供的 最小安全整数 Number.MIN_SAFE_INTEGER
console.log(Number.MIN_SAFE_INTEGER)
// 8. 判断是否是安全的整数
console.log(Number.isSafeInteger(max)) // true
5.数组
// 1. Array.of()
console.log(Array.of(1,2,3)); // [1,2,3]
// 2.
console.log(eval("[1,2]")) // [1,2]
// 3. 数组元素的查找 find() 实例方法
let arr = [1,2,3,4,5];
let res = arr.find((value,index,arr)=>{
return value == 5
})
console.log(res) // 5
// 4. 数组元素的替换 fill(value,start,end)
// value: 最终要替换成的值, start 替换开始位置的下标，end 替换结束位置：结束位置的下标+1
let arr = ["hello","web","world"];
arr.fill("cqy",1,3)
console.log(arr) // ["hello", "cqy", "cqy"]
// 5. in 的用法，空位的判断
let arr = ["hello",,,,]
console.log(0 in arr) // true
console.log(1 in arr) // false
let arr2= [null,undefined,0]
console.log(0 in arr2) // true
console.log(1 in arr2) // true
console.log(2 in arr2) // true
// 6. 数组遍历
let arr = ["成都","绵阳","乐山"]
// 6.1 forEach
arr.forEach((val,index) => console.log(index,val))
// 0 "成都"
// 1 "绵阳"
// 2 "乐山"
// 6.2 filter
arr.filter((val) => console.log(val))
// 成都
// 绵阳
// 乐山
// 6.2 some
arr.some((val) => console.log(val))
// 成都
// 绵阳
// 乐山
// 6.3 map
arr.map((val) => console.log(val))
// 成都
// 绵阳
// 乐山
//7. 数组转字符串
let arr = ["成都","绵阳","乐山"]
console.log(arr.toString()) // 成都,绵阳,乐山
console.log(arr.join('|')) // 成都|绵阳|乐山6. for...of..
//1. 输出数组的下标
let arr = ["hello","good","world"];
for(let item of arr.keys()){
console.log(item)
}
// 0
// 1
// 2
// 2.输出数组每一项
let arr = ["hello","good","world"];
for(let item of arr){
console.log(item)
}
// hello
// good
// world
// 3.输出数组和下标
let arr = ["hello","good","world"];
for(let item of arr.entries()){
console.log(item)
}
// [0, "hello"]
// [1, "good"]
// [2, "world"]
for(let [index,val] of arr.entries()){
console.log(index +":" + val)
}
// 0:hello
// 1:good
// 2:world
7. 方法
// 1. 获取必须传递参数的参数的个数
function fn(a,b=1){
return a+b
}
console.log(fn.length) // 1
// 2.对象的函数结构
let json = {
a:"hello",
b:"world"
}
function fn({a,b="web"}){
console.log(a) // hello
console.log(b) // world
}
fn(json)
// 3.数组结构
let arr = [1,2,3]
function fn(a,b,c){
console.log(a,b,c) // 1 2 3
}
fn(...arr)8.对象
// 1. 赋值
let name = "chengdu"
let skill = "hhh"
let obj = {name,skill}
console.log(obj) // {name: "chengdu", skill: "hhh"}
// 2. key值构建
let key = "skill"
let obj = {
[key]:"web"
}
console.log(obj) // {skill: "web"}
// 3. 自定义对象方法
let obj = {
add:function(a,b) {
return a+b
}
}
console.log(obj.add(1,2)) // 3
// 4. is()
let obj1 = {name:"panpan"}
let obj2 = {name:"panpan"}
console.log(obj1.name === obj2.name) // true
console.log(Object.is(obj1.name,obj2.name)) // true
// === 与 is() 的区别
console.log(+0 === -0) // true
console.log(NaN === NaN) // false
console.log(Object.is(+0,-0)) // false
console.log(Object.is(NaN,NaN)) // true
// 5. assign()
let a = {a:1}
let b = {b:2}
let c = {c:3}
let d = Object.assign(a,b,c)
console.log(d) // {a: 1, b: 2, c: 3}
9. Symbol
// Symbol
let a = Symbol("hello")
console.log(a) //(Symbol) Symbol(hello)
console.log(a.toString()) //(字符串) Symbol(hello)
//在对象中的使用
let name = Symbol()
let obj = {
[name]:"chengdu"
}
console.log(obj[name]) // chengdu
obj[name] = "成都"
console.log(obj[name]) // 成都
// 对某个key进行保护
let obj = {name:"amanda",age:18}
let gender = Symbol()
obj[gender] = "女"
console.log(obj) // {name: "amanda", age: 18, Symbol(): "女"}
for(let item in obj){
console.log(obj[item])
}
// amanda
// 18
console.log(obj[gender]) //女
10. Set
Set里面元素不允许重复
// Set
let setArr = new Set(['zhcn','zhtw','en'])
console.log(setArr) // Set(3) {"zhcn", "zhtw", "en"}
//新增 add()
setArr.add("中文简体")
console.log(setArr) // Set(4) {"zhcn", "zhtw", "en", "中文简体"}
//查找 has()
console.log(setArr.has("en")) // true
// 删除 delete()
setArr.delete("en")
console.log(setArr) // Set(2) {"zhcn", "zhtw"}
//清空 clear()
setArr.clear()
console.log(setArr) // Set(0) {}
//长度 size
let setArr = new Set(['zhcn','zhtw','en'])
console.log(setArr.size) // 3
11.Map
// => 声明与赋值
let json = {
name:"panpan",
skill:"web"
}
let map = new Map();
map.set(json,"Iam")
console.log(map) // {{name: "panpan", skill: "web"} => "Iam"}
map.set("hello",json)
console.log(map)
// get 取值
console.log(map.get(json)) //Iam
// delete 删除
map.delete(json)
//清除 clear
map.clear()
//长度 size
map.size
// 查找 has()
map.has("hello") // true12 Proxy
// new Proxy({},{})
// 1. 对象的预处理
let pro = new Proxy({
add:function(val){
return val + 100
},
name:"预处理"
},{
get:function(target,key,property){ //get:取值之前先做一些处理
console.log("come in get")
return target[key]
},
set:function(target,key,value,receiver){ // set: 改变值之前先做一些处理
// value:要改变的值,receiver:原始值
console.log("setting")
return target[key] = value
}
})
console.log(pro.name)
// come in get
// 预处理
pro.name = "proxy"
console.log(pro.name)
// 2. 方法的预处理 apply
let target = function (){
return "I am panpan"
}
let handler = {
apply:function(target,ctx,args){
console.log("do apply")
return Reflect.apply(...arguments) //必须这样写
}
}
let pro = new Proxy(target,handler)
console.log(pro())
// do apply
// I am panpan13.Promise
let step = 1;
function step1(resolve,reject){
console.log("第1步");
if(step === 1){
resolve("第1步完成")
}else{
reject("第1步错误")
}
}
function step2(resolve,reject){
console.log("第2步");
if(step === 1){
resolve("第2步完成")
}else{
reject("第2步错误")
}
}
function step3(resolve,reject){
console.log("第3步");
if(step === 1){
resolve("第3步完成")
}else{
reject("第3步错误")
}
}
new Promise(step1).then(val =>{
console.log(val)
return new Promise(step2)
}).then(val =>{
console.log(val)
return new Promise(step3)
}).then(val =>{
console.log(val)
})
// 第1步
// 第1步完成
// 第2步
// 第2步完成
// 第3步
// 第3步完成14.class
// class
class Coder{
name(val){
console.log(val)
}
skill(val){
this.name(val)
}
}
let exp = new Coder
exp.name("panpan") // panpan
exp.skill("熊熊") // 熊熊
// 类的传参
class Coder{
constructor(a,b){
this.a = a
this.b = b
}
add(){
return this.a + this.b
}
}
let exp = new Coder(1,2)
exp.add() // 3
// 类的继承
class htmler extends Coder{
}
let child = new htmler
child .name("哈哈") //哈哈