码迷,mamicode.com
首页 > 其他好文 > 详细

ES6语法基础

时间:2020-04-14 00:51:34      阅读:54      评论:0      收藏:0      [点我收藏+]

标签:防止   window   out   new   select   结合   使用   就是   clu   

let

ES6中新增的用于声明变量的关键字

  • let 声明的变量只有在处于的块级作用域中有效(大括号中)

  • 防止循环变量变成全局变量 比如for循环中的 i

  • 不存在变量提升

  • 暂时性死区特性

    • var num = 10;
      if (true) {
          console.log(num); // 此时并不会向上级作用域查找而是会报错,
          let num = 20; // 只要在块级作用域用let关键字声明了变量,这个变量就会和这个块级作用域做绑定
      }
      

const

作用:声明常量,常量的值(内存地址)不能变化的值

  • 具有块级作用域
  • const 声明常量必须需要赋一个初始值 const PI; 是不被允许的
  • 常量声明后不可更改,实际是内存地址不可更改(引用数据类型可以修改,注意不是重新赋值)

var let const 的区别

1, 使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升

2, 使用let声明的变量,其作用域为该语句所在的代码块中,不存在变量提升

3, 使用const声明的常量,在后面出现的代码中不能再修改常量的值

结构赋值

在ES6中,可以按照一定的模式,从数组或对象中提取值,将提取出来的值赋值给另外一个变量

数组结构赋值

let [a, b, c] = [1, 2, 3]; // 相当于 let a = 1; let b = 2; ...
let [a, b] = [1, 2, 3]; // 如果接受对象少的话,就只赋值前面的那几个
let [a, b, c] = [1, 2]; // 如果传递的值少的话,剩余的接受值为 undefined

对象结构赋值

// 变量名匹配属性值
let {score, name, age} = {name: ‘zs‘, age: 23, score: ‘js‘}; //变量名字和对象属性进行匹配,匹配到的属性值赋值给响应的变量
// 如果接收值缺少的话,还是根据名称匹配
// 如果接受收值多的话,没有匹配到的值为 undefined

// 属性值匹配属性值
let {score: myScore, age: myAge, name: myName} = {age: 23, score: ‘css‘, name: ‘zs‘}; // 根据属性匹配到对应的属性,属性值存储对应的属性值,属性值才是变量
// 如果接收值缺少的话,还是根据名称匹配
// 如果接受收值多的话,没有匹配到的值为 undefined

箭头函数

() => {}
// 通常会将箭头函数赋值给一个变量
const fn = () => {}
// 函数体只有一句代码,且代码的执行结果就是返回值,可以省略大括号
const sum = (n1, n2) => return n1 + n2;
// 如果形参只有 形参外部的小括号也可以省略
const fn = arg => return arg;

箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this

btn.onclick = function () {
    console.log(this) // btn这个元素
    setTimeout(function () {
        console.log(this) // window
    })
    setTimeout(() => console.log(this)) // 因为使用箭头函数,此时定时器内部的this也是指向 btn这个元素的 
}

剩余参数

// es6之前如果不确定传入多少个参数的时候,通常使用arguments来接收,但是在es6中可以使用剩余参数来接收
const sum = (...args) => {
    console.log(args); // args 是一个数组
    let total = 0;
    args.forEach(item => total += item)
    return total;
}
// 剩余参数和结构赋值结合使用
let [arg1, ...args] = [‘red‘, ‘pink‘, ‘blue‘];
console.log(arg1); // red
console.log(args); // [‘pink‘, ‘blue‘];

拓展运算符

// 拆分数组
let arr = [1, 2, 3];
let arr1 = [4, 5, 6];
console.log(...arr); // 相当于 1, 2, 3 但是打印的时候 会把逗号作为分隔符给去掉
// 合并数组
let newArr = [...arr, ...arr1];
arr.push(...arr1); // push的返回值是新数组的length push会修改原数组
// 伪数组转换为数组
let btns = document.querySelectorAll(‘button‘); // 此时的btns是一个伪数组
arrBtn = [...btns]; // 此时就转换为了真正的数组

数组拓展方法

// from() 伪数组转换为数组,第二个参数为数组的每一项,返回处理后的数组; 整体返回一个新的数组
let arr = [1, 2, 3];
let newArr = Array.from(arr, item => {
    return arr * 2
}); // [2, 4, 6]

// find() 用于找出第一个符合条件的数组成员,如果没有找到返回undefined;整体返回的复合条件的项
let arr = [{id: 1, name: ‘zs‘}, {id: 2, name: ‘ls‘}, {id: 3, name:‘we‘}]
let newArr = arr.find((item, index) => {
  return item.id == 2; // {id: 2, name: ‘ls‘}
})
// findIndex() 用于找出第一个复合条件的索引,只查找第一个,如果没有返回-1
let newArr = arr.findIndex((item, index) => {
    return item.id > 2; // 返回索引值 2
})
// includes() 表示某个数组是否包含给定的值,返回布尔值
let res = [1, 2, 3].includes(1); // true
let res = [1, 2, 3].includes(4); // false

模板字符串

let name = ‘zs‘;
let str = `hello my name is ${name}`;
let result = `
	<div>
		模板字符串支持换行${name}	
	</div>
`;
let fn = `${sayHi()}`; // 模板字符串支持调用函数,执行的是函数的返回值

字符串拓展方法

let str = ‘hello world‘;
var newStr = str.startsWith(‘hello‘); // startsWidth() 判断是否以某个字符串开头 返回 布尔值
var newStr = str.endsWith(‘world!‘); // endsWith() 判断是否以某个字符串结尾 返回布尔值

// repeat() 表示将原字符串重复n次,返回一个新的字符串
let str = ‘zs‘.repeat(2); // ‘zszs‘;

set 数据结构

ES6 新增的数据结构,类似于数组,但是其中的成员是唯一的,没有重复的值

set本身是一个构造函数,用来生成set数据结构

const s = new Set(); // 空set 
console.log(s.size); // 返回set的长度
const s = new Set([1, 2, 3, 3]); // 如果传递进去有重复的值,会过滤掉

// 利用set做数组去重
let arr = [];
let set = new Set([1, 2, 3, 4, 4]);
arr.push(...set); // 此时数组中就没有重复的值了

set实例方法

const set = new Set();
let s1 = set.add(‘red‘); // 添加某个值,返回数据结构本身
let s2 = set.delete(‘red‘); // 删除某个值,返回一个布尔值,表示是否删除成功
let s3 = set.has(‘red‘); // 返回一个布尔值,表示这个值是否为set成员
set.clear(); // 没有返回值,清空set

// 遍历set 使用forEach 方法 注意这里的forEach只接收item 不接收索引
const s = new Set([‘red‘, ‘pink‘, ‘blue‘]);
s.forEach((item) => {
    console.log(item + ‘-‘)
})

ES6语法基础

标签:防止   window   out   new   select   结合   使用   就是   clu   

原文地址:https://www.cnblogs.com/article-record/p/12695163.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!