js常见问题js常见问题
JavaScript find和findIndex的区别
对Array数组操作
find()⽅法
const arr=[1,2,4,8,12];
var va1=arr.find(value=>value>8);
console.log(va1);//12
arr =[1,2,4,8,12]
var v2 = arr.find((value, index, arr)=>{
return index ==4
});
console.log(v2);//12
findIndex()⽅法
const arr=[1,2,4,8,12];
var va1=arr.findIndex(value=>value>8);
console.log(va1);//4
arr =[1,2,4,8,12]
var v2 = arr.findIndex((value, index, arr)=>{
return index ==4
});
console.log(v2);//4
对复杂数组（包含对象的）操作
复杂数组
const nameArr=[
{id:1,userName:"zhaoqian",age:27},
{id:2,userName:"sunli",age:23},
access常见条件表达式{id:3,userName:"zhouwu",age:25},
{id:4,userName:"zhengwang",age:21}
];
find()⽅法
var i1=nameArr.find((value)=>value.age==25);
console.log(i1);/*有满⾜条件的，返回{id: 3, userName: "zhouwu", age: 25}*/
var i2=nameArr.find((value)=>value.age==28);
console.log(i2);/*没有满⾜条件的，返回undefined*/
findIndex()⽅法
var i1=nameArr.findIndex((value)=>value.age==25);
console.log(i1);//2/*有满⾜条件的，返回下标2*/
var i2=nameArr.findIndex((value)=>value.age==28);
console.log(i2);/*没有满⾜条件的，返回-1*/
总结
find()⽅法
find()函数⽤来查⽬标元素，到就返回该元素，不到返回undefined。
findIndex()⽅法
findIndex()函数也是查⽬标元素，到就返回元素的位置，不到就返回-1
js中map()、some()、every()、filter()的区别
js的Array对象有map、some、every、filter⼏个⽅法都能对数组中的每个对象进⾏处理，但是他们之间的功能⼜各有差别，所以在记下。
map()：通过指定函数处理数组的每个元素，并返回处理后的数组。
var numbers =[4,9,16,25];
function myFunction(){
console.log(numbers.map(Math.sqrt));
}
//输出结果为：2,3,4,5
some()：⽤于检测数组中的元素是否满⾜指定条件（函数提供）
var ages =[3,10,18,20];
function checkAdult(age){
return age >=18;
}
function myFunction(){
console.log(ages.some(checkAdult));
}
//输出为：true
some⽅法会依次执⾏数组的每个元素；
如果有⼀个元素满⾜条件，则表达式返回true , 剩余的元素不会再执⾏检测
如果没有满⾜条件的元素，则返回false
function形参和map⼀样
注意：some不会改变原数组，some不会检查空数组
every：⽤于检测数组所有元素是否都符合指定条件（通过函数提供）
var ages =[32,33,16,40];
function checkAdult(age){
return age >=18;
}
function myFunction(){
console.log(ages.every(checkAdult));
}
//输出结果：false
every和some正好相反：
如果数组中检测到有⼀个元素不满⾜，则整个表达式返回 false ，且剩余的元素不会再进⾏检测。
如果所有元素都满⾜条件，则返回 true。
function形参同上
注意：some不会改变原数组，some不会检查空数组
filter：创建⼀个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
var ages = [32, 33, 16, 40];
function checkAdult(age){
return age >=18;
}
function myFunction(){
console.log(ages.filter(checkAdult));
}
/
/输出结果：32,33,40
filter会根据函数中的筛选条件将返回的结果组成⼀个新的数组并返回
js变量提升
1. 变量提升
ES6之前我们⼀般使⽤var来声明变量，提升简单来说就是把我们所写的类似于var a = 123；这样的代码，声明提升到它所在作⽤域的顶端去执⾏，到我们代码所在的位置来赋值。
function test(){
console.log(a);//undefined
var a =123;
};
test();
上述代码a的结果是undefined，它的实际执⾏顺序如下：
function test(){
var a;
console.log(a);
a =123;
}
test();
再看⼀个：
a =1;
var a;
console.log(a);//1
console.log(v1);
var v1 =100;
function foo(){
console.log(v1);
var v1 =200;
console.log(v1);
}
foo();
console.log(v1);
//undefined
//undefined
//200
/
/100
2.函数提升
javascript中不仅仅是变量声明有提升的现象，函数的声明也是⼀样；具名函数的声明有两种⽅式：1. 函数声明式 2. 函数字⾯量式
//函数声明式
function bar(){}
//函数字⾯量式
var foo=function(){}
函数字⾯量式的声明合变量提升的结果是⼀样的，函数只是⼀个具体的值；
但是函数声明式的提升现象和变量提升略有不同
console.log(bar);
function bar(){
console.log(1);
}
//打印结果：ƒ bar () {
//  console.log(1);
//}
执⾏顺序相当于：
function bar(){
console.log(1);
}
console.log(bar);
函数提升是整个代码块提升到它所在的作⽤域的最开始执⾏
foo();//1
var foo;
function foo(){
console.log(1);
}
foo=function(){
console.log(2);
}
这就是函数优先规则。
下⾯这段代码，在低版本的浏览器中，函数提升不会被条件判断所控制，输出2；但是在⾼版本的浏览器中会报错，所以应该尽可能避免在块内部声明函数
foo();//低版本：2  //⾼版本： Uncaught TypeError: foo is not a function
var a =true;
if(a){
function foo(){ console.log(1);}
}else{
function foo(){ console.log(2);}
}
习惯将var a = 2；看做是⼀个声明，⽽实际上javascript引擎并不这么认为。它将var a和a = 2看做是两个单独的声明，第⼀个是编译阶段的任务，⽽第⼆个则是执⾏阶段的任务。
这意味着⽆论作⽤域中的声明出现在什么地⽅，都将在代码本⾝被执⾏前⾸先进⾏处理，可以将这个过程形象地想象成所有的声明（变量和函数）都会被“移动”到各⾃作⽤域的最顶端，这个过程被称为提升。
跨域⼤全
正常ajax请求表现
跨域类型：
跨域，指⼀个域下的⽂档或脚本试图去请求另⼀个域下的资源，ajax跨域只是属于浏览器"同源策略"中的⼀部分，其它的还有：0）Cookie跨域iframe跨域，LocalStorage跨域
1.) 资源跳转： A链接、重定向、表单提交
2.) 资源嵌⼊：<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等⽂件外链
3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等
为什么出现跨域
它是由浏览器的同源策略造成的。所谓的同源是协议、域名、端⼝均为相同，当其中有⼀个不相同时，出现跨域。
普通ajax跨域请求，请求到达服务器，服务端响应数据返回给浏览器的时候，浏览器根据响应头的Acce
ss-Control-Allow-Origin字段的值来判断发出请求的脚本是否有权限获取数据，⼀般情况下，服务器端如果没有在这个字段做特殊处理的话，在跨域的情况下该脚本是没有权限访问的，响应数据会被浏览器给拦截了。
让浏览器⽀持跨域，在chrome的属性⾥加上这个，与前⾯包持⼀个空格
–disable-web-security --user-data-dir
同源策略限制了⼀下⾏为：
Cookie、LocalStorage 和 IndexDB ⽆法读取
DOM 和 JS 对象⽆法获取
浏览器默认禁⽌了跨域访问，但并不禁⽌在页⾯中引⽤其他域的JS⽂件，并可以⾃由执⾏引⼊的JS⽂件中的function（包括操作cookie、Dom等等）。也就是⽂档和它引⼊的脚本可以不同源

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。