山西中宇建设集团网站番禺网站建设三杰科技

当前位置： 首页 > news >正文

山西中宇建设集团网站,番禺网站建设三杰科技,宁波seo排名优化方法,建网站郑州一,变量声明#xff1a;let声明变量#xff1a;1.变量不可重复声明#xff0c;let star 罗志祥 let star 小猪结果报错2.块级作用域#xff0c;{ let girl 周扬青 }在大括号内的都属于作用域内3.不存在变量提升4.不影响作用域链const声明常量#xff1a;const SCHOOL …一,变量声明let声明变量1.变量不可重复声明let star 罗志祥 let star 小猪结果报错2.块级作用域{ let girl 周扬青 }在大括号内的都属于作用域内3.不存在变量提升4.不影响作用域链const声明常量const SCHOOL ‘学校’;一般习惯把常量全用大写字母1.一定要赋初始值2.一般常量使用大写潜规则3.常量值不能修改4.块级作用域5.对数组和对象的元素修改不算对常量的修改不会报错变量的结构赋值es6语序按照一定的模式从数组和对象中提取值对变量进行赋值。被称为结构赋值//数组的解构const F4 [小沈阳, 刘能, 赵四, 宋小宝];let [xiao, liu, zhao, song] F4; console.log(xiao); console.log(liu); console.log(zhao); console.log(song);//对象的解构 const zhaob {name: 赵本山,age: no,xiaopin: function () {console.log(我会小品);},};let { name, age, xiaopin } zhaob;console.log(xiaopin); //对象的解构const zhaob {name: 赵本山,age: no,xiaopin: function () {console.log(我会小品);},};// let { name, age, xiaopin } zhaob;// console.log(xiaopin);let { name } zhaob;console.log(name);//可以寻找同名属性进行赋值ES6引入了新的声明字符串的方式 (反引号)let str 我也是一个字符串哦内容中可以直接出现换行符let str ullia/lilib/lilic/li/ul 变量拼接let name1 悦悦; let job \({name1}是嫦娥的兔兔; console.log(job); //\){}是变量拼接的固定格式ES6中允许直接在大括号里直接写入变量和函数作为对象的属性和方法、let name1 悦悦;let job ${name1}是嫦娥的兔兔;console.log(job);let school {name1,job,fun() {console.log(1);},};//当变量作为对象的属性时不用再写成name1name1方法funfuction(){}也可以直接简写成fun(){}箭头函数以前的函数为let fun function(a,b){}箭头函数则改为let fun (a,b){}1.this是静态的this始终指向函数声明时所在作用域下的this的值2.不能作为构造函数实例化对象3.不能使用arguments变量4.箭头函数的简写1当形参只有一个时候可以省略小括号let fun a{}(2)当大括号内只有一句话的时候大括号可以省略,而且语句执行结果就是函数的返回值let fun a ab(3)箭头函数适合与this无关的回调如定时器数组方法的回调。不适合与this有关的回调如事件回调对象方法ES6函数允许给函数参数赋初始值形参初始值是具有默认值的参数这种参数一般都在最后潜规则并且可以进行解构赋值function connect({ a, b, c 101 }) {console.log(a);console.log(b);console.log©; } connect({a: 1,b: 2, });ES6引入了rest参数用来获取函数实参形式是…args用来代替arguments,并且rest参数必须放到最后当多个实参时候…args会形成数组。function fun(a, b, …args) {console.log(a);console.log(b);console.log(args); } fun(1, 2, 3, 4, 5, 6);扩展运算符…能将数组转化为逗号分隔的参数序列let arr [1, 2, 3, 4, 5, 6];function fun() {console.log(arguments);}fun(arr);//这是没用扩展运算符的 let arr [1, 2, 3, 4, 5, 6];function fun() {console.log(arguments);}fun(…arr);1.扩展运算符的应用合并数组let arr1 [奇拉, 少卡]; let arr2 [舒克都, 放假]; let arr […arr1, …arr2]; console.log(arr);2.数组克隆let arr1 [奇拉, 少卡]; let arr2 [舒克都, 放假]; let arr […arr1, …arr2]; console.log(arr); let arr3 […arr2]; console.log(arr3);3.伪数组转为真数组bodydiv classscroll-x tabsdiv classtabp标签1/pdiv classindicator/div/divdiv classtabp标签1/pdiv classindicator/div/divdiv classtabp标签1/pdiv classindicator/div/divdiv classtabp标签1/pdiv classindicator/div/div/divlet divs document.querySelectorAll(div);let divarr […divs];console.log(divarr);symbol基本使用ES6引入的一种新的原始数据类型表示独一无二的值他的特点1.symbol的值是唯一的用来解决命名冲突问题2.symbol不能与其他值进行运算3.symbol定义的对象属性不能用for…in遍历循环单可以使用Reflect.ownKeys来获取所有对象的键名//创建symbol let s Symbol(); console.log(s); let s2 Symbol(速度快); console.log(s2); let s3 Symbol(速度快); console.log(s2 s3); //symbol.for创建 let s4 Symbol.for(速度快); console.log(s4); let s5 Symbol.for(速度快); console.log(s5); console.log(s4 s5);symbol的使用向对象中添加symbol类型的方法迭代器是一种接口为各种不同的数据提供统一的访问机制。任何数据结构只要部署了iterator接口就可以完成遍历操作1.ES6创造了一种新的遍历命令for…of循环iterator接口主要提供for…of消费2.原生具备iterator接口的数据(可用for…of遍历)a)Arrayb)Argumentsc)Setd)Mape)Stringf)TypeArrayg)NodeList3.工作原理a)创建一个指针对象指向当前数据的起始位置b)第一次调用对象的next方法指针自动指向数据结构的第一个成员c)接下来不断调用next方法指针一直往后移动直到指向最后一个成员let Uname [搜到, 的撒, 的风格, 范德萨, 公司发, 告诉对方]; for (let a of Uname) {console.log(a); } let iterator UnameSymbol.iterator; console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); console.log(iterator.next()); //false表示数组成员没遍历结束true表示结束。生成器是es6提供的一种异步编程解决方案是一个特殊的函数。function * fun2(){yield一直没有耳朵;yield一直没有尾巴;yield真奇怪; } let tor fun2() console.log(tor.next()) console.log(tor.next()) console.log(tor.next()) console.log(tor.next())生成器的函数参数next()方法在调用的时候可以传递实参的第二个next传递的参数将作为第一个yield整体的返回结果后面的依次第三个next传递的参数将作为第二个yield的整体返回结果function * fun2(arg){console.log(arg)let A yield一直没有耳朵;console.log(A)let B yield一直没有尾巴;console.log(B)let C yield真奇怪;console.log© } let tor fun2(aaa) console.log(tor.next()) console.log(tor.next(bbb)) console.log(tor.next(ccc)) console.log(tor.next(ddd))生成器的实例模拟获取 用户数据 订单数据 商品数据每隔一秒显示。function getUser(){setTimeout((){let data 用户数据//调用next方法并且把数据传入iterator2.next(data)},1000) } function getOrder(){setTimeout((){let data 订单数据iterator2.next(data)},1000) } function getFGoods(){setTimeout((){let data 商品数据iterator2.next(data)},1000) } function * fun3(){let user yield getUser();console.log(user)let Order yield getOrder();console.log(Order)let Goods yield getFGoods();console.log(Goods) } let iterator2 fun3() iterator2.next()Promise是es6引入的异步编程新的解决方案。用来封装异步操作并且可以获取其成功或者失败的结果,promise是一个对象对象和函数的区别就是对象可以保存状态函数不可以闭包除外const p new Promise((resolve,reject){setTimeout((){const data 大奥古斯resolve(data)},4000) }).then((value){console.log(value) },(reason){console.log(reason) })//promise有三个状态1、pending[待定]初始状态2、fulfilled[实现]操作成功3、rejected[被否决]操作失败Promise含有两个参数resolve,reject。resolve作用是将Promise对象的状态从“未完成”变为“成功”即从 pending 变为 resolved在异步操作成功时调用并将异步操作的结果作为参数传递出去reject作用是将Promise对象的状态从“未完成”变为“失败”即从 pending 变为 rejected在异步操作失败时调用并将异步操作报出的错误作为参数传递出去。当promise状态发生改变就会触发then()里的响应函数处理后续步骤promise状态一经改变不会再变。const p new Promise((resolve, reject) {setTimeout(() {const data 大奥古斯;resolve(data);}, 4000);}).catch((reason){console.log(reason)})//错误可以用catch进行抓取set:ES6提供了新的数据结构set集合它类似于数组但成员的值都是唯一的集合实现了 iterator接口所以可以使用扩展运算符和for of进行遍历集合的属性和方法(1)size:返回集合的个数(2)add:增加一个新元素返回当前集合(3)delete删除元素返回布尔值(4)has检测集合中是否包含某个元素返回布尔值 //声明一个setlet se new Set();let se2 new Set([da, xiao, gao, pang]);console.log(se2);//添加新元素se2.add(xishi);console.log(se2);//删除元素se2.delete(gao);console.log(se2);//检测console.log(se2.has(da));//清空se2.clear();console.log(se2);set:ES6提供了数据结构Map它类似于对象也是键值对的集合。但键的范围不限于字符串各种类型的值包括对象都可以当做键。Map也实现了iterator接口所以可以使用扩展运算符和for of进行遍历Map的属性和方法(1)size:返回Map元素的个数(2)set:增加一个新元素返回当前Map(3)get返回键名对象的键值(4)has检测Map中是否包含某个元素返回布尔值,(5)clear:清空集合返回undefined//声明一个Map let m new Map(); m.set(name, zmy); m.set(change, function () { console.log(11111); }); let key { school: ahgy, }; m.set(key, mm); console.log(m); //size console.log(m.size); //其中键值可以是字符串也可以是对象class类通过class可以定义类。基本上es6中可以看作是一个语法糖新的class写法只是让对象原型的写法更加清晰、更加面向对象编程的语法而已。(1)class声明类(2)constructor定义构造函数初始化当使用new 方法名()就会执行constructor(3)extends继承父类(4)super调用父级构造方法(5)static定义静态方法和属性(6)父类方法可以重写class phone { //构造方法名字不能修改 constructor(price, name) {this.price price;this.name name; } //方法必须使用该语法不能使用es5对象完整形式callfunction{} call() {console.log(打电话); } } let oneplus new phone(2000, 华为); console.log(oneplus );class静态成员class phone{static num 123static change(){console.log(我可以改变世界)} }构造函数继承class Phone {//构造方法constructor(price, name) {this.price pricethis.name name}calll() {console.log(我可以改变世界)} } class smallcall extends Phone {//构造方法constructor(price, name, color, size) {super(price, name) //调用父类的constructor方法this.color colorthis.size size}photo() {console.log(111)} } const mi new smallcall(133, 小米, red, 4.7) console.log(mi);数值扩展1.Number.EPSILON:是JavaScript表示的最小精度2.Number.isNaN:检测一个值是否为NaN3.Number.isInteger:判断一个数是否为整数4.Math.trunc:将数字的小数部分抹掉对象方法扩展1.Object.is:判断两个值是否相等2.Object.assign:对象的合并3.Object.setPrototypeOf:设置原型对象Es6模块化1.分别暴露就是在每个需要暴露的变量前加exportexport let mi xiaomi export function name() {console.log(111) }2.统一暴露let mi xiaomi function name() {console.log(111) } export {mi,name}3.默认暴露export default {mi:xiaomi,name:function {} }引入模块1.通用导入模块import * as m from ‘/xx.js’,其中用as定义别名为m。2.解构赋值import {a,b as c} from ‘/xx.js’ 如果多个引入的值中有重复的会报错可以用as如把b的值换成c在默认暴露default的引入中import { default as s2}不能使用default需要用as把default重定义一个值s23.只有默认暴露可以使用简便的方法import m from ‘/xx.js’ES7部分特性1.includes检测数组中是否包含某个元素返回值是布尔值let arr1 [米, jaj, midq] console.log(arr1.includes(jaj))2.指数操作符console.log(25) //32async和awaitasync用于申明function异步await用于等待一个异步方法执行完成1.async函数返回一个 Promise 对象//一个普通函数 function getData(){return syy; } console.log(getData()) //syy//加上async后 async function getData(){return syy; } console.log(getData()); //Promise {resolved: syy}2、async函数内部return语句返回的值会成为then方法回调函数的参数async function getData(){return syy; } getData().then(data{console.log(data) //syy });3、async函数内部抛出错误会导致返回的 Promise 对象变为reject状态抛出的错误对象会被catch方法回调函数接收到async function getData() {throw new Error(出错了); } getData() .then(v console.log(v),e console.log(e) //Error: 出错了 )await:1.await必须放在async中。2.await右侧一般都是promise对象。3.await一般返回的都是promise成功过的值4.await的promise失败了会抛出异常需要try-catch进行捕获正常情况下await命令后面是一个Promise对象。如果不是会被转成一个立即resolve的Promise对象。 async function getData(){return new Promise((resolve,reject){setTimeout((){var name syy;resolve(name)},1000)}) } async function test(){var p await getData();console.log(p); }; test(); //syyES8对象方法的扩展Object.values():返回一个给定对象所有可枚举属性值的数组Object.entries():返回一个给定对象自身可遍历属性[key,value]的数组方便map()方法遍历对象的扩展运算符对象的解构赋值用于从一个对象取值相当于将所有哦可遍历的、但尚未被读取的属性分配到指定的对象上面。所有的键和它们的值都会拷贝到新对象上面。let { x, y, …z } { x: 1, y: 2, a: 3, b: 4 }; x // 1 y // 2 z // { a: 3, b: 4 }对象扩展方法Object.fromEntries():将二维数组转换为对象。和Object.entries()是将对象转换成二维数组。正好相反字符串扩展方法trimStarttrimEnd在es5中trim()方法用来清除字符串两端的空格。所以在es10中引入trimStart清除左边空白trimEnd清除右边的空白let str11 adasd
console.log(str11) console.log(str11.trimStart()) console.log(str11.trimEnd()) console.log(str11.trim())ES10数组扩展方法flat将多维数组转换为低维数组let arr14 [1,2,3,4,[5,5,6]] console.log(arr14.flat())私有属性私有属性用#进行标识私有属性无法在外部使用class Person{//公有属性name;//私有属性#age;#weight;constructor(name,age,weight){this.name namethis.#age agethis.#weight weight}con(){console.log(this.name)console.log(this.#age)console.log(this.#weight)} } const girl new Person(Lisa,17,45g) console.log(girl) girl.con()