ES6个人初学总结-XY

1 Let与const

可以把let看成var,只是它定义的变量被限定在了特定范围内才能使用,一旦脱离这个范围变量则无效,避免了变量的污染,而const则很直观,用来定义常量,即无法被更改值的变量。

for(var i=0;i<3;i++){
    console.log(i);
}   
复制代码

此时内部输出结果为 0,1,2。当在for循环外再输出I时可以看到:

for(var i=0;i<3;i++){
    console.log(i);
}

console.log(i);
复制代码

此时内部输出:0,1,2,外部输出的结果为:3。可以看到在for循环的外部输出变量依然有效,输出结果为结束循环的值,当将var 置换成let时:

for(let i=0;i<3;i++){
    console.log(i);
}

console.log(i);
复制代码

此时内部输出:0,1,2,外部输出 :ReferenceError: i is not defined。可以看到外部的输出并没有找到变量。

2.1 Array.from

新增的Array.from可以将伪数组转换成真数组。
在HTML内新建一个Ul

<body>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>2</li>
        <li>4</li>
    </ul>
    
</body>
复制代码
<script>

var lis=document.getElementsByTagName("li");
console.log(lis);
console.log(Array.isArray(lis));

var arr=Array.from(lis);
console.log(arr);
console.log(Array.isArray(arr));

</script>
复制代码

第一和第二个输出的结果为:HTMLCollection(4) [li, li, li, li]和false,从形式上可以看到获取的li是一个数组,但当使用Array.isArray去验证的时候发现它并不是一个数组类型,我们称其为“伪数组”。
再看第三个和第四个输出的结果为:(4) [li, li, li, li]和true,此时我们使用Array.from转换后输出的数据同样是一个数组样式,使用验证方法时我们发现与上面输出的不同,第四个输出为:true,此时获得的数组为真数组。

2.2 Array.of 创建数组

var arr=Array.of(1,2,3,4,5,5,7,8,9,[3,4],"fafa",{name:"xiaoqiang"})
console.log(arr);
console.log(Array.isArray(arr));
复制代码

其输出结果分别为:(12) [1, 2, 3, 4, 5, 5, 7, 8, 9, Array(2), "fafa", {…}]和true。

2.3 Array.find

var arr=Array.of(1,2,3,4,5,5,7,8,9,[3,4],"fafa",{name:"xiaoqiang"})
console.log(arr);
console.log(Array.isArray(arr));
var arr1=arr.find(item => item == 3)
console.log(arr1);
复制代码

Array.find查找数组中是否存在某个元素,上面代码console.log(arr1)输出为:3表示查到3这个元素。

2.4 findIndex

findIndex()查找数组中的元素,若查到返回该元素的索引,否则返回-1,其格式为 arr.findIndex(function(item,index,arr){return index})
其中item为查找的值的内容,index为查找的索引,arr为查找的数组,return返回的值为查找元素的索引或-1.

<script>
var arr=[4,5,6,7,8,9,10]
var arr1=arr.findIndex(item => item == 6)
var arr2=arr.findIndex(item => item == 100)//查找内容为100的元素
console.log(arr1);
console.log(arr2);
</script>
复制代码

上面代码的输出为:2和-1.

3 箭头函数

ES6相比于过往在使用上方便了很多,尤其是箭头函数的使用。

//正常的函数书写 :
var a=function(b){
     return b+b;
}
//使用箭头函数后的简写:
var a=(b)=>{return b+b}

//如果变量只有一个则省去小括号,再则return语句只有一个返回值时,大括号同样可以省略得到如下形式:
var a=b=>b+b;
复制代码

调用上面三种书写得到的结果都是一样,可以看出箭头函数的出现极大的方便了函数的书写,但有一点是要注意的是当函数内部出现this时不能使用箭头函数。

4 字符串模板

ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。代码如下:

var obj={
    name:"xiaoqiang",
    age:88,
    say:function(){
        console.log(`我是${this.name},我今年${this.age}岁了。。。`);   
    }
}
obj.say();
复制代码

输出的结果为:“我是xiaoqiang,我今年88岁了。。。”,此时函数里的this指向方法所在的对象(obj)。

5 字符串扩展

5.1 endsWith、startsWith

判断字符串是否以某一个字符串开始或结束,代码如下:

var str="dassfa erqwrt"//定义字符串
console.log(str.startsWith("das"));
console.log(str.startsWith("dassfae"));
console.log(str.endsWith("rt"));   
复制代码

其上输出分别为:true、false、true。

5.2 trim

用于清除字符串中的空格,实现代码如下:

<script>
var str=" adsa   dfg   fgg "
var str1=str.trim() //清除两端空格
var str2=str.trimLeft()//清除左边空格
var str3=str.trimRight()//清除右边空格
console.log(str);
console.log(str1);
console.log(str2);
console.log(str3);
</script>
复制代码

5.3 repeat

字符串重复

<script>
var str="a1a"
var str1=str.repeat(3);
console.log(str);
console.log(str1);
</script>
复制代码

其输出结果为:“a1a”和“a1aa1aa1a”

5.4 includes

查询字符串中是否存在指定的字符

<script>
var str="a1a"
var a=str.includes("a")
var a1=str.includes("d")
console.log(a);
console.log(a1);
</script>
复制代码

输出结果分别为:"true"和"false"

5.5 padStart padEnd

设置字符串开始和结束的附加格式

<script>

var str="a1a"
var a=str.padStart(8,"*")
var a1=str.padEnd(9,"-")
console.log(a);
console.log(a1);
</script>
复制代码

输出结果为:*****a1a和a1a------,如str.padStart(8,""),其中8表示输出字符串的长度,去掉""个数则为原字符串的长度。如果原字符串的长度大于8,则不再显示"*",此时输出为原字符串。

6 Class 类

类=构造函数+原型,相对于构造函数和原型的模式,类的引入则简单的多,简单代码如下:


class Cars{
    constructor(name,color,size){
         this.name=name;
         this.color=color;
         this.size=size;
    }
    say(){
        console.log(`我是${this.name},我的车是${this.color},它的大小是${this.size}cm`);
    }
}

var am=new Cars("zhangliang","red","300")
console.log(am.say());
复制代码

上面代码的输出为:“我是zhangliang,我的车是red,它的大小是300cm”,与上版本的构造函数+原型的书写方式简单的多。

7 严格模式

js语法非常灵活,JS中这个灵活的特性,弊大于先利。后来增加了严格模式。使用严格模式提高了编译效率。其中严格模式对很多数据的书写有了要求:

7.1 在严格模式下不能使用没有var的变量

<script>

"use strict"  //开启严格模式
a=110;
console.log(a);

</script>
复制代码

上面代码执行的结果为:es6zongjie.html:24 Uncaught ReferenceError: a is not defined

7.2 在严格模式下不能使用8进制的数字

<script>

"use strict"
var a=017;    //8进制数据
console.log(a);
</script>
复制代码

输出的结果为:Uncaught SyntaxError: Octal literals are not allowed in strict mode.

7.3 在严格模式下不能把函数定义在if语句中

<script>

"use strict"
var a=8;
if(a != 0){
    function f(){
          console.log(a+a);  
    }
}
f();

</script>
复制代码

输出的错误结果为:es6zongjie.html:30 Uncaught ReferenceError: f is not defined

7.4 在严格模式下函数不能有重名的形参

<script>

"use strict"
    function f(x,x){
          console.log(x+x);
          }
f(6,6);

</script>
复制代码

此时输出错误:Uncaught SyntaxError: Duplicate parameter name not allowed in this context。

7.5 在严格模式下arguments不再跟踪形参的变化

<script>
    
"use strict"
var a=function(x,y){
    console.log(x,y);
    console.log(arguments[0],arguments[1]);
    arguments[0]=1234;
    arguments[1]=5678;
    console.log(x,y);
    console.log(arguments[0],arguments[1]);  
}
a(3,4);
</script>
复制代码

上面四个输出分别为:“3,4”、“3,4”、“3,4”、“1234,5678”可以看出,此时修改arguments形参不变。

7.6 在严格模式下function中的this就不再是window而是underfined

<script>

"use strict"
function f(){
    console.log(this);
}
f();
</script>
复制代码

输出的结果为:underfined,正常模式下函数内的this指向window。

8 解构赋值

8.1.1 数组的解构赋值

<script>

var arr=[a,b,c]=[1,2,3]
console.log(arr);
console.log(a,b,c);

</script>
复制代码

输出结果为:(3) [1, 2, 3]和1 2 3

8.1.2 多维数组解构赋值

<script>
var arr=[a,[b],[[c]]]=[1,[2],[[3]]];
console.log(arr);
console.log(a,b,c);
</script>
复制代码

输出结果分别为:(3) [1, Array(1), Array(1)]和1 2 3

8.1.3 默认值,只有当右边对应位置为undefined时候才会选择默认(null不属于undefined)

<script>

var arr=[a=1,b=2,c=3,d=4]=[undefined,null,1,2];
console.log(arr);
console.log(a,b,c,d);

</script>
复制代码

输出为:(4) [undefined, null, 1, 2]和1 null 1 2。

8.2 对象赋值

<script>

var obj={name,age}={name:"xiaoqiang",age:"44"};
console.log(obj);
console.log(obj.age,obj.name);

</script>
复制代码

输出结果为:{name: "xiaoqiang", age: "44"}和"44 xiaoqiang"

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值