es6划重点

  • es6划重点

    • 1.作用域变量

      • 1.1.let和var对比

        • 1.变量不提升
        • 2.不能重复定义
        • 3.暂存死区
        • 4.闭包新写法
    • 2.const(常量)
    • 3.解构
      • 1.数组解构
      • 2.对象解构
      • 3.混合解构
      • 4.传递参数，结果解构
    • 4.拷贝
      • 4.1.浅拷贝
      • 4.2.对象合并
      • 4.3.JSON.parse(JSON.stringify())
      • 4.4.深拷贝（递归拷贝）
      • 4.5.展开运算符
    • 5. 代理proxy
      • 5.1.普通函数（defineProperty）
      • 5.2.mvvm
      • 5.3 普通代理
      • 5.4 多层代理
    • 6.箭头函数
      • 6.1 普通剪头函数
      • 6.2 类数组
      • 6.3 this指向问题
      • 6.4 let不会将变量放在window上
    • 7.arr(数组新方法)
      • 7.1 reduce(收敛)
      • 7.2 filter(过滤)
      • 7.3 map
      • 7.3 every
      • 7.4 findIndex
      • 7.5 Array.from
      • 7.6 Array.of()
      • 7.7 copyWithin
      • 7.8 Object.keys
    • 8.Symbol
    • 9.template
      • 9.1 模板字符串
      • 9.2 模板字符串实现原理
    • 10.集合
      • 10.1 Set
      • 10.2 Map
    • 11 class
      • 11.1 es5 实现的类
      • 11.2 es6 写法
      • 11.3 get 与 set
    • 参考文档

es6划重点

1.作用域变量

1.1.let和var对比

1.变量不提升

var 可能会造成变量提升

这里变量提升了,先声明a然后打印再赋值,结果是undefined

console.log(a);//undefined
var a = 1;

//相当于
var a;
console.log(a);
a = 1;

let的话，变量不会提升，打印的时候，会报错，因为还没声明

console.log(a);//a is not defined
let a = 1;

2.不能重复定义

var 可能会被重新赋值, let不能重复声明一个变量

var a = 1;
var a = 2;
console.log(a);//2
let a = 1;
let a = 2;//Identifier ‘a‘ has already been declared 这里是说它已经被声明了，不能重复声明
console.log(a);

3.暂存死区

var的作用域问题 (函数作用域 全局作用域) (let 暂存死区)

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

{
    let a = 1;
}
console.log(a);//a is not defined
{
    var a = 1;
}
console.log(a)//1

4.闭包新写法

以前

;(function () {

})();

现在

{}

2.const(常量)

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。

const PI = 3.141593
PI > 3.0

es5写法

Object.defineProperty(typeof global === "object" ? global : window, "PI", {
    value:        3.141593,
    enumerable:   true,//对象属性是否可通过for-in循环，flase为不可循环，默认值为true
    writable:     false,//对象属性是否可修改,flase为不可修改，默认值为true
    configurable: false//能否使用delete、能否需改属性特性、或能否修改访问器属性
})
PI > 3.0;

3.解构

1.数组解构

let [,b,c,d=100] = [1,2,3];
console.log(b,d);

2.对象解构

let obj = {name:‘cjw‘,age:18};
//这里重新命名了
let {name:Name,age,address="默认"} = obj;
console.log(Name, age, address)

3.混合解构

let [{name}] =  [{name:‘cjw‘}];

4.传递参数，结果解构

Promise.all([‘cjw‘,‘9‘]).then(([name,age])=>{
  console.log(name, age);
});

4.拷贝

4.1.浅拷贝

let arr1 = [1,2,3,[1,2,3]];
let arr2 = [1,2,3];
let arr = [...arr1,...arr2];
console.log(arr)
arr1[3][0] = 100;

4.2.对象合并

let school = {name:‘zfpx‘,a:{a:1}};
let my  = {age:18};
let newObj = {...school,a:{...school.a},...my};
console.log(newObj)

4.3.JSON.parse(JSON.stringify())

这个只能拷贝普通对象，new Date之类不能拷贝

let school = { name: ‘zfpx‘, a: { a: 1 } ,date:new Date(),reg:new RegExp(/\d+/),fn:function(){}};
let s = JSON.parse(JSON.stringify(school));

4.4.深拷贝（递归拷贝）

function deepClone(obj) { // 递归拷贝 深拷贝
  if(obj == null) return null;
  if (obj instanceof Date) return new Date(obj);
  if(obj instanceof RegExp) return new RegExp(obj);
  if(typeof obj !== ‘object‘) return obj;
  let t = new obj.constructor
  for(let key in obj ){
    t[key] = deepClone(obj[key])
  }
  return t;
}
let o = { a: [1, 2, 3] }
let r = deepClone(o);
o.a[1] = 1000

4.5.展开运算符

// 剩余运算符只能用在最后一个参数
function test(a, b,...c) { // c = [5,6,7]
  // 将类数组转化成数组
  let d = Array.prototype.slice.call(arguments,2)
  // a,b,...c
  let e =  Array.from(arguments).slice(2);
  let arr = [...arguments].slice(2);
  console.log(e);
}
test(1,2,3,5,6,7);

把多个对象的属性复制到一个对象中,第一个参数是复制的对象,从第二个参数开始往后,都是复制的源对象

// Object.assign  {...}
let name ={name:‘zfpx‘}
let age = {age:9}
let obj = Object.assign(name,age); // {...}
console.log(obj);

5. 代理proxy

5.1.普通函数（defineProperty）

Object.defineProperty(obj, ‘PI‘, {
    enumerable: true,
    configurable: false,
    get(){
        console.log(‘get‘);
    },
    set(){
        console.log(‘set‘);
        val = v;
    }
})
obj.PI = 3.15;

5.2.mvvm

let obj = {name: {name: ‘cjw‘}, age: 18};
function observer(obj){
    if(typeof obj != ‘object‘) return obj;
    for(let key in obj){
        defineReactive(obj, key, obj[key]);
    }
}
function defineReactive(obj, key, value){
    observer(value);
    Object.defineProperty(obj, key, {
        get(){
            return value;
        },
        set(){
            console.log(‘update‘);
        }
    })
}
observer(obj);
obj.name.name = ‘cjw‘;

5.3 普通代理

let proxy = new Proxy(obj, {
    set(target, key, value){
        if(key === ‘length‘) return true;
        console.log(‘update‘);
        return Reflect.set(target, key, value);
    },
    get(target, key){
        return Reflect.get(target, key);
    }
})
proxy.push(‘123‘);
console.log(proxy.length);

5.4 多层代理

let obj = {name: {name: ‘cjw‘}, age : 18};
function set(obj, callback){
    let proxy = new Proxy(obj, {
        set(target, key ,value){
            if(key === ‘length‘) return true;
            console.log(‘更新‘);
            return Reflect.set(target, key, value);
        },
        get(target, key){
            return Reflect.get(target, key);
        }
    })
    callback(proxy);
}
set(obj, function(proxy){
    proxy.age = ‘100‘;
    console.log(proxy);
})

6.箭头函数

this 指向

去掉function 关键字

去掉return 和 {}

6.1 普通剪头函数

function a(a) {
  return function (b) {
    return a + b;
  }
}
let a = a => b => a + b;
console.log(a(1)(2));

6.2 类数组

let a = (...arguments) => {
  console.log(arguments)
}
a(1, 2, 3);

6.3 this指向问题

// this指向问题
let obj = {
  a: 1,
  b() { // obj = this
    console.log(this);
    setTimeout(() => { // 箭头函数中没有this指向 从而解决了this的问题
      this.a = 100;
    }, 1000);
  }
}
obj.b();
setTimeout(() => {
  console.log(obj.a)
}, 2000);

6.4 let不会将变量放在window上

let a = 1000; // let不会将变量放在window上
let obj = {
  a: 1,
  b: () => {
    this.a = 100; // window
  }
}
obj.b();
console.log(obj.a,a);

7.arr(数组新方法)

filter过滤 forEach 循环 map 映射 reduce 收敛 some every 反义

7.1 reduce(收敛)

原生写法

let arr = [1,2,3,4,5];
Array.prototype.myReduce = function (callback,prev) {
  for(let i = 0 ; i<this.length;i++){
    if(!prev){
      // 0 1
      prev = callback(this[i],this[i+1],i+1,this);
      i++;
    }else{
      prev = callback(prev,this[i],i+1,this);
    }
  }
  return prev
}
let r = arr.myReduce((prev,next,currentIndex,arr)=>{
  return prev+next
},100)

7.2 filter(过滤)

let arr = [1,2,3]
let arr1 = arr.filter(item=>item<=2);
console.log(arr1);

7.3 map

let arr =[1,2,3];
let arr1 = arr.map(item=>item*2);

7.3 every

let arr = [1,2,3];
let flag = arr.every(item=>item==3);
console.log(arr.includes(3)); //es7

7.4 findIndex

let arr = [1, 2, 3];
let item = arr.find(item => item == 4);
console.log(item); //es7

7.5 Array.from

将一个数组或者类数组变成数组,会复制一份

let newArr = Array.from(oldArr);

7.6 Array.of()

of是为了将一组数值,转换为数组

console.log(Array(3), Array(3).length);
console.log(Array.of(3), Array.of(3).length);

7.7 copyWithin

Array.prototype.copyWithin(target, start = 0, end = this.length) 覆盖目标的下标 开始的下标 结束的后一个的下标

[1, 2, 3, 4, 5].copyWithin(0, 1, 2)//[ 2, 2, 3, 4, 5 ]

7.8 Object.keys

Object.keys可以把对象取出来key组成数组 for of 可以迭代数组

for (var a of Object.values({ name: ‘cjw‘, age: 9 }) ){ // forEach不能return
  console.log(a);
}

8.Symbol

let s = Symbol();
let q = Symbol();

console.log(s === q);//false

let s = Symbol.for(‘cjw‘);
let q = Symbol.for(‘cjw‘);
console.log(s);//Symbol(cjw)
console.log(q);//Symbol(cjw)

console.log(Symbol.keyFor(q));
console.log(s === q);//ture

9.template

9.1 模板字符串

let name = ‘cjw‘;
let age = 9;

let str = `${name}今年${age}`;
console.log(str);

9.2 模板字符串实现原理

let newStr = str.replace(/\$\{([\s\S])\}/g, function(){
    return eval(arguments);
})
console.log(newStr);

10.集合

10.1 Set

set可以做去重 set不能放重复的

let set = new Set([1,2,3,3,2,1]);
console.log([...set]);

10.2 Map

let map = new Map();
map.set(‘js‘,‘123‘);
map.set(‘node‘,‘456‘);
map.forEach(item=>{
  console.log(item);
});

11 class

11.1 es5 实现的类

// call 构造函数里面的属性方法复制

// Object.crate 复制原型里面的属性和方法

function Animal(type) {
  this.type = { t: type};
}
Animal.prototype.eat = function () {
  console.log(‘eat‘);
}
function Cat(type) {
   Animal.call(this,type); // 让父类在子类中执行，并且this指向子类
}
// 原型上还有一个属性
// 4.继承实例上和原型上的方法
function create(proto) {
  let Fn = function () { }
  Fn.prototype = proto;
  return new Fn();
}
Cat.prototype = Object.create(Animal.prototype,{constructor:{value:Cat}});
let cat = new Cat(‘哺乳类‘)
console.log(cat.type);
cat.eat();
console.log(cat.constructor);

11.2 es6 写法

class Animal {
    constructor(type){
        this.type = type;
    }
    static flag(){
        return ‘animal‘;
    }
    eat(){
        console.log(‘eat‘);
    }
}
class Cat extends Animal{
    constructor(type){
        super(type);
    }
}

let cat = new Cat(‘哺乳类‘);
console.log(cat.type);
cat.eat();
console.log(Cat.flag);

11.3 get 与 set

getter可以用来得获取属性，setter可以去设置属性

class Person {
    constructor(){
        this.hobbies = [];
    }
    set hobby(hobby){
        this.hobbies.push(hobby);
    }
    get hobby(){
        return this.hobbies;
    }
}
let person = new Person();
person.hobby = ‘basketball‘;
person.hobby = ‘football‘;
console.log(person.hobby);

参考文档

ECMAScript 6 入门 let 和 const 命令--阮一峰

es6-features.org

原文地址：https://www.cnblogs.com/caijw/p/9868181.html

时间： 2024-11-05 15:44:55

es6划重点的相关文章

信息系统监理师（一）--2017年教材划重点

入坑信息系统监理师,希望在不断的学习过程中坚持做笔记总结,同时分享给大家,本篇是2017年教材划重点:

.NET日志记录之——log4net划重点篇

.NET日志记录之--log4net划重点篇 1.概述 log4net是.Net下一个非常优秀的开源日志记录组件.log4net记录日志的功能非常强大.它可以将日志分不同的等级,以不同的格式,输出到不同的媒介. 2.Log4net的主要组成部分 2.1 Appenders Appenders用来定义日志的输出方式,即日志要写到那种介质上去.较常用的Log4net已经实现好了,直接在配置文件中调用即可,可参见上面配置文件例子:当然也可以自己写一个,需要从log4net.Appender.Appen

「红松教育」2019中级通信工程师「综合能力」第一章划重点啦

今天我们先聊一聊 [综合能力]第一章[通信职业道德] 主要包含以下内容这些内容经过抽丝剥茧 划划重点 大家要掌握的主要就是 原文地址:https://blog.51cto.com/14226733/2413698

《中级通信工程师 专业实务部分第一章 划重点啦！》

每周一定期推送[专业实务]部分中级通信工程师备考干货关注我们!一起上岸!今天我们主要对第一章? 无线通信基础?划划重点 无线通信概述利用空间作为信道,以电磁波的形式传播信息的通信方式. 电磁波- 变化的电场产生磁场,变化的磁场产生 电场- 电场.磁场和传播方向相互垂直(横波)- 极化方向- 振幅(强度,是能量密度,正比于振幅 的平方)与距离和功率的关系无线频谱划分-?总的无线频谱范围:?3KHz~300GHz移动通信(2G/3G/4G网络):?300~3000MHz,分米波,UHF?5G网络:s

Java入门（七）之面向对象-划重点

目录 Java入门(七)之面向对象-划重点 0. 面向对象的概念 0.1 面向对象和面向过程 0.2 属性和方法 1. 面向对象的特征 1.1 对象唯一 1.2 抽象性 1.3 三大特性--继承.封装.多态 2. 继承相关 2.1 抽象类 2.2 接口 3. 多态相关 3.1 构造方法 课后习题 角色类 狮子类 农夫类 女儿类 故事讲述 Java入门(七)之面向对象-划重点 0. 面向对象的概念 0.1 面向对象和面向过程 面向对象是一种软件开发方法,这种方法可以将现实中的事物抽象出来,让我们的

Android -- 贝塞尔实现水波纹动画（划重点！！）

1,昨天看到了一个挺好的ui效果,是使用贝塞尔曲线实现的,就和大家来分享分享,还有,在写博客的时候我经常会把自己在做某种效果时的一些问题给写出来,而不是像很多文章直接就给出了解决方法,这里给大家解释一下,这里写出我遇到的一些问题不是为了凑整片文章的字数,而是希望大家能从根源下知道它是怎么解决的,而不是你直接百度搜索这个问题解决的代码,好了,说了这么多,只是想告诉大家,我后面会在过程中提很多问题(邪恶脸,嘿嘿嘿),好吧,来看看今天的效果: 2,what is the fuck?,这就是你说的很好看

MySQL划重点-查询-聚合

为快速得到统计数据,提供5个聚合函数 count(*)表示统计总行数 select count(*) from students; max(列)表示求此列的最大值 mix(列)表示求此列的最小值

知识点划重点-向上转型问题

问题的起因:今天在敲代码的时候用到了linkedlist,众所周知,linkedlist实现了list接口,于是我就这样声明了一个变量:List<Integer> linklist=new LinkedList<>(); 然后在代码中我需要获取list的第一个值,我清清楚楚明明白白记得linkedlist中有一个getFirst方法,于是乎我信誓旦旦的写下linklist.getFirst(); 当当当当..编译器猝不及防的就给了我一个红叉叉,说找不到这个方法,我,恩?WTF? 恩

划重点丨三大主要云安全领域，你知道吗？

面对信息安全的复杂性,制造商们难免不知所措.信息安全的***对制造企业来说后果不堪设想.截至目前也没有任何迹象表明,信息安全的环境在短时间内会有很大改善或变得更加安全. 因此,越来越多的制造行业开始加强制定企业的信息安全战略,注重战略的高效实施,以适应新的威胁并迅速调整战略.通过实践,许多制造商发现,可以依赖云提供商来为信息安全提供高效的.成本更低的替代方案.然而,并非所有云提供商在信息安全方面都具有相同水平的专业知识和能力. 关于制造商应该关注的三大信息安全主要领域你了解吗? 访问控制访问控制