ES6 从6入门到10放弃(耐心)
语法本身并不重要，怎么解决问题！怎么更好的解决问题才是本质
ES6 --> ES7、8、9、10 利用新技能拓宽解决问题的思路
全新的JavaScript体系
字符串模板（直接赋值变量，支持表达式）
监听数据
自定义数据结构，遍历
ES7 --> ES10 全新体系,改变JS书写习惯
学习方法
- 体验乐趣 1天
- 进入状态 10天
- 养成习惯 1个月后
- 收获知识 3个月后
- 行程思维习惯 5个月后
ES6 基础语法 _作用域
Let & Const
全局作用域
var abc = 1234 (全局变量) abcd = 2345 （全局作用域）（作为window属性使用,可被删除） window.delete abcd // true函数作用域 - 块状作用域
function test(){ var a = 3 函数作用域 if(true){ 块状作用域 } function test2(){ var b = 4 let c = 4 // let 当前{}块状作用域 return a + b } //作用域链,向上找 test2() 函数作用域 }动态作用域
window.a = 3 function test(){ console.log(this.a) } // this 动态作用域变量 test() test.bind({a:100})()Const 常量
const a a = 3 const a = 3 a = 4 // two error example附加阅读
- 什么是作用域
- JavaScript 词法作用域 和 动态作用域
- 深入理解JS中声明提升、作用域链和this关键字
数组 _遍历 _转换 _生成 _查找
- ES5中有多少种遍历的方法?
优势缺点？数组? object?
const arr = [1,2,3,4,5]
// 第一种
for(let i=1,i<=arr.lenght,i++){
console.log(arr[i])
}
// 第二种 不支持 break,continue
arr.foreach(function item(){
console.log(item)
})
// 第三种 可return false 跳出循环
arr.every(function item(){
console.log(item)
return true
})
// 第四种 for in （瑕疵:为对象而设计）
arr.8 = 6
for (let index in arr) {
if(index === 2){
continue; //不会起作用 === 既检查值,也检查类型
}
if(index * 1 === 2){
continue; // 起作用,index转换为数值类型
}
if(index == 2){
continue; // 起作用 == 只检查值,不检查类型
}
// 所以index是字符串类型
console.log(index, arr[index])
}
continue,break
Ps: 数组是对象，数组是可遍历的。
for in 的缺点
- ES6 遍历方法
ES6中有多少种遍历的方法?
// for of 优点：可遍历自定义数组，缺点是什么？？
for (const item of arr) {
console.log(item)
}
Array.from
ES5 将伪数组转换为数组的方法 例如 nodelist (遍历所有Dom)
ES6 如何转换？
// ES5 转换方法
// 转换arguments --> Collection
let args = [].slice.call(arguments)
// 找到所有img图片 --> NodeList
let imgs = [].slice.call(document.querySelectorAll['img'])
// ES6 方法 Array.prototype.from
let args2 = Array.from(arguments)
let imgs2 = Array.from(document.querySelectorAll['img'])
// example 创建一个集合 长度5 内容为1
// ES5 写法
let arrs = Array(5)
for(let i = 1, len = arrs.lenght ; i < len ; i++){
arrs[i] = 1
}
// ES6 Array.from(arrayLike,mapFn,thisArg)
// arrayLike 伪数组 含有lenght属性的对象就可以称为伪数组 例如 {'a':1,'b':2,lenght:2}
let arrs = Array.from({lenght:5},function (){return 1})
Array.of-fill
ES5 创建一个新数组改怎么做
ES6 如何实现？
// ES5 新建数组
let arrs = Array(5)
let arrs = ['','']
arrs.push();
// ES6 [from,of,fill]方法
let Array = Array.of(1,2,3,4,5)
// Array.prototype.fill 填充数组 Array.from 升级版
// Array.fill(value,start,end)
let arrs = Array(5).fill(5)
// 修改数组
Array.fill(4,2,4)Find & FindIndex
ES5 如何查找一个元素
ES6 的查找方法？
// ES5 的查找元素方法 filter 拿到所有返回符合条件的元素
// 没有验证是否存在某个元素的方法
let find = arrs.filter(function (item){
return item === 2
})
console.log(find)
// ES6 的查找方法
// 有符合条件的元素，返回该元素,满足条件的第一个值
// 无符合条件，返回undefind
let find = arrs.find(function (item){
return item === 2
})
// Array.prototype.findindex
// 返回索引
let find = arrs.findIndex(function (item){
return item === 2
})
- 思考
- JavaScript 中有哪儿些元素是可以遍历的
- 如何给数据结构自定义遍历
- find() 和 ES5_fillter() 有什么区别
- 附加阅读
- 数组 Array
Class 类 _声明 _属性 _方法 _继承
ES5 中如何声明一个类
ES6 声明类的方法
Ps: 按照java类的定义，更容易理解，ES6就是对ES5类的语法糖，并未更改其本质行为。
//ES5 方法，声明一个类(当成一个构造函数去使用)
let Animal = function(type){
this.type = type
this.eat = function(){
console.log('eat food')
}
}
// 实例对象
let dog = new Animal('dog')
let cat = new Animal('cat')
dog.eat = function (){
console.log('error')
}
dog.eat();
cat.eat();
// 违背继承原则,只能改变自己
// 优化，把eat方法挂载到实例链上
let Animal = function(type){
this.type = type
}
Animal.prototype.eat = function(){
console.log('i eat food')
}
// 子类修改父类方法
dog.constructor.prototype.eat = function(){
console.log('error')
}
// ES6 方法,如果理解不了原型链的写法，直接用es6的类即可
class Animal {
constructor(type){
this.type = type
}
eat(){
Console.log('i eat food')
}
}
let dog = new Animal('dog')
let cat = new Animal('cat')
dog.eat()
// 何如看出es5 与 es6类的区别(class与es5使用原型链生成的类 区别就是语法糖，没区别!)
console.log(typeof Animal)
// result type is function Setter & Getter (如何读写属性)
//ES5 无法实现读写属性
//闭包的方式，实现私有属性 _age
let _age = 4
class Animal {
constructor(type){
this.type = type
}
// 方法
eat(){
Console.log('i eat food')
}
// setter getter
// age 为属性，不是方法
get age (){
return _age
}
set age(val){
if(){
// 满足条件赋值私有属性
_age = val
}else{
// 控制setter
}
}
}
let dog = new Animal('dog')
dog.age = 8
console.log(dog.age)Static Methods 静态方法
- 对象实例的方法
- 类的静态方法
//ES5 静态方法
let Animal = function(type){
this.type = type
}
//ES5 实例方法,挂载在原型链上
Animal.prototype.eat = function(){
Animal.walk()
Console.log('i eat food')
}
//ES5 静态方法 不是挂载在原型链上的,而是挂载在类上
Animal.walk = function(){
console.log('i m walking')
}
//ES6 静态方法
class Animal {
constructor(type){
this.type = type
}
// 方法
eat(){
// 引用静态方法
Animal.walk()
Console.log('i eat food')
}
// setter getter
// age 为属性，不是方法
get age (){
return 4
}
set age(val){
this.realage = val
}
static walk (){
console.log('i m walking')
}
}Sub Classes 继承类
ES5 如何继承一个类
ES6 如何实现
Ps: 面向对象 之所以强大，就是因为继承 : )
//ES5 继承方法(其中一种方法)
let Dog = function () {
//初始化父类的构函数
//用call 是改变 this 的指针
// dog 就是父类的参数
Animal.call(this, 'dog')
this.run = function () {
console.log('i cant run')
}
}
//把原型链指向父类的原型链
//值类型 引用类型
//不指向无法获取父类原型链上的方法
Dog.prototype = Animal.prototype
//ES6 继承方法 (语法糖)
Class Dog extends Animal {
//构造函数
//显示 隐示
constructor(type) {
super(type)
this.age = 8
}
}
let dog = new Dog('type')
dog.eat()附加阅读
类
ES6 Class
函数 _默认值 _形参 _箭头函数
函数的默认值
ES5中怎么处理函数处理的默认值
ES6 处理函数默认值
//参数默认值
function f(x, y, z) {
if (y == undefined) {
y = 7
}
if (z == undefined) {
z = 7
}
return x + y + z;
}
console.log(f(1, 2))
//ES6
function f(x, y = 7, z = 8) {
//consolo.log(argu)
return x + y + z
}
console.log( f(1,undefined,43) )函数不确定参数的处理
ES5 中使用argments处理不确定参数
ES6 无法使用，如何处理
// 1 可以用arguments获取所有参数
// 2 arguments是伪数组，可以用原型链call对它进行遍历
function sum() {
let num = 0
// ES5的获取方法
Array.prototype.forEach.call(arguments.forEach(item) {
num += item * 1
})
// ES6
Array.from(arguments.forEach(item) {
num += item * 1
})
console.log(sum(12, 3, 4, 5))
}
//ES6 无法使用，如何处理
//... Rest parameter 代表所有参数都存在于nums中
function sum(...nums) {
let num = 0
nums.forEach(function (item) {
num += item * 1
})
return num
}
console.log(sum(1, 2, 3))
//Rest参数(...) 是获取所有参数
//...nums 是数组,不是伪数组
//输入参数，可以拆开，把所有不确定参数放于Rest数组里
function sum(base, ...nums) {
let num = 0
nums.forEach(function (item) {
num += item * 1
})
return base * 2 + num
}
console.log(sum(1, 2, 3))Rest数组的逆运算 spread
//参数确定,入参为不确定的数组
let data = [1,2,3]
function sum(x=1,y=2,z=4){
return x+y+z
}
//ES5
sum.apply(this,data)
//ES6写法 spread 操作
sum(...data)!箭头函数 ( ) => {}
//ES6箭头函数 ( 参数 )=>{ 函数体 }
//无function关键字
let hello = (name) => {
console.log('this is a function' + name)
}
//有且只有一个参数的时候，（）可以省略
//无参不可省略（）
let hello = name => {
console.log('this is a function' + name)
}
// 1.如果返回一个表达式 {}及return可以省略
let sum = (x, y, z) => x + y + z
sum(1, 2, 3)
// 2.如果返回一个对象，需要在函数体加小括号({ })
// 小括号的含义???
let sum = (x, y, z) => ({
x: x,
y: y,
z: z
})
// 无法理解，可按这种方式书写
let sum = (x, y, z) => {
return {
x: x,
y: y,
z: z
}
}
// ES5中 谁调用this，就指向谁
// 箭头函数的 this
let test ={
name : 'test'
say : function(){
console.log(this.name)
}
}
test.say() //指向test
// 在ES6中，this指向谁?
let test ={
name : 'test'
say : () => {
console.log(this.name)
}
}
console.log(test.say())
//指向window练习
- 如何用箭头函数实现一个数组的排列
- 箭头函数对this的处理 还有什么作用
阅读
箭头函数
默认参数值
Three dots ( … ) in JavaScript
Three dots ( … ) in JavaScript https://dev.to/sagar/three-dots---in-javascript-26ci
对象 Object
Object Property
ES5 中object属性可以简写吗？
ES6 可以吗
let x = 1,y=2,z=3
let obj = {
a:x,
b:y,
hello:function(){
console.log('hello')
}
//ES5不允许增加异步函数
}
//ES5 对象增加元素
obj[z]=5
//ES6 key支持变量和表达式
let obj = {
x,
y,
[z]:5,
hello(){
console.log('直接写hello() ')
}
//ES6 新增 可以在obj中增加异步方法
* hello2(){
console.log('直接写hello() ')
}
}
//异步函数
function* functionName(){
}Set数据结构
// 使用方法 增删改查 改:先删 后增 靠谱~
let s = new Set()
s.add('one')
s.delete('one')
s.forEach(item =>{
console.log(item)
})
for (let item of s) {
console.log(item)
}Map数据结构
// 字典 传入可遍历对象 entry object
// key可以是任意值
let map = new map()
// 新增
map.set(1,2)
map.set(2,3)
// 修改
map.set(1,3)
map.delete(1)
map.clear() //清空
map.size //长度
map.has(1)//boolean
map.get(1)//返回value
// map 遍历 先value 后key
map.forEach((value,key)=>{
console.log(value,key)
})
// forof 只能遍历 可遍历对象!
for (let [key,value] of map) {
console.log(key,value)
}
// map 键的类型可以是任意的
let o = ()=>{
console.log('0')
}
map.set(o,4)
// 性能 Map > ObjectObject.assign
把一个对象拷贝到另外一个对象
//ES5拷贝对象的方法，遍历循环赋值
//ES6使用新增API
Object.assign(target,source)
//缺陷: 浅复制 (引用类型会丢失原始数据)
target 对象
source 对象思考
- 如果源对象或者目标对象参数为undefind或者null,会发生什么?
- WeakSet,WeakMap,Set,Map (同样的API) 有什么区别
正则 RegExp
Y修饰符
//正则表达式
// g会跳字节匹配 只要可以匹配到
const a = 'aaaa_aa_a'
const r1 = /a+/g
const r2 = /a+/y
console.log(r1.exec(a))
console.log(r2.exec(a))
//sticky 粘连的语法,会连续匹配
console.log(r1.exec(a))
console.log(r2.exec(a)) U修饰符
ES5如何用正则处理中文呢
ES6升级了什么
//unicode 需要深入了解字符编码
例如我的名字
'吉'的异形字原文地址：https://www.cnblogs.com/maozhe/p/12237879.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
