前言:
今天开始学习关于ES6的一些新特性我会以课堂笔记的记录方式分享出来给同学们,有兴趣的同学可以看看,喜欢的话顺便点个赞呗。
ECMAScript 6 简介
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
笔记如下:
<script type="text/javascript">
// var array = ['a','b']
// ['a','b']=[3,2]
// console.log(array);//3,2
// var array = ['a','b','c']
// array = [1,,3]
// console.log(array[2])//3
//变量声明并赋值时的解构
// var array = [1,2,3];
// var [a,b,c] = array;
// console.log(a,b,c);//1,2,3
//变量先声明后赋值时的解构
// var a,b;
// [a,b] = [3,1]
// console.log(b,a);//1,3
//默认值
// var a,b;
// [a=1,b=3] = [10];
// console.log(a,b);//10,3
//交换变量
// var a = 10;
// var b = 1;
// [a,b] = [b,a];
// console.log(a);//1
// console.log(b);//10
//解析一个从函数返回的数组
// function f() {
// return [1,3];
// }
// var a,b;
// [a,b]= f();
// console.log(a,b);//1,3
//忽略某些返回值
// function f(){
// return [3,2,1]
// };
// var [a,,c] = f();
// console.log(a,c);//3,1
//将剩余数组赋值给一个变量
// var [a,...c] =[5,2,3,6,7]
// console.log(a,c);//5,[2,3,6,7]
//解构对象
//基本赋值
// var o ={a:1,b:10};
// var {a,b}= o;
// console.log(a,b);//1,10
//无声明赋值
// var a,b;
// ({a,b} = {a:10,b:20});
// console.log(a,b);//10,20
//给新的变量名赋值
// var x = {a:11,b:222};
// var {a:q,b:w}=x;
// console.log(q,w);//11,222
//默认值
// var {a=10,b=5}={a:1};
// console.log(a,b);//1,5
//For of 迭代和解构
// var x = [{
// name:"老李",
// family:{
// mother: "老一",
// father: "老二",
// sister: "老三"
// },
// age:35
// },
// {
// name:"铁头",
// family: {
// mother: "老四",
// father: "老五",
// brother: "老六"
// },
// age:25
// }];
// for(var{name:n,family:{father:f}} of x){
// console.log("姓名:"+n+",排名:"+f);
// }//老李,老二;铁头,老五;
//从作为函数实参的对象中提取数据
// function x({id}){
// return id;
// }
// function w({myname,fullName:{firstName:name}}){
// console.log(myname+":"+name);
// }
// var a = {
// id:20,
// myname: "老李",
// fullName: {
// firstName: "铁头",
// lastName: "阿刘"
// }
// }
// console.log("id:"+x(a));
// w(a);
// function userId({id}) {
// return id;
// }
// function whois({displayName: displayName, fullName: {firstName: name}}){
// console.log(displayName + " is " + name);
// }
// var user = {
// id: 42,
// displayName: "jdoe",
// fullName: {
// firstName: "John",
// lastName: "Doe"
// }
// };
// console.log("userId: " + userId(user)); // "userId: 42"
// whois(user); // "jdoe is John"
//Symbol()函数
//返回唯一的symbol类型的值,目的是作为对象属性的唯一标识符
// var sym1 = Symbol();
// var sym2 = Symbol('foo');
// var sym3 = Symbol('foo');
//
// sym2 ===sym3 ;//false
// //描述相同,但对象不同
//作为属性名的 Symbol
// let mySymbol = Symbol();
//第一种写法
// let a = {};
// a[mySymbol] = '你好';//你好是唯一的,描述相同,但对象类型不同。
// 第二种写法
// let a = {
// [mySymbol]:'你好'
// }
// 第三种写法
// let a = {};
// Object.defineProperty(a,mySymbol,{value:'你好!'});
// console.log(a[mySymbol]);//输出“你好”
//属性名的遍历
// var obj ={};
// var a = Symbol('a');
// var b = Symbol('b');
// obj[a]='老李';
// obj[b]='老顾';
// var objectSymbols = Object.getOwnPropertySymbols(obj);//获取obj对象信息,拿到kin
// for (var x of objectSymbols) {//循环变量kin
// console.log(obj[x]);//输出objkin.value值。老李,老顾
// }
//字符串函数
//补全长度
// var num = 1;
// var use = (num+"").padStart(2,"0");//长度不够就补齐,往前补齐
// console.log(use);//输出01
//
// var a = 90;
// var b =(a+"").padStart(3,"1");
// console.log(b);//输出190
// var num = 1;
// var use = (num+"").padEnd(2,"0");//往后补齐
// console.log(use);//输出10
//
// var a = 90;
// var b =(a+"").padEnd(3,"1");
// console.log(b);//输出901
// var a = 'afhFGHbbsliqSDHGH';//includes 查找包含的内容,区分大小写
// var b = a.includes('B');//返回true,false
// console.log(b);
// var a = '老李';
// var b =a.startsWith('李');//确定此字符串实例的开头是否与指定的字符串匹配。
// console.log(b);
//
// var a = '老李';
// var b =a.endsWith('李');//确定此字符串实例的结尾是否与指定的字符串匹配。
// console.log(b);
//函数的参数使用默认值
// function a(x,y){
// this.x=x;
// this.y=y;
// console.log(this.x,this.y);
// };
// a(10,20);
// function a(x=0,y=0){//传过来的参数10,20
// this.x=x;//将参数10赋值给X
// this.y=y;//将参数20赋值给y
// this.fun=function(x,y){//传过来的参数5,10
// var x =x;//将参数5赋值给X
// var y =y;//将参数10赋值给y
// console.log(x,y);//输出5,10
// };
// console.log(this.x,this.y);//输出10,20
// };
// a(10,20);//传参10,20,
// var obj = new a();
// obj.fun(5,10)//传参,5,10,
//rest 参数
//使用...表示,rest参数通常放在最后面
//values是一个数组存储了参数的内容
// function add(...values) {//传过来的参数用数组储存
// let sum = 0;
// for (var val of values) {//循环数组
// sum += val;//每次循环数组里的数字相加
// }
// return sum;//返回相加完后的变量
// }
//// add(2, 5, 3) // 10
// console.log(add(2, 5, 3));//输出10,
//箭头函数
//=>定义函数
// var f = () => 5;//f(){return 5;}
// console.log(f());//输出5
// var f =(a,b)=>a+b;//f(a,b){return a+b;}
// console.log(f(1,3));//输出4
// let x = 99;
// function foo(p = x + 1) {
// console.log(p);
//
// }
//
// for(var a = 0; a < 5; a++) {
// foo(); // 100,101,102,103,104
// x++;//每次+1
// }
//数组的扩展
//es5的克隆
// var array=[1,2];//申明一个数组
// var array2=array.concat();//克隆array数组
// console.log(array2[1]);//输出2
// console.log(array2);//输出1,2
//es6的克隆
// var array = [5,9];
// var array2 = [...array];//(...)三个点加上要克隆数组就是es6的新克隆,个人觉得没有es5好用
// console.log(array2[1]);//输出9
// console.log(array2);//输出5,9
// ES5 的合并数组
// var arr1 = ['a', 'b']
// var arr2 = ['c']
// var arr3 = ['d', 'e']
// // var arr1 = arr1.concat(arr2, arr3);//合并(concat)arr2, arr3数组
// // console.log(arr1);//输出'a','b','c','d','e'
// // ES6 的合并数组
// var arr1 = [...arr1, ...arr2, ...arr3]
// console.log(arr1)//输出'a','b','c','d','e'
//find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined。
//查找函数有三个参数。
//
//value:每一次迭代查找的数组元素。
//
//index:每一次迭代查找的数组元素索引。
//
//arr:被查找的数组。
// var fid=arr1.find((value)=>{
// return value =='a'//查找元素,返回找到的值,找不到返回undefined。
// });
// console.log(fid)//输出 a
//findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。
//查找元素,返回找到的index,找不到返回-1
// var fid=arr1.findIndex((value)=>{
// return value =='c'//查找元素,返回找到的值,找不到返回undefined。
// });
// console.log(fid)//输出 2
//对象的扩展
//属性简写
//const foo = 'bar';
//const baz = {foo};
////baz // {foo: "bar"}
//
//// 等同于
////const baz = {foo: foo};
//console.log(baz)//输出{foo:'bar'}
//方法简写
//var a = {
//x() {
// return "铁头!";
//}
//};
//console.log(a.x());//输出铁头
//
//// 等同于
//
//var b = {
//c: function() {
// return "老李!";//输出老李
//}
//};
//console.log(b.c());
//Object.assign方法用于对象的合并
//const target = { a: 1 };
//
//const source1 = { b: 2 };
//const source2 = { c: 3 };
//
//Object.assign(target, source1, source2);
//console.log(target);//输出{a:1, b:2, c:3}
</script>
笔记纯手打如有看得不清楚可以复制下来自己拿去解释下在看,今天就先到这了。
——来自胡小哥原创ES6课堂笔记(持续更新中...)