宽屏绿色新闻资讯网站织梦模板,哈尔滨seo优化教程,四平市网站建设,济南网站制作服务1.let#xff0c;const
1.1.var#xff0c;let#xff0c;const的区别
1.1.1 var存在变量提升#xff0c;let和const不存在。
1.1.2 let和const只能在块作用域里访问。
1.1.3 同一作用域下let和const不能声明同名变量#xff0c;而var可以。
1.1.4 const定义常量const
1.1.varletconst的区别
1.1.1 var存在变量提升let和const不存在。
1.1.2 let和const只能在块作用域里访问。
1.1.3 同一作用域下let和const不能声明同名变量而var可以。
1.1.4 const定义常量而且不能修改定义对象的时候可以修改里面的属性值因为引用地址没变。
2.symbol
3.模板字符串
4.字符串新方法
5.解构表达式
5.1 数组解构
5.2 对象解构
6.对象不是object是object和array方面
6.1 Map和Set是ES6新增的对象
6.1.1 Map
6.1.2 Set
6.2 数组的新方法
6.2.1 Array.from() 方法
6.2.2 includes() 方法
6.2.3 map() 方法filter() 方法
6.2.4 forEach() 方法
6.2.5 find() 方法
6.2.6 some() every() 方法
6.3 object的新方法
6.3.1 Object.is() 方法
6.3.2 Object.assign() 方法
6.3.3 Object.keys() Object.values() Object.entries() 方法
6.4 对象声明简写
6.5 拓展符...
6.5.2 用于合并对象
7.函数方面
7.1 默认参数
7.2 箭头函数
箭头函数和普通函数最大的区别在于其内部this永远指向其父级对象的this而普通函数的this指向是谁调用就指向谁(重点)。
8.类
9.promise和proxy
10.模块化
10.1 导入
10.2 导出
11.运算符
11.1 ...拓展运算符
11.2 ?.可选链运算符 1.letconst
1.1.varletconst的区别
1.1.1 var存在变量提升let和const不存在。
console.log(a); // undefined a已声明还没赋值默认得到undefined值
console.log(b); // 报错b is not defined 找不到b这个变量
console.log(c); // 报错c is not defined 找不到c这个变量
var a 100;
let b 10;
const c 10;
console.log(a);//a1001.1.2 let和const只能在块作用域里访问。
if(1){var a 100;let b 10;const c 1;
}console.log(a); // 100
console.log(b) // 报错b is not defined 找不到b这个变量
console.log(c) // 报错c is not defined 找不到c这个变量
1.1.3 同一作用域下let和const不能声明同名变量而var可以。
var a 100;
console.log(a); //控制台输出 100var a 10;
console.log(a); //控制台输出 10let a 100;
let a 10;// 控制台报错Identifier a has already been declared 标识符a已经被声明了。1.1.4 const定义常量而且不能修改定义对象的时候可以修改里面的属性值因为引用地址没变。 const a2a3console.log(a) //控制台报错2.symbol
symbol是ES6引入的一种基本数据类型用于表示一个独一无二的值不能和其他数据类型进行运算。它是JS的第七种数据类型与undefined、null、Number、String、Boolean、Object并列。
创建symbol值的方式
const a Symbol();
console.log(a); //Symbol()//因为Symbol是基本数据类型而不是对象不能 new 。
const a new Symbol();//报错Symbol is not a constructor使用Symbol()创建一个Symbol类型的值并赋值给a变量后你就得到了一个在内存中独一无二的值。现在除了通过变量a任何人在任何作用域内都无法重新创建出这个值。
const a Symbol();
const b Symbol();跟对象一样a会存放一个地址这个地址就指向这个Symbol()的值。 3.模板字符串
在ES6之前处理模板字符串通过“\”和“”来构建模板。
对ES6来说:用${}来界定反引号()直接搞定。 url xxxxxx// es6之前let html div a url /a/div//es6let eshtml diva${url}/a/div 4.字符串新方法
includes() 判断字符串是否包含参数字符串返回boolean值。startsWith() / endsWith() 判断字符串是否以参数字符串开头或者结尾。返回boolean值。这两个方法可以有第二个参数一个数字表示开始查找的位置。
let str blue,red,orange,white;str.includes(blue);//true
str.startsWith(blue);//true
str.endsWith(blue);//falserepeat() 方法按指定次数返回一个新的字符串。
console.log(hello.repeat(2)); //hellohellopadStart() / padEnd() 用参数字符串按给定的长度从前面或后面补全字符串返回新字符串。
let arr hell;
console.log(arr.padEnd(5,o)); //hello
console.log(arr.padEnd(6,o)); //helloo
console.log(arr.padEnd(6)); //hell ,如果没有指定将用空格代替console.log(arr.padStart(5,o)); //ohell5.解构表达式
解构赋值是对赋值运算符的拓展它是一种针对对象或者数组的模式匹配然后对其中的变量进行赋值。
5.1 数组解构
let [a,b,c] [1,2,3];
console.log(a,b,c); //1,2,3let [a,b,c] [1,,3];
console.log(a,b,c); //1,undefined,3let [a,,b] [1,2,3];
console.log(a,b);//1,3let [a,..b] [1,2,3]; //...是剩余运算符表示赋值运算符右边除第一个值外剩余的都赋值给b
console.log(a,b);//1,[2,3]可以利用数据解构去交换变量的值。 let a 1let b 2;[a, b] [b, a]console.log(a) // 2console.log(b) // 1
5.2 对象解构
let obj { name: ren, age: 12, sex: male
};let { name, age, sex } obj;
console.log(name, age, sex); //ren 12 malelet { name: myName, age: myAge, sex: mySex } obj; //自定义变量名
console.log(myName, myAge, mySex); //ren 12 male 6.对象不是object是object和array方面
6.1 Map和Set是ES6新增的对象
6.1.1 Map
Map对象用于保存键值对任何JavaScript支持的值都可以作为一个键key或者一个值value。
与对象不同的是
object的键只能是字符串或者ES6的symbol值而Map可以是任何值。Map对象有一个size属性存储了键值对的个数而object没有类似的属性。
let myMap new Map([[name,ren],[age,12]]);
console.log(myMap); //{nameren,age12}myMap.set(sex,male);
console.log(myMap); //{nameren,age12,sexmale}
console.log(myMap.size); //3myMap.get(name); //ren
myMap.has(age); //true
myMap.delete(age); //true
myMap.has(age); //false
myMap.get(age); //undefined6.1.2 Set
Set对象和Map对象类似但它存储不是键值对。类似数组但它的每个元素都是唯一的。Set没有下标去标识每一个值所以Set是无序的也不能像数组那样通过下标去访问Set成员。
let mySet new Set([1,2,3]);//里面要传一个数组否则会报错
console.log(mySet); //{1,2,3}mySet.add(4);
console.log(mySet); //{1,2,3,4}mySet.delete(1); //true
mySet.has(1); //false
console.log(mySet); //{2,3,4}mySet.clear()
console.log(mySet) // {size: 0}
利用Set唯一性的特点可以快速给数组去重。
let arr [1,1,2,3,4,4];let mySet new Set(arr);let newArr Array.from(mySet);
console.log(newArr); //[1,2,3,4]Set和Map一样也有size属性用于表示成员数量。
let mySet new Set([1,2,3]);
console.log(mySet.size); // 3
Set可以使用forEach方法按照成员添加进Set的顺序遍历Set。forEach方法接受两个参数一个是回调函数第二个是指定回调函数的this指向。 let mySet new Set()mySet.add(0)mySet.add(1).add(2).add(3)mySet.forEach(function (value, key, set) {// Set中value key,原因:好多数据结构都有forEach方法,为了方便同意所以参数是一致的,但是参数的意义各不相同// set就是mySet本身console.log(value, key, set mySet)console.log(this)})// 0 0 true// window// 1 1 true// window// 2 2 true// window// 3 3 true// windowmySet.forEach(function (value, key, set) {console.log(value, key, set mySet)console.log(this)}, document)// 0 0 true// document// 1 1 true// document// 2 2 true// document// 3 3 true// document 6.2 数组的新方法
6.2.1 Array.from() 方法
Array.form() 内置对象Array的方法实例不能调用可以将可迭代对象转换为新的数组接受三个参数后面两个可以不要返回一个数组。
第一个表示将被转换的可迭代对象(如果只有一个参数就是把形参转变成数组)。第二个是回调函数将对每个数组元素应用该回调函数然后返回新的值到新数组。第三个是回调函数内this的指向。 let mySet new Set([1,2,3])console.log(mySet); // {1, 2, 3}let myArr Array.from(mySet)console.log(myArr); // [1, 2, 3]let arr new Set([1, 2, 3])let obj {double(n) {return n * 2}}let newArr Array.from(arr,function (n) {return this.double(n)},obj)console.log(newArr) // [2, 4, 6]
6.2.2 includes() 方法
includes() 方法是是查看数组中是否存在这个元素存在就返回true,不存在就返回false。 let arr [1, 2, 3, { a: 1 }]let flag1 arr.includes(1)let flag2 arr.includes(4)let flag3 arr.includes({ a: 1 })let flag4 arr.includes(arr[3])console.log(flag1) // trueconsole.log(flag2) // falseconsole.log(flag3) // false 原因: 因为两个{a:1}的引用地址不一样,下面这个地址就是相同的console.log(flag4) // true
6.2.3 map() 方法filter() 方法
两个方法都会对原数组进行遍历操作返回一个新的数组并且不会影响原数组。map() 方法是对数组每一项进行操作并返回。filter() 方法是对数组每一项进行筛选符合条件的才返回。 let arr [1, 2, 3]let arr2 arr.map(item item * 2)let arr3 arr.filter(item item 2)let arr4 arr.map(item item 2)console.log(arr2) // [2, 4, 6]console.log(arr3) // [3]console.log(arr4) // [false, false, true]// 哪怕对原数组元素进行修改也不会影响原数组filter也是如此let arr5 [1, 2, 3]let arr6 arr.map(item {item item * 2return item})console.log(arr5) // [1, 2, 3]console.log(arr6) // [2, 4, 6]// 但是如果元素是对象.是可以对其属性进行修改的,因为没有改变元素对象的引用地址filter也是如此let arr7 [{ a: 1 }, { a: 1 }, { a: 1 }]let arr8 arr.map(item {item.a 2// 但是不能改变整个对象比如 item {a: 2},因为这样就改变引用地址了return item})console.log(arr7) // [{ a: 2 }, { a: 2 }, { a: 2 }]console.log(arr8) // [{ a: 2 }, { a: 2 }, { a: 2 }]6.2.4 forEach() 方法
是循环遍历数组中的每一项进行操作没有返回值对原数组也没有影响同map()和filter()。 let arr [{ a: 1 }, { a: 1 }, { a: 1 }]let arr2 []arr.forEach(item {arr2.push(item.a)})console.log(arr) // [{ a: 1 }, { a: 1 }, { a: 1 }]console.log(arr2) // [1, 1, 1]
6.2.5 find() 方法
查找数组中符合条件的第一个元素直接将这个元素返回出来。 let arr [1, 2, 3]let str arr.find(item item 1)console.log(str) // 2
6.2.6 some() every() 方法
两个方法都会对数组进行遍历判断是否符合条件并返回一个boolean值。some() 方法是数组中只要有一个符合条件就返回 true全部不符合就返回 false。every() 方法是数组中全部元素符合条件就返回 true有一个不符合就返回 false。 let arr [1, 2, 3, 4, 6, 11]let flag1 arr.some(function (v) {return v 10})console.log(flag1) //truelet flag2 arr.every(function (v) {return v 10})console.log(flag2) //false 6.3 object的新方法
6.3.1 Object.is() 方法
判断两个值是否相同。 const obj1 {}const obj2 {}console.log(Object.is(obj1, obj2)) // false,引用地址不一样const obj3 {}const value1 obj3const value2 obj3console.log(Object.is(value1, value2)) // trueconst str1 2const str2 1 1console.log(Object.is(str1, str2)) // true
6.3.2 Object.assign() 方法
用于将所有可枚举属性的值从一个或多个源对象分配到目标对象并返回目标对象说白了就是合并对象。
const obj1 { a: 1 };
const obj2 { b: 2 };
const obj3 { a:5 , c: 3 };
//对象合并把后面对像合并到第一个对象对象里相同的属性会覆盖
Object.assign(obj1, obj2, obj3);
console.log(obj1); // { a: 5, b: 2 , c:3}6.3.3 Object.keys() Object.values() Object.entries() 方法
三个方法都是对对象进行遍历。Object.keys() 是返回一个数组数组元素是对象里所有的属性。Object.values() 是返回一个数组数组元素是对象里所有的属性值。Object.entries() 是返回一个数组每个数组元素又是一个数组存放两个元素是对象里的键值对。 let person {name: admin,age: 12,language: [java, js, css]}console.log(Object.keys(person)) //[ name, age, language ]console.log(Object.values(person)) //[ admin, 12, [ java, js, css ] ]console.log(Object.entries(person)) /* [[name, admin],[age, 12],[language, [java, js, css]],]; */
6.3.4 Object.setProtoypeOf 方法
将第一个参数的原型链指向第二个参数。 Object.setPrototypeOf(Tiger.prototype, Animal.prototype) 6.4 对象声明简写 let name adminlet age 20//es6之前// let person{// name:name,// age:age// }//es6 声明对象时的属性名与引用的变量名相同就可以省略let person {name,age}
6.5 拓展符... 可以将对象或者数组进行展开。
6.5.1 用于深拷贝数组同理 let obj1 { name: 于家宝, age: 18 }let obj2 obj1let obj3 { ...obj1 }obj1.age 19console.log(obj1) // {name: 于家宝, age: 19}console.log(obj2) // {name: 于家宝, age: 19}console.log(obj3) // {name: 于家宝, age: 18}
6.5.2 用于合并对象数组同理 const obj1 { a: 1 }const obj2 { b: 2 }const obj3 { a: 5, c: 3 }let newObj { ...obj1, ...obj2, ...obj3 }console.log(newObj) // { a: 5, b: 2 , c:3} 重复的属性会被覆盖
6.5.3 用于函数参数 function add(x, y, z) {return x y z}let number1 [1, 2, 3]console.log(add(...number1)) // 6let number2 [2, 3, 4, 5]console.log(add(...number2)) // 9
6.5.3 排除对象的一些属性 let obj {name: 于家宝,age: 18,type: 1}let { type, ...other } objconsole.log(other) // {name: 于家宝, age: 18}other.name yujiabaoconsole.log(other) // {name: yujiabao, age: 18}console.log(obj) // {name: 于家宝, age: 18, type: 1} 7.函数方面
7.1 默认参数
函数在接受参数的时候可以设置一个默认值。 // es6之前// function add(a, b) {// if (!a) a 0// if (!b) b 0// return a b// }//es6function add(a 0, b 0) {return a b}let x add()let y add(2)let z add(3, 4)console.log(x, y, z) //x0, y2, z7
7.2 箭头函数
箭头函数实现更加简介的书写方式内部没有arguments也没有 prototype 属性所以不能用 new 关键字调用箭头函数。
let add (a,b) {return ab;
}
let print () {console.log(hi);
}
let fn a a * a;
//当只有一个参数时括号可以省略函数体只有单行return语句时大括号也可以省略。箭头函数和普通函数最大的区别在于其内部this永远指向其父级对象的this而普通函数的this指向是谁调用就指向谁(重点)。 var age 123let obj {age: 456,fun1: function () {console.log(this.age, 普通函数1) // 谁调用指向谁,这里指向 objlet fun3 () {console.log(this.age, 箭头函数1) // 这里箭头函数父级是 fun1,fun1的this指向是 obj}fun3()},fun2: () {console.log(this.age, 箭头函数2) // 这里箭头函数父级是 obj,obj的this指向是 window}}obj.fun1()obj.fun2() 8.类
具体看其他博客。 9.promise和proxy
具体看其他博客。 10.模块化
10.1 导入
ES6使用import关键字导入模块有两种常用的方式。
import ‘模块名称’ from ‘路径’
import ‘路径’10.2 导出
ES6使用export和export default导出模块。
let name ren,age 12;
export {name,age};
//注意变量需要用大括号包裹然后才能向外输出export let name ren;
// 如果仅需向外导出一个变量 11.运算符
11.1 ...拓展运算符
11.2 ?.可选链运算符
11.3 ?? null判断运算符
跟 || 有一定的区别 || 是左侧的值为 null、undefined、为空字符串、false、0的时候就会返回右侧的值?? 是左侧的值为null、undefined的时候会返回右侧的值。 let a || 1let b ?? 1console.log(a); // 1console.log(b); // 12.支持 async await 异步调用方式
具体看其他博客。 async function test(data) {let res await getListApi(data)}
