JavaScript ES(6-10)语法大全
一. 作用域
var 可以是全局变量,在任何文件都可以用
//1. var a = 12345; // 全局变量 ,具备全局作用域 b=123; // 这个是作为window的属性在使用,具备全局作用域 //2. 说明 function test(){ ab = 45 } test() //没有使用var定义的,都会挂在window上,作为属性使用,可以使用window.ab拿到 //3. 函数作用域,局部作用域 function test(){ var a =3 return a+4 } console.log(test()) //4.块级作用域 function test(){ var a =3 if(a === 3){ let b = 4 //形成壁垒,没有变量提升,块级作用域,就是有{}的地方就是块级作用域 console.log('abc') } else{ console.log('abcd') } return a+4 } console.log(test()) // 使用let和const没有变量提升 //5.闭包 function test(){ var a= 3 function test2(){ return a } return test2 }
动态作用域
//动态作用域 window.a=3 function test () { console.log(this.a) } test() test.bind({a:100})() //会输出1和100,this是动态指向的,不是固定指向window的 //bind是函数动态绑定到对象去,这时候this指向这个对象本身,才会导致同一个函数导致输出不同的结果
let和const的使用
- let具有块级作用域
- let声明的变量的提升,不能使用全局属性来访问
- let不可以重复定义
- let不会进行变量提升
const定义常量
基本和let一样
不可以先声明再赋值
{ let a = 1 console.log(a) } //console.log(a)//这个是访问不到的,a是块级作用域里面的,因为使用了let var b = 3 let c = 4 console.log(b,c) console.log(window.b,window.c)//b可以输出。c是undefined
二. Array
2.1 ES5中数组有多少种遍历的方法?
// for循环 const arr = [1,2,3,4,5] for(let i = 0;i<arr.length;i++){ if(arr[i]===2){ continue } // console.log( arr[i]) } // forEach,不支持break,和continue arr.forEach(function(item){ // console.log(item) }) //every arr.every(function(item){ if(item===2){ return false//遇到2跳过,或者为空 } // console.log(item) return true //没有return的话只输出1 }) //for in 是为object设计的。也可以遍历数组,但是有小问题 //数组也是对象 //arr.a=8;//如果加入这个,那边索引是a。出现了索引字符串 //重点。for in 支持continue和break的,但是索引是字符串,注意类型问题 for(let index in arr){ console.log(index,arr[index])//索引和值 }
2.2 ES5种数组有多少种遍历的方法?
// for循环 const arr = [1,2,3,4,5] for(let i = 0;i<arr.length;i++){ if(arr[i]===2){ continue } // console.log( arr[i]) } // forEach,不支持break,和continue arr.forEach(function(item){ // console.log(item) }) //every arr.every(function(item){ if(item===2){ return false//遇到2跳过,或者为空 } // console.log(item) return true //没有return的话只输出1 }) //for in 是为object设计的。也可以遍历数组,但是有小问题 //数组也是对象 //arr.a=8;//如果加入这个,那边索引是a。出现了索引字符串 //重点。for in 支持continue和break的,但是索引是字符串,注意类型问题 for(let index in arr){ //console.log(index,arr[index])//索引和值 }
2.3 ES5种将伪数组转换成数组该怎么办?
ES6中如何做?
//判断一个对象是不是可遍历的,不可以是不是数组,object的。要反过来想,很多数组对象都是不一样的。除了object和数组还有其他的吗? //for of 功能更强大,可以自定义 for(let item of arr){ // console.log(item) } const Price = { A:[1.5,2.3,4.5], B:[3,4,5], C:[0.5,0.8,1.2] } //ES5种将伪数组转换成数组该怎么办? //ES6中如何做? //转换,这个是es5用法 // let args = [].slice.call(arguments) // let imgs = [].slice.call(document.querySelectorAll('img')) // console.log(args) // Array.prototype.from,es6用法 //let args = Array.from(arguments) //let imgs = Array.from(document.querySelectorAll('img')) //imgs.forEach()//再用 //Array.from(arrayLink,mapFn,thisArg) //let array = Array(5) // 例子 // let array = Array(5) // for(let i = 0, len = array.length; i<len;i++){ // array[i] = 1 // } // console.log(array) let array = Array.from({length:5},function(){return 1}) console.log(array)
2.4 Array.of-fill (如何生成新数组?)
ES5中创建一个新数组该怎么做?
ES6中如何做?
// 生成新数组 // ES5 // let array = Array(5) // let array = ['',''] // ES6 // Array.prototype.of // let array =Array.of(1,2,3,4,5) // console.log(array) // Array.prototype.fill // let array =Array(5).fill(1) // console.log(array) // Array.fill(value,start.end)可以用在替换
2.5 Find&FindIndex(如果查找数组)
ES5中如何查找一个元素呢?
ES6中如何做?
// 查找新元素,查找为了验证或者筛选 // ES5 //filter缺点是性能不太好,返回所有值 // let array = [1,2,3,4,5] // let find = array.filter(function(item){ // return item===3; // }) // console.log(find) //ES6 //Array.prototype.find //返回数字,返回第一个值 let array = [1,2,3,4,5] let find = array.find(function(item){ return item % 2===3; }) console.log(find) //Array.prototype.findIndex,返回索引
总结:遍历,转换,生成,查找
三. Class
3. 1
ES5中怎么声明一个类的?
ES6是如何做的呢?
//ES5 let Animal = function(type){ this.type = type // this.eat = function () { // console.log('eat food') // } 挂在原型链上,要不然每个实例都有这个方法 } Animal.prototype.eat=function(){ console.log('eat food') } let dog = new Animal('dog') let monkey = new Animal('monkey') console.log(dog) console.log(monkey) // monkey.eat=function(){ // console.log('error') // } 只对自己有效果 monkey.constructor.prototype.eat = function (){ console.log('error') } //都有一个eat方法 dog.eat() monkey.eat() // ES6 class Animal6 { constructor(type){ this.type=type } eat(){ console.log('eat food 6') } } let dog6 = new Animal6('dog') let monkey6 = new Animal6('monkey') console.log(dog6) console.log(monkey6) // console.log(typeof Animal6) 判断类型
3.2 Setter&Getter(如何读写属性?)
//ES6 属性的保护和只读 let _age = 4 class Animal { constructor(type){ this.type=type } get age(){ return _age } set age(val){ if(val <7 && val >4)//不满足条件拦截 _age = val } eat(){ console.log('eat food 6') } } let dog = new Animal('dog') console.log(dog.age) dog.age = 8;//5的话就满足条件 console.log(dog.age)
3.3 Static Methods (如何操作方法?)
ES5中怎么操作一个方法?
ES6是如何做的呢?
开发中什么时候类的实例对象(依赖于实例对象的属性),什么时候用类静态(拿不到当前的实例对象)
//如何操作方法 // 静态方法,属于类,不属于方法 // ES5 let Animal = function (type){ this.type = type // this.eat = function(){} } Animal.prototype.eat=function(){ Animal.walk() console.log('i am eat food') } // 静态方法 Animal.walk = function(){ console.log('I am walking') } let dog = new Animal('dog') dog.eat() // dog.walk() 错误 //ES6 class Animal { constructor(type){ this.type=type } eat(){ Animal.walk() console.log('eat food 6') } static walk(){ console.log('I am walking') } } let dog = new Animal('dog') dog.eat()
3.4 Sub Classes(如何继承一个类)
ES5中怎么继承另一个类?
ES6是如何做的呢?
//继承 // ES5 let Animal = function (type){ this.type = type } Animal.prototype.eat=function(){ Animal.walk() console.log('i am eat food') } Animal.walk = function(){ console.log('I am walking') } //继承 let Dog = function () { //初始化父类的构造函数,指针指向dog类 Animal.call(this,'dog') this.run = function(){ } } //引用类型 Dog.prototype = Animal.prototype let dog = new Dog('dog') dog.eat() // ES6 let Animal = function (type){ this.type = type } Animal.prototype.eat=function(){ Animal.walk() console.log('i am eat food') } Animal.walk = function(){ console.log('I am walking') } //继承 class Dog extends Animal { constructor (type){ super(type) this.age = 2 } } let dog = new Dog('dog') dog.eat()
总结:声明,属性,方法,继承
四. Function Updates
4.1
ES5中怎么处理函数参数的默认值?
ES6是如何做的呢?
//ES5 //处理参数问题 function f(x,y,z){ if(y===undefined){ y=7 } if(z===undefined){ z=42 } return x+y+z } console.log(f(1,8,43)) //ES6 function f(x,y=7,z=42){ console.log(arguments.length)//arguments就是看函数的参数情况,可以看看Array.from(arguments)es5语法 console.log(f.length)//达不到效果 return x+y+z } console.log(f(1)) console.log(f(1,undefined,43))//不想传就填undefined
4.2 ES5中怎么处理不确定参数的问题?
ES6是如何做的呢?
// 求和函数 //ES5 function sum(){ let num=0 // Array.prototype.forEach.call(arguments,function(item){ // num +=item*1 // }) Array.from(arguments).forEach(function(item){ num +=item*1 }) return num } console.log(sum(1,2,3,4,5)) //ES6 function sum(...nums){ //Rest paramenter let num = 0; nums.forEach(function(item){ num +=item*1 }) return num }
4.3 Spread Operator(rest参数的逆运算)
//es5 function sum(x=1,y=2,z=3){ return x+y+z } let data=[4,5,7] console.log(sum.apply(this,data)) //ES6 console.log(...data)
4.4 Arrow Functions(箭头函数)
ES6中的箭头函数是什么?
()=>{}
let hello = (name,city)=>{ console.log('hello world',name,city) } hello('imooc','beijing') let sum =(x,y,z) => { return { x:x, y:y, z:z } } console.log(sum(1,2,4))
2-23 Object Property
ES5中Object属性能简写吗?
ES6可以吗?
let x =1 ;let y=2;let z=3; let obj = { 'x':x, y, [z+y]:6, *hello(){ console.log('hellow') } } obj.hello()
2-24 Set数据结构
//set let s = new Set() // let s = new Set([1,2,3,4]) // s.add('hello') // s.add('goodbye') s.add('hello').add('goodbye').add('hello') s.delete('hello') s.clear() console.log(s.has('hello2'))
2-25 Map数据结构
let map = new Map([1,2],[3,4]) let map = new Map() map.delete(1) map.clear() console.log(map.size) console.log(map.has(2)) console.log(map.get(1)) console.log(map.keys(),map.values(),map.entries()) console.log(map) map.forEach((value,key)=>{ console.log(value,key) }) for(let [key,value] of map){ console.log(key,value) }
26 Object.assign (对象拷贝)
const target = {} const source = {b:4,c:5} Object.assign(target,source) console.log(target)
2-28 Regexp Sticky (y修饰符)
const s = 'aaa_aa_a' const r1 = /a+/g //^$ const r2 = /a+/y console.log(r1.exec(s)) // aaa console.log(r2.exec(s)) console.log(r1.exec(s)) // console.log(r2.exec(s)) //sticky
2-29 Regexp Unicode (u修饰符)
ES5如何在正则中处理中文问题,如果是多个字节呢?
ES6有什么高招
// unicode // u修饰符 let s ='吉' let s2 = '\uD842\uDFB7' console.log(/^\uD842/.test(s2)) console.log(/^\uD842/u.test(s2))
2-31 String (字符串拼接问题)
2-33 Array Destructure (解构赋值)
2-34 Array Destructure (解构赋值)
2-35 Object Destructrue (解构赋值)
2-37 Callback (异步操作)
2-38 Promise (异步操作)
2-39 Then (异步操作)
2-40 Resolve_Reject(异步操作)
2-41 Catch(异步操作)
2-42 All(异步操作)
2-43 Race(异步操作)
2-45 Refle.apply(反射机制)
2-46 Reflect.construct(反射机制)
2-47 Reflect.getOwnPropertyDescriptor(反射机制)
2-49 proxy basic syntax (该怎么使用代理功能)
2-50 Schema Validation
2-53 Revocable Proxy
2-55 Generator (如何让遍历停下来)
2-57 Syntax
2-58 Scene Pratice
2-60 Iterator(如何让不支持遍历的数据结构“可遍历”)
2-62 Generator
2-65 Export Import (如何把代码进行模块化)