ES6知识点简单总结

最新推荐文章于 2020-08-13 15:01:50 发布

乘风破浪PL

最新推荐文章于 2020-08-13 15:01:50 发布

阅读量236

点赞数 1

分类专栏： JavaScript 文章标签： js Javascript ES6

本文链接：https://blog.csdn.net/qq_44699174/article/details/106852865

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

简单的总结一下es6中新增的知识点，好久之前简单学过，最近又看视频自己学了一些，简单的总结一下。

1.let关键字

let声明的变量只能在所处遇到的快级有效。
不存在变量提升。
暂时性死区，不受外部代码影响。

在一个大括号中使用let关键字声明的变量才具有块级作用域，var关键字不具有这个特点

2.const关键字（声明常量）

具有块级作用域。
使用const关键字声明的常量必须赋值。
常量赋值后值不能更改。

var	let	const
函数级作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可更改	值可更改	值不可更改

3.解构赋值

含义：es6中允许从数组中提取值，按照对应位置对变量赋值，对象也可以实现赋值

1.数据结构：允许我们按照一一对应的关系从数组中提取值然后将值赋值给变量。例如：

let ary = [1,2,3];
let [a,b,c] = ary;
console.log(a)//1
console.log(b)//2
console.log(c)//3

2.对象结构：对象结构允许我们使用变量的名字匹配对象的属性，匹配成功将对象属性的值赋值给变量。
例如：

let person = {
            name:'lisi',
            age:30,
            sex:'男'
        }
let {name , age, sex}=person;
console.log(person)

4.箭头函数

箭头函数：（）=> {函数体}
const fn =（）=> {
console.log(123)
}
fn();

函数体中只有一句代码，且代码的执行结果就是函数的返回值，‘{}’ 大括号可省略：
const sum = （n1,n2）=> {
return n1+n2;
};
等于
const sum =（n1,n2）=> n1+n2;

如果形参有一个，小括号也可省略，
function fn（v）{
return v;
}
等于
const fn = v => v;

箭头函数不定义this，箭头函数没有自己的this关键字，如果在箭头函数中使用this，this关键字将指向箭头函数定义位置中的this

5.剩余参数

function sum(first,...args){
    console.log(first)
    console.log(args)
 }
sum(10,20,30)

…args将所有的剩下的参数接受

2.剩余参数与解构解构配合使用

 let students = ['z','b','c']
 let [s1,...s2] = students;
 console.log(s1);//
 console.log(s2)

6.扩展运算符

1.定义：可以将数组或者对象转换为用逗号分隔的参数序列
例：

let ary = [1,2,3];
        
console.log(...ary);

没有逗号了是因为逗号被当成console.log的参数分隔符了

2.可用于合并数组
法一

let ary1 = [1,2,3];
let ary2 = [3,4,5];
let ary3 = [...ary1,...ary2]
console.log(ary3)

法二

let ary1 = [1,2,3];
let ary2 = [3,4,5];
// let ary3 = [...ary1,...ary2];
// console.log(ary3)
ary1.push(...ary2);
console.log(ary1)

3.扩展运算符可将数组转换为真正的数组

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

    <div>6</div>
    <div></div>
    <script>
    var oDivs = document.getElementsByTagName('div');
        console.log(oDivs)
        var ary = [...oDivs];
    
        console.log(ary);
    </script>
    
</body>

7.Array扩展方法

1.构造函数方法：

let arraylike ={
            '0':'a',
            '1':'b',
            '2':'c',
            length:3
        }
        let arr2 = Array.from(arraylike)
        console.log(arr2)

2.Array实例方法：find
用于找出第一个符合条件的数组成员，如果没有找到返回underfind

var arr = [{
     id:1,
     name:'张潮'
},{
     id:2,
     name:'老师'
 }];
let target = arr.find(item => item.id == 2);
console.log(target)

3.Array实例方法：findIndex
用于找出第一个符合条件的成员的位置，如果没找到返回-1

let ary = [1,5,10,15]
let index = ary.findIndex((value,index)=> value>9);
console.log(index);

4.Array实例方法：includes
表示某个数组是否包含给定的值，返回布尔值

 let ary = ['a','b','c'];
let result = ary.includes('a')
console.log(result)

8.模板字符串

let name= 'giao哥'
let sayHello = `你给我里giaogiao，大家好，我是${name}`;
console.log(sayHello)

1.模板字符串中可以调用函数

let result= {
    name:'giao哥',
    age:30,
    sex:'男'
}
let html = `
${result.name}
${result.age}
${result.sex}
 `;
console.log(html)

2.在模板字符串中可调用函数

const sayHello = function () {
      return '小鸟伏特加，整这高';
};
let greet = `${sayHello()}`;
console.log(greet);

9.startswith与endswitch

startswith判定某参数字符串是否在字符串的头部
endswitch判定某参数字符串是否在字符串的尾部

let str = 'hello giao哥';
let e1 = str.startsWith('hello');
console.log(e1)
let e2 = str.endsWith('giao哥');
console.log(e2)

在这里插入图片描述