javascript

1.reduce

  reduce可以返回一个数组的和，如下：

1 var arr = [1,2,3,4]
2 function sum(total,item){
3     return total+item;   //total代表初始值或者最终值，item表示每一项
4 }
5 
6 arr.reduce(sum);   //10

2.filter

 filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组   ，但是不会改变原数组。不会对空数组进行检测

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;   //返回比18大的元素
}

ages.filter(checkAdult);  //32,33,40

  find　　

  返回满足条件的第一个元素

  find() 方法为数组中的每个元素都调用一次函数执行,find()方法返回第一个满足过滤方法的元素，一个都没有满足的就返回undefined，遇到一个满足的元素后遍历就停止了

 注意: find() 对于空数组，函数是不会执行的。

 注意: find() 并没有改变数组的原始值。

var arr = [1,2,3,4,5,6]
arr.find((item)=>{return item>4})   //返回5

map

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

var arr = [1,2,3,4,5]
arr.map(item=>{return item*item})  // [1, 4, 9, 16, 25]

forEach

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数

它与map最大的区别就算是map会返回一个新的数组，并且不会影响到原数组，而forEach是对原数组进行一些操作，不会返回新数组；

var arr = [1,2,3,4]
arr.forEach(item=>{console.log(item)})   
//1
//2
//3
//4

 3.indexOf和includes

   indexOf可以查看数组或字符串内是否包含某个元素的，有的话就返回这个元素的下标；没有的话就返回-1；

   includes方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

   

function a(name) {
        var arr = [1, 2, 3, 4, 5, 6];
        if(arr.includes(name)) {
                console.log("yes");
            }
        }
a(1);

function b(name) {
        var arr = [1, 2, 3, 4, 5, 6];
        if(arr.indexOf(name)!=-1) {
                console.log(arr.indexOf(name));
            }
        }
b(3);

 判断一个变量是对象还是数组：

　Array.isArray(val)  //返回true就是数组，false不是数组
 Object.prototype.toString.call(val).slice(8, -1) === 'Array'   //返回true就是数组，false不是数组

 Object.prototype.toString.call(val).slice(8, -1) === 'Object'   //返回true就是对象不是数组，false不是对象

 

4:输出对象键值对

var obj = { a: '1', b: '2', c: 3, d: 4 }

console.log(Object.keys(obj)); //["a", "b", "c","d"]    //都会以数组的形式输出
console.log(Object.values(obj)); // ['1', '2', 3,4]

如果是数组的话：   

 var arr = ['a', 'b', 'c', 'd']

 console.log(Object.keys(arr));  // ["0", "1", "2", "3"]
 console.log(Object.values(arr));  //["a", "b", "c", "d"]

　　

 

5：获取元素宽高

    以高度为例： 

    dom.style.height     //只能获取通过行内样式设置的高度 （头部的css不可以）

    window.getComputedStyle(box).height   //可获取到元素的纯高度，不包含padding和border

   box.getBoundingClientRect().height         //元素的高度，包含padding和border

 6.数据类型

   数据类型分为基本数据类型和引用数据类型

   基本数据类型：就是简单地数据段，有6种：number,string,boolean,undefined,null和Symbol（ES6引入的，代表独一无二的值）；

   引用数据类型：就是由多个值组成的对象，有3种：object、function和array

　使用typeof能得到哪些类型：

　　　number，boolean，string，undefined，object，function

7、在浏览器地址栏输入URL，按下回车之后会经历以下流程：

• 浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;
• 建立TCP连接（三次握手）;
• 浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
• 服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器;
• 释放 TCP连接（四次挥手）;
• 浏览器将该 html 文本并显示内容;

　

 8、js中布尔值为false的情况

　　0，‘ ’，" "，null，undefined，NaN都为false

　　[ ]，{ } 空数组和空对象是true 

9.Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

Object.assign(目标对象，源对象)

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

如果目标对象里有跟源对象一样的属性，就会被源对象里的属性值覆盖

Object.assign() 可以用来做对象拷贝，但是是浅拷贝

 10.window.onload和DOMContentLoaded

　　1.当DOM树构建完成时就会执行DOMContentLoaded　　

　　　页面可以有多个DOMContentLoaded

　　2.当DOM树、样式表、脚本、图片等加载完成后会执行window.onload

　　　window.onload一个页面只能有一个，如有多个，只会执行最后一个

 　　所以先执行DOMContentLoaded再执行window.onload

 11.js中的内置函数

　　抛开运行环境，DOM，js作为一个语言所内置的函数：

　　Object,Array,Boolean,Number,String,Function,Date,Error,RegExp