s的方法
根据index取value:
取首尾项,arr[0], arr[arr.length-1]
根据value取index(判断是否包含子字符串):
s.indexOf
栗子:
'maotai'.indexOf('mao'), 如果不包含则返回-1,如果包含返回子字符串下标
取切片
s.substr(1,3) //含3
s.substring(1,3)//不含3
和arr之间的转换:
s.split: s转为arr
s = 'maotai|maomao'
s.split('|') // ["maotai", "maomao"]
arr.join: arr转为s
arr = ["maotai", "maomao"]
arr.join('|') // 'maotai|maomao'
arr.toString和arr.toFixed
arr.toSting() //["mao", "tai"] --> "mao, tai"
price.toFixed(2) //数字类型保留2位小数
arr方法
// 合并数组(栗子: 将二维数组合并为一维数组, reduce+arr.concat(arr2))
arr.concat(arr2)
// 1.for循环遍历数组
arr = ['mao', 'tai'];
for (let i = 0; i < arr.length; i++) {
console.log(i,typeof i); //0 'number'
console.log(arr[i]);
}
// 2,forEach 不支持return
// 3,for in,key转换为str类型, 数组的私有属性也打印了.
// 4.for of, 既能return,又不会遍历私有属性
arr = ['mao', 'tai'];
for(val of arr){
console.log(val);
}
参数类型: 基本都是回调函数
返回值:
修改自身: 否
回调函数返回值:
arr的方法
1.arr.forEach: 遍历
注: 不支持return
返回值: 无
修改自身: 否
回调函数返回值:无(不支持return)
//arr的forEach循环
arr.forEach(function (item, index) {
console.log(index + ':' + item);
});
//arr的forin循环
let arr = ['mao','tai'];
for(let i in arr){
console.log(i,typeof i); //将index转为str类型打印
}
//0 string
//对象的遍历(遍历key, 遍历values)
let obj = {name:'maotai',age:22};
console.log(Object.keys(obj)); //取index, [ 'name', 'age' ]
console.log(Object.values(obj)); //取items, [ 'maotai', 22 ]
for(i in Object.keys(obj)){
console.log(i,typeof i); //0 string
}
2.arr.map
注: 支持return
返回值: newArr
修改自身: 否
回调函数返回值:对老数组每个item处理的结果, 作为新数组的item
栗子: 得出arr每项*10的newArr
let arr2 = arr.map(function (index, item) {
return item * 10;
});
栗子:产生'<li>1</li><li>2</li><li>3</li>'
let res2 = [1, 2, 3].map(function (item) {
return `<li>${item}</li>`; //es6的字符串模板写法.
});
console.log(res2.join('')); // <li>1</li><li>2</li><li>3</li>
3.arr.filter
功能: 过滤arr,得到newArr
返回值: newArr
修改自身: 否
回调函数返回值:布尔, 如果true,添加到新数组
栗子: 过滤arr 2-5之间的数字
let res2 = [0, 1, 2, 3, 4, 5].filter(function (item) {
return item>2 && item <5; //返回true,则放到新数组里
});
栗子: 删除表单
remove(p) { //p代表当前删除的这一项
this.products = this.products.filter(item => item != p);
}
4.arr.reduce: 收敛
功能: 将arr的item合并(收敛)
返回值: newArr
修改自身: 否
回调函数返回值:布尔
// 探究arr.reduce(回调())回调函数的4个参数
let res = arr.reduce(function (prev, next, index, item) {
// console.log(arguments);
// console.log(prev, next);
return prev + next; //本次的返回值会作为上一次的prev
});
console.log(res);
// 栗子1: 计算价格
let res1 = [0,
{'price': 30, count: 3},
{'price': 60, count: 6},
{'price': 90, count: 9}
].reduce(function (prev, next) {
return prev+next.price*next.count;
});
//更优雅的写法
let res2 = [
{'price': 30, count: 3},
{'price': 60, count: 6},
{'price': 90, count: 9}
].reduce(function (prev, next) {
return prev+next.price*next.count;
}, 0);
// 栗子2: 二维数组变一维数组
let res3 = [
[1,2,3],
[4,5,6],
[7,8,9]
].reduce(function (prev,next) {
return prev.concat(next);
});
console.log(res3);
1.arr.include:判断是否包含此项
功能: arr中是否包含某一项
返回值: 布尔
修改自身: 否
[1,2,3].includes(1) //true
[1,2,55]
2.arr.find:查找每项中是否包含关键字,
功能: 返回包含某个子字符的item.
返回值: 找到的那一项item
修改自身: 否
回调函数返回值:布尔, 返回true,表示找到, 找到后立即停止遍历.
栗子: 取出包含子字符串的item
let res = ['maotai','tai'].find(function (item) {
return item.toString().indexOf('mao') > -1;
});
console.log(res);
//本质算法: 'maotai'.indexOf('mao')
3, arr.every
功能: 找false,找到false后停止,返回false
参数: 回调函数
返回值: 布尔
栗子: 检测arr所有元素是否都大于18
let res = [23, 33, 43].every(function (item) {
return item >= 18;
});
console.log(res); //true
4.arr.some(和arr.every相反)
功能: 找true,找到true后停止,返回true
箭头函数
箭头函数:
1, 无关键字
2, 如果1个参数, 则可以省掉小括号
3, 无this, this指向上一级作用域的this
// function fn(age) {
// console.log(age);
// }
fn = age => console.log(age);
fn(20);
=========== return关键词可以省略
function add1(arg){
return arg+1;
}
add_1(10); // 11
let arg2 = arg=>arg+2;
add2(10); //12
// 有{}必须写return关键字,
let arg2 = arg=>{return arg+2};
// 无{},箭头后面的内容默认return
let arg2 = arg=> arg+2;
/
//如果函数不需要命名
age => console.log(age);
// 箭头函数解决了this问题. this指向上一级
created() { // 在数据被初始化后会调用，this指向指的也是vm实例,钩子函数
axios.get('./carts.json').then(res => { //success
this.products = res.data; //箭头函数改变了this的指向, 这里回调this本来指向window
}, err => {
console.log(err);
});
},
栗子:
axios.get('./carts.json').then(res => {
console.log(res.data);
}, err => {
console.log(err);
})
