js数组操作
Js：判断变量是否为undefined
// 判断变量x是否为undefined
if (typeof(x) == "undefined") {
alert("x is undefined.")
}
null： Null 类型，表示“空值”，代表一个空对象指针，使用 typeof 运算得到 “object”，它是一个特殊的对象值。
undefined： Undefined 类型，当声明了一个变量未初始化时，它的就是 undefined。
2、判断变量是否为undefined
if (typeof (a) == 'undefined') { console.log('a 是 undefined'); // 'a 是 undefined' }
3、判断变量是否为null
if(!b && typeof(b) !== 'undefined' && b != 0) { console.log('b 是 null'); // 'b 是 null' }
js获取两个数组及数组对象中相同和不相同的值
1、获取两个数组中相同的元素
var arr1 = [0,1,2,3,4,5];
var arr2 = [0,4,6,1,3,9];
function getArrEqual(arr1, arr2) {
let newArr = [];
for (let i = 0; i < arr2.length; i++) {
for (let j = 0; j < arr1.length; j++) {
if(arr1[j] === arr2[i]){
newArr.push(arr1[j]);
}
}
}
return newArr;
}
console.log(getArrEqual(arr1, arr2));
//[0, 4, 1, 3]
2、获取两个数组中不相同的元素
var arr1 = [0,1,2,3,4,5];
var arr2 = [0,4,6,1,3,9];
function getArrDifference(arr1, arr2) {
return arr1.concat(arr2).filter(function(v, i, arr) {
return arr.indexOf(v) === arr.lastIndexOf(v);
});
}
console.log(getArrDifference(arr1,arr2));
// [2, 5, 6, 9]
3、获取两个数组对象中相同的值
function getArrDifSameValue(arr1,arr2){
var result = [];
for(var i = 0; i < arr2.length; i++){
var obj = arr2[i];
var id = obj.id;
var isExist = false;
for(var j = 0; j < arr1.length; j++){
var aj = arr1[j];
var n = aj.id;
if(n == id){
isExist = true;
break;
}
}
if(isExist){
result.push(obj);
}
}
return result;
}
var arr1 = [ {"id": "A"},{"id": "B"}];
var arr2 = [ {"id": "A"}, {"id": "B"},{"id": "C"}];
console.log(getArrDifSameValue(arr1,arr2));
4.获取两个数组对象中不相同的值
function getArrDifSameValue(arr1,arr2){
var result = [];
for(var i = 0; i < arr2.length; i++){
var obj = arr2[i];
var id = obj.id;
var isExist = false;
for(var j = 0; j < arr1.length; j++){
var aj = arr1[j];
var n = aj.id;
if(n == id){
isExist = true;
break;
}
}
if(!isExist){
result.push(obj);
}
}
return result;
}
var arr1 = [ {"id": "A"},{"id": "B"}];
var arr2 = [ {"id": "A"}, {"id": "B"},{"id": "C"}];
console.log(getArrDifSameValue(arr1,arr2));
// [{"id": "C"}]
for-in与 for-of有什么区别
*区别1*：遍历输出结果不同
for in循环遍历的是数组的键值(索引)，而for of循环遍历的是数组的值
代码例子：
var arr = ['我','你','他','它'];
for(var key in arr){
console.log(key);
}
console.log('---------------');
for(var item of arr){
console.log(item);
}
输出结果：
区别2：for of无法循环遍历对象
var obj = {
A:'我',
B:'你',
C:'他',
D:'它'
};
for(var key in obj){
console.log(key);
}
console.log('---------------');
for(var item of obj){
console.log(item);
}
输出结果：
区别三：for in 会遍历自定义属性，for of不会
```javascript
var arr = ['我','你','他','它'];
arr.otherVal ='小红';
for(var key in arr){
console.log(key, arr[key]);
}
console.log('---------------');
for(var item of arr){
console.log(item);
}
```
输出结果：
ES6 Object.assign()的用法
Object.assign方法用来将源对象（source）的所有可枚举属性，复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象。
let targetObj1 = { a: 1 };
let sourceObj1 = { b: 1 };
let sourceObj11 = { c: 3 };
Object.assign(targetObj1, sourceObj1, sourceObj11);
console.log(targetObj1);
注：如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
let targetObj1 = { a: 1, b: 2 };
let sourceObj1 = { b: 1 };
let sourceObj11 = { c: 3 };
Object.assign(targetObj1, sourceObj1, sourceObj11);
console.log(targetObj1);
如果只有一个参数，Object.assign会直接返回该参数。
let targetObj1 = { a: 4 }
Object.assign(targetObj1);
console.log(targetObj1)
如果该参数不是对象，则会先转成对象，然后返回。
console.log(typeof (Object.assign(2)));
由于undefined和null无法转成对象，所以如果它们作为参数，就会报错。
console.log(typeof(Object.assign(null)));
console.log(typeof(Object.assign(underfind)));
注意：如果非对象参数出现在源对象的位置（即非首参数），那么处理规则有所不同。首先，这些参数都会转成对象，如果无法转成对象，就会跳过。这意味着， 如果undefined和null不在首参数，就不会报错。其他类型的值（即数值、字符串和布尔值）不在首参数，也不会报错。但是，除了字符串会以数组形式，拷贝入目标对象，其他值都不会产生效果。
Object.assign只拷贝自身属性，不可枚举的属性（enumerable为false）和继承的属性不会被拷贝。
对于嵌套的对象，Object.assign的处理方法是替换，而不是添加。
```javascript
var target = { a: { b: 'c', d: 'e' } }
var source = { a: { b: 'hello' } }
Object.assign(target, source);
```
上面代码中，target对象的a属性被source对象的a属性整个替换掉了，而不会得到{ a: { b: 'hello', d: 'e' } }的结果。这通常不是开发者想要的，需要特别小心。有一些函数库提供Object.assign的定制版本（比如Lodash的_.defaultsDeep方法），可以解决深拷贝的问题。
注意，Object.assign可以用来处理数组，但是会把数组视为对象。
console.log(Object.assign([1, 2, 3], [4, 5]));
其中，4覆盖1，5覆盖2，因为它们在数组的同一位置，所以就对应位置覆盖了。
Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。
var object1 = { a: { b: 1 } };
var object2 = Object.assign({}, object1);
object1.a.b = 2;
console.log(object2.a.b);
js中的hasOwnProperty()方法
hasOwnProperty()方法用于检测一个对象是否含有特定的自身属性，返回一个布尔值
那么我们来验证一下
function Fn() {
this.age = 'wm'
}
Fn.prototype.sex = '女'
var obj = new Fn()
// 实例化对象会继承构造函数里的属性和方法
console.log(obj.hasOwnProperty('age')) // true
console.log(Fn.prototype.hasOwnProperty('age')) //false
console.log(obj.hasOwnProperty('sex')) // false
javascript search()
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
如果没有找到任何匹配的子串，则返回 -1。
let str = "abcd Abcd abc"
console.log(str.search("abc"))
运行结果：
0
let str = "abcd Abcd abc"
console.log(str.search("Abc"))
运行结果：
5
上面两个例子发现，search()方法查找时是对大小写敏感的。
如果要忽略大小写：
let str = "abcd Abcd abc"
console.log(str.search(/Abc/i))
运行结果：
0
JS中filter过滤数组
- filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
- 不会改变原数组
- return后面判断结果，取布尔值，true的话就添入新的filter数组中，false的话，不会添进filter的数组中
var arr = [1,2,'',3,' '];
var arr2=arr.filter(function (item) {
return item;
}); //[1,2,3,' ']
例：筛选不包含'b'的字符串
var arr = ['aa','cb','cc', 'bd','rf']
var newArr = arr.filter(item => item.indexOf('b')<0) //["aa", "cc", "rf"]
indexOf的用法
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
注释：indexOf() 方法对大小写敏感！
注释：如果要检索的字符串值没有出现过，则该方法返回 -1。
常用于数组去重:
var num=[1,2,2,2,3,4,5,5,6,6,7,8];
var num1=[];
for(var i=0; i<num.length; i++){
if(num1.indexOf(num[i])<0){
num1.push(num[i]);
}
}
console.log(num1);
js中 splice() 方法
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
语法： arrayObject.splice(index,howmany,item1,.....,itemX)
| 参数 | 描述 |
|---|---|
| index | 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 |
| howmany | 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 |
| item1, ..., itemX | 可选。向数组添加的新项目。 |
实例:
// 实例：
var s=['a','b','c'];
console.log(s.splice(2,1)); // 打印["c"]
console.log(s); // 打印["a", "b"]
自己理解：
s.splice(2,1) ，从下标2的位置截取1个元素，即 ["c"]
s 则为剩下的元素：即 ["a", "b"]
手写深拷贝等方法
// 深拷贝函数
// 深拷贝实现方式JSON.parse(JSON.strinfy(obj)), 但是没法复制函数（会返回null）
export function cloneDeep(obj){
// 想判断是否是对象类型,是否空对象类型
if(typeof obj !== 'object' || obj === null){
return obj;
}
let data ;
// 进一步判断是数组还是对象
if(obj instanceof Object){
data = {}
}
if(obj instanceof Array){
data = [];
}
for(let v in obj){
let childData = obj[v];
data[v] = typeof childData === 'object' ? cloneDeep(childData) : childData;
}
return data;
}
// 防抖函数，防止短时间内大量请求，在规定时间间隔内再次发起请求的话就继续重新计时
export function debounce(fn,wait){
let timeOut = null;
return function(){
let context = this;
let args = arguments;
if(timeOut) clearTimeout(timeOut);
timeOut = setTimeout(() => {
fn.apply(context,args);
}, wait)
}
}
// 节流函数，减少调取次数，在规定时间内仅执行一下
export function throttle(fn, wait){
let timeID = null;
return function(){
let context = this;
let args = arguments;
if(!timeID){
timeID = setTimeout(()=> {
timeID = null;
fn.apply(context,args)
},wait)
}
}
}
// 冒泡排序
export function bubbleSort(arr){
for(let i = 0; i < arr.length; i++){
let count = 0;
for(let j = 0; j < arr.length; j++){
if(arr[j + 1] < arr[j]){
count++;
let temp = arr[j + 1];
arr[j + 1] = arr[j];
arr[j] = temp;
}
}
if(count === 0) break;
}
return arr;
}
// 选择排序，每一次循环都是为了找出剩余数组中最小的数值
export function selectSort(arr){
for(let i = 0; i < arr.length - 1; i++){
let minIndex = i;
for(let j = i + 1; j < arr.length; j++){
if(arr[j] < arr[minIndex]){
minIndex = j;
}
}
let temp = arr[i];
arr[i] = arr[minIndex];
arr[minIndex] = temp;
}
return arr;
}
// 手动实现call、apply、bind方法
Function.prototype.myCall = function (context) {
if(typeof this !== 'function'){
throw new TypeError('Error')
}
context = context || window;
context.fn = this;
const args = [...arguments].slice(1);
const result = context.fn(...args);
delete context.fn;
return result;
}
Function.prototype.myApply = function (context) {
if(typeof this !== 'function'){
throw new TypeError("Error")
}
context = context || window;
context.fn = this;
const args = arguments[1];
const result = context.fn(...args);
delete context.fn;
return result;
}
Function.prototype.myBind = function (context){
if(typeof this !== 'function'){
throw new TypeError("Error")
}
const _this = this;
const args = [...arguments].slice(1);
return function F(){
if(this instanceof F){
return new _this(...args,...arguments)
}
return _this.apply(context, args.concat(...arguments))
}
}
substr()的用法
hasOwnProperty和Object.getOwnPropertyNames
① hasOwnProperty：检测属性是否存在对象实例中（可枚举属性），如果存在则返回true，不存在则返回false
注意：此方法无法检查该对象的原型链中是否具有该属性
使用方法：obj.hasOwnProperty(key);
② Object.getOwnPropertyNames：返回对象自己的属性的名称，是一个数组。（包括可枚举的和不可枚举的属性）
一个对象的自己的属性是指直接对该对象定义的属性，而不是从该对象的原型继承的属性。
对象的属性包括字段（对象）和函数。
使用方法：Object.getOwnPropertyNames(obj);
举个栗子：
找出对象 obj 不在原型链上的属性
1、返回数组，格式为 key: value（冒号后面还有一个空格）
2、结果数组不要求顺序
解答一：使用hasOwnProperty
function iterate(obj) {
var arr = [];
//用for in 对obj对象的属性进行遍历
for(var key in obj){
if (obj.hasOwnProperty(key)){ //hasOwnproperty返回对象实例中的属性
arr.push(key + ": " + obj[key]);
}
}
return arr;
}
解答二：使用Object.getOwnPropertyNames
function iterate(obj) {
var result = Object.getOwnPropertyNames(obj); //返回一个数组，包含对象实例属性的名称
var l = result.length;
//遍历result数组，按要求输出结果
for(var i = 0; i < l; i ++){
var name = result[i];
result[i] = result[i] + ": " + obj[name]; //把“属性： 值”赋给result
}
return result;
}
浙公网安备 33010602011771号