ES6+新特性

Posted 简单的小伙子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6+新特性相关的知识,希望对你有一定的参考价值。

let、const:声明变量的两个关键字

// 声明变量
let a ;
let b,d;
let f =11;
// 1、变量不能重复声明

// 2、块级作用域
{
let dd = 34; 
}

// 3、不存在变量提升

// 4、不影响作用域链
{
	let test = 'tset';
  function a (){
  	conslog.log(test)
  }
  a();
  // 正常执行,正常输出
}

let 与const的特点:
不存在变量提升
存在暂时性死区(不能被提前调用)
不允许重复声明
形成了块级作用域
const :声明为常量。不能被修改的量,
但是声明为对象的时候,可以修改对象中的变量中属性值。
1、一定要赋初始值
2、一般常量使用为大写
3、常量的值不能修改
4、块级作用域
5、对于数组和对象中的元素进行修改,不算对常量的修改,不会报错。
const的本质:const的本质是变量指向的那个内存地址多保存的数据是不变的,对于简单数据类型来说的话。值就保存在变量指向的那个地址,因此等同于常量,但对于符合类型的数据,主要是对象和数组时,变量指向的是内存地址。至于指向它的数据结构能不能控制就不好说了
字符串:
1、直接可以使用字符的Unicode编码进行表示
2、字符串可以直接遍历
3、允许直接输入字符串的转义形式
4、模板字符串:
是允许嵌入表达式的字符串,可以在其中使用多行字符串和字符串插功能。其主要是使用反引号来代替普通字符串中的双引号和单引号,其中的特定语法(${expression})占位符,其中可以写一些表达式。

1、换行
console.log(`string text line 1
string text line 2`);
2、插入表达式
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."
3、嵌套模板
const classes = `header ${ isLargeScreen() ? '' :
 `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

字符串实例方法:
repeat():方法返回一个新字符串,表示将字符串重复n次
padStrat():用于头部补全
padEnd():用于尾部补全
trimStart():消除字符串头部空格
trimEnd():消除字符串尾部空格
matchAll():返回一个正则表达式在当前字符串中的所有匹配
replaceAll():返回一个新字符串,不改变原有的字符串,将替换所寻找到的字符串

函数扩展:
1、设置函数中参数的默认值

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

2、rest参数:
引入的rest参数,来代替arguments参数,形式为(…变量名),用于获取函数的多余参数。

// rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。
function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}
add(2, 5, 3) // 10

3、严格模式的用处(暂时不是很理解,先放过)。
4、name,函数的name属性,直接返回该函数的函数名。

function foo() {}
foo.name // "foo"
// 注意:Function构造函数返回的函数实例,name属性的值为anonymous。
(new Function).name // "anonymous"
// 注意bind返回的函数,name属性值会加上bound前缀。
function foo() {};
foo.bind({}).name // "bound foo"

(function(){}).bind({}).name // "bound "

5、箭头函数 :ES6 允许使用“箭头”(=>)定义函数。

var f = v => v;
// 等同于
var f = function (v) {
  return v;
};

箭头函数没有自己的this对象(继承的是上个作用域的this)(在this的那一点讲过)
不可以作为构造函数,不能进行new使用
不可以使用arguments对象,该对象在函数体内不存在,可以使用rest参数代替
不可以使用yield命令,因此箭头函数不能作为Generator函数

//  1、箭头函数的this的值是静态的,指向上一个作用域。
function getName1 (){
  consoloe.log(this.name);
}
let getName2 =function () =>{
  consoloe.log(this.name);
}

Window.name = 'WindowName '
let obj = {
  naem = 'objName'
}
//直接调用
getName1();
getName2();

// call的调用
getName1.call(obj);
getName2.call(obj);

// 查看输出,这个输出能证明的是this的指向
//2、不能做为构造函数实例化对象
let Person = (name,age) =>{
  this.name =name;
  this.age = age;
}
let stu = new Person('小张',10)
//3、不能使用argument变量
let fn = () => {
  console.log(argument);
}
fn(1,2,3)
//4、箭头函数的简写
  //a、省略小括号:有且只有一个形参的时候
let add =  n => {
  return n + n;
}

  //b、省略花括号,当代码体只有一条语句的时候,此时return必须省略
  //而且语句的执行结构就是函数的返回值。

let pow = n => n * n;
console.log(pow(3))

箭头函数的使用场景:

其中一种函数使用方式:,
 需求:从数组中返回偶数的元素

cost arr = [1,2,3,4,5,6,7,7]

const result = arr.filter(function(item){
    if(item % 2 === 0 ) {
      return true;
    } else {
      return false;
    }
});
//使用箭头函数  与上面是同一个效果
const result = arr.filter(item => item % 2 ===0);


//箭头函数适合与this的无关的回调,定时器,数组的方法回调。
//箭头函数不适合与this有关的回调,事件回调,对象的方法等。(在某些情况下也是可以实现的)

等等,后序还有等待补充

以上是关于ES6+新特性的主要内容,如果未能解决你的问题,请参考以下文章

总结常见的ES6新语法特性

ES6解构赋值

ES6新特性

react入门系列之todolist代码优化(使用react 新特性,es6语法)

总结常见的ES6新语法特性。

ES7-Es8 js代码片段