npm install
npm update
es6
- let 不允许声明重名的变量
- 不存在变量提升
if(false){
var aa = 3;
let bb= 4;
}
console.log(aa) //aa 是undifined ，if不是一个块级作用域{}不是，es5是用函数划分一个作用域的
bb报错 只在最近的大括号里面使用
const
常量 声明变量赋值 不能被重新赋值
——————————
2节
解构赋值
模版字符串
let aa = 123;
let str =`
- ${aa}
- ${true?aa:0}
- ${[1,3,2].push(10)}
`
${}占位符 使用表达式
箭头函数
使用箭头函数 setInterval() 的this 不指向window
assign
Object.assign(target,[要合并的对象1，要合并的对象2，...])
function fn(options){
let default = {
a: '默认值1'，
b: '默认值2'，
c: '默认值3'，
}
Object.assign(defaults,{d:5})
let aa = Object.assign({},default,{d:5})
console.log(default)
console.log(aa)
}
fn({
a:1,
b: 2
})
//{a:1,b:2,c:'默认值3'}
//{a:1,b:2,c:'默认值3',d:5}
扩展运算符
map 操作每一项 然后放入新数组
var arr = [1,2,3];
arr.forEach(function(item,index){
console.log(item,index)
})
var arr = [1,2,3];
arr.map(function(item,index){
console.log(item,index)
})
映射 返回新数组
filter 过滤
return 后面写条件 条件成立 就放入新数组 不成立就不过滤掉
find
在数组中找到符合条件的第一项
//1
易用灵活高效
理解渐进式
https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA%3D%3D&mid=2650994529&idx=1&sn=953bf1d92cc2a7b278d0761d3e433803&chksm=bdbf0f328ac886245652735e4dfa1b39b1357b9f36ccf1b337714ac81810f8441d189ce89615
// arguments变量的写法
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort();
}
// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();
arguments对象不是数组，而是一个类似数组的对象。所以为了使用数组的方法，必须使用Array.prototype.slice.call先将其转为数组。rest 参数就不存在这个问题，它就是一个真正的数组，数组特有的方法都可以使用。下面是一个利用 rest 参数改写数组push方法的例子。
插入关于Array.prototype.slice
前端复习--Array.prototype.slice.call(arguments)
Array.prototype.slice.call(arguments)可以将 类数组 转化为真正的数组。面试中常常问到此，但是，为什么呢？
1 首先是Array同Object,Number等 都是一种数据类型的名字，同时Array又是构造函数，每个构造函数都有一个prototype属性指向其原型对象。其原型对象上能取到slice方法。
2 什么是类数组（有length属性，属性值为数字；其他属性值为数字‘0’，‘1’，等）
var myobject ={ // array-like collection
length: 4,
'0': 'zero',
'1': 'one',
'2': 'two',
'3': 'three'
}
arguments
var uls = document.getElementsByTagName("ul") // array-like collection
3 slice本来只是Array和 String的方法，为什么可以直接用在类数组上面？
小伙子，我们到了该去看看Array.prototype.slice源码的时候了！
查看 V8 引擎 array.js 的源码，可以将 slice 的内部实现简化为：
function slice(start, end) {
var len = ToUint32(this.length), result = [];
for(var i = start; i < end; i++) {
result.push(this[i]);
}
return result;
}
可以看出，slice 并不需要 this 为 array 类型，只需要有 length 属性即可。并且 length 属性可以不为 number 类型，当不能转换为数值时，ToUnit32(this.length) 返回 0.
根据以上结论可以得出：fakeArray01被转换成了lenth为2的数组，其值都被初始化为
结束关于Array.prototype.slice
函数的length属性，不包括 rest 参数。
(function(a) {}).length // 1
(function(...a) {}).length // 0
(function(a, ...b) {}).length // 1
ES2016 做了一点修改，规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错
// 报错
function doSomething(a, b = a) {
'use strict';
// code
}
// 报错
const doSomething = function ({a, b}) {
'use strict';
// code
};
// 报错
const doSomething = (...a) => {
'use strict';
// code
};
const obj = {
// 报错
doSomething({a, b}) {
'use strict';
// code
}
}
箭头函数
this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。
所以，箭头函数转成 ES5 的代码如下。
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}
上面代码中，转换后的 ES5 版本清楚地说明了，箭头函数里面根本没有自己的this，而是引用外层的this。
model 数据
v-for
v-for="(value,index) in arr"
v-for="(value,key,index) in object"
var obj = {a:1,leo:2,c:3}
console.log(Object.keys(obj)) //[a,leo,c]
image.png
1会改变原数组 （变异方法）
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
//数组的方法 slice() 不会改变原数组
2 map()不改变原数组
想改变length 可以调用变异方法 数组就会重新计算
计算属性
计算属性也是属性，计算属性的this也指向实例，计算属性会吧结果缓存，可在模板中重复使用
computed: {
/*
对计算属性操作
只给计算属性一个函数，默认这个函数是在取值的时候触发的,这个函数是get函数
设置值
set(){}
取值
get(){}
*/
isCheckedAll:{
get(){
console.log('取值');
return this.songList.every(function(item){
return item.checked
});
},
set(newValue){
console.log('设置值了');
console.log(newValue);
this.songList.forEach(item => item.checked = newValue)
}
}
set(newValue){ ... } 设置新值
用 sass 或者 less @import 就没事，因为这个是预先编译成 css 的
--------------------es6
内置对象
函数的默认值
箭头函数
Promise
const p = new Promise(function(){
const img = new Image();
img.onload = function(){
}
img.onload = function(){
}
})
- promise原型上的方法 处理promise异步操作成功时的方法 then()
p.then(function(){
console.log("加载完成")
document.body.appendchild(img)
},function(){
})
catch(）处理promise异步操作失败时的异常
-
Promise.all()
image.png Promise.resolve()
vue-cli
双向绑定
使用.sync双向绑定，修改时数据会回传
自定义事件
父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
使用 on(eventName) 监听事件 使用emit(eventName) 触发事件
另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。
vuex
data的值 只能在组件内部改变v
起步
https://www.cnblogs.com/songrimin/p/7815850.html
数据的响应式绑定原理
Object.defineProperty 用来定于某个属性，也可以在原有的属性上描述
声明式&命令式（需要知道how怎么做到的）
双向数据绑定
v-model 在表单元素上创建双向数据绑定(自动绑定到value上)
data->view
view->data