一些 ES6的扩展
1.json
1.json:json是前后端交互最好的数据格式
2.json不是js独有的,语法中没有js的相关语法,只是格式上看是由数组和对象组成
3.json里面字符串添加双引号
//对象
var obj = {
'a':1,
'b':2
}
//json数据 不能给变量赋值
{
'a':1,
'b':2
}
json的方法
json.parse() //将json格式的字符串转换成对象
json.stringify() //将对象转成json格式的字符串
es6部分
let,const
1.var 定义的变量:全局变量和局部变量(函数)
function fn(){
var num = 10;
alert(num)
}
fn();
alert(num); //num is not define
for(var i=1;i<=10;i++){ //i是全局的
}
alert(i); //11
es6中新增了let命令,用来声明变量,它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内{}有效
即let所声明的变量就“绑定”这个区域,不再受外部的影响
es6中还新增了const命令,它用来声明常量,一般被const声明的变量不可改变
var 和let的区别:
1.let声明的不存在变量提升
2.let不允许在相同作用域内,重复声明同一个变量
3.ES6中允许块级作用域的任意嵌套,外层无法读取内层作用域的变量,反之可以
案例:
{
alert(a); //a is not define
let b = 10;
{
let a = 10;
alert(b); //10
}
}
解构赋值
变量的结构赋值 -- 快速的给变量赋值
1.解构赋值:数组,对象,字符串
let arr = [1,2,3,4,5];
//一般我们赋值
//let a = arr[0];
//let b =arr[1]
//解构赋值 赋值
let [a,b,c,d,e] = arr // a = 1 ,b =2 ....
对象解构赋值
对象解构赋值,变量名和属性名保持一致,如果修改的话,得到的值是后者
let {name:xingming,age:nianling} = {name:'zhangsan',age:100};
console.log(xingming,nianling); //zhangsan,100
扩展运算符
扩张运算符用三个点表示(...),功能是把数组或类数组对象展开成一系列用逗号隔开的值
let arr=[1,2,3,4,5];
console.log(arr);
console.log(...arr); //1 2 3 4 5 用console.log输出看不到‘,’号
let arr=[1,6,7,3,5,6,8,9,0];
console.log(Math.max(...arr)) //9
相当于 console.log(Math.max(1,6,7,3,5,6,8,9,0)) //这里证明是用‘,’隔开
扩展运算符还可以用于数组的合并
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [7,8,9];
console.log([...arr1,...arr2,...arr3]) //[1,2,3,4,5,6,7,8,9]
扩展运算符还可以用于引用传递浅拷贝
let arr1 = [1,2,3];
let arr2 = arr1;
arr2.push(4);
console.log(arr1); //[1,2,3]
console.log(arr2); //[1,2,3,4]
//用扩展运算符
let arr2 = [...arr1];
console.log(arr2); //[1,2,3,4]
字符串的扩展 --模板字符串
//1.模板字符串
let obj={
name:'zxh',
age:20,
sex:'男'
}
document.body.innerHTML = '我的姓名是'+obj.name+',我今年'+.....等很麻烦
document.body.innerHTML = `我的姓名是${obj.name},我今年${obj.age}` 结果一样
字符串的扩展 --字符串新加的方法
// repeat(n)方法返回一个新字符串,表示将原字符串重复n次
let str = 'hello';
console.log(str.repeat(10)); //输出10次hello
//includes():返回布尔值,表示是否找到了参数字符串
let str = 'javascript';
console.log(str.includes('ava')) //返回true
//startsWith():放回布尔值,表示参数字符串是否在源字符串头部
let str = 'javascript';
console.log(str.startsWith('java')) //true
//endsWith():放回布尔值,表示参数字符串是否在源字符串尾部
let str = 'javascript';
console.log(str.endsWith('java')) //false
console.log(str.endsWith('t')) //true
console.log(str.endsWith('pt')) //true
函数
1.函数的默认参数
2.箭头函数
<script>
const sum = function(n1,n2){
return n1+n2;
}
console.log(sum()) //NaN
console.log(sum(1,2)) //3
</script>
//函数参数默认值
//在以前这样设置
const sum = function(){
n1 = n1 || 10;
n2 = n2 || 20;
return n1+n2
}
//现在
const sum = function(n1=10,n2=10){
return n1+n2
}
2.箭头函数
特点:简洁
const sum = function(a,b){
return a+b
}
//用箭头函数表示
const sum1 = (a,b) => n1 + n2
重要:箭头函数里面的this是定义的时候确定的,this一旦确定无法改变
总结:1.箭头函数最吸引最吸引人的地方是简洁。同时函数体内this对象,就是定义时所在的 对象,而不是使用时所在的对象,this不会改变了
2.不可以当做构造函数,也就是说不可以使用new命令,否则会抛出一个错误
3.不可以使用arguments对象,该对象在函数体内不存在
4.箭头函数一定是匿名函数
5.箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下,例如map,reduce, filter的回调函数(函数当作参数)定义中;
6.不要在最外层定义箭头函数,因为在函数内部操作this会容易污染全局作用域。最起 码在箭头函数外部包一层普通函数,将this控制在可见的范围内
数组和对象的扩展
1.数组的扩展
1.Array.from()方法用于将对象转为真正的数组(类数组转数组)
let obj={
0:'zhangsan',
1:'lisi',
2:'wangwu',
length:3
}
//需要固定的对象格式才可以使用Array.from()方法转成数组,否则无效
console.log(Array.from(obj)) //['zhangsan','kisi','wangwu']
2.Array.of()方法用于将一组值,转换为数组
console.log(Array.of('zhangsan','lisi','wangwu')) //['zhangsan','lisi','wangwu']
3.fill()方法使用给定值,填充一个数组
var a = [1,2,3,4,5]
console.log(a.fill('hello')) //['hello','hello','hello','hello','hello']
console.log(a.fill('hello',2,3)) //[1,2,'hello',4,5]
2.对象的扩展
对象的简介表示
var num = 100
var obj = {
num:100,
shownum:function(){
return this.num;
}
}
//当属性和属性名重名的时候可以省略 //方法可以省略function
var obj = {
num,
shownum(){
return this.num;
}
}
原文地址:https://www.cnblogs.com/xiaohanga/p/11101701.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。