es6常用方法和语法

最新推荐文章于 2023-02-24 11:40:41 发布

想吃手撕面包

最新推荐文章于 2023-02-24 11:40:41 发布

阅读量251

点赞数

文章标签： es6 javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_67519713/article/details/128929316

版权

1、e6新增常用数组方法

1、forEach() 遍历数组，无返回值，不改变原数组，仅仅只是遍历数组

let arr = [1,2,3,4]arr.foreach((item,index)=>{    console.log(item) // 结果1,2,3,4})

2、map() map遍历数组，需要返回值，返回一个新数组，不改变原数组

var arr = [1,2,3,4];arr.map((item,index,arr)=>{    return item*10;  //结果为10,20,30,40});//map遍历数组，返回一个新数组，不改变原数组

3. filter() 用于过滤数组中不满住条件的值，返回一个新数组，不改变原数组

let arr = [1,2,3,4,5]arr.filter((item)=>{    return item > 2 //条件表达式成立保留不成立筛选掉})

4. reduce() reduce让数组的前后两项进行某种计算,然后返回其值，并继续计算,不改变原数组,返回计算的最终结果，从数组的第二项开始遍历,必须要有返回值，返回的就是reduce函数最后的结果。

//total必需。设置初始值      
//currentValue必需。当前元素的值。 function(total, currentValue, currentIndex, arr) 
//index可选。当前元素的数组索引。                 
//arr可选。当前元素所属的数组对
// initialValue
用法：
var arr = [1, 2, 3, 4];var sum = arr.reduce(function(prev, cur, index, arr) { console.log(prev, cur, index); return prev + cur;})console.log(arr, sum);

5、some() 遍历数组每一项,有一项返回true,则停止遍历，结果返回true。不改变原数组。

let arr = [1,2,3,4];arr.some((item,index)=>{   return item > 2; //返回true});

6.every() 遍历数组每一项，每一项返回true,最终结果为true.有一项返回false,停止遍历,结果返回为false。不改变原数组。

var arr = [1,2,3,4];arr.every((item,index,arr)=>{   return item >1; //返回false});

数组方法总结

以上6个方法均为ES6语法，IE9及以上才支持。不过可以通过babel转意支持IE低版本。以上均不改变原数组。some、every返回true、false。map、filter返回一个新数组。reduce让数组的前后两项进行某种计算，返回最终操作的结果。forEach 无返回值。

2、不同的声明方式

一,变量声明：

let声明变量：

变量不可重复声明，let star = '罗志祥' let star = '小猪'结果报错

块级作用域，{ let girl = '周扬青' }在大括号内的都属于作用域内

不存在变量提升

不影响作用域链const声明常量：const SCHOOL = ‘学校’;一般习惯把常量全用大写字母

一定要赋初始值

一般常量使用大写（潜规则）

常量值不能修改

块级作用域

对数组和对象的元素修改，不算对常量的修改，不会报错

3、解构赋值

变量的结构赋值：es6语序按照一定的模式从数组和对象中提取值，对变量进行赋值。被称为结构赋值

//数组的解构
const F4 = ["小沈阳", "刘能", "赵四", "宋小宝"];
let [xiao, liu, zhao, song] = F4;
console.log(xiao);
console.log(liu);
console.log(zhao);
console.log(song);

//对象的解构    
const zhaob = {      
name: "赵本山",      
age: "no",      
xiaopin: function () {        
console.log("我会小品");     
 },    
};   
let { name, age, xiaopin } = zhaob;    
// console.log(xiaopin);    
let { name } = zhaob;    
console.log(name);    
//可以寻找同名属性进行赋值

4、ES6引入了新的声明字符串的方式 ``(反引号)

let str = `我也是一个字符串哦`
// 内容中可以直接出现换行符
let str = `
      <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
      </ul>    
    `
// 变量拼接
let name1 = "悦悦";
let job = `${name1}是嫦娥的兔兔`;
console.log(job);
//控制态结果：悦悦是嫦娥的兔兔
//${}是变量拼接的固定格式

5、ES6中允许直接在大括号里直接写入变量和函数，作为对象的属性和方法、

let name1 = "悦悦";
    let job = `${name1}是嫦娥的兔兔`;
    console.log(job);

    let school = {
      name1,
      job,
      fun() {
        console.log(1);
      },
    };
    //当变量作为对象的属性时，不用再写成name1：name1，方法fun：fuction(){}也可以直接简写成fun(){}

6、箭头函数

以前的函数为：let fun = function(a,b){}
箭头函数则改为：let fun = (a,b)=>{}

1.this是静态的，this始终指向函数声明时所在作用域下的this的值
2.不能作为构造函数实例化对象
3.不能使用arguments变量
4.箭头函数的简写
（1）当形参只有一个时候，可以省略小括号
let fun = a=>{}

(2)当大括号内只有一句话的时候，大括号可以省略,而且语句执行结果就是函数的返回值
let fun = a=> a+b

(3)箭头函数适合与this无关的回调，如定时器，数组方法的回调。不适合与this有关的回调，如事件回调，对象方法