ES6快速上手

最新推荐文章于 2025-04-26 14:38:20 发布

生活在北极的企鹅

最新推荐文章于 2025-04-26 14:38:20 发布

阅读量64

点赞数

文章标签： es6 前端 javascript

本文链接：https://blog.youkuaiyun.com/zwf1128/article/details/132244990

版权

var、 let、const 的区别与用处

{
 let letStr = "我是let"
 var varSrt = "我是var"
 const constSrt = "我是constSrt"
}

console.log(letStr) // Uncaught ReferenceError: letStr is not defined // letStr 没有被定义
console.log(varSrt) // 我是var
console.log(constSrt） // constSrt is not defined

我们在块中声明 let 和 var

let 它是一个局域变量，它只能在当前块中进行使用，

const 它是定义常量的，也是局部常量,只能在当前块中使用

var 不同它不论在那个地方申请全局都是可以调用的，

let a = 1;
let a = 2;
let a = 3;

// Uncaught SyntaxError: Identifier 'a' has already been declared

var b = 1;
var b = 2;
var b = 3;
console.log(b)
// 3

const c = 1;
const c = 2;

// Identifier 'c' has already been declared

let 不能重复声明一个变量；

const 定义的一个常量不能进行修改否则会报错；

var 它是可以的不会报错已最后一个为准

ES6 解构数组

ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值。

1、数组的解构：

const F4 = ['小沈阳','刘能','赵四','宋小宝']
let [F4_1,F4_2,F4_3,F4_4] = F4
console.log(F4_1) // 小沈阳
console.log(F4_2) // 刘能
console.log(F4_3) // 赵四
console.log(F4_4) // 宋小宝

如上所示，首先定义一个数组常量，然后直接定义一个数组变量，然后将函数返回值指向该变量，他会自动把第一项的值赋值给第一个数组变量，第二项赋值给第二个数组变量，以此类推，最后打印四个变量，看到没有问题

2、对象的构造:

const wang = {
  name: "小王吧",
  age: "18",
  shangan: function(){
    console.log('上岸')
    }
 }
let {name,age,shangan} = wang

console.log(name);
console.log(age);
console.log(shangan)

// 函数调用
shangan()

使用解构对象，定义对象，键值对中键表示映射的实际对象的键名，值就是自定义变量，解构完成，会自动完成赋，返回对象，随后打印变量 name，age和函数 shangan ，可以看到没问题如上所示

ES6 模板字符串

在使用模板字符串前，我们拼接字符串变量使用 +

使用 ES6 提供的模板字符串，首先使用 `` 把字符串包起来，当要使用变量时，使用 ${变量}

let a = '西瓜'
    b = '空调'
let c = '今天在家吹着' + b + '吃着' + a
console.log(c)
let d = `今天在家吹着${b},吃着${a}`
console.log(d)

ES6 判断字符串里是否包含其他字符串

let str = '你好，我是小周 ❤️';
// startsWith  --> 判断是否按照指定的字段或前缀开头
console.log(str.startsWith('你好'));
// endsWith --> 判断是否是按照指定的字符或后辍结尾
console.log(str.endsWith('❤️'));
console.log(str.endsWith('你好'));
// includes  --> 一个参数判断是否包含字段 两个参数 判断第一个参数(指定下标)是否是第二个参数(值)
console.log(str.includes(" "));
console.log(str.includes(1,1));


let aa = "欢迎来到对抗路"
function f1() {
  let bb = aa.startsWith('欢迎') ? '前缀正确' : ' 前缀错误'
  let cc = aa.endsWith('路') ? '后缀正确' : '后缀错误'
  console.log(bb)
  console.log(cc)
}

f1()

true
true
false
true
false
前缀正确
后缀正确

ES6 默认参数

function sayOne(str){
    console.log(str)
}

function sayTwo(str = '默认参数'){
    console.log(str)
}

sayOne(); // undefined
sayTwo(); // 默认参数
sayTwo('进行传参') // 进行传参

ES6 展开操作符

使用 ... 可以展开元素，方便操作，使用如下：

let arr = ['香蕉','苹果','西瓜']
console.log(arr)    // [ '香蕉', '苹果', '西瓜' ]
console.log(...arr) // 香蕉 苹果 西瓜
let brr = ['加一种', ...arr]
console.log(brr)    // [ '加一种', '香蕉', '苹果', '西瓜' ]
console.log(...brr) // 加一种 香蕉 苹果 西瓜
)

ES6 剩余操作符

... 操作符用在函数参数上，接收一个参数数组，使用如下：

function f1(a,b,...c){
  console.log(a,b,c)     // 小1 小2 [ '小3', '小4' ]
  console.log(a,b,...c)  // 小1 小2 小3 小4
}

f1('小1','小2','小3','小4')

ES6 函数名字

使用 .name 可以获取函数的名字，具体使用如下：

function f1() { }
let f2 = function () { };
let f3 = function f4() { };

console.log(f1.name); // f1()
console.log(f2.name); // f2()
console.log(f3.name); // f4()

ES6 箭头函数

使用箭头函数可以让代码更简洁，但是也要注意箭头函数的局限性，以及箭头函数中自身没有 this，this指向父级

let f1 = a => a;
z
let f2 = (a, b) => {
    return a + b;
}

console.log(f1(10));
console.log(f2(10, 10));

ES6 对象表达式

使用es6的对象表达式，如果对象属性和值一样，可以省略值，函数写法可以省去function，用法如下：

// Es6 的对象表达式，如果属性和值一样，可以省略值，函数方法可以省去 function

let name = "小郑"
let age = "18"

const obj = {
    name:name,
    age:age,
    say: function(){

    }
}

const ES6obj = {
    name,
    age,
    say(){}
}

console.log(obj)    // { name: '小郑', age: '18', say: [Function: say] }
console.log(ES6obj) // { name: '小郑', age: '18', say: [Function: say] }

ES6 恒量

使用 const 关键字定义衡量，const 限制的是给衡量分配值的动作，并不限制衡量中的值，使用如下：

// 使用 const 关键字定义衡量，const 限制的是给衡量分配值的动作，并不限制衡量中的值
const app = ['小王','小张']
console.log(...app)
app.push('小刘')
console.log(...app)
app = 10

衡量可以增加内容,但是不能改改类别，否则报错

ES6 对象属性名

使用点定义对象属性时，如果属性名中含有空格字符，是不合法的，语法通不过的，使用 [属性名] 可以完美解决，并且不仅可以直接写明属性名，还可以使用变量来指定，具体使用如下：

let obj = {}
let a = 'little name'
obj.name = '对象.属性名:添加方式'
obj[a] = '对象.变量:添加方式'
console.log(obj)

输出结果

{ name: '对象.属性名:添加方式', 'little name': '对象.变量:添加方式' }

ES6 判断两个值是否相等

一些特殊值使用 === 或 == 进行比较的结果，可能不满足你的需求，这是你可以使用Object.is(第一个值，第二个值) 来进行判断，可能你就开心的笑了

// ==
console.log(1 == 1)
// ===
console.log(1 === 1)
// Object.is(第一个值，第二个值) 来进行判断
console.log(Object.is(1,1))
let a = 1;
let b = 1;

if(Object.is(a,b)){
    console.log('a 与 b 相等')
} else {
    console.log('a 与 b 不相等')
}

ES6 复制对象

使用 Object.assign() 该方法用于获取一个对象的原型对象，接就是把一个对象复制到另一个对象，使用如下：

let obj = {}
// Object.assign() 可以把一个对象复制到另一个对象
Object.assign(
    obj,   // 复制给的目标
    {a: 1} // 复制的目标对象
)

console.log(obj) // { a: 1 }

ES6 设置对象的 prototype

使用es6可以设置对象的 prototype，使用如下：

let obj1 = {
  get() {
    return 1
  }
}

let obj2 = {
  a:10,
  get(){
    return 2;
  }
}

let test = Object.create(obj1) 
console.log(test.get())  // 1
console.log(Object.getPrototypeOf(test) === obj1)  // true
Object.setPrototypeOf(test,obj2)
console.log(test.get()) // 2
console.log(Object.getPrototypeOf(test) === obj2)  // true

ES6 proto

let obj1 = {
    get() {
        return 1;
    }
}
let obj2 = {
    a: 10,
    get() {
        return 2;
    }
}
let test = {
    __proto__: obj1
}
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj1);
test.__proto__ = obj2;
console.log(test.get());
console.log(Object.getPrototypeOf(test) === obj2);

ES6 super

let obj1 = {
    get() {
        return 1;
    }
}
let test = {
    __proto__: obj1,
    get() {
        return super.get() + ' ☃️';
    }
}
console.log(test.get());

ES6 freeze

该方法可以冻结一个对象，被冻结的对象不能再添加属性，删除属性，修改属性。

const obj = {
  name: 'jack',
  age: 18,
};
Object.freeze(obj)
obj.name = 'mack'
console.log(obj.name);//jack

ES6 生成迭代器

在学习前，先首写一个迭代器

function die1(arr){
  let i = 0
  return {
    next(){
      let done = (i >= arr.length)
      let value = !done ? arr[i++] : undefined

      return {
        value: value,
        done: done
      }
    }
  }
}

let arr = ['1','2','3']

let dieArr = die1(arr)
console.log(dieArr.next())
console.log(dieArr.next())
console.log(dieArr.next())
console.log(dieArr.next())


/// -------------------------------

// 简化版
function* die2(arr){
  for(let i = 0; i < arr.length; i++) {
    yield arr[i]
  }
}

let test = die2(arr)
console.log(test.next())
console.log(test.next())
console.log(test.next())
console.log(test.next())

ES6 类

使用es6可以快速方便的构建类，好耶

class stu {
  constructor(name){
    this.name = name
  }

  say(){
    return this.name + '固定文字'
  }
}

let xiao = new stu("用户输入内容———>")
console.log(xiao.say())

// ---- get set
class getSet{
  constructor(name) {
    this.name = name;
  }
  get() {
    return this.name;
  }
  set(newStr){
    this.name = newStr
  }
}

let chushi = new getSet('初始')
console.log(chushi.get())
chushi.set('更改')
console.log(chushi.get())

 -------------- 静态 static
class jingtai {
  static say(str){
    console.log(str)
  }
}
jingtai.say('静态输入')

/ ---------------- 继承 extends
class jicheng {
  constructor(name,bir) {
    this.name = name;
    this.bir = bir
  }

  showInfo() {
    return '姓名：' + this.name + ',' + '生日：' + this.bir
  }
}

class A extends jicheng {
  constructor(name,bir) {
    super(name,bir);
  }
}

let xiaozheng = new A('小郑','2003-11-28')
console.log(xiaozheng.showInfo())

ES6 Set

Set 集合，与数组不同，Set 集合中不允许有重复元素

// Set 集合，与数组不同，Set集合不允许有重复元素
let food = new Set('12')
console.log(food, '创建set集合')

food.add('3')
food.add('3')
console.log(food,'重复添加一个元素，只会有一个生效')
console.log(food.size,'当前集合最大值')
console.log(food.has('1'), '判断当前集合是否有这个值')
console.log(food.delete('1'), '删除当前集合这个值', food)
food.forEach(f=>{
  console.log(f, '循环遍历集合')
})
food.clear()
console.log('food.clear() ==>清空集合', food)

ES6 Map

Map结合存储键值对

// Map 结合储存键值对
let food = new Map()
let a = {}, b = function () {}, c = 'name';
food.set(a,'1')
food.set(b,'2')
food.set(b,'3')
food.set(c,'4')

console.log(food, '如果给同一个值存储参数，已最后一个为准');
console.log(food.size, '最大值')
console.log(food.get(a))
food.delete(c)
console.log(food)
console.log(food.has(a));

food.forEach((v, k) => {
  console.log(`${k} + ${v}`);
});

food.clear();