前言

  • ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。也就是说,ES6就是ES2015。虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了。今天就来总结一下在工作中es6常用的属性方法

let和const关键字

1.let关键字声明的变量,它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。比如:

if(true){
        //在这里用let定义的关键字 
    let a = 100;
    var b = 200;
    console.log(a)
}

console.log(a);// a输出不了

/*
 * 在es6当中 使用let定义的变量 没有变量提升
 */

// console.log(c); //is not defined
// let c = 1;

/*
 * 使用let 关键字声明的变量具有暂时性死区特性
 */

var num = 10
if(true){ 
    console.log(num);
    let num = 20
}

解构赋值

/*
* 数组解构
* 如果解构出来的数组中没有对应的值 那么会输出undefined
*/
let arr = [1,2,3];
let [a,b,c,d,e] = arr
console.log(a)
console.log(b)
console.log(arr)
console.log(e)

/*
* 对象解构
* 对象解构允许我们使用变量的名字匹配对象的属性, 匹配成功 将对象的属性的值赋值给变量
* 如果没有改值 那么会输出 undefined
*/

let obj = {name:'zhangsan',age:20}
let {name,age,cs} = obj
console.log(name)
console.log(age)
console.log(cs)

/*
* 对象解构 2 
* 
*/
console.log("--------------------")
let obj2 = {name:'zhangsan',age:20}
let {name:myName,age:myAge} = obj2 //name是值 myName是别名 也是变量名
console.log(myName)
console.log(myAge)

箭头函数


/*
 * 箭头函数是用来简化函数定义语法的
 *  () => {}
 * let a = () => {}
 * 
 */


const fn = () => {
    console.log(123)
}
fn();

// 如果函数体中只有一句代码,且代码的执行结果就是返回值 可以省略大括号

function sum(num1,num2){
    return num1 + num2
}

console.log(sum(10,2))
// 可以简写成:

const sum2 = (num1,num2) => num1 + num2

console.log(sum2(11,2))

console.log("--------------")
//如果形参只有一个 可以省略小括号

function cs(v){
    return v;
}
console.log(cs(1))

// 可以简写成:

const fn2 = v => v;

console.log(fn2(11545))


        
/*
* 箭头函数不绑定this  箭头函数没有自己的this关键字
* 如果箭头函数中使用this
* this关键字将指向箭头函数定义位置中的this
*/
const obj2 = {name:'zhangsan'};
function qwe(){
console.log(this)
let a = 1
return () =>{
    console.log(this)
}
}


var resFn = qwe.call(obj2)
resFn();

剩余参数

            /*
             *  如果函数的参数中有多个 或者不确定的个数 可以用 剩余参数来表示该参数
             *  ...args 
             *  可以代表多个参数
             */
            const sum = (...args) => {
                let total = 0;
                args.forEach(item => total += item)
                
                return total;
            }
            
            console.log(sum(1,2,3,5))
            
            /*
             * 剩余参数和解构配合使用
             * ...s2 可以表示除s1以外 所有的数据 
             */
            let students = ['wangwu','zhangsan','list','qwe','eee','rrrr','ttt'];
            let [s1,...s2] = students;
            console.log(s1);
            console.log(s2)

扩展运算符

            /*
             * 扩展运算符 
             * 扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
             */
            
            let arr = [1,2,3,4,5];
            let arr2 = [6,7,8,9,10];
            console.log(...arr); //1 2 3 4 5
            
            /*
             * 扩展运算符可以应用于合并数组
             */
            
            //方法1:
            let arr3 = [...arr,...arr2];
            
            console.log(`拼接后的数组:${arr3}`);
            
            //方法2:
            arr.push(...arr2)
            console.log(`第二种方式拼接后的数组:${arr}`)
            
            
            
            /*
             * 利用扩展运算符将伪数组转换为真正的数组
             */
            
            var div = document.getElementsByTagName('div');
            console.log(div);
            
            var divArr = [...div];
            console.log(divArr)

Array扩展方法

        //伪数组
            var arrList = {
                "0":"zs",
                "1":'ls',
                "2":"cs",
                "length":3
            }
            /*
             * 用Array.from方法 将为数组转为真正的数组
             */
            var arr = Array.from(arrList)
            console.log(arr)
            
            
            var arr2 = Array.from(arrList, item => item *  2)

            
            console.log(arr2)

find方法

        let arr = [{
            id:1,
            name:'张三'
        },{
            id:2,
            name:'李四'
        }];
        

        // 查找id为2的第一条数据 如果找到 返回对象 如果没找到 返回undefined
        let data = arr.find(item => item.id == 2)

        console.log(data);

findIndex方法

    let arr = [10,20,50]
        // 返回符合条件的第一条数据的下标索引
        let index = arr.findIndex(item => item > 15)
        console.log(index);

includes方法

        
        let arr = ['a','b','c']
        let result = arr.includes('v')
        // 判断数组当中是否有某个值 如果有 则返回true  反则false
        console.log(result);

模板字符串

        let name = `张三`

        // 在模板字符串中可以解析变量
        console.log(name);
        console.log(`我的名字叫${name}`)
        

        let result = {
            name:'小伟',
            age:18,
            sex:'男'
        }

        // 在模板字符串中可以换行写代码 不需要+拼接
        let html = `
        <div>${result.name}</div>
        <div>${result.age}</div>
        <div>${result.sex}</div>
        `;

        console.log(html);


        const fun = () => {return '叼毛我是你爹'}
        
        let result2 = `${fun()},666`
        console.log(result2);

startsWith和endsWith

        /***
         * startsWith() 判断字符串是以什么开头 返回布尔值
         * endsWith()   判断字符串是以什么结尾 返回布尔值
         ***/
         
       let str = 'I am a good boy!'

       let result1 = str.startsWith('我')

       let result2 = str.endsWith('boy!')

       console.log(result1,result2)

repeat方法

        // repeat()  方法表示将原字符串重复n次 返回一个新的字符串

        console.log('a'.repeat(10));

set数据结构

        /**
         * set 数据结构。它类似于数组 但是成员的值都是唯一的,没有重复的值
         * 
         **/

        const s1 = new Set();
        console.log(s1.size) //输出数据中值的个数 

        const s2 = new Set(['a','b']);
        console.log(s2.size); // 2

        const s3 = new Set([1,1,2,2,3,3]);
        console.log(s3.size);
        const arr1 = [...s3]
        console.log(arr1); //1 2 3
        
        /**
         *  Set() 的方法
         *  add(value) 添加某个值 返回set本身
         *  delete(value) 删除某个值 返回一个布尔值 表示删除结果
         *  has(value) 返回一个布尔值 表示是否有改值存在
         *  clear() 清除所有成员 没有返回值 
         **/ 

        const s4 = new Set([1,2,3,4,5])

        s4.forEach(value => {
            console.log(value);
            
        })
最后修改:2020 年 07 月 04 日 05 : 24 PM
如果觉得我的文章对你有用,请随意赞赏