ES6+新特性

Posted 2021-09-06 简单的小伙子

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有关的回调，事件回调，对象的方法等。(在某些情况下也是可以实现的)

等等，后序还有等待补充