浅谈ECMAScript 6.0(一)

nancy Jane2023-06-052023-06-05

1.变量

var存在变量提升，一个变量可多次声明，后面的声明会覆盖前面的声明，在函数中使用var声明变量的时候，该变量是局部的，在函数内不使用var，该变量是全局的
let不存在变量提升，声明变量前该变量不能使用；let命令所在的代码块内有效，在块级作用域内有效；不允许在相同作用域中重复声明

1 2	console.log(a); // ReferenceError: a is not defined let a = 10;

const声明一个只读的变量，声明后，值就不能改变；必须初始化；变量指向的内存地址所保存的数据不得改动
var不存在块级作用域 ;let和const存在块级作用域

2.try catch

捕捉到异常的同时不会使得代码停止执行而是可以做一些更为合理的操作。

执行 try {…} 里面的代码。
如果执行过程中没有异常，那么忽略 catch(err) 里面的代码，try 里面的代码执行完之后跳出该代码块。
如果执行过程中发生异常，控制流就到了 catch(err) 的开头。变量 err（可以取其他任何的名称）是一个包含了异常信息的对象。
1
2
3
4
5
try {
可能会报错的代码
} catch(万一报错了，报错对象) {
当报错时如何如何
}

function rand(){
    var i = Math.random()*10;
    if(i<5){
        throw Error ("发生了错误")
    }else{
        return i
    }
}
// 错误捕获
try {
    console.log(rand());
} catch (error) {
    console.log(error);
}
console.log(22);

3.解构赋值

从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）；使用比较多的是数组、对象和函数参数的解构。

对象解构赋值

// 变量
        var arr = [1, 2, 3];
        let [a, b] = arr;
        console.log(a, b);//模式匹配 1 2
        let [x, , y] = arr;
        console.log(x, y);//1,3
        // 对象
        let user = {
            name: 'nancy',
            age: 23,
            sex: 'woman'
        }
        let{name:c,age:d}=user;
        console.log(c,d);//nancy 23
        // 对象解构赋值，例如
        $.ajax({
        url:'http://bufantec.com/api/douban/movie/top250',
        success(res){
            console.log(res);
            const {data:result}=res;
            console.log(result); // 将 res.data 取出 赋值给了 result
        }
    })

函数解构赋值

function add([a,b]){
            console.log(a+b);
            return a+b;
        }
        var score=[1,2];
        add(score);//相当于[x, y] = [1, 2]，把1,2的值解构赋给变量a,b
function move({x, y}) {
  return [x, y];
}
move({x: 3, y: 8});
// 相当于 形参{x, y} = {x: 3, y: 8} , 对象的解构赋值语法
// 取出实参当中的x属性值,  赋值给 形参变量 x

4.字符串扩展

padStart()用于头部补全，padEnd()用于尾部补全。

padStart()和padEnd()一共接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。

1
2
3

var str='nancy';
       console.log(str.padStart(10,'like'));//在str头部补全like，以达到总长10位，likelnancy
       console.log(str.padEnd(10,'so'));//在str尾部补so,总长10位，nancysosos

5.函数扩展

es6语法后可以为函数参数指定值
剩余参数

在函数的小括号汇总使用 …参数名，表示除去匹配已知形参外其它所有实参的集合，是一个数组，当没有形参的时候它就是arguments 的数组形式。

// 剩余参数
       function add(a,b,...args){
           console.log(args);
       }
       add(1,2,3,4,5);//[3,4,5]
       add(1,2);//[]

箭头函数

 // 箭头函数
        let sum1 = function (a) {
            console.log(a + 1);
        }
        //    将匿名函数的function简写为=>是箭头函数
        let sum2 = (b) => {
            console.log(b + 2);
        }
        sum1(1);//2
        sum2(1);//3
 // 参数只有一个时，（）可以省略,函数体只有一条语句时，{}也可以省略
        // let sum2=b=>console.log(b+2);
//函数体中 只有一句return语句时可以省略{}和return
var f = v => v;
// 等同于
var f = function (v) {
    return v;
};

箭头函数没有arguments
箭头函数没有自己的this,指向外部的this
箭头函数不能当构造函数使用

6.数组扩展

扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

1 2	console.log(...[1,2,3]);//1 2 3 console.log([...[1,2,],...[3,4]]);//拼接数组【1,2,3,4】

Array.isArray 判断某个数据是否是数组，返回布尔值
Array.from 用于将类数组对象转为真正的数组(类数组对象比如arguments) ；类数组对象特点表现像数组却没有数组该有的方法
Array.of 将一组值转换为数组

let arr1 = Array.of(3); // [3]
let arr2 = Array.of(3, 5); // [3, 5]
let arr3 = Array.of("3", "html"); // ['3', 'html']
console.log(arr1, arr2, arr3);

forEach遍历数组，对数组中的每一个元素进行某个操作。没有返回值，也不需要返回值。

1
2
3

数组.forEach（function（value，index，arr）{
    // 代码
}）

数组.map 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。对数据进行操作返回新的数据

1
2
3

数组.map（function（value，index，arr）{
    // 代码
}）

在回调函数中，一定要使用return返回

map方法调用之后，会返回一个全新的数组，原来的数组不变。

filter，用于进行过滤，筛选出符合条件的元素，组成一个新的数组返回。

1
2
3

数组.filter（function（value，index，arr）{
    // 代码
}）

过滤出符合回调函数条件的所有元素。原数组不变。

find,找出第一个符合条件的数组成员

//find的参数可以接受三个参数，分别是当前的值，当前位置，原数组；只接受一个值时为回调函数
//所有数组成员依次执行回调函数，直到找出满足条件的返回
var ele = [1, 5, 10, 15].find(function(value, index, arr) {
    return value > 9;
}) 
console.log(ele) // 10

findIndex,返回第一个符合条件的数组成员的下标，如果所有成员都不符合条件，则返回-1。

1
2
3

[1, 5, 10, 15].findIndex(function(value, index, arr) {
    return value > 9;
}) // 2 索引

every,some。 every 与 some方法都是JS中数组的迭代方法。

every是对数组中每一项运行给定函数，如果该函数对每一项返回true，则返回true。有任意一项返回false，则返回false。

some是对数组中每一项运行给定函数，如果该函数对任意一项返回true，则返回true。如果对每一项都返回false，才会返回false。

var arr = [ 1, 2, 3, 4, 5, 6 ];

console.log( arr.some( function( item, index, array ){ 
    return item > 3;
}));   // true  有>3 的元素

console.log( arr.every( function( item, index, array ){ 
    return item > 3;
}));  // false 并不是每一个都>3

includes 。判断一个数组是否包含一个指定的值，如果是返回 true，否则 false。

1 2	[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false

reduce 。将前一项和后一项的值进行运算，返回累积的结果。数组.reduce（function（prev，next）{…}）

//每循环一次，就把累计的结果返回prev，next++
var arr = [10,22,23,25,50];
const total = arr.reduce(function(prev, next){
    console.log(prev + "----" + next);
    return prev + next;
})
//当reduce有第二个参数时，第二个参数作为prev初始值，next为第一个元素
console.log(total);

7.对象扩展

对象的属性名和属性值一致的时候只写一个
属性值为函数时可以简写

var obj = {
    sayName: function(){
        console.log("obj");
    }
    sayHello(){
        console.log("hello");
    }
}
obj.sayName(); // obj
obj.sayHello(); // hello

Obeject.assign 用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

回值是目标对象(target)

let target = { a: 1 };
let source1 = { b: 2 };
let source2 = { c: 3 };
//第一个参数是目标对象，后面的参数是源对象。返回值是目标对象
//返回值就是合并之后的对象。经常使用该方法实现对象的浅拷贝。
Object.assign(target, source1, source2);
console.log(target) // {a:1, b:2, c:3}

Object.keys() 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。

1
2
3

let obj = { foo: 'bar', baz: 42 };
Object.keys(obj)//将对象的属性名转换为数组的形式
// ["foo", "baz"]

Object.values() 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。

1
2
3

let obj = { foo: 'bar', baz: 42 };
Object.values(obj)//将对象的属性值转换为数组
// ["bar", 42]

Object.entries() 返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

1
2
3

let obj = { foo: 'bar', baz: 42 };
Object.entries(obj)//将对象的属性名和属性值作为数组返回
// [ ["foo", "bar"], ["baz", 42] ]