日常笔记~~~~

最新推荐文章于 2024-10-01 20:12:28 发布

七日七长生

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量1.1k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_52682005/article/details/123783172

版权

如何获取数组中的最后一项

https://blog.csdn.net/qq_42363090/article/details/108484576?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164808582716782089374850%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=164808582716782089374850&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-1-108484576.142^v3pc_search_insert_es_download,143^v4control&utm_term=%E8%8E%B7%E5%8F%96%E6%95%B0%E7%BB%84%E6%9C%80%E5%90%8E%E4%B8%80%E9%A1%B9&spm=1018.2226.3001.4187

数组方法slice()可以接受负整数，如果提供它，它将接受数组末尾的值，而不是数组开头的值。

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

数组转换为字符串方法

toString() 方法 和 toLocaleString() 方法

var arr = [ "a", "b", "c"];
alert(arr.toString());        // a,b,c      
alert(arr.toLocaleString());  // a,b,c
返回数组的字符串表示，中间以逗号隔开

2. join() 方法

var arr = [ "a", "b", "c"];
alert(arr.join());           //a,b,c
alert(arr.join(","));        //a,b,c
alert(arr.join("||"));       //a||b||c
join() 方法只接收一个参数，即用作分隔符的字符串，然后返回包含所有数组项的字符串，默认是 “,”。
————————————————
版权声明：本文为CSDN博主「ys_healone」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ys_healone/article/details/106544552

js判断是否为数组的方法小结

一.判断是否为数组的方法
1. typeof
首先我们会想到的是使用typeof来检测数据类型，但是对于Function, String, Number, Undefined等这几种基本类型来说，使用typeof来检测都可以检测到，比如代码如下：

function test(){}
console.log(typeof 1); // number
console.log(typeof test); // function 
console.log(typeof "yunxi"); // string
console.log(typeof undefined); // undefined
但是对于数组或者正则来说，使用typeof来检测的话，那就满足不了，因为当我们检测数组或者正则的话，那么返回的类型将会是一个对象object，如下代码所示：

console.log(typeof []);  // object
console.log(typeof /\d+/g); // object
2. Instanceof
由此我们很容易会想到使用instanceof来检测某个对象是否是数组的实例，该检测会返回一个布尔型(boolean),如果是数组的话，返回true，否则的话返回false；我们再来看下上面的检测是否为数组的代码如下：

console.log([] instanceof Array);  // true
console.log(/\d+/g instanceof Array); // false
如上可以看到使用instanceof确实可以判断是否为数组的列子;

3. constructor属性
在javascript中，每个对象都有一个constructor属性，它引用了初始化该对象的构造函数，比如判断未知对象的类型，因此我们可以如下写一个方法,代码如下：

function isArray(obj) {
    return typeof obj == 'object' && obj.constructor == Array
}
// 测试demo
console.log(isArray([])); // true
var a = {"a":1};
console.log(isArray(a)); // false

var b = [1,2,3];
console.log(isArray(b)); // true
console.log(isArray(/\d+/g));// false
如上可以看到，通过调用isArray 方法也可以判断是否为数组的列子。

我们现在可以看到，对于第二点和第三点分别使用instanceof方法和constructor属性貌似都可以来判断是否为数组了，但是也有列外情况，比如在跨框架iframe的时候使用页面中的数组时，会失败，因为在不同的框架iframe中，创建的数组是不会相互共享其prototype属性的；如下代码测试即可得到验证~

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;       
var arr = new xArray("1","2","3","4","5");
//这个写法IE下是不支持的，标准浏览器firefox，chrome下有

console.log(arr);  // 打印出 ["1", "2", "3", "4", "5"]
console.log(arr instanceof Array); // false 
console.log(arr.constructor === Array); // false
如上的方法我们都不能来判断一个对象是否为数组的方式; 但是我们在看ECMA262中可以看到，可以使用 Object.prototype.toString.call()方法来判断一个对象是否为数组；如下代码：

function isArray(obj) {
    return Object.prototype.toString.call(obj) == '[object Array]';
}
// 代码调用
console.log(isArray([]));  // true
console.log(isArray([1,2,3])); // true
 
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;       
var arr = new xArray("1","2","3","4","5");
 
console.log(arr); // ["1","2","3","4","5"]
console.log(isArray(arr));  // true       
4.Array.isArray()
ECMAScript5将Array.isArray()正式引入JavaScript，目的就是准确地检测一个值是否为数组。IE9+、 Firefox 4+、Safari 5+、Opera 10.5+和Chrome都实现了这个方法。但是在IE8之前的版本是不支持的。

5.综合以上，判断是否为数组的最好写法如下：
var arr = [1,2,3,1];
var arr2 = [{ abac : 1, abc : 2 }];
function isArrayFn(value){
if (typeof Array.isArray === "function") {
return Array.isArray(value);
}else{
return Object.prototype.toString.call(value) === "[object Array]";
}
}
alert(isArrayFn(arr));// true
alert(isArrayFn(arr2));// true
————————————————
版权声明：本文为CSDN博主「wh_xmy」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wh_xmy/article/details/80392697

vur中的extend

vue中的extend,被继承的就叫子,继承的就可以算是父,父可以拿到子的所有data,想要啥直接定义就行,子都可以拿到

正整数检测

checkValue(item) {
        // console.log(event, item)
        // let reg = /^\d{0,10}$/
        let reg = /^[1-9]*[1-9][0-9]*$/
        this.$set(item, 'error', !reg.test(item.target))
      },

es6 javascript对象Object.values() ， Object.entries()

1 Object.keys()

ES5 引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键名。

var obj = { foo: "bar", baz: 42 };
Object.keys(obj)
// ["foo", "baz"]
目前， ES7 有一个提案，引入了跟Object.keys配套的Object.values和Object.entries。
let {keys, values, entries} = Object;
let obj = { a: 1, b: 2, c: 3 };
for (let key of keys(obj)) {
	console.log(key); // 'a', 'b', 'c'
}
for (let value of values(obj)) {
	console.log(value); // 1, 2, 3
}
for (let [key, value] of entries(obj)) {
console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
}


2 Object.values()

Object.values方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值。

var obj = { foo: "bar", baz: 42 };
Object.values(obj)
// ["bar", 42]
返回数组的成员顺序，与本章的《属性的遍历》部分介绍的排列规则一致。
var obj = { 100: 'a', 2: 'b', 7: 'c' };
Object.values(obj)
// ["b", "c", "a"]

上面代码中，属性名为数值的属性，是按照数值大小，从小到大遍历的，因此返回的顺序是b、c、a。
Object.values只返回对象自身的可遍历属性。
var obj = Object.create({}, {p: {value: 42}});
Object.values(obj) // []
上面代码中，Object.create方法的第二个参数添加的对象属性（属性p），如果不显式声明，默认是不可遍历的。Object.values不会返回这个属性。
Object.values会过滤属性名为 Symbol 值的属性。
Object.values({ [Symbol()]: 123, foo: 'abc' });
// ['abc']
如果Object.values方法的参数是一个字符串，会返回各个字符组成的一个数组。
Object.values('foo')
// ['f', 'o', 'o']
上面代码中，字符串会先转成一个类似数组的对象。字符串的每个字符，就是该对象的一个属性。因此，Object.values返回每个属性的键值，就是各个字符组成的一个数组。
如果参数不是对象，Object.values会先将其转为对象。由于数值和布尔值的包装对象，都不会为实例添加非继承的属性。所以，Object.values会返回空数组。
Object.values(42) // []
Object.values(true) // []


3 Object.entries
Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键值对数组。

var obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]
除了返回值不一样，该方法的行为与Object.values基本一致。
如果原对象的属性名是一个 Symbol 值，该属性会被省略。
Object.entries({ [Symbol()]: 123, foo: 'abc' });
// [ [ 'foo', 'abc' ] ]
上面代码中，原对象有两个属性，Object.entries只输出属性名非 Symbol 值的属性。将来可能会有Reflect.ownEntries()方法，返回对象自身的所有属性。
Object.entries的基本用途是遍历对象的属性。
for (let [k, v] of Object.entries(obj)) {
	console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`);
}
// "one": 1
// "two": 2
Object.entries方法的一个用处是，将对象转为真正的Map结构。
var obj = { foo: 'bar', baz: 42 };
var map = new Map(Object.entries(obj));
map // Map { foo: "bar", baz: 42 }
自己实现Object.entries方法，非常简单。
function* entries(obj) {
	for (let key of Object.keys(obj)) {
		yield [key, obj[key]];
	}
}
//  非 Generator 函数的版本
function entries(obj) {
	let arr = [];
	for (let key of Object.keys(obj)) {
		arr.push([key, obj[key]]);
	}
	return arr;
}

reduce的介绍及用法

reduce总的来说用的不多，但最近看一些文章上的reduce的用法真的是骚气，其实reduce跟常用的map，forEach一样，也是用于遍历循环，只不过它可以设置初始值，这样可以大大增强代码的可读性。
参数介绍

array.reduce((pre, cur, index, arr)=>{
	...
}, init);
1
2
3
pre: 必需。初始值, 或者计算结束后的返回值。
cur： 必需。当前元素。
index： 可选。当前元素的索引。
arr： 可选。当前元素所属的数组对象。
init: 可选。传递给函数的初始值，相当于pre的初始值。
reduce里面有一定要return，return出去的值也要注意

 const b = [1, 2, 3, 4]
 b.reduce((x, y) => console.log(x, y), 0)
1
2
如果有初始值，先取初始值为0，然后取数组第一个值，再取它们(x,y)的返回值为undefined，然后再取数组的第二个值，依次类推


举例说明
1.把数组合并为一个对象

//正常使用forEach循环
let arr = [{ a: 1, b: 10 }, { a: 2, b: 20 }, { a: 3, b: 30 }]
let obj = {}
arr.forEach((item, index) => {
    Object.keys(item).forEach(each => {
        obj[`${each}${index + 1}`] = item[each]
    })
})
console.log(obj);    //{a1:1,a2:2,a3:3,b1:10,b2:20,b3:30}

//使用reduce遍历，可以看出区别在于初始值，以及reduce中必须要return你想要的值
let a = arr.reduce((pre, cur, index) => {
    Object.keys(cur).forEach((item) => {
        pre[`${item}${index + 1}`] = cur[item]
    })
    return pre
}, {})
console.log(a);     //{a1:1,a2:2,a3:3,b1:10,b2:20,b3:30}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2.去重
2.1.基本数据类型去重

let arr2 = [9, 4, 3, 6, 9];
//基本类型去重
let set = arr2.reduce((pre, cur) => {
    !pre.includes(cur) && pre.push(cur)
    return pre
}, [])
console.log(set);  //[9,4,3,6]
1
2
3
4
5
6
7
2.2.引用数据类型去重

let list = [
    {
        subject: "数学",
        marks: 80
    },
    {
        subject: "语文",
        marks: 90
    },
    {
        subject: "英语",
        marks: 80
    },
]
function arrSet(value,arr) {
    let obj = {}
    let res = arr.reduce((pre, cur) => {
        if (!obj[cur[value]]) {
            obj[cur[value]] = true
            pre.push(cur)
        }
        return pre
    }, [])
    return res
}
let result = arrSet("marks",list);
console.log(result);  //[{subject:"数学",marks:80}，{subject:"语文"：90}]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
3.求和
3.1.基本数据类型求和

let arr2 = [9, 4, 3, 6, 9];
let sum = arr2.reduce((pre, cur) => {
    return pre + cur
},0)
console.log(sum)   //31
1
2
3
4
5
3.2.引用数据类型求和

let arr = [
  {
    value: 45,
  },
  {
    value: 88,
  },
  {
    value: 101,
  },
];
let newArr = arr.reduce((pre, cur) => {
  return pre + cur.value;
}, 0);
console.log(newArr);   //234
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
4.求最大值和最小值

let arr2 = [9, 4, 3, 6, 9];
let max = arr2.reduce((prev, cur)=> {
    return Math.max(prev, cur);
})
let min= arr2.reduce((prev, cur)=> {
    return Math.min(prev, cur);
})
console.log(max,min);   //9,3
1
2
3
4
5
6
7
8
5.扁平数组
5.1 二维数组转化为一维

let arr = [[1, 2, 8], [3, 4, 9], [5, 6, 10]];
let res = arr.reduce((pre, cur) => {
    return pre.concat(cur)
},[]);
console.log(res)  //[1, 2, 8, 3, 4, 9, 5, 6, 10]
1
2
3
4
5
5.2 多维数组转化为一维

let arr = [[1, [2, 8]], [3, 4, 9], [5, [6, 10]]]
function fn(arr) {
  return arr.reduce((pre, cur) => {
    return pre.concat(Array.isArray(cur) ? fn(cur) : cur);
  }, []);
}
const newArr = fn(arr);
console.log(newArr); //[1, 2, 8, 3, 4, 9, 5, 6, 10]
1
2
3
4
5
6
7
8
6.求字符串中各个字符出现的次数

const str = 'jordanbryantjamescurrydurant';
const res1 = str.split('').reduce((pre, cur) => {
    pre[cur] ? pre[cur]++ : pre[cur] = 1;
    return pre;
}, {});
console.log(res1);  //{j:2,o:1,r:5,d:2,...}
let arr = []
let num = Math.max(...new Set(Object.values(res1)))
let value;
for (let keys in res1) {
    if (res1[keys] == num) {
        value = keys
        break
    }
}
console.log(`出现最多的字母为${value},出现的次数为${num}次`); //出现最多的字母为r,出现的次数为5次
————————————————
版权声明：本文为CSDN博主「尼克1601044331」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_48076809/article/details/110734075