面向对象编程ES6


一、ES6新增语法

let和const

1.let

let关键字就是用来声明变量的

  • 使用let关键字声明的变量具有块级作用域
    • 在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的 防止循环变量变成全局变量
  • 使用let关键字声明的变量没有变量提升
  • 使用let关键字声明的变量具有暂时性死区特性

2.const

  • const声明的变量是一个常量
    • 既然是常量不能重新进行赋值,如果是基本数据类型,不能更改值,如果是复杂数据类型,不能更改地址值
  • 声明 const时候必须要给定值

3.var, let ,const 区别

  • 使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象
  • 使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升
  • 使用 const 声明的是常量,在后面出现的代码中不能再修改该常量的值

解构赋值

  • 解构赋值就是把数据结构分解,然后给变量进行赋值
let ary = [1,2,3];
let [a,b,c] = ary;
console.log(a) //a=1
console.log(b) //b=2
console.log(c) //c=3
  • 如果结构不成功,变量跟数值个数不匹配的时候,变量的值为undefined
let ary = [1,2,3];
let[a,b,c,d,e]=ary;
 //d和e的值是undefined
  • 数组解构用中括号包裹,多个变量用逗号隔开,对象解构用花括号包裹,多个变量用逗号隔开
  • 利用解构赋值能够让我们方便的去取对象中的属性跟方法
let person ={name:'章三',age:20};
let {name,age} =person ; //左边相当于解构
console.log(name) //章三
console.log(age)  //20

箭头函数

() => {} //():代表是函数; =>:必须要的符号,指向哪一个代码块;{}:函数体
const fn = () => {}//代表把一个函数赋值给fn
  • 函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号
  • 如果形参只有一个,可以省略小括号
  • 箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明不知道参数情况下的一个函数

const sum = (...args) => {
	let total = 0;
	args.forEach(item => total += item); //item是箭头函数的参数   
	return total;
};
    console.log(sum(10, 20));;
   console.log(sum(10, 20, 30));;

二、ES6 的内置对象扩展

Array 的扩展方法

扩展运算符 : …ary

  1. 扩展运算符可以应用于合并数组
方法一:
let ary1 = [1,2,3]
let ary2 = [4,5,6]
let ary3 =[...ary1 , ...ary2];


方法二:

let ary1 = [1,2,3]
let ary2 = [4,5,6]
let arr1.push(...ary2) 可以将多个参数追加到arr1数组中
  1. 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
let ary =[1,2,3];
console.log(...ary)  // 1 2 3  
  1. 将类数组或可遍历对象转换为真正的数组
let oDivs =document.getElemnetsByTagName("div");
oDivs = [...oDivs]; 

构造函数方法:Array.from()

  1. find()
    用于找出第一个符合条件的数组成员,如果没有找到返回undefined 返回值就是你要查找的那个元素
let  ary =[{
      id:1,
      name:'张三'
},
{
      id:2,
      name:'李三'
}
]let target =ary.find((item,index)=>item.id ==2)
  1. findIndex()
    用于查找处第一个符合条件的数组成员的位置,如果没有找到返回-1
let ary =[1,2,3,4,5,9];
let index = ary.findIndex((value,index) => value>4);
console.log(index) //  4
//注意查找的第一个符合的值 是5 所以返回5的索引号是4
  1. includes()
    表示某个数组是否包含给定的值,返回布尔值
[1,2,3].includes(2) //true
[1,2,3].includes(4) //false

String 的扩展方法

模板字符串

创建字符串的方式,使用反引号定义

let name = `张三`
  • 模板字符串中可以解析变量
let name='张三'
let sayHello = `hello,my name is ${name}`; 就不要用加号拼接字符串了
  • 模板字符串中可以换行
    <script>
        let result = {
            name: 'zhangsan',
            age: 20,
            sex: '男'
        }
        let html = `
            <div>
            <span>${result.age}</span>
            <span>${result.age}</span>
            <span>${result.sex}</span>
            </div>`
        console.log(html);
    </script>
  • 在模板字符串中可以调用函数
        const sayHello = function () {
            return '哈哈哈 追不到我吧 我就是这么强大';
        }
        let greet = `${sayHello()}哈哈哈`;
        console.log(greet);

内置对象扩展

  • startsWith():表示参数字符串是否在原字符串的头部,返回布尔值
  • endsWith():表示参数字符串是否在原字符串的尾部,返回布尔值
  • repeat方法表示将原字符串重复n次,返回一个新字符串

Set 数据结构

新的数据结构类似于数组,但是成员的值都是唯一的,没有重复的值,一般用于搜索,记录搜索历史,过滤掉重复语句

  1. Set本身是一个构造函数,用来生成 Set 数据结构
    语法:const s = new Set();

  2. Set函数可以接受一个数组作为参数,用来初始化。
    语法:const set = new Set([1, 2, 3, 4, 4]);//{1, 2, 3, 4}

利用它的特点可以实现数组去重

const set =new Set([‘a','a','b','b']) 输出的数据的数量是2它会把重复的值去掉
const arr = [...set];
console.log(arr)  //['a','b']

遍历
语法:s.forEach(value => console.log(value))

const s =new Set([‘a','a','b','b']);
s.forEach(value => console.log(value));

实例方法

  • add(value):添加某个值,返回 Set 结构本身
  • delete(value):删除某个值,返回一个布尔值,表示删除是否成功
  • has(value):返回一个布尔值,表示该值是否为 Set 的成员
  • clear():清除所有成员,没有返回值
const s = new Set();
s.add(1).add(2).add(3) //向set结构中添加值 链式调用
 
s.delete(2) //删除set结构中的2值
s.has(1)    //表示set结构中是否有1这个值
s.clear()   //清楚set结构中的所有值
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值