ES6--2015年6月发布:
变量的声明:
let :相当于之前的var;(var定义的变量属于window,let const不是)
注意:1.没有预编译,在代码块内,只要let定义的变量,在定义之前使用此变量都是报错的,先定义完在使用。
2.不能重复定义变量。
3.for循环:for循环是父级作用域
const:常量,定义变量不能修改,定义完变量,必须有值,值不能改变。
Object.freeze(对象):const定义的数组让其不能修改。
具备块级作用域:
{
//块级作用
}
解构赋值:非常有用特别是做数据交互:ajxa
let [a,[b,c]]=[1,[2,3]]
结构时会给默认值:
let [a,b,c='暂无数据']=[1,2]
字符串模板:
优点:可以随意换行
` ${data}`
str.includes(要找的东西) 返回 true /false
str.indexOf(要找的东西) 返回索引的位置 ,找不到返回-1
str.startsWith()
str.endsWith()
str.repeat(次数)
str.padStart('全部的长度',‘填充的内容’)
str.padEnd()
函数变化:
1.函数的默认参数:
2.函数参数默认已经定义了,不能再使用let,const声明
扩展运算符,rest运算符:
...:[1,2,3] -> ...[1,2,3] --->1,2,3
1,2,3-->...123-->[1,2,3]
剩余参数必须放最后
复制数组:
let arr = [1,2,3];
let arr2=[...arr];
let arr2=Array.form(arr);
Array.from():作用:把类数组(获取一组元素,arguments.....)转换为数组。
箭头函数:
let show = () => 1;
let show = (a,b) => a+b;
() => {
语句
return
}
注意:
1.this问题,定义函数所在的对象,不在是运行时所在的对象。
2.箭头函数里没有arguments,用"..."
3.箭头函数不能做构造函数。
ESCM2017:最后函数参数可以多个","
generater 函数:解决异步,深度嵌套的问题
语法:
function * show(){
yield 'welcome';
yield 'to';
return '木马人'
}
let gen=show();
gen.next() ==> {value:'welcome',done:false}
gen.next() ==> {value:'to',done:false}
gen.next() ==> {value:'木马人',done:true}
gen.next() ==> {value:undefined,done:true}
for..of ...自动循环generater,不会循环return
for(let val of gen){
console.log(val);
}
还可以配合结构赋值:
function * show(){
yield 'welcome';
yield 'to';
return '木马人'
}
[a,....b]=gen();
console.log(...gen());//能解析出数据
console.log(Array.from(gen()));//能解析出数据
generater配合axios:
数组:
ES5新增的一些东西:
循环:
1.for
2.while
arr.forEach() //代替普通for循环
arr.map() //非常有用,做数据交互映射
正常情况下配合return可以返回一个新数组
注意:平时只要用map了,一定要有return.
重新整理数据结构.
arr.filter() //过滤不合格的"元素",如果回调函数返回的true就留下来
arr.some() //类似查找,数据中某一个元素符合条件,返回true.
arr.every() //数组中所有的元素都要符合条件,才返回true.
//其上他们可以接受两个参数,第一个参数就是回调函数,第二个参数this指向谁
------------------------------------------------------------------------------------------
arr.reduce((prev ,cur,index,arr)=> {
return prev+cur;
}) // 从左往右,求数组的和或者阶乘
srr.reduceRight() //从右往左
ESCM2017新增一个运算符:
幂:Math.pow(2,3);
2**3
ES6新增循环:for.....of....:
arr.keys() 数组下标
arr.entries() 数组某一项
Array.of() //将一组值转为数组。
attr.find() //用来查找第一个符合条件的数组成员,如果没有找到返回undefinded
attr.findIndex() //找到返回位置,没找到返回-1;
attr.fill() // 填充
attr.fill(填充的东西,开始的位置,结束的位置);
ES6中新增的:
attr.includes();
attr.indexOf();
对象:
json
对象简介语法(相当有用):对象中的方法不要用箭头函数,不要抽风
Object.is() //用来比较两个值是否相等。
Object.is('NaN','NaN') ===>true
Object.is(+0,-0) ;
Object.assign(): //合并对象
Object.assign(目标对象,source1,source2....)
eg:Object.assign({},source1,source2)
目标对象传{},后面的对象中的值覆盖前面的
用途:1,复制一个对象
2,合并参数
Es2017引入的:
Object.keys();
Object.entries();
Object.values();
Promise:承诺,许诺
作用:解决异步回调问题
语法:
let a=10;
let promise=new Promise(function(resolve,reject){
if(a==10){
resolve('成功')
}else{
reject(失败)
}
//promise.then(success,error)
promise.then(res()=>{
console.log('成功')
},error()=>{
console.log('失败')
})
})
promise.catch(err=>{//发生错误
})
Promise.resolve('aa'):将现有的东西转成一个promise对象,resolve状态,成功状态。
Promise.reject('aa'):将现有的东西转成一个promise对象,reject状态,失败状态。
Promise.all([p1,p2,p3]);将promise对象打包,必须确保所有的promise对象都是resolve状态。
Promise.race([p1,p2,p3]);只要有一个成功了就返回 。
模块化:
js不支持模块化
ES6:统一了服务端和客户端模块规范
注意:需要放到服务器环境
export :导出模块
import:引入模块
如何使用:
import './1.js';
import {a as a,banana,c} from './1.js'
import * as modTow from './1js';
import a from './1.js';
default 可以不用花括号,其他的都要用花括号;
使用模块:
import './1.js';
import :特点
1,可以是相对路劲,也可以是绝对路劲
2,import模块只会导入一次,无论你引入多少次
3,import './1.js'相当于引入文件
4,有提升的效果,会自动提升到顶部,首先执行
5,导出去模块的内容,如果里面有定时器更改,外面也会改动,不想common规范缓存
* import() 类似node里面的require,可以动态引入,默认import语法不能写到if之类里面
import('./modules/1js').then(res=>{
})
优点:1,按需加载
2,可以写if中
3,路劲也可以动态
------------------------------------------------------------------------------------------
ES2017 新增:
asycn,await
--------------------------------------------------------------------------------------------
程序中的类:class
class Person{
constructor(name,age){
this.name=name;
this.age=age;
console.log(${name})
}
showName(){
return `${this.name}`
}
showName(){
return `${this.age}`
}
}
new Person('stive',18);
----------------------------------
const Person=class{}
-------------------------------------
let a='stive';
let b='method';
class Person{
[a+b](){
}
}
注意:ES6里面class没有预解析功能,在ES5中用函数模拟是可以的,默认函数提升。
矫正this:
fn.call(this指向谁,arg1,arg2,....)
fn.apply(this指向谁,[arg1,arg2,...])
fn.bind()
class:取值(getter)存值(setter)
类的静态方法:static,就是类身上的方法。
继承:extends,子类constructor()必须调用super()
-----------------------------------------------------------------
数据类型:number,string,boolean,Object,undefined,function
ES6新增:symbol
eg. let syml=Symbol('aaa');
注意:
1.不能new,首字母大写
2.symbol 返回的是一个唯一的值。
作为key,或者一些唯一或者私有的。
3,symbol 一个单独的数据类型,就叫symbol,基本类型。
4,如果symbol作为key,用for in循环不出来
-----------------------------------------------------------------------------------
ES2017:async,await
async function fn(){//表示异步,这个函数里面有异步任务
let f1= await redFile('data/a.txt');//await表示后面的结果需要等待
console.log(f1.toString());
let f1= await redFile('data/b.txt');
}
async特点:
1,await只能放到async函数中
2,相比generator语义化 更好
3,await后面可以放promise对象,也可以是数字,字符串,布尔
4,async函数返回的是promise对象
5,只要await语句后面promise状态为reject,那么整个函数会中断执行
如何解决async函数中抛出错误,影响后续代码
a:
try{
}catch(e){
}
b:promise本身的catch
数据结构:数组,json,二叉树。。。。
set数据结构:类似数组,但里面不能有重复的值
set用法:
let set=new Set(['a','b']);
set.add('c');//返回本身
set delete('b');
set.has('a');//判断set有没有此值
set.size;
set.clear();//清除所有
循环:
for ...of ...
for(let item of set.keys()){//默认values
}
for(let item of set.values()){//默认values
}
for(let [k,v] of set.entries()){//默认values
}
set.forEach((value,index)=>{
})
数组去重:
let arr=[1,2,3,4,1,2,3,4,5];
let set =new Set(arr);
let set =[...new Set(arr)];
set数据结构变为数组:
[...set]
想让set使用map,filter循环:
let set =new Set([...set].map(val=>val*2))
new WeakSet();
new Set([]); 存储数组 用add添加对象。
总结用new Set();
ES6:map:类似json,但是json的key只能是字符串,map的key可以是任意类型。
let map = new Map();
map.set(key,value);
map.get(key);
map.delete(key)
map.has(key);
map.clear();
循环:
for(let [k,v] of map){
}
for(let key of map.keys()){}
for(let key of map.values()){}
for(let key of map.entries()){}
map.forEach(()=>{})
WeakMap:我的key只能是对象
总结:set对应数组,不重复,没有key,没有get方法
map对应json功能强大,key可以是任意类型
数字(数值)变化:
二进制:(binary) 0b二进制前缀
let a = 0b11; ===》3
八进制:Octal number system
let a = 0o666;==>438
十六进制:#ccc
Number.isNaN() //检测这个数字是不是NaN.
Number.isFinite(a)//检测是不是数字
Number.isInteger() 判断这个数字是不是整数
Number.parseInt()
Number.parseFloat()
安全整数:JavaScript 能够准确表示的整数范围在-2^53
到2^53
之间(不含两个端点),超过这个范围,无法精确表示这个值。
Number.isSafeInteger();
Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1
// true
Number.MAX_SAFE_INTEGER === 9007199254740991
// true
Number.MIN_SAFE_INTEGER === -Number.MAX_SAFE_INTEGER
// true
Number.MIN_SAFE_INTEGER === -9007199254740991
// true
Math:
Math.abs();
Math.sqrt();
Math.sin();
Math.trunc() 截取只保留整数部分
Math.trunc(4.56) ==>4
Math.trunc(4.99) ==>4
Math.trunc(4.06) ==>4
Math.sign(-5) ==>-1 判断一个数是正数还是负数
Math.sign(0) ==> 0
Math.sign(-0) ==> -0
Math.sign(5) ==> 1
其他值返回NaN
Math.cbrt() 计算一个数的立方根
Math.cbrt(27) ===> 3
Math.cbrt(729) ===> 9
ESMC2018(ES9):
1.命名捕获
语法:(?<名字>)
let str = '2018-08-09';
let reg =/(?
let {year,mouth,day}=str.match(reg).groups;
console.log(year,mouth,day);
反向引用:\1 \2 $1 $2
2.反向引用命名捕获:
语法:\k<名字>
let reg=/^(?
'welcome-welcome'
let reg=/^(?
'welcome-welcome-welcome'
替换:$<名字>:
let str = '2018-08-09';
let reg =/(?
str.replace(reg,'$
console.log(str)==>2018-08-09
dotAll模式 :s
之前.在正则里表示匹配任意东西,但不包括\n;
let reg=/\w+/gims;
g-global 全局搜索,即不是搜到一个匹配就返回,而是搜出全部匹配 一般返回是一个数组
i- 忽略大小写搜索
m-多行搜索,以前限于计算机能力 搜索只在每行行首到行尾间进行 比如一个匹配结果在两行的换行处 就会不匹配了 添加这个 就同时搜索换行的地方
标签函数:
function fn (){
}
fn();//这样调用就是普通函数
fn `aaa`//标签函数调用
function fn(ars){
return ars[0].toUpperCase();===>WELCOME
}
fn `welcome`;
Proxy:代理
扩展(增强)对象的功能
proxy作用:比如vue中拦截
预警,上报,扩展,统计,增强对象等等。
proxy是设计模式一种,代理模式。
let obj = {
name:'strive'
}
//您访问了name
obj.name //strive
语法:
new Proxy(target,handler);
new Proxy(被代理的对象,对代理的对象做什么操作)
handler :
{
set(){} //设置的时候干的事情
get () {} //获取干的事情
deleteProperty(){} //删除
has(){} //问你有没有这个东西 xxx in obj
apply(){}
...........
}
eg:
let objw={
name:'strive',
age:1223
}
let nObj=new Proxy(objw,{
get(target,property){
console.log(`您访问了${property}属性`);
return target[property];
}
});
console.log(nObj.age);
实现一个,访问一个对象上的属性,默认不存在的时候给了undefined,希望如果不存在返回错误信息
let obj4={
name:'strive',
age:1223
}
let fObj=new Proxy(obj4,{
get(target,property){
//console.log(`您访问了${property}属性`);
if(property in target){
return target[property];
}else{
//throw new ReferenceError(`${property}属性不在此对象上`)
console.warn(`${property}属性不在此对象上`)
}
return target[property];
}
});
console.log(fObj.name); ==>strive
console.log(fObj.age); ==>1223
console.log(fObj.num); ==> num属性不在此对象上
set() 设置,拦截:
let o= new Proxy({},{
set(target,prop,value){
if(prop=='age'){
if(!Number.isInteger(value)){
throw new TypeError(`年龄必须为整数`);
}
if(value>20){
throw new RangeError(`年龄超标了,必须小于200`)
}
}
target[prop]=value;
}
})
o.a=123;
o.name='strive';
console.log(o);
reflect:反射:
Reflect.apply(函数,this指向,参数数组);
function show(...arg){
console.log(this);
console.log(arg);
}
Reflect.apply(show,'aaaa',[1,2,2,3]);
String {"aaaa"}
[1, 2, 2, 3]
'assign' in Object ====> Reflect.has(Object,'assign') ;判断Object是否有assign
delete json.a ===>Reflect.deleteProperty(json,a) ; 删除对象属性
------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------
1,多行字符串:var content =`qqqq
sss`;
2,字符串模板:使用``
3,使用``模板
功能测试(模板,名称,年龄){
}
4,1,基本数据类型:
Viod:一般用在方法返回值,可以用于变量,一般不用
null:只能赋值null
undefined:只有一种值undefined
never:function error():never
Boolean:var isBool:布尔= FALSE;
编号:var num:number = 10;
字符串:var str:string =“str”;
数组:
var list:number [] = [1,2,3];
var list:Array
的console.log(列表[0]);
的console.log(列表[1]);
的console.log(列表[2]);
枚举:有限得可能
性别别
星期
枚举颜色{红色,绿色,蓝色};
var colorName:string = Color [1]; //获取值
var c:Color = Color.Green; //获取下标
变体变量任何:可以赋任何值
元组:
符号:
2,联合类型:let a:string | number;
3,数组:let arr:number [] = [1,2,3];
let arr:any [] = [1,“33”,false];
4,隐式类型:让a = 12; ===让a:number = 12;
5,类型复合
二;函数类型
1.参数
有类型
参数个数得对
2.返回值
--------------------------------------
外部
声明声明var名字;
declare.ts
dealare $;
-------------------------------------------------
三,接口-约束,限制
-------------------------------------------------- ----------
function show(a:number,b:number){
}
function test(name:string):string {
return“”;
}
5,自定义类型:
class Person {
name:string;
年龄:数;
}
var zhangshan:Person = new Person();
zhanghan.name = “嶂”;
zhangshan.age = 16;
6,参数默认值(带默认值的参数要声明在最后)
功能测试(a:string,b:string,c:string =“jojo”){
}
test(“lili”,“haha”,“zz”); ==> lili haha zz
test(“lili”,“haha”); ===> lili haha jojo
7,可选参数:可选参数必须在必选参数的后面
8,操作符:function func(... args){
args.forEach(function(arg){
的console.log(ARG);
}){
}
}
FUNC(1,2,3);
9,生成函数:function * doSomething(){
的console.log( “开始”);
让;
的console.log(完成);
}
var func1 = doSomething();
func1.next(); ===> start
func1.next(); ===>完成
10,分构表达式(从对象和数组中获取数据输出到本地进行初始化的时候用)
(从对象中拿数据输出到本地)
function getStock(){
return {
code:“IBM”,
price:{ price1:
200,
price2:400
}
}
// var {code,price} = getStock();
// var {code:codes,price:{price2}} = getStock();
}
(从数组中拿数据到本地)
VAR ARRAY1 = [1,2,3,4];
var [,, number1,number2] = array1;
var [number1,number2,... others] = array1;
function doSOmething([number1,number2,... others]){
}
doSomething的(数组1);
11.箭头表达式:用来声明匿名函数,用来消除传统匿名函数这个指针问题
//没有参数的箭头表达式
var sum =()=> {
}
//有参数的箭头表达式
var sum =(arg1,arg2)=> arg1 + arg2;(单行代码{}可以不要)
//有一个参数的箭头表达式,可以不需要()
var sum = arg1 => {
console.info(arg1);
}
示例:
VAR myAarray = [1,2,3,4,5];
的console.log(myArray.filter(值=>值%2 == 0)); ====> 2,4
12,forEach(),for for for for(ts新的循环语法)
forEach,for in in可以被打断,for for可以
在javascript中任何一个对象和集合都是键值对存在的。
13,类(核心)//访问限制:public private protected(不写默认为public)
class Person {
构造函数(公开名称:字符串){//这样写一定要加访问限制符
的console.log( “哈哈哈”)//类的构造函数,实例话一次就会调用一次
}
eat(){
console.log(“im eating”);
}
}
var p1 = new Person(“batam”); //类的实例
p1.name =“batman”;
p1.eat();
var p2 = new Person(superman“”); //类的实例
p2.name =“蝙蝠侠”;
p2.eat();
13,类的继承
类Employee extends Person {
constructor(name:string,code:string){//子类的构造函数一定要调用父类的构造函数super(name);
超(名称);
this.code =代码;
}
代码;
work(){
super.eat();
this.doWork();
}
private doWork(){//私有方法,不能被外面调用
console.info(“im doworking”);
}
}
VAR E1 =新员工( “姓名”, “1111”);
e1.eat();
13,泛型
Array
14,接口接口实现
interface IPerson {
name:string;
年龄:数量;
}
class Person {
constructor(public config:IPerson){
}
}
var p1 = new Person({name:“zhangshan”,年龄:18})
interface Animal {
eat();
}
类羊实现动物{
eat(){
console.log(“我吃草”);
}
}
14,模块(Mudule),一个文件就是一个模块,在模块内部由expor,import关键字,控制模块向外暴露哪些特性,别人能为你提供哪些特性
优点:1模块化,可重用
2,封装变量和函数
export var prop1;
var prop2;
导出函数func1(){
}
function func2(){
}
15,注解注解,为程序的元素(类,方法,变量)加上更直观明了的说明,这些说明信息与程序的业务逻辑无关,而是供指定的工具或框架使用的。
16,类型定义文件(* .d.ts)
类型定义文件从哪来:github.com/definitelyTyped/DefinitelyTyped/blob/master/jquery/
使用NPM安装类型定义文件的地址:github.com/typings/typings
类型定义文件用来帮助开发者在typescript中使用已有的Javascript的工具包; ru Jquery
17,转换类型:
18,声明变量:let const(不被改变的值)
19,给类添加类型:[指数:字符串]:串|号码;
20,泛型
javascript强制刷新页面的实现代码
Javascript刷新页面的几种方法:
1 history.go(0)
2 location.reload()
3 location = location
4 location.assign(location)
5 document.execCommand('Refresh')
6 window.navigate(location)
7 location .replace(location)
8 document.URL = location.href
提示:
1。局部变量在不包含undefined类型的情况下,必须先赋值再使用
.2。可选参数和属性会自动把undefined添加到他们的类型中,即使他们的类型注解明确不包含undefined
================================================== ===========
www.zxit8.com
angular视频地址:链接:https://pan.baidu.com/s/1brlSOaz密码:i642
1,@ component()装饰器,定义组件以及元数据,组件元数据装饰器,告诉angular将typescript类变为angular组件
.2,控制器
3,数据绑定:{{属性}}插值表达式
3,@ Input():输入属性:将主组件的数据传给子组件
4,动画:动画
5,@输出:输出属性,组件间共享数据
模块:声明:组件,指令和管道
提供:只能声明服务
自举:声明模块的主组件
angular启动过程:
main.ts项目起点
main.ts引入import'./polyfill.ts'兼容低版本
使用$符号:引入jquery和bootrap的类型描述文件可以识别$符号
npm install @ types / jquery - save-dev
npm install @ types / bootstrap --save-dev